includio-cms 0.1.3 → 0.5.0

package/dist/admin/client/account/preferences-section.svelte

@@ -1,99 +1,41 @@
 <script lang="ts">
 	import * as Card from '../../../components/ui/card/index.js';
+	import * as Select from '../../../components/ui/select/index.js';
 	import { accountLang } from './lang.js';
 	import { useInterfaceLanguage, locales } from '../../state/interface-language.svelte.js';
-	import { userPrefersMode, setMode } from 'mode-watcher';
-	import Sun from '@tabler/icons-svelte/icons/sun';
-	import Moon from '@tabler/icons-svelte/icons/moon';
-	import DeviceDesktop from '@tabler/icons-svelte/icons/device-desktop';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 
 	const interfaceLanguage = useInterfaceLanguage();
-
 	const lang = $derived(accountLang[interfaceLanguage.current]);
 
-	function setTheme(theme: 'light' | 'dark' | 'system') {
-		setMode(theme);
-	}
-
-	function setLanguage(language: InterfaceLanguage) {
-		interfaceLanguage.current = language;
-	}
-
 	function getLanguageDisplayName(locale: string): string {
-		const name = new Intl.DisplayNames([interfaceLanguage.current], { type: 'language' }).of(locale);
+		const name = new Intl.DisplayNames([locale], { type: 'language' }).of(locale);
 		if (!name) return locale.toUpperCase();
 		return name.charAt(0).toUpperCase() + name.slice(1);
 	}
 </script>
 
-<div class="space-y-6">
-	<Card.Root>
-		<Card.Header>
-			<Card.Title>{lang.preferences.theme}</Card.Title>
-		</Card.Header>
-		<Card.Content>
-			<div class="flex gap-2" role="group" aria-label={lang.preferences.theme}>
-				<button
-					type="button"
-					aria-pressed={userPrefersMode.current === 'light'}
-					onclick={() => setTheme('light')}
-					class="inline-flex h-10 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none {userPrefersMode.current ===
-					'light'
-						? 'border-[#2D4A77] bg-[#2D4A77]/10 text-[#2D4A77]'
-						: 'border-input hover:bg-accent'}"
-				>
-					<Sun class="size-4" />
-					{lang.preferences.themeLight}
-				</button>
-				<button
-					type="button"
-					aria-pressed={userPrefersMode.current === 'dark'}
-					onclick={() => setTheme('dark')}
-					class="inline-flex h-10 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none {userPrefersMode.current ===
-					'dark'
-						? 'border-[#2D4A77] bg-[#2D4A77]/10 text-[#2D4A77]'
-						: 'border-input hover:bg-accent'}"
-				>
-					<Moon class="size-4" />
-					{lang.preferences.themeDark}
-				</button>
-				<button
-					type="button"
-					aria-pressed={userPrefersMode.current === 'system'}
-					onclick={() => setTheme('system')}
-					class="inline-flex h-10 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none {userPrefersMode.current ===
-					'system'
-						? 'border-[#2D4A77] bg-[#2D4A77]/10 text-[#2D4A77]'
-						: 'border-input hover:bg-accent'}"
-				>
-					<DeviceDesktop class="size-4" />
-					{lang.preferences.themeSystem}
-				</button>
-			</div>
-		</Card.Content>
-	</Card.Root>
-
-	<Card.Root>
-		<Card.Header>
-			<Card.Title>{lang.preferences.language}</Card.Title>
-		</Card.Header>
-		<Card.Content>
-			<div class="flex gap-2" role="group" aria-label={lang.preferences.language}>
-				{#each locales as locale}
-					<button
-						type="button"
-						aria-pressed={interfaceLanguage.current === locale}
-						onclick={() => setLanguage(locale)}
-						class="inline-flex h-10 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none {interfaceLanguage.current ===
-						locale
-							? 'border-[#2D4A77] bg-[#2D4A77]/10 text-[#2D4A77]'
-							: 'border-input hover:bg-accent'}"
-					>
-						{getLanguageDisplayName(locale)}
-					</button>
-				{/each}
-			</div>
-		</Card.Content>
-	</Card.Root>
-</div>
+<Card.Root>
+	<Card.Header>
+		<Card.Title>{lang.language.title}</Card.Title>
+	</Card.Header>
+	<Card.Content>
+		<div class="flex flex-col gap-1">
+			<label class="text-sm font-medium">{lang.language.select}</label>
+			<Select.Root
+				type="single"
+				value={interfaceLanguage.current}
+				onValueChange={(v) => { if (v) interfaceLanguage.current = v as InterfaceLanguage; }}
+			>
+				<Select.Trigger class="mt-1 w-full max-w-xs">
+					{getLanguageDisplayName(interfaceLanguage.current)}
+				</Select.Trigger>
+				<Select.Content>
+					{#each locales as locale}
+						<Select.Item value={locale} label={getLanguageDisplayName(locale)} />
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</div>
+	</Card.Content>
+</Card.Root>

package/dist/admin/client/account/profile-section.svelte

@@ -1,21 +1,23 @@
 <script lang="ts">
 	import * as Form from '../../../components/ui/form/index.js';
 	import * as Card from '../../../components/ui/card/index.js';
-	import { Badge } from '../../../components/ui/badge/index.js';
 	import { Input } from '../../../components/ui/input/index.js';
 	import Button from '../../../components/ui/button/button.svelte';
 	import { defaults, superForm } from 'sveltekit-superforms';
 	import { zod4, zod4Client } from 'sveltekit-superforms/adapters';
-	import { profileSchema } from './schema.js';
+	import { createProfileSchema } from './schema.js';
 	import { accountLang } from './lang.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
-	import { toLocaleCode } from '../../utils/formatDate.js';
 	import { authClient } from '../../auth-client.js';
 	import { toast } from 'svelte-sonner';
 	import { untrack } from 'svelte';
+	import { getRoleLabel } from '../../utils/roleLabel.js';
 
 	let session = authClient.useSession();
 	const interfaceLanguage = useInterfaceLanguage();
+	const lang = $derived(accountLang[interfaceLanguage.current]);
+
+	const schema = $derived(createProfileSchema(lang.errors));
 
 	$effect(() => {
 		const sessionName = $session.data?.user.name;
@@ -26,8 +28,8 @@
 		}
 	});
 
-	const form = superForm(defaults(zod4(profileSchema)), {
-		validators: zod4Client(profileSchema),
+	const form = superForm(defaults(zod4(schema)), {
+		validators: zod4Client(schema),
 		SPA: true,
 		resetForm: false,
 		onUpdate: async ({ form }) => {
@@ -42,8 +44,6 @@
 
 	const { form: formData, enhance } = form;
 
-	const lang = $derived(accountLang[interfaceLanguage.current]);
-
 	function getInitials(name: string): string {
 		return name
 			.split(' ')
@@ -52,13 +52,6 @@
 			.toUpperCase()
 			.slice(0, 2);
 	}
-
-	function formatDate(date: Date | string): string {
-		return new Date(date).toLocaleDateString(toLocaleCode(interfaceLanguage.current), {
-			year: 'numeric',
-			month: 'long'
-		});
-	}
 </script>
 
 <Card.Root>
@@ -67,20 +60,21 @@
 	</Card.Header>
 	<Card.Content>
 		{#if $session.data}
+			{@const userRole = ($session.data.user as any).role || 'user'}
 			<div class="flex flex-col gap-6">
-				<div class="flex items-center gap-4">
-					<div
-						class="flex size-16 items-center justify-center rounded-full bg-gradient-to-br from-[#2D4A77] to-[#4975AE] text-xl font-semibold text-white"
-					>
+				<!-- Avatar + info row -->
+				<div class="flex items-center gap-5">
+					<div class="acct-avatar" role="img" aria-label={$session.data.user.name}>
 						{getInitials($session.data.user.name)}
 					</div>
-					<div>
-						<p class="font-medium">{$session.data.user.name}</p>
+					<div class="min-w-0 flex-1">
+						<p class="text-lg font-semibold">{$session.data.user.name}</p>
 						<p class="text-muted-foreground text-sm">{$session.data.user.email}</p>
 					</div>
 				</div>
 
-				<form method="POST" use:enhance class="space-y-4">
+				<!-- Form -->
+				<form method="POST" use:enhance class="flex flex-col gap-4">
 					<Form.Field name="name" {form}>
 						<Form.Control>
 							{#snippet children({ props })}
@@ -91,31 +85,57 @@
 						<Form.FieldErrors class="text-sm text-red-500" />
 					</Form.Field>
 
-					<div class="space-y-2">
+					<!-- Email readonly -->
+					<div class="flex flex-col gap-1">
 						<label class="text-sm font-medium">{lang.profile.email}</label>
-						<Input type="email" value={$session.data.user.email} disabled class="mt-1" />
+						<div class="acct-input-wrap">
+							<Input
+								type="email"
+								value={$session.data.user.email}
+								readonly
+								aria-readonly="true"
+								class="mt-1"
+							/>
+							<span class="acct-input-icon" aria-hidden="true">
+								<svg
+									width="14"
+									height="14"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									><rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path
+										d="M7 11V7a5 5 0 0 1 10 0v4"
+									/></svg
+								>
+							</span>
+						</div>
+						<p class="text-text-light text-xs">{lang.profile.emailHint}</p>
 					</div>
 
-					<div class="flex items-center gap-4">
-						<div class="space-y-1">
-							<label class="text-sm font-medium">{lang.profile.role}</label>
-							<div>
-								<Badge variant="secondary">
-									{($session.data.user as any).role || 'User'}
-								</Badge>
-							</div>
-						</div>
-						<div class="space-y-1">
-							<label class="text-sm font-medium">{lang.profile.memberSince}</label>
-							<p class="text-muted-foreground text-sm">
-								{formatDate($session.data.user.createdAt)}
-							</p>
+					<!-- Role badge -->
+					<div class="flex flex-col gap-1">
+						<label class="text-sm font-medium">{lang.profile.role}</label>
+						<div>
+							<span
+								class="acct-role-badge"
+								aria-label="{lang.profile.role}: {getRoleLabel(
+									userRole,
+									interfaceLanguage.current
+								)}"
+							>
+								{getRoleLabel(userRole, interfaceLanguage.current)}
+							</span>
 						</div>
 					</div>
 
-					<Button type="submit" variant="gradient">
-						{lang.profile.save}
-					</Button>
+					<div class="acct-form-actions">
+						<Button type="submit" variant="default">
+							{lang.profile.save}
+						</Button>
+					</div>
 				</form>
 			</div>
 		{/if}

package/dist/admin/client/account/schema.d.ts

@@ -1,4 +1,14 @@
 import { z } from 'zod';
+import { accountLang } from './lang.js';
+type ErrorMessages = (typeof accountLang)[string]['errors'];
+export declare function createProfileSchema(errors: ErrorMessages): z.ZodObject<{
+    name: z.ZodString;
+}, z.core.$strip>;
+export declare function createPasswordSchema(errors: ErrorMessages): z.ZodObject<{
+    currentPassword: z.ZodString;
+    newPassword: z.ZodString;
+    confirmPassword: z.ZodString;
+}, z.core.$strip>;
 export declare const profileSchema: z.ZodObject<{
     name: z.ZodString;
 }, z.core.$strip>;
@@ -7,6 +17,4 @@ export declare const passwordSchema: z.ZodObject<{
     newPassword: z.ZodString;
     confirmPassword: z.ZodString;
 }, z.core.$strip>;
-export declare const deleteAccountSchema: z.ZodObject<{
-    password: z.ZodString;
-}, z.core.$strip>;
+export {};

package/dist/admin/client/account/schema.js

@@ -1,17 +1,26 @@
 import { z } from 'zod';
-export const profileSchema = z.object({
-    name: z.string().min(1, 'Name is required').max(255)
-});
-export const passwordSchema = z
-    .object({
-    currentPassword: z.string().min(1, 'Current password is required'),
-    newPassword: z.string().min(6, 'Password must be at least 6 characters').max(255),
-    confirmPassword: z.string().min(1, 'Please confirm your password')
-})
-    .refine((data) => data.newPassword === data.confirmPassword, {
-    message: 'Passwords do not match',
-    path: ['confirmPassword']
-});
-export const deleteAccountSchema = z.object({
-    password: z.string().min(1, 'Password is required')
-});
+import { accountLang } from './lang.js';
+import { passwordField } from '../../shared/password-schema.js';
+export function createProfileSchema(errors) {
+    return z.object({
+        name: z.string().min(1, errors.nameRequired).max(255)
+    });
+}
+export function createPasswordSchema(errors) {
+    return z
+        .object({
+        currentPassword: z.string().min(1, errors.currentPasswordRequired),
+        newPassword: passwordField({
+            minLength: errors.passwordMinLength,
+            requirements: errors.passwordRequirements
+        }),
+        confirmPassword: z.string().min(1, errors.confirmPasswordRequired)
+    })
+        .refine((data) => data.newPassword === data.confirmPassword, {
+        message: errors.passwordMismatch,
+        path: ['confirmPassword']
+    });
+}
+// Static schemas for backward compat (English defaults)
+export const profileSchema = createProfileSchema(accountLang.en.errors);
+export const passwordSchema = createPasswordSchema(accountLang.en.errors);

package/dist/admin/client/account/security-section.svelte

@@ -3,23 +3,26 @@
 	import { Input } from '../../../components/ui/input/index.js';
 	import Button from '../../../components/ui/button/button.svelte';
 	import * as Card from '../../../components/ui/card/index.js';
-	import * as AlertDialog from '../../../components/ui/alert-dialog/index.js';
 	import { defaults, superForm } from 'sveltekit-superforms';
 	import { zod4, zod4Client } from 'sveltekit-superforms/adapters';
-	import { passwordSchema, deleteAccountSchema } from './schema.js';
+	import { createPasswordSchema } from './schema.js';
 	import { accountLang } from './lang.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { authClient } from '../../auth-client.js';
 	import { toast } from 'svelte-sonner';
-	import { goto } from '$app/navigation';
 
 	const interfaceLanguage = useInterfaceLanguage();
+	const lang = $derived(accountLang[interfaceLanguage.current]);
+
+	// Password visibility toggles
+	let showCurrent = $state(false);
+	let showNew = $state(false);
+	let showConfirm = $state(false);
 
-	let deleteDialogOpen = $state(false);
-	let deletePassword = $state('');
+	const schema = $derived(createPasswordSchema(lang.errors));
 
-	const passwordForm = superForm(defaults(zod4(passwordSchema)), {
-		validators: zod4Client(passwordSchema),
+	const passwordForm = superForm(defaults(zod4(schema)), {
+		validators: zod4Client(schema),
 		SPA: true,
 		onUpdate: async ({ form }) => {
 			if (form.valid) {
@@ -41,124 +44,155 @@
 
 	const { form: passwordFormData, enhance: passwordEnhance } = passwordForm;
 
-	const lang = $derived(accountLang[interfaceLanguage.current]);
+	// Password strength computation
+	type StrengthLevel = 'weak' | 'medium' | 'strong' | 'very-strong';
 
-	async function handleDeleteAccount() {
-		if (!deletePassword) {
-			toast.error(lang.errors.deletePasswordRequired);
-			return;
-		}
+	const strength = $derived.by((): { level: StrengthLevel; score: number } => {
+		const pw = $passwordFormData.newPassword;
+		if (!pw) return { level: 'weak', score: 0 };
 
-		const { error } = await authClient.deleteUser({
-			password: deletePassword
-		});
+		let score = 0;
+		if (pw.length >= 8) score++;
+		if (/[A-Z]/.test(pw)) score++;
+		if (/[0-9]/.test(pw)) score++;
+		if (/[^A-Za-z0-9]/.test(pw)) score++;
+
+		if (score <= 1) return { level: 'weak', score };
+		if (score === 2) return { level: 'medium', score };
+		if (score === 3) return { level: 'strong', score };
+		return { level: 'very-strong', score: 4 };
+	});
+
+	const strengthLabel = $derived.by(() => {
+		const labels: Record<StrengthLevel, string> = {
+			'weak': lang.security.strengthWeak,
+			'medium': lang.security.strengthMedium,
+			'strong': lang.security.strengthStrong,
+			'very-strong': lang.security.strengthVeryStrong
+		};
+		return labels[strength.level];
+	});
 
-		if (error) {
-			toast.error(error.message || 'Failed to delete account');
-		} else {
-			goto('/admin/login');
-		}
-	}
 </script>
 
-<div class="space-y-6">
-	<Card.Root>
-		<Card.Header>
-			<Card.Title>{lang.security.changePassword}</Card.Title>
-		</Card.Header>
-		<Card.Content>
-			<form method="POST" use:passwordEnhance class="space-y-4">
-				<Form.Field name="currentPassword" form={passwordForm}>
-					<Form.Control>
-						{#snippet children({ props })}
-							<Form.Label>{lang.security.currentPassword}</Form.Label>
+<!-- Password Card -->
+<Card.Root>
+	<Card.Header>
+		<Card.Title>{lang.security.changePassword}</Card.Title>
+	</Card.Header>
+	<Card.Content>
+		<form method="POST" use:passwordEnhance class="flex flex-col gap-4">
+			<!-- Current password -->
+			<Form.Field name="currentPassword" form={passwordForm}>
+				<Form.Control>
+					{#snippet children({ props })}
+						<Form.Label>{lang.security.currentPassword}</Form.Label>
+						<div class="acct-input-wrap mt-1">
 							<Input
 								{...props}
 								bind:value={$passwordFormData.currentPassword}
-								type="password"
+								type={showCurrent ? 'text' : 'password'}
 								autocomplete="current-password"
-								class="mt-1"
 							/>
-						{/snippet}
-					</Form.Control>
-					<Form.FieldErrors class="text-sm text-red-500" />
-				</Form.Field>
-
-				<Form.Field name="newPassword" form={passwordForm}>
-					<Form.Control>
-						{#snippet children({ props })}
-							<Form.Label>{lang.security.newPassword}</Form.Label>
+							<button
+								type="button"
+								class="acct-pw-toggle"
+								aria-label={showCurrent ? lang.security.hidePassword : lang.security.showPassword}
+								onclick={() => showCurrent = !showCurrent}
+							>
+								{#if showCurrent}
+									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
+								{:else}
+									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+								{/if}
+							</button>
+						</div>
+					{/snippet}
+				</Form.Control>
+				<Form.FieldErrors class="text-sm text-red-500" />
+			</Form.Field>
+
+			<!-- New password -->
+			<Form.Field name="newPassword" form={passwordForm}>
+				<Form.Control>
+					{#snippet children({ props })}
+						<Form.Label>{lang.security.newPassword}</Form.Label>
+						<div class="acct-input-wrap mt-1">
 							<Input
 								{...props}
 								bind:value={$passwordFormData.newPassword}
-								type="password"
+								type={showNew ? 'text' : 'password'}
 								autocomplete="new-password"
-								class="mt-1"
+								aria-describedby="pw-hint pw-strength"
 							/>
-						{/snippet}
-					</Form.Control>
-					<Form.FieldErrors class="text-sm text-red-500" />
-				</Form.Field>
-
-				<Form.Field name="confirmPassword" form={passwordForm}>
-					<Form.Control>
-						{#snippet children({ props })}
-							<Form.Label>{lang.security.confirmPassword}</Form.Label>
+							<button
+								type="button"
+								class="acct-pw-toggle"
+								aria-label={showNew ? lang.security.hidePassword : lang.security.showPassword}
+								onclick={() => showNew = !showNew}
+							>
+								{#if showNew}
+									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
+								{:else}
+									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+								{/if}
+							</button>
+						</div>
+
+						<!-- Strength meter -->
+						{#if $passwordFormData.newPassword}
+							<div class="acct-strength-meter" role="img" aria-label="{lang.security.strengthLabel}: {strengthLabel}">
+								{#each [1, 2, 3, 4] as i}
+									<div class="acct-strength-seg {i <= strength.score ? `filled-${strength.level}` : ''}"></div>
+								{/each}
+							</div>
+							<p id="pw-strength" class="acct-strength-text {strength.level}">
+								{lang.security.strengthLabel}: {strengthLabel}
+							</p>
+						{/if}
+						<p id="pw-hint" class="text-text-light mt-1 text-xs">
+							{lang.security.passwordHint}
+						</p>
+					{/snippet}
+				</Form.Control>
+				<Form.FieldErrors class="text-sm text-red-500" />
+			</Form.Field>
+
+			<!-- Confirm password -->
+			<Form.Field name="confirmPassword" form={passwordForm}>
+				<Form.Control>
+					{#snippet children({ props })}
+						<Form.Label>{lang.security.confirmPassword}</Form.Label>
+						<div class="acct-input-wrap mt-1">
 							<Input
 								{...props}
 								bind:value={$passwordFormData.confirmPassword}
-								type="password"
+								type={showConfirm ? 'text' : 'password'}
 								autocomplete="new-password"
-								class="mt-1"
 							/>
-						{/snippet}
-					</Form.Control>
-					<Form.FieldErrors class="text-sm text-red-500" />
-				</Form.Field>
+							<button
+								type="button"
+								class="acct-pw-toggle"
+								aria-label={showConfirm ? lang.security.hidePassword : lang.security.showPassword}
+								onclick={() => showConfirm = !showConfirm}
+							>
+								{#if showConfirm}
+									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
+								{:else}
+									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+								{/if}
+							</button>
+						</div>
+					{/snippet}
+				</Form.Control>
+				<Form.FieldErrors class="text-sm text-red-500" />
+			</Form.Field>
 
-				<Button type="submit" variant="gradient">
+			<div class="acct-form-actions">
+				<Button type="submit" variant="default">
 					{lang.security.updatePassword}
 				</Button>
-			</form>
-		</Card.Content>
-	</Card.Root>
-
-	<Card.Root class="border-destructive/50">
-		<Card.Header>
-			<Card.Title class="text-destructive">{lang.security.deleteAccount}</Card.Title>
-			<Card.Description>{lang.security.deleteAccountDesc}</Card.Description>
-		</Card.Header>
-		<Card.Content>
-			<AlertDialog.Root bind:open={deleteDialogOpen}>
-				<AlertDialog.Trigger>
-					<Button type="button" variant="destructive">
-						{lang.security.deleteAccountButton}
-					</Button>
-				</AlertDialog.Trigger>
-				<AlertDialog.Content>
-					<AlertDialog.Title>{lang.security.deleteConfirmTitle}</AlertDialog.Title>
-					<AlertDialog.Description>
-						{lang.security.deleteConfirmDesc}
-					</AlertDialog.Description>
-					<div class="mt-4">
-						<label class="text-sm font-medium">{lang.security.deleteConfirmPassword}</label>
-						<Input
-							bind:value={deletePassword}
-							type="password"
-							class="mt-1"
-						/>
-					</div>
-					<AlertDialog.Footer>
-						<AlertDialog.Cancel>{lang.security.cancel}</AlertDialog.Cancel>
-						<AlertDialog.Action
-							onclick={handleDeleteAccount}
-							class="bg-destructive text-white hover:bg-destructive/90"
-						>
-							{lang.security.delete}
-						</AlertDialog.Action>
-					</AlertDialog.Footer>
-				</AlertDialog.Content>
-			</AlertDialog.Root>
-		</Card.Content>
-	</Card.Root>
-</div>
+			</div>
+		</form>
+	</Card.Content>
+</Card.Root>