feat: add support for email verification (#1223)

frontend/src/routes/+layout.ts

@@ -24,7 +24,7 @@ export const load: LayoutLoad = async ({ url }) => {
 
 	const [user, appConfig] = await Promise.all([userPromise, appConfigPromise]);
 
-	const redirectPath = getAuthRedirectPath(url.pathname, user);
+	const redirectPath = getAuthRedirectPath(url, user);
 	if (redirectPath) {
 		redirect(302, redirectPath);
 	}

frontend/src/routes/settings/+layout.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
+	import EmailVerificationStateBox from '$lib/components/email-verification-state-box.svelte';
 	import FadeWrapper from '$lib/components/fade-wrapper.svelte';
+	import Sidebar from '$lib/components/sidebar.svelte';
 	import { m } from '$lib/paraglide/messages';
 	import userStore from '$lib/stores/user-store';
-	import Sidebar from '$lib/components/sidebar.svelte';
 	import { LucideSettings } from '@lucide/svelte';
 	import type { Snippet } from 'svelte';
 	import { fade, fly } from 'svelte/transition';
@@ -71,6 +72,7 @@
 
 			<div class="flex w-full flex-col gap-4 overflow-hidden">
 				<FadeWrapper>
+					<EmailVerificationStateBox />
 					{@render children()}
 				</FadeWrapper>
 			</div>

frontend/src/routes/settings/+page.ts

@@ -1,8 +1,8 @@
-import { redirect } from '@sveltejs/kit';
-import type { PageLoad } from './$types';
 import appConfig from '$lib/stores/application-configuration-store';
+import { redirect } from '@sveltejs/kit';
 import { get } from 'svelte/store';
+import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
-	throw redirect(307, get(appConfig).homePageUrl);
+	throw redirect(307, get(appConfig)?.homePageUrl ?? '/');
 };

frontend/src/routes/settings/account/+page.svelte

@@ -8,8 +8,9 @@
 	import UserService from '$lib/services/user-service';
 	import WebAuthnService from '$lib/services/webauthn-service';
 	import appConfigStore from '$lib/stores/application-configuration-store';
+	import userStore from '$lib/stores/user-store';
 	import type { Passkey } from '$lib/types/passkey.type';
-	import type { UserCreate } from '$lib/types/user.type';
+	import type { AccountUpdate, UserCreate } from '$lib/types/user.type';
 	import { axiosErrorToast, getWebauthnErrorMessage } from '$lib/utils/error-util';
 	import {
 		KeyRound,
@@ -39,11 +40,14 @@
 		!$appConfigStore.allowOwnAccountEdit || (!!account.ldapId && $appConfigStore.ldapEnabled)
 	);
 
-	async function updateAccount(user: UserCreate) {
+	async function updateAccount(user: AccountUpdate) {
 		let success = true;
 		await userService
 			.updateCurrent(user)
-			.then(() => toast.success(m.account_details_updated_successfully()))
+			.then((user) => {
+				toast.success(m.account_details_updated_successfully());
+				userStore.setUser(user);
+			})
 			.catch((e) => {
 				axiosErrorToast(e);
 				success = false;

frontend/src/routes/settings/account/account-form.svelte

@@ -6,7 +6,7 @@
 	import { m } from '$lib/paraglide/messages';
 	import UserService from '$lib/services/user-service';
 	import appConfigStore from '$lib/stores/application-configuration-store';
-	import type { UserCreate } from '$lib/types/user.type';
+	import type { AccountUpdate } from '$lib/types/user.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { preventDefault } from '$lib/utils/event-util';
 	import { createForm } from '$lib/utils/form-util';
@@ -22,9 +22,9 @@
 		isLdapUser = false,
 		userInfoInputDisabled = false
 	}: {
-		account: UserCreate;
+		account: AccountUpdate;
 		userId: string;
-		callback: (user: UserCreate) => Promise<boolean>;
+		callback: (user: AccountUpdate) => Promise<boolean>;
 		isLdapUser?: boolean;
 		userInfoInputDisabled?: boolean;
 	} = $props();
@@ -39,10 +39,7 @@
 		lastName: emptyToUndefined(z.string().max(50).optional()),
 		displayName: z.string().min(1).max(100),
 		username: usernameSchema,
-		email: get(appConfigStore).requireUserEmail
-			? z.email()
-			: emptyToUndefined(z.email().optional()),
-		isAdmin: z.boolean()
+		email: get(appConfigStore).requireUserEmail ? z.email() : emptyToUndefined(z.email().optional())
 	});
 	type FormSchema = typeof formSchema;
 

frontend/src/routes/settings/admin/application-configuration/forms/app-config-email-form.svelte

@@ -34,6 +34,7 @@
 	const formSchema = z
 		.object({
 			requireUserEmail: z.boolean(),
+			emailsVerified: z.boolean(),
 			smtpHost: z.string().optional(),
 			smtpPort: z
 				.preprocess((v: string) => (!v ? undefined : parseInt(v)), z.number().optional().nullable())
@@ -45,6 +46,7 @@
 			smtpTls: z.enum(['none', 'starttls', 'tls']),
 			smtpSkipCertVerify: z.boolean(),
 			emailOneTimeAccessAsUnauthenticatedEnabled: z.boolean(),
+			emailVerificationEnabled: z.boolean(),
 			emailOneTimeAccessAsAdminEnabled: z.boolean(),
 			emailLoginNotificationEnabled: z.boolean(),
 			emailApiKeyExpirationEnabled: z.boolean()
@@ -58,6 +60,7 @@
 
 			const emailFields: (keyof z.infer<typeof formSchema>)[] = [
 				'emailOneTimeAccessAsUnauthenticatedEnabled',
+				'emailVerificationEnabled',
 				'emailOneTimeAccessAsAdminEnabled',
 				'emailLoginNotificationEnabled',
 				'emailApiKeyExpirationEnabled'
@@ -137,12 +140,20 @@
 <form onsubmit={preventDefault(onSubmit)}>
 	<fieldset disabled={$appConfigStore.uiConfigDisabled}>
 		<h4 class="mb-4 text-lg font-semibold">{m.general()}</h4>
-		<SwitchWithLabel
-			id="require-user-email"
-			label={m.require_user_email()}
-			description={m.require_user_email_description()}
-			bind:checked={$inputs.requireUserEmail.value}
-		/>
+		<div class="flex flex-col gap-5">
+			<SwitchWithLabel
+				id="require-user-email"
+				label={m.require_user_email()}
+				description={m.require_user_email_description()}
+				bind:checked={$inputs.requireUserEmail.value}
+			/>
+			<SwitchWithLabel
+				id="emails-verified-by-default"
+				label={m.emails_verified_by_default()}
+				description={m.emails_verified_by_default_description()}
+				bind:checked={$inputs.emailsVerified.value}
+			/>
+		</div>
 		<h4 class="mt-10 text-lg font-semibold">{m.smtp_configuration()}</h4>
 		<div class="mt-4 grid grid-cols-1 items-start gap-5 md:grid-cols-2">
 			<FormInput label={m.smtp_host()} bind:input={$inputs.smtpHost} />
@@ -182,7 +193,12 @@
 				description={m.send_an_email_to_the_user_when_they_log_in_from_a_new_device()}
 				bind:checked={$inputs.emailLoginNotificationEnabled.value}
 			/>
-
+			<SwitchWithLabel
+				id="email-verification"
+				label={m.email_verification()}
+				description={m.email_verification_description()}
+				bind:checked={$inputs.emailVerificationEnabled.value}
+			/>
 			<SwitchWithLabel
 				id="email-login-admin"
 				label={m.email_login_code_from_admin()}

frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte

@@ -32,7 +32,6 @@
 		appName: appConfig.appName,
 		homePageUrl: appConfig.homePageUrl,
 		sessionDuration: appConfig.sessionDuration,
-		emailsVerified: appConfig.emailsVerified,
 		allowOwnAccountEdit: appConfig.allowOwnAccountEdit,
 		disableAnimations: appConfig.disableAnimations,
 		accentColor: appConfig.accentColor
@@ -42,7 +41,6 @@
 		appName: z.string().min(2).max(30),
 		homePageUrl: z.string(),
 		sessionDuration: z.number().min(1).max(43200),
-		emailsVerified: z.boolean(),
 		allowOwnAccountEdit: z.boolean(),
 		disableAnimations: z.boolean(),
 		accentColor: z.string()
@@ -80,10 +78,7 @@
 					value={$inputs.homePageUrl.value}
 					onValueChange={(v) => ($inputs.homePageUrl.value = v as string)}
 				>
-					<Select.Trigger
-						class="w-full"
-						aria-label={m.app_config_home_page()}
-					>
+					<Select.Trigger class="w-full" aria-label={m.app_config_home_page()}>
 						{homePageUrlOptions.find((option) => option.value === $inputs.homePageUrl.value)
 							?.label ?? $inputs.homePageUrl.value}
 					</Select.Trigger>
@@ -102,12 +97,6 @@
 				description={m.whether_the_users_should_be_able_to_edit_their_own_account_details()}
 				bind:checked={$inputs.allowOwnAccountEdit.value}
 			/>
-			<SwitchWithLabel
-				id="emails-verified"
-				label={m.emails_verified()}
-				description={m.whether_the_users_email_should_be_marked_as_verified_for_the_oidc_clients()}
-				bind:checked={$inputs.emailsVerified.value}
-			/>
 			<SwitchWithLabel
 				id="disable-animations"
 				label={m.disable_animations()}

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

@@ -12,9 +12,12 @@
 	import { LucideMinus, UserPen, UserPlus } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 	import { slide } from 'svelte/transition';
+	import type { PageProps } from './$types';
 	import UserForm from './user-form.svelte';
 	import UserList from './user-list.svelte';
 
+	let { data }: PageProps = $props();
+
 	let selectedCreateOptions = $state(m.add_user());
 	let expandAddUser = $state(false);
 	let signupTokenModalOpen = $state(false);
@@ -91,7 +94,10 @@
 		{#if expandAddUser}
 			<div transition:slide>
 				<Card.Content>
-					<UserForm callback={createUser} />
+					<UserForm
+						callback={createUser}
+						emailsVerifiedPerDefault={data.emailsVerifiedPerDefault}
+					/>
 				</Card.Content>
 			</div>
 		{/if}

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

@@ -0,0 +1,12 @@
+import AppConfigService from '$lib/services/app-config-service';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+	const appConfigService = new AppConfigService();
+
+	const appConfigData = await appConfigService.list(true);
+
+	return {
+		emailsVerifiedPerDefault: appConfigData.emailsVerified
+	};
+};

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

@@ -2,20 +2,25 @@
 	import FormInput from '$lib/components/form/form-input.svelte';
 	import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
 	import { Button } from '$lib/components/ui/button';
+	import { Toggle } from '$lib/components/ui/toggle';
+	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
 	import { m } from '$lib/paraglide/messages';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { User, UserCreate } from '$lib/types/user.type';
 	import { preventDefault } from '$lib/utils/event-util';
 	import { createForm } from '$lib/utils/form-util';
 	import { emptyToUndefined, usernameSchema } from '$lib/utils/zod-util';
+	import { LucideMailCheck, LucideMailWarning } from '@lucide/svelte';
 	import { get } from 'svelte/store';
 	import { z } from 'zod/v4';
 
 	let {
 		callback,
-		existingUser
+		existingUser,
+		emailsVerifiedPerDefault = false
 	}: {
 		existingUser?: User;
+		emailsVerifiedPerDefault?: boolean;
 		callback: (user: UserCreate) => Promise<boolean>;
 	} = $props();
 
@@ -28,6 +33,7 @@
 		lastName: existingUser?.lastName || '',
 		displayName: existingUser?.displayName || '',
 		email: existingUser?.email || '',
+		emailVerified: existingUser?.emailVerified ?? emailsVerifiedPerDefault,
 		username: existingUser?.username || '',
 		isAdmin: existingUser?.isAdmin || false,
 		disabled: existingUser?.disabled || false
@@ -41,6 +47,7 @@
 		email: get(appConfigStore).requireUserEmail
 			? z.email()
 			: emptyToUndefined(z.email().optional()),
+		emailVerified: z.boolean(),
 		isAdmin: z.boolean(),
 		disabled: z.boolean()
 	});
@@ -76,7 +83,34 @@
 				bind:input={$inputs.displayName}
 			/>
 			<FormInput label={m.username()} bind:input={$inputs.username} />
-			<FormInput label={m.email()} bind:input={$inputs.email} />
+			<div class="flex items-end">
+				<FormInput
+					inputClass="rounded-r-none border-r-0"
+					label={m.email()}
+					bind:input={$inputs.email}
+				/>
+				<Tooltip.Provider>
+					{@const label = $inputs.emailVerified.value
+						? m.mark_as_unverified()
+						: m.mark_as_verified()}
+					<Tooltip.Root>
+						<Tooltip.Trigger>
+							<Toggle
+								bind:pressed={$inputs.emailVerified.value}
+								aria-label={label}
+								class="h-9 border-input bg-yellow-100 dark:bg-yellow-950 data-[state=on]:bg-green-100 dark:data-[state=on]:bg-green-950 rounded-l-none border px-2 py-1 shadow-xs flex items-center hover:data-[state=on]:bg-accent"
+							>
+								{#if $inputs.emailVerified.value}
+									<LucideMailCheck class="text-green-500 dark:text-green-600 size-5" />
+								{:else}
+									<LucideMailWarning class="text-yellow-500 dark:text-yellow-600 size-5" />
+								{/if}
+							</Toggle>
+						</Tooltip.Trigger>
+						<Tooltip.Content>{label}</Tooltip.Content>
+					</Tooltip.Root>
+				</Tooltip.Provider>
+			</div>
 		</div>
 		<div class="mt-5 grid grid-cols-1 items-start gap-5 md:grid-cols-2">
 			<SwitchWithLabel

frontend/src/routes/verify-email/+page.ts

@@ -0,0 +1,22 @@
+import UserService from '$lib/services/user-service';
+import { getAxiosErrorMessage } from '$lib/utils/error-util';
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ url }) => {
+	const userService = new UserService();
+	const token = url.searchParams.get('token');
+
+	const searchParams = new URLSearchParams();
+
+	await userService
+		.verifyEmail(token!)
+		.then(() => {
+			searchParams.set('emailVerificationState', 'success');
+		})
+		.catch((e) => {
+			searchParams.set('emailVerificationState', getAxiosErrorMessage(e));
+		});
+
+	return redirect(302, '/settings/account?' + searchParams.toString());
+};