feat: add support for email verification (#1223)

frontend/src/lib/components/email-verification-state-box.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import * as Alert from '$lib/components/ui/alert';
+	import { Button } from '$lib/components/ui/button';
+	import { m } from '$lib/paraglide/messages';
+	import UserService from '$lib/services/user-service';
+	import appConfigStore from '$lib/stores/application-configuration-store';
+	import userStore from '$lib/stores/user-store';
+	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { LucideAlertTriangle, LucideCheckCircle2, LucideCircleX } from '@lucide/svelte';
+	import { onMount } from 'svelte';
+	import { toast } from 'svelte-sonner';
+	import { get } from 'svelte/store';
+
+	const userService = new UserService();
+
+	let emailVerificationState = $state(page.url.searchParams.get('emailVerificationState'));
+
+	async function sendEmailVerification() {
+		await userService
+			.sendEmailVerification()
+			.then(() => {
+				toast.success(m.email_verification_sent());
+			})
+			.catch(axiosErrorToast);
+	}
+
+	function onDismiss() {
+		const url = new URL(page.url);
+		url.searchParams.delete('emailVerificationState');
+		history.replaceState(null, '', url.toString());
+		emailVerificationState = null;
+	}
+
+	onMount(() => {
+		const user = get(userStore);
+		if (emailVerificationState === 'success' && user) {
+			user.emailVerified = true;
+			userStore.setUser(user);
+		}
+	});
+</script>
+
+{#if emailVerificationState}
+	{#if emailVerificationState === 'success'}
+		<Alert.Root variant="success" {onDismiss}>
+			<LucideCheckCircle2 class="size-4" />
+			<Alert.Title class="font-semibold">{m.email_verification_success_title()}</Alert.Title>
+			<Alert.Description class="text-sm">
+				{m.email_verification_success_description()}
+			</Alert.Description>
+		</Alert.Root>
+	{:else}
+		<Alert.Root variant="destructive" {onDismiss}>
+			<LucideCircleX class="size-4" />
+			<Alert.Title class="font-semibold">{m.email_verification_error_title()}</Alert.Title>
+			<Alert.Description class="text-sm">
+				{emailVerificationState}
+			</Alert.Description>
+		</Alert.Root>
+	{/if}
+{:else if $userStore && $appConfigStore.emailVerificationEnabled && !$userStore.emailVerified}
+	<Alert.Root variant="warning" class="flex gap-3">
+		<LucideAlertTriangle class="size-4" />
+		<div class="md:flex md:w-full md:place-content-between">
+			<div>
+				<Alert.Title class="font-semibold">{m.email_verification_warning()}</Alert.Title>
+				<Alert.Description class="text-sm">
+					{m.email_verification_warning_description()}
+				</Alert.Description>
+			</div>
+			<div>
+				<Button class="mt-2 md:mt-0" usePromiseLoading onclick={sendEmailVerification}>
+					{m.send_email()}
+				</Button>
+			</div>
+		</div>
+	</Alert.Root>
+{/if}

frontend/src/lib/components/form/form-input.svelte

@@ -31,6 +31,7 @@
 		children,
 		onInput,
 		labelFor,
+		inputClass,
 		...restProps
 	}: HTMLAttributes<HTMLDivElement> &
 		(WithChildren | WithoutChildren) & {
@@ -39,6 +40,7 @@
 			docsLink?: string;
 			placeholder?: string;
 			disabled?: boolean;
+			inputClass?: string;
 			type?: 'text' | 'password' | 'email' | 'number' | 'checkbox' | 'date';
 			onInput?: (e: FormInputEvent) => void;
 		} = $props();
@@ -73,6 +75,7 @@
 		{:else}
 			<Input
 				aria-invalid={!!input.error}
+				class={inputClass}
 				{id}
 				{placeholder}
 				{type}

frontend/src/lib/components/ui/alert/alert.svelte

@@ -6,9 +6,11 @@
 		variants: {
 			variant: {
 				default: 'bg-card text-card-foreground',
+				success:
+					'bg-green-100 text-green-900 dark:bg-green-900 dark:text-green-100 [&>svg]:text-green-900 dark:[&>svg]:text-green-100',
 				info: 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100 [&>svg]:text-blue-900 dark:[&>svg]:text-blue-100',
 				destructive:
-					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current',
+					'bg-red-100 text-red-900 dark:bg-red-900 dark:text-red-100 [&>svg]:text-red-900 dark:[&>svg]:text-red-100',
 				warning:
 					'bg-warning text-warning-foreground border-warning/40 [&>svg]:text-warning-foreground'
 			}
@@ -32,10 +34,12 @@
 		class: className,
 		variant = 'default',
 		children,
+		onDismiss,
 		dismissibleId = undefined,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		variant?: AlertVariant;
+		onDismiss?: () => void;
 		dismissibleId?: string;
 	} = $props();
 
@@ -49,6 +53,7 @@
 	});
 
 	function dismiss() {
+		onDismiss?.();
 		if (dismissibleId) {
 			const dismissedAlerts = JSON.parse(localStorage.getItem('dismissed-alerts') || '[]');
 			localStorage.setItem('dismissed-alerts', JSON.stringify([...dismissedAlerts, dismissibleId]));
@@ -66,7 +71,7 @@
 		role="alert"
 	>
 		{@render children?.()}
-		{#if dismissibleId}
+		{#if dismissibleId || onDismiss}
 			<button onclick={dismiss} class="absolute right-0 top-0 m-3 text-black dark:text-white"
 				><LucideX class="size-4" /></button
 			>

frontend/src/lib/components/ui/toggle/index.ts

@@ -0,0 +1,13 @@
+import Root from "./toggle.svelte";
+export {
+	toggleVariants,
+	type ToggleSize,
+	type ToggleVariant,
+	type ToggleVariants,
+} from "./toggle.svelte";
+
+export {
+	Root,
+	//
+	Root as Toggle,
+};

frontend/src/lib/components/ui/toggle/toggle.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const toggleVariants = tv({
+		base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline:
+					"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs",
+			},
+			size: {
+				default: "h-9 min-w-9 px-2",
+				sm: "h-8 min-w-8 px-1.5",
+				lg: "h-10 min-w-10 px-2.5",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	data-slot="toggle"
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+/>

frontend/src/lib/services/user-service.ts

@@ -2,7 +2,7 @@ import userStore from '$lib/stores/user-store';
 import type { ListRequestOptions, Paginated } from '$lib/types/list-request.type';
 import type { SignupToken } from '$lib/types/signup-token.type';
 import type { UserGroup } from '$lib/types/user-group.type';
-import type { User, UserCreate, UserSignUp } from '$lib/types/user.type';
+import type { AccountUpdate, User, UserCreate, UserSignUp } from '$lib/types/user.type';
 import { cachedProfilePicture } from '$lib/utils/cached-image-util';
 import { get } from 'svelte/store';
 import APIService from './api-service';
@@ -38,7 +38,7 @@ export default class UserService extends APIService {
 		return res.data as User;
 	};
 
-	updateCurrent = async (user: UserCreate) => {
+	updateCurrent = async (user: AccountUpdate) => {
 		const res = await this.api.put('/users/me', user);
 		return res.data as User;
 	};
@@ -121,4 +121,14 @@ export default class UserService extends APIService {
 	deleteSignupToken = async (tokenId: string) => {
 		await this.api.delete(`/signup-tokens/${tokenId}`);
 	};
+
+	sendEmailVerification = async () => {
+		const res = await this.api.post('/users/me/send-email-verification');
+		return res.data as User;
+	};
+
+	verifyEmail = async (token: string) => {
+		const res = await this.api.post('/users/me/verify-email', { token });
+		return res.data as User;
+	};
 }

frontend/src/lib/types/application-configuration.type.ts

@@ -7,6 +7,7 @@ export type AppConfig = {
 	allowUserSignups: 'disabled' | 'withToken' | 'open';
 	emailOneTimeAccessAsUnauthenticatedEnabled: boolean;
 	emailOneTimeAccessAsAdminEnabled: boolean;
+	emailVerificationEnabled: boolean;
 	ldapEnabled: boolean;
 	disableAnimations: boolean;
 	uiConfigDisabled: boolean;

frontend/src/lib/types/user.type.ts

@@ -6,6 +6,7 @@ export type User = {
 	id: string;
 	username: string;
 	email: string | undefined;
+	emailVerified: boolean;
 	firstName: string;
 	lastName?: string;
 	displayName: string;
@@ -19,6 +20,11 @@ export type User = {
 
 export type UserCreate = Omit<User, 'id' | 'customClaims' | 'ldapId' | 'userGroups'>;
 
-export type UserSignUp = Omit<UserCreate, 'isAdmin' | 'disabled' | 'displayName'> & {
+export type AccountUpdate = Omit<UserCreate, 'isAdmin' | 'disabled' | 'emailVerified'>
+
+export type UserSignUp = Omit<
+	UserCreate,
+	'isAdmin' | 'disabled' | 'displayName' | 'emailVerified'
+> & {
 	token?: string;
 };

frontend/src/lib/utils/redirection-util.ts

@@ -2,7 +2,8 @@ import type { User } from '$lib/types/user.type';
 
 // Returns the path to redirect to based on the current path and user authentication status
 // If no redirect is needed, it returns null
-export function getAuthRedirectPath(path: string, user: User | null) {
+export function getAuthRedirectPath(url: URL, user: User | null) {
+	const path = url.pathname;
 	const isSignedIn = !!user;
 	const isAdmin = user?.isAdmin;
 
@@ -19,7 +20,8 @@ export function getAuthRedirectPath(path: string, user: User | null) {
 	const isAdminPath = path == '/settings/admin' || path.startsWith('/settings/admin/');
 
 	if (!isUnauthenticatedOnlyPath && !isPublicPath && !isSignedIn) {
-		return '/login';
+		const redirect = url.pathname + url.search;
+		return `/login?redirect=${encodeURIComponent(redirect)}`;
 	}
 
 	if (isUnauthenticatedOnlyPath && isSignedIn) {
@@ -29,4 +31,6 @@ export function getAuthRedirectPath(path: string, user: User | null) {
 	if (isAdminPath && !isAdmin) {
 		return '/settings';
 	}
+
+	return null;
 }

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());
+};