feat: add support for translations (#349)

Co-authored-by: Kyle Mendell <kmendell@outlook.com>
Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/routes/settings/admin/users/+page.svelte

@@ -10,6 +10,7 @@
 	import { slide } from 'svelte/transition';
 	import UserForm from './user-form.svelte';
 	import UserList from './user-list.svelte';
+	import { m } from '$lib/paraglide/messages';
 
 	let { data } = $props();
 	let users = $state(data.users);
@@ -23,7 +24,7 @@
 		let success = true;
 		await userService
 			.create(user)
-			.then(() => toast.success('User created successfully'))
+			.then(() => toast.success(m.user_created_successfully()))
 			.catch((e) => {
 				axiosErrorToast(e);
 				success = false;
@@ -35,18 +36,18 @@
 </script>
 
 <svelte:head>
-	<title>Users</title>
+	<title>{m.users()}</title>
 </svelte:head>
 
 <Card.Root>
 	<Card.Header>
 		<div class="flex items-center justify-between">
 			<div>
-				<Card.Title>Create User</Card.Title>
-				<Card.Description>Add a new user to {$appConfigStore.appName}.</Card.Description>
+				<Card.Title>{m.create_user()}</Card.Title>
+				<Card.Description>{m.add_a_new_user_to_appname({ appName: $appConfigStore.appName })}.</Card.Description>
 			</div>
 			{#if !expandAddUser}
-				<Button on:click={() => (expandAddUser = true)}>Add User</Button>
+				<Button on:click={() => (expandAddUser = true)}>{m.add_user()}</Button>
 			{:else}
 				<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddUser = false)}>
 					<LucideMinus class="h-5 w-5" />
@@ -65,7 +66,7 @@
 
 <Card.Root>
 	<Card.Header>
-		<Card.Title>Manage Users</Card.Title>
+		<Card.Title>{m.manage_users()}</Card.Title>
 	</Card.Header>
 	<Card.Content>
 		<UserList {users} requestOptions={usersRequestOptions} />

frontend/src/routes/settings/admin/users/[id]/+page.svelte

@@ -14,6 +14,7 @@
 	import { LucideChevronLeft } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import UserForm from '../user-form.svelte';
+	import { m } from '$lib/paraglide/messages';
 
 	let { data } = $props();
 	let user = $state({
@@ -27,7 +28,7 @@
 	async function updateUserGroups(userIds: string[]) {
 		await userService
 			.updateUserGroups(user.id, userIds)
-			.then(() => toast.success('User groups updated successfully'))
+			.then(() => toast.success(m.user_groups_updated_successfully()))
 			.catch((e) => {
 				axiosErrorToast(e);
 			});
@@ -37,7 +38,7 @@
 		let success = true;
 		await userService
 			.update(user.id, updatedUser)
-			.then(() => toast.success('User updated successfully'))
+			.then(() => toast.success(m.user_updated_successfully()))
 			.catch((e) => {
 				axiosErrorToast(e);
 				success = false;
@@ -49,7 +50,7 @@
 	async function updateCustomClaims() {
 		await customClaimService
 			.updateUserCustomClaims(user.id, user.customClaims)
-			.then(() => toast.success('Custom claims updated successfully'))
+			.then(() => toast.success(m.custom_claims_updated_successfully()))
 			.catch((e) => {
 				axiosErrorToast(e);
 			});
@@ -58,33 +59,38 @@
 	async function updateProfilePicture(image: File) {
 		await userService
 			.updateProfilePicture(user.id, image)
-			.then(() => toast.success('Profile picture updated successfully. It may take a few minutes to update.'))
+			.then(() => toast.success(m.profile_picture_updated_successfully()))
 			.catch(axiosErrorToast);
 	}
 
 	async function resetProfilePicture() {
 		await userService
 			.resetProfilePicture(user.id)
-			.then(() => toast.success('Profile picture has been reset. It may take a few minutes to update.'))
+			.then(() => toast.success(m.profile_picture_has_been_reset()))
 			.catch(axiosErrorToast);
 	}
 </script>
 
 <svelte:head>
-	<title>User Details {user.firstName} {user.lastName}</title>
+	<title
+		>{m.user_details_firstname_lastname({
+			firstName: user.firstName,
+			lastName: user.lastName
+		})}</title
+	>
 </svelte:head>
 
 <div class="flex items-center justify-between">
 	<a class="text-muted-foreground flex text-sm" href="/settings/admin/users"
-		><LucideChevronLeft class="h-5 w-5" /> Back</a
+		><LucideChevronLeft class="h-5 w-5" /> {m.back()}</a
 	>
 	{#if !!user.ldapId}
-		<Badge variant="default" class="">LDAP</Badge>
+		<Badge variant="default" class="">{m.ldap()}</Badge>
 	{/if}
 </div>
 <Card.Root>
 	<Card.Header>
-		<Card.Title>General</Card.Title>
+		<Card.Title>{m.general()}</Card.Title>
 	</Card.Header>
 	<Card.Content>
 		<UserForm existingUser={user} callback={updateUser} />
@@ -104,8 +110,8 @@
 
 <CollapsibleCard
 	id="user-groups"
-	title="User Groups"
-	description="Manage which groups this user belongs to."
+	title={m.user_groups()}
+	description={m.manage_which_groups_this_user_belongs_to()}
 >
 	<UserGroupSelection
 		bind:selectedGroupIds={user.userGroupIds}
@@ -115,18 +121,18 @@
 		<Button
 			on:click={() => updateUserGroups(user.userGroupIds)}
 			disabled={!!user.ldapId && $appConfigStore.ldapEnabled}
-			type="submit">Save</Button
+			type="submit">{m.save()}</Button
 		>
 	</div>
 </CollapsibleCard>
 
 <CollapsibleCard
 	id="user-custom-claims"
-	title="Custom Claims"
-	description="Custom claims are key-value pairs that can be used to store additional information about a user. These claims will be included in the ID token if the scope 'profile' is requested."
+	title={m.custom_claims()}
+	description={m.custom_claims_are_key_value_pairs_that_can_be_used_to_store_additional_information_about_a_user()}
 >
 	<CustomClaimsInput bind:customClaims={user.customClaims} />
 	<div class="mt-5 flex justify-end">
-		<Button on:click={updateCustomClaims} type="submit">Save</Button>
+		<Button on:click={updateCustomClaims} type="submit">{m.save()}</Button>
 	</div>
 </CollapsibleCard>

frontend/src/routes/settings/admin/users/user-form.svelte

@@ -2,6 +2,7 @@
 	import CheckboxWithLabel from '$lib/components/form/checkbox-with-label.svelte';
 	import FormInput from '$lib/components/form/form-input.svelte';
 	import { Button } from '$lib/components/ui/button';
+	import { m } from '$lib/paraglide/messages';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { User, UserCreate } from '$lib/types/user.type';
 	import { createForm } from '$lib/utils/form-util';
@@ -35,7 +36,7 @@
 			.max(30)
 			.regex(
 				/^[a-z0-9_@.-]+$/,
-				"Username can only contain lowercase letters, numbers, underscores, dots, hyphens, and '@' symbols"
+				m.username_can_only_contain()
 			),
 		email: z.string().email(),
 		isAdmin: z.boolean()
@@ -57,19 +58,19 @@
 <form onsubmit={onSubmit}>
 	<fieldset disabled={inputDisabled}>
 		<div class="grid grid-cols-1 items-start gap-5 md:grid-cols-2">
-			<FormInput label="First name" bind:input={$inputs.firstName} />
-			<FormInput label="Last name" bind:input={$inputs.lastName} />
-			<FormInput label="Username" bind:input={$inputs.username} />
-			<FormInput label="Email" bind:input={$inputs.email} />
+			<FormInput label={m.first_name()} bind:input={$inputs.firstName} />
+			<FormInput label={m.last_name()} bind:input={$inputs.lastName} />
+			<FormInput label={m.username()} bind:input={$inputs.username} />
+			<FormInput label={m.email()} bind:input={$inputs.email} />
 			<CheckboxWithLabel
 				id="admin-privileges"
-				label="Admin Privileges"
-				description="Admins have full access to the admin panel."
+				label={m.admin_privileges()}
+				description={m.admins_have_full_access_to_the_admin_panel()}
 				bind:checked={$inputs.isAdmin.value}
 			/>
 		</div>
 		<div class="mt-5 flex justify-end">
-			<Button {isLoading} type="submit">Save</Button>
+			<Button {isLoading} type="submit">{m.save()}</Button>
 		</div>
 	</fieldset>
 </form>

frontend/src/routes/settings/admin/users/user-list.svelte

@@ -15,6 +15,7 @@
 	import Ellipsis from 'lucide-svelte/icons/ellipsis';
 	import { toast } from 'svelte-sonner';
 	import OneTimeLinkModal from '$lib/components/one-time-link-modal.svelte';
+	import { m } from '$lib/paraglide/messages';
 
 	let {
 		users = $bindable(),
@@ -27,10 +28,10 @@
 
 	async function deleteUser(user: User) {
 		openConfirmDialog({
-			title: `Delete ${user.firstName} ${user.lastName}`,
-			message: 'Are you sure you want to delete this user?',
+			title: m.delete_firstname_lastname({firstName: user.firstName, lastName: user.lastName}),
+			message: m.are_you_sure_you_want_to_delete_this_user(),
 			confirm: {
-				label: 'Delete',
+				label: m.delete(),
 				destructive: true,
 				action: async () => {
 					try {
@@ -39,7 +40,7 @@
 					} catch (e) {
 						axiosErrorToast(e);
 					}
-					toast.success('User deleted successfully');
+					toast.success(m.user_deleted_successfully());
 				}
 			}
 		});
@@ -51,13 +52,13 @@
 	{requestOptions}
 	onRefresh={async (options) => (users = await userService.list(options))}
 	columns={[
-		{ label: 'First name', sortColumn: 'firstName' },
-		{ label: 'Last name', sortColumn: 'lastName' },
-		{ label: 'Email', sortColumn: 'email' },
-		{ label: 'Username', sortColumn: 'username' },
-		{ label: 'Role', sortColumn: 'isAdmin' },
-		...($appConfigStore.ldapEnabled ? [{ label: 'Source' }] : []),
-		{ label: 'Actions', hidden: true }
+		{ label: m.first_name(), sortColumn: 'firstName' },
+		{ label: m.last_name(), sortColumn: 'lastName' },
+		{ label: m.email(), sortColumn: 'email' },
+		{ label: m.username(), sortColumn: 'username' },
+		{ label: m.role(), sortColumn: 'isAdmin' },
+		...($appConfigStore.ldapEnabled ? [{ label: m.source()}] : []),
+		{ label: m.actions(), hidden: true }
 	]}
 >
 	{#snippet rows({ item })}
@@ -66,11 +67,11 @@
 		<Table.Cell>{item.email}</Table.Cell>
 		<Table.Cell>{item.username}</Table.Cell>
 		<Table.Cell>
-			<Badge variant="outline">{item.isAdmin ? 'Admin' : 'User'}</Badge>
+			<Badge variant="outline">{item.isAdmin ? m.admin() : m.user()}</Badge>
 		</Table.Cell>
 		{#if $appConfigStore.ldapEnabled}
 			<Table.Cell>
-				<Badge variant={item.ldapId ? 'default' : 'outline'}>{item.ldapId ? 'LDAP' : 'Local'}</Badge
+				<Badge variant={item.ldapId ? 'default' : 'outline'}>{item.ldapId ? m.ldap() : m.local()}</Badge
 				>
 			</Table.Cell>
 		{/if}
@@ -78,20 +79,20 @@
 			<DropdownMenu.Root>
 				<DropdownMenu.Trigger class={buttonVariants({ variant: 'ghost', size: 'icon' })}>
 					<Ellipsis class="h-4 w-4" />
-					<span class="sr-only">Toggle menu</span>
+					<span class="sr-only">{m.toggle_menu()}</span>
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content align="end">
 					<DropdownMenu.Item onclick={() => (userIdToCreateOneTimeLink = item.id)}
-						><LucideLink class="mr-2 h-4 w-4" />Login Code</DropdownMenu.Item
+						><LucideLink class="mr-2 h-4 w-4" />{m.login_code()}</DropdownMenu.Item
 					>
 					<DropdownMenu.Item onclick={() => goto(`/settings/admin/users/${item.id}`)}
-						><LucidePencil class="mr-2 h-4 w-4" /> Edit</DropdownMenu.Item
+						><LucidePencil class="mr-2 h-4 w-4" /> {m.edit()}</DropdownMenu.Item
 					>
 					{#if !item.ldapId || !$appConfigStore.ldapEnabled}
 						<DropdownMenu.Item
 							class="text-red-500 focus:!text-red-700"
 							onclick={() => deleteUser(item)}
-							><LucideTrash class="mr-2 h-4 w-4" />Delete</DropdownMenu.Item
+							><LucideTrash class="mr-2 h-4 w-4" />{m.delete()}</DropdownMenu.Item
 						>
 					{/if}
 				</DropdownMenu.Content>