includio-cms 0.1.4 → 0.5.0

package/dist/admin/client/users/accept-invite-page.svelte

@@ -4,8 +4,8 @@
 	import Label from '../../../components/ui/label/label.svelte';
 	import Button from '../../../components/ui/button/button.svelte';
 	import Loader2 from '@tabler/icons-svelte/icons/loader-2';
+	import * as Alert from '../../../components/ui/alert/index.js';
 	import { page } from '$app/state';
-	import { goto } from '$app/navigation';
 	import { usersLang } from './lang.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 
@@ -20,15 +20,52 @@
 	let loading = $state(false);
 	let error = $state('');
 	let success = $state(false);
+	let showPassword = $state(false);
+	let showConfirm = $state(false);
+
+	// Password strength computation
+	type StrengthLevel = 'weak' | 'medium' | 'strong' | 'very-strong';
+
+	const strength = $derived.by((): { level: StrengthLevel; score: number } => {
+		if (!password) return { level: 'weak', score: 0 };
+
+		let score = 0;
+		if (password.length >= 8) score++;
+		if (/[A-Z]/.test(password)) score++;
+		if (/[0-9]/.test(password)) score++;
+		if (/[^A-Za-z0-9]/.test(password)) 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 strengthLabels = $derived({
+		weak: interfaceLanguage.current === 'pl' ? 'Słabe' : 'Weak',
+		medium: interfaceLanguage.current === 'pl' ? 'Średnie' : 'Medium',
+		strong: interfaceLanguage.current === 'pl' ? 'Silne' : 'Strong',
+		'very-strong': interfaceLanguage.current === 'pl' ? 'Bardzo silne' : 'Very strong'
+	});
+
+	const strengthLabelText = $derived(
+		interfaceLanguage.current === 'pl' ? 'Siła hasła' : 'Password strength'
+	);
+
+	function validate(): string | null {
+		if (password.length < 8) return lang.passwordMinLength;
+		if (!/[A-Z]/.test(password) || !/[0-9]/.test(password) || !/[^A-Za-z0-9]/.test(password)) {
+			return lang.passwordRequirements;
+		}
+		if (password !== confirmPassword) return lang.passwordMismatch;
+		return null;
+	}
 
 	async function handleSubmit(e: Event) {
 		e.preventDefault();
-		if (password !== confirmPassword) {
-			error = lang.invite.confirmPassword + ' — mismatch';
-			return;
-		}
-		if (password.length < 6) {
-			error = 'Password must be at least 6 characters';
+		const validationError = validate();
+		if (validationError) {
+			error = validationError;
 			return;
 		}
 
@@ -51,7 +88,6 @@
 			}
 
 			success = true;
-			setTimeout(() => goto('/admin/login'), 2000);
 		} catch {
 			error = 'Network error';
 			loading = false;
@@ -59,53 +95,139 @@
 	}
 </script>
 
-<div
-	class="relative flex min-h-svh flex-col items-center justify-center overflow-hidden p-6 md:p-10"
-	style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);"
+<!-- Skip link (WCAG) -->
+<a
+	href="#main-content"
+	class="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-3 focus:z-[9999] focus:rounded-lg focus:bg-primary focus:px-4 focus:py-2 focus:text-[13px] focus:font-semibold focus:text-primary-foreground"
 >
+	{interfaceLanguage.current === 'pl' ? 'Przejdź do treści' : 'Skip to content'}
+</a>
+
+<!-- Background orbs -->
+<div class="fixed inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
+	<div class="login-orb login-orb--1"></div>
+	<div class="login-orb login-orb--2"></div>
+	<div class="login-orb login-orb--3"></div>
+</div>
+
+<!-- Main -->
+<main
+	id="main-content"
+	class="relative z-[1] flex min-h-svh flex-col items-center justify-center p-6"
+>
+	<!-- Card -->
 	<div
-		class="pointer-events-none absolute inset-0 hidden dark:block"
-		style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #2D4A77 100%);"
-	></div>
-
-	<div class="relative z-10 w-full max-w-sm">
-		<div
-			class="overflow-hidden rounded-3xl border border-slate-200/50 bg-white/80 p-8 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/60"
-		>
-			<div class="mb-6 text-center">
-				<div class="mb-2 text-3xl font-bold" style="background: linear-gradient(135deg, #2D4A77, #4975AE); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
-					includio
+		class="login-card-enter w-full max-w-[400px] rounded-xl border bg-card px-8 py-10 shadow-lg max-[480px]:rounded-lg max-[480px]:px-5 max-[480px]:py-8"
+	>
+		<div class="flex flex-col gap-5">
+			<!-- Brand -->
+			<div class="mb-2 flex flex-col items-center text-center">
+				<div class="mb-2 flex items-baseline gap-0.5" aria-hidden="true">
+					<span class="text-primary text-[28px] leading-none font-extrabold max-[480px]:text-[24px]">
+						Aria
+					</span>
+					<span
+						class="text-primary text-[16px] leading-none font-light tracking-[0.15em] uppercase max-[480px]:text-[14px]"
+					>
+						CMS
+					</span>
 				</div>
-				<h1 class="text-lg font-semibold">{lang.invite.acceptTitle}</h1>
-				<p class="text-muted-foreground mt-1 text-sm">{lang.invite.acceptDescription}</p>
+			</div>
+
+			<div class="text-center">
+				<h1 class="text-lg font-semibold text-foreground">{lang.invite.acceptTitle}</h1>
+				<p class="text-muted-foreground mt-1 text-[14px]">{lang.invite.acceptDescription}</p>
 			</div>
 
 			{#if success}
-				<div class="rounded-lg bg-green-50 p-4 text-center text-sm text-green-700 dark:bg-green-900/20 dark:text-green-400">
-					{lang.invite.accepted}
-				</div>
+				<Alert.Root variant="success" class="text-center" role="status">
+					<Alert.Description>{lang.invite.accepted}</Alert.Description>
+				</Alert.Root>
+				<Button href="/admin/login" class="h-11 w-full text-[15px] font-semibold">
+					{lang.invite.goToLogin}
+				</Button>
 			{:else if !token}
-				<div class="rounded-lg bg-red-50 p-4 text-center text-sm text-red-700 dark:bg-red-900/20 dark:text-red-400">
-					{lang.invite.invalidToken}
-				</div>
+				<Alert.Root variant="destructive" class="text-center">
+					<Alert.Description>{lang.invite.invalidToken}</Alert.Description>
+				</Alert.Root>
 			{:else}
-				<form onsubmit={handleSubmit} class="space-y-4">
+				<form onsubmit={handleSubmit} class="space-y-4" aria-label={lang.invite.acceptTitle}>
 					<div class="space-y-2">
 						<Label for="invite-name">{lang.name}</Label>
-						<Input id="invite-name" bind:value={name} required class="rounded-xl" />
+						<Input id="invite-name" bind:value={name} required autocomplete="name" />
 					</div>
 					<div class="space-y-2">
 						<Label for="invite-password">{lang.password}</Label>
-						<Input id="invite-password" type="password" bind:value={password} required minlength={6} class="rounded-xl" />
+						<div class="acct-input-wrap">
+							<Input
+								id="invite-password"
+								type={showPassword ? 'text' : 'password'}
+								bind:value={password}
+								required
+								minlength={8}
+								autocomplete="new-password"
+								aria-describedby="invite-pw-hint invite-pw-strength"
+								class="login-input"
+							/>
+							<button
+								type="button"
+								class="acct-pw-toggle"
+								aria-label={showPassword ? (interfaceLanguage.current === 'pl' ? 'Ukryj hasło' : 'Hide password') : (interfaceLanguage.current === 'pl' ? 'Pokaż hasło' : 'Show password')}
+								onclick={() => showPassword = !showPassword}
+							>
+								{#if showPassword}
+									<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 password}
+							<div class="acct-strength-meter" role="img" aria-label="{strengthLabelText}: {strengthLabels[strength.level]}">
+								{#each [1, 2, 3, 4] as i}
+									<div class="acct-strength-seg {i <= strength.score ? `filled-${strength.level}` : ''}"></div>
+								{/each}
+							</div>
+							<p id="invite-pw-strength" class="acct-strength-text {strength.level}">
+								{strengthLabelText}: {strengthLabels[strength.level]}
+							</p>
+						{/if}
+						<p id="invite-pw-hint" class="text-text-light mt-1 text-xs">
+							{lang.passwordHint}
+						</p>
 					</div>
 					<div class="space-y-2">
 						<Label for="invite-confirm">{lang.invite.confirmPassword}</Label>
-						<Input id="invite-confirm" type="password" bind:value={confirmPassword} required minlength={6} class="rounded-xl" />
+						<div class="acct-input-wrap">
+							<Input
+								id="invite-confirm"
+								type={showConfirm ? 'text' : 'password'}
+								bind:value={confirmPassword}
+								required
+								minlength={8}
+								autocomplete="new-password"
+								class="login-input"
+							/>
+							<button
+								type="button"
+								class="acct-pw-toggle"
+								aria-label={showConfirm ? (interfaceLanguage.current === 'pl' ? 'Ukryj hasło' : 'Hide password') : (interfaceLanguage.current === 'pl' ? 'Pokaż hasło' : 'Show password')}
+								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>
 					</div>
 					{#if error}
-						<p class="text-destructive text-sm">{error}</p>
+						<p class="text-destructive text-sm" role="alert">{error}</p>
 					{/if}
-					<Button type="submit" class="w-full rounded-xl" disabled={loading}>
+					<Button type="submit" class="h-11 w-full text-[15px] font-semibold" disabled={loading}>
 						{#if loading}
 							<Loader2 class="mr-2 size-4 animate-spin" />
 						{/if}
@@ -115,4 +237,11 @@
 			{/if}
 		</div>
 	</div>
-</div>
+
+	<!-- Footer -->
+	<footer class="login-footer-enter mt-6 text-center">
+		<p class="text-xs text-text-light">
+			{interfaceLanguage.current === 'pl' ? 'Stworzone przez Includio' : 'Created by Includio'}
+		</p>
+	</footer>
+</main>

package/dist/admin/client/users/create-user-dialog.svelte

@@ -96,7 +96,7 @@
 			</div>
 			<div class="space-y-2">
 				<Label for="create-password">{lang.password}</Label>
-				<div class="flex gap-1">
+				<div class="flex gap-2">
 					<div class="relative flex-1">
 						<Input
 							id="create-password"
@@ -105,10 +105,12 @@
 							required
 							minlength={6}
 							class="pr-9"
+							aria-describedby="create-password-hint"
 						/>
 						<button
 							type="button"
-							class="text-muted-foreground hover:text-foreground absolute right-2 top-1/2 -translate-y-1/2"
+							class="absolute right-2 top-1/2 -translate-y-1/2"
+							style="color: var(--text-light);"
 							onclick={() => (showPassword = !showPassword)}
 						>
 							{#if showPassword}
@@ -120,23 +122,26 @@
 					</div>
 					<Button
 						type="button"
-						variant="outline"
-						size="icon"
-						class="shrink-0"
+						variant="secondary"
+						size="sm"
+						class="shrink-0 gap-1.5"
 						onclick={() => {
 							password = generatePassword();
 							showPassword = true;
 						}}
-						title={lang.generatePassword}
 					>
 						<DiceIcon class="size-4" />
+						{lang.generatePassword}
 					</Button>
 				</div>
+				<p id="create-password-hint" class="text-xs" style="color: var(--text-light);">
+					{lang.passwordHint}
+				</p>
 			</div>
 			<div class="space-y-2">
 				<Label>{lang.role}</Label>
 				<Select.Root type="single" value={role} onValueChange={(v) => v && (role = v as UserRole)}>
-					<Select.Trigger class="w-full">
+					<Select.Trigger class="w-full" aria-describedby="create-role-hint">
 						{role === 'admin' ? lang.roleAdmin : lang.roleUser}
 					</Select.Trigger>
 					<Select.Content>
@@ -144,6 +149,9 @@
 						<Select.Item value="admin">{lang.roleAdmin}</Select.Item>
 					</Select.Content>
 				</Select.Root>
+				<p id="create-role-hint" class="text-xs" style="color: var(--text-light);">
+					{lang.roleHint}
+				</p>
 			</div>
 			{#if error}
 				<p class="text-destructive text-sm">{error}</p>

package/dist/admin/client/users/delete-user-dialog.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-	import * as AlertDialog from '../../../components/ui/alert-dialog/index.js';
+	import * as Dialog from '../../../components/ui/dialog/index.js';
+	import { Input } from '../../../components/ui/input/index.js';
+	import Label from '../../../components/ui/label/label.svelte';
+	import Button from '../../../components/ui/button/button.svelte';
+	import AlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
 	import { authClient } from '../../auth-client.js';
 	import { toast } from 'svelte-sonner';
 	import { usersLang } from './lang.js';
@@ -9,45 +13,106 @@
 		open: boolean;
 		onOpenChange: (open: boolean) => void;
 		onDeleted: () => void;
-		userId: string | null;
+		user: { id: string; name: string } | null;
 		currentUserId: string;
 	};
 
-	let { open = $bindable(), onOpenChange, onDeleted, userId, currentUserId }: Props = $props();
+	let { open = $bindable(), onOpenChange, onDeleted, user, currentUserId }: Props = $props();
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const lang = $derived(usersLang[interfaceLanguage.current]);
 
+	let confirmInput = $state('');
+	let loading = $state(false);
+
+	const confirmed = $derived(confirmInput === lang.deleteConfirmWord);
+
+	function reset() {
+		confirmInput = '';
+		loading = false;
+	}
+
 	async function handleDelete() {
-		if (!userId) return;
+		if (!user || !confirmed) return;
 
-		if (userId === currentUserId) {
+		if (user.id === currentUserId) {
 			toast.error(lang.cannotDeleteSelf);
 			onOpenChange(false);
 			return;
 		}
 
-		const { error } = await authClient.admin.removeUser({ userId });
+		loading = true;
+		const { error } = await authClient.admin.removeUser({ userId: user.id });
 
 		if (error) {
 			toast.error(error.message || 'Error');
+			loading = false;
 			onOpenChange(false);
 			return;
 		}
 
 		toast.success(lang.userDeleted);
+		reset();
 		onOpenChange(false);
 		onDeleted();
 	}
 </script>
 
-<AlertDialog.Root {open} onOpenChange={(v) => onOpenChange(v)}>
-	<AlertDialog.Content>
-		<AlertDialog.Title>{lang.deleteConfirmTitle}</AlertDialog.Title>
-		<AlertDialog.Description>{lang.deleteConfirmDescription}</AlertDialog.Description>
-		<AlertDialog.Footer>
-			<AlertDialog.Cancel>{lang.cancel}</AlertDialog.Cancel>
-			<AlertDialog.Action onclick={handleDelete}>{lang.deleteUser}</AlertDialog.Action>
-		</AlertDialog.Footer>
-	</AlertDialog.Content>
-</AlertDialog.Root>
+<Dialog.Root
+	{open}
+	onOpenChange={(v) => {
+		if (!v) reset();
+		onOpenChange(v);
+	}}
+>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>{lang.deleteConfirmTitle}</Dialog.Title>
+		</Dialog.Header>
+
+		{#if user}
+			<div class="space-y-4">
+				<!-- Warning box -->
+				<div class="users-delete-warning">
+					<div class="users-delete-warning-icon">
+						<AlertTriangle class="size-5" />
+					</div>
+					<div class="flex-1">
+						<p class="text-sm font-semibold" style="color: var(--destructive);">
+							{lang.deleteWarningTitle}
+						</p>
+						<p class="mt-1 text-sm" style="color: var(--muted-foreground);">
+							{@html lang.deleteWarningDesc(user.name)}
+						</p>
+					</div>
+				</div>
+
+				<!-- Confirm input -->
+				<div class="space-y-2">
+					<Label for="delete-confirm">
+						{@html lang.deleteConfirmType}
+					</Label>
+					<Input
+						id="delete-confirm"
+						bind:value={confirmInput}
+						placeholder={lang.deleteConfirmWord}
+						autocomplete="off"
+					/>
+				</div>
+
+				<Dialog.Footer>
+					<Button type="button" variant="outline" onclick={() => onOpenChange(false)}>
+						{lang.cancel}
+					</Button>
+					<Button
+						variant="destructive"
+						disabled={!confirmed || loading}
+						onclick={handleDelete}
+					>
+						{lang.deleteUser}
+					</Button>
+				</Dialog.Footer>
+			</div>
+		{/if}
+	</Dialog.Content>
+</Dialog.Root>

package/dist/admin/client/users/delete-user-dialog.svelte.d.ts

@@ -2,7 +2,10 @@ type Props = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     onDeleted: () => void;
-    userId: string | null;
+    user: {
+        id: string;
+        name: string;
+    } | null;
     currentUserId: string;
 };
 declare const DeleteUserDialog: import("svelte").Component<Props, {}, "open">;

package/dist/admin/client/users/edit-user-dialog.svelte

@@ -113,6 +113,9 @@
 							<Select.Item value="admin">{lang.roleAdmin}</Select.Item>
 						</Select.Content>
 					</Select.Root>
+					<p id="edit-role-hint" class="text-xs" style="color: var(--text-light);">
+						{lang.roleHint}
+					</p>
 				{/if}
 			</div>
 			{#if error}

package/dist/admin/client/users/invite-user-dialog.svelte

@@ -40,7 +40,7 @@
 			const res = await fetch('/admin/api/invite', {
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ email, role })
+				body: JSON.stringify({ email, role, lang: interfaceLanguage.current })
 			});
 
 			const data = await res.json();
@@ -81,12 +81,22 @@
 		<form onsubmit={handleSubmit} class="space-y-4">
 			<div class="space-y-2">
 				<Label for="invite-email">{lang.email}</Label>
-				<Input id="invite-email" type="email" bind:value={email} required />
+				<Input
+					id="invite-email"
+					type="email"
+					bind:value={email}
+					required
+					placeholder={lang.invite.emailPlaceholder}
+					aria-describedby="invite-email-hint"
+				/>
+				<p id="invite-email-hint" class="text-xs" style="color: var(--text-light);">
+					{lang.invite.emailHint}
+				</p>
 			</div>
 			<div class="space-y-2">
 				<Label>{lang.role}</Label>
 				<Select.Root type="single" value={role} onValueChange={(v) => v && (role = v as UserRole)}>
-					<Select.Trigger class="w-full">
+					<Select.Trigger class="w-full" aria-describedby="invite-role-hint">
 						{role === 'admin' ? lang.roleAdmin : lang.roleUser}
 					</Select.Trigger>
 					<Select.Content>
@@ -94,6 +104,9 @@
 						<Select.Item value="admin">{lang.roleAdmin}</Select.Item>
 					</Select.Content>
 				</Select.Root>
+				<p id="invite-role-hint" class="text-xs" style="color: var(--text-light);">
+					{lang.invite.roleHint}
+				</p>
 			</div>
 			{#if error}
 				<p class="text-destructive text-sm">{error}</p>

package/dist/admin/client/users/lang.d.ts

@@ -1,6 +1,7 @@
 import type { InterfaceLanguage } from '../../../types/languages.js';
 export declare const usersLang: Record<InterfaceLanguage, {
     title: string;
+    description: string;
     name: string;
     email: string;
     role: string;
@@ -13,10 +14,19 @@ export declare const usersLang: Record<InterfaceLanguage, {
     save: string;
     cancel: string;
     password: string;
+    passwordHint: string;
+    passwordMinLength: string;
+    passwordRequirements: string;
+    passwordMismatch: string;
     roleAdmin: string;
     roleUser: string;
+    roleHint: string;
     deleteConfirmTitle: string;
     deleteConfirmDescription: string;
+    deleteWarningTitle: string;
+    deleteWarningDesc: (name: string) => string;
+    deleteConfirmType: string;
+    deleteConfirmWord: string;
     userCreated: string;
     userUpdated: string;
     userDeleted: string;
@@ -24,6 +34,16 @@ export declare const usersLang: Record<InterfaceLanguage, {
     cannotChangeSelfRole: string;
     noResults: string;
     generatePassword: string;
+    filterByRole: string;
+    allRoles: string;
+    showing: (start: number, end: number, total: number) => string;
+    selected: (n: number) => string;
+    changeRole: string;
+    emptyTitle: string;
+    emptyDescription: string;
+    addUser: string;
+    selectAll: string;
+    selectUser: string;
     sessions: {
         title: string;
         noSessions: string;
@@ -49,9 +69,16 @@ export declare const usersLang: Record<InterfaceLanguage, {
         confirmPassword: string;
         acceptInvite: string;
         accepted: string;
+        goToLogin: string;
         invalidToken: string;
         emailConfigRequired: string;
         resend: string;
         resent: string;
+        emailPlaceholder: string;
+        emailHint: string;
+        roleHint: string;
+        expiringSoon: string;
+        resendLabel: (email: string) => string;
+        cancelLabel: (email: string) => string;
     };
 }>;