includio-cms 0.1.4 → 0.5.0

package/dist/admin/client/form/submission-link.svelte

@@ -3,11 +3,17 @@
 		name: string;
 		url: string;
 		isRead?: boolean;
+		onclick?: (e: MouseEvent) => void;
 	};
 
-	let { name, url, isRead = true }: Props = $props();
+	let { name, url, isRead = true, onclick }: Props = $props();
 </script>
 
-<a href={url} class="hover:underline" class:font-semibold={!isRead}>
+<a
+	href={url}
+	class="hover:underline"
+	class:font-semibold={!isRead}
+	onclick={onclick}
+>
 	{name}
 </a>

package/dist/admin/client/form/submission-link.svelte.d.ts

@@ -2,6 +2,7 @@ type Props = {
     name: string;
     url: string;
     isRead?: boolean;
+    onclick?: (e: MouseEvent) => void;
 };
 declare const SubmissionLink: import("svelte").Component<Props, {}, "">;
 type SubmissionLink = ReturnType<typeof SubmissionLink>;

package/dist/admin/client/form/submission-status-badge.svelte

@@ -4,9 +4,10 @@
 
 	type Props = {
 		isRead: boolean;
+		variant?: 'badge' | 'dot';
 	};
 
-	let { isRead }: Props = $props();
+	let { isRead, variant = 'badge' }: Props = $props();
 
 	const interfaceLanguage = useInterfaceLanguage();
 
@@ -16,12 +17,25 @@
 	};
 </script>
 
-{#if isRead}
-	<span class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-600 dark:bg-slate-800 dark:text-slate-300">
+{#if variant === 'dot'}
+	{#if !isRead}
+		<span
+			class="bg-primary inline-block size-2 rounded-full"
+			aria-label={lang[interfaceLanguage.current].new}
+		></span>
+	{:else}
+		<span class="inline-block size-2" aria-label={lang[interfaceLanguage.current].read}></span>
+	{/if}
+{:else if isRead}
+	<span
+		class="bg-muted text-muted-foreground inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
+	>
 		{lang[interfaceLanguage.current].read}
 	</span>
 {:else}
-	<span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
+	<span
+		class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
+	>
 		{lang[interfaceLanguage.current].new}
 	</span>
 {/if}

package/dist/admin/client/form/submission-status-badge.svelte.d.ts

@@ -1,5 +1,6 @@
 type Props = {
     isRead: boolean;
+    variant?: 'badge' | 'dot';
 };
 declare const SubmissionStatusBadge: import("svelte").Component<Props, {}, "">;
 type SubmissionStatusBadge = ReturnType<typeof SubmissionStatusBadge>;

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

@@ -5,5 +5,37 @@ export declare const loginLang: Record<string, {
         email: string;
         password: string;
         login_button: string;
+        tagline: string;
+        forgot_password: string;
+        footer_credit: string;
+        skip_to_content: string;
+        form_label: string;
+        login_error: string;
+        login_success: string;
+    };
+    forgot: {
+        heading: string;
+        description: string;
+        send_link: string;
+        back_to_login: string;
+        sent_heading: string;
+        sent_description: string;
+        email_not_configured: string;
+        form_label: string;
+    };
+    reset: {
+        heading: string;
+        description: string;
+        new_password: string;
+        confirm_password: string;
+        submit: string;
+        success: string;
+        go_to_login: string;
+        invalid_link: string;
+        password_mismatch: string;
+        form_label: string;
+        passwordHint: string;
+        passwordMinLength: string;
+        passwordRequirements: string;
     };
 }>;

package/dist/admin/client/login/lang.js

@@ -5,7 +5,39 @@ export const loginLang = {
             please_login: 'Zaloguj się na swoje konto',
             email: 'Adres e-mail',
             password: 'Hasło',
-            login_button: 'Zaloguj się'
+            login_button: 'Zaloguj się',
+            tagline: 'Treści dostępne dla każdego',
+            forgot_password: 'Nie pamiętasz hasła?',
+            footer_credit: 'Stworzone przez Includio',
+            skip_to_content: 'Przejdź do treści',
+            form_label: 'Logowanie',
+            login_error: 'Nieprawidłowy e-mail lub hasło. Spróbuj ponownie.',
+            login_success: 'Zalogowano pomyślnie'
+        },
+        forgot: {
+            heading: 'Przypomnij hasło',
+            description: 'Podaj adres e-mail, a wyślemy Ci link do zmiany hasła.',
+            send_link: 'Wyślij link',
+            back_to_login: 'Wróć do logowania',
+            sent_heading: 'Sprawdź skrzynkę',
+            sent_description: 'Jeśli konto z tym adresem istnieje, wysłaliśmy link do zmiany hasła.',
+            email_not_configured: 'Wysyłka e-maili nie jest skonfigurowana. Skontaktuj się z administratorem.',
+            form_label: 'Przypomnienie hasła'
+        },
+        reset: {
+            heading: 'Ustaw nowe hasło',
+            description: 'Wpisz nowe hasło do swojego konta.',
+            new_password: 'Nowe hasło',
+            confirm_password: 'Potwierdź hasło',
+            submit: 'Zmień hasło',
+            success: 'Hasło zostało zmienione.',
+            go_to_login: 'Przejdź do logowania',
+            invalid_link: 'Nieprawidłowy lub wygasły link. Spróbuj ponownie.',
+            password_mismatch: 'Hasła nie są takie same.',
+            form_label: 'Zmiana hasła',
+            passwordHint: 'Min. 8 znaków, wielka litera, cyfra i znak specjalny',
+            passwordMinLength: 'Hasło musi mieć min. 8 znaków',
+            passwordRequirements: 'Hasło musi zawierać wielką literę, cyfrę i znak specjalny'
         }
     },
     en: {
@@ -14,7 +46,39 @@ export const loginLang = {
             please_login: 'Login to your account',
             email: 'Email Address',
             password: 'Password',
-            login_button: 'Login'
+            login_button: 'Login',
+            tagline: 'Content accessible to everyone',
+            forgot_password: 'Forgot your password?',
+            footer_credit: 'Created by Includio',
+            skip_to_content: 'Skip to content',
+            form_label: 'Login',
+            login_error: 'Invalid email or password. Please try again.',
+            login_success: 'Logged in successfully'
+        },
+        forgot: {
+            heading: 'Forgot password',
+            description: "Enter your email and we'll send you a link to reset your password.",
+            send_link: 'Send reset link',
+            back_to_login: 'Back to login',
+            sent_heading: 'Check your inbox',
+            sent_description: "If an account with that email exists, we've sent a password reset link.",
+            email_not_configured: 'Email sending is not configured. Contact your administrator.',
+            form_label: 'Forgot password'
+        },
+        reset: {
+            heading: 'Set new password',
+            description: 'Enter a new password for your account.',
+            new_password: 'New password',
+            confirm_password: 'Confirm password',
+            submit: 'Reset password',
+            success: 'Password changed successfully.',
+            go_to_login: 'Go to login',
+            invalid_link: 'Invalid or expired link. Please try again.',
+            password_mismatch: 'Passwords do not match.',
+            form_label: 'Reset password',
+            passwordHint: 'Min. 8 characters, uppercase, number and special character',
+            passwordMinLength: 'Password must be at least 8 characters',
+            passwordRequirements: 'Password must contain an uppercase letter, a number and a special character'
         }
     }
 };

package/dist/admin/client/login/login-form.svelte

@@ -1,36 +1,45 @@
 <script lang="ts">
 	import * as Form from '../../../components/ui/form/index.js';
+	import Input from '../../../components/ui/input/input.svelte';
 
 	import { defaults, superForm } from 'sveltekit-superforms';
 	import { zod4, zod4Client } from 'sveltekit-superforms/adapters';
-	import { loginSchema } from './schema.js';
+	import { loginSchema, forgotPasswordSchema } from './schema.js';
 	import { toast } from 'svelte-sonner';
-	import { getRemotes } from '../../context/remotes.js';
 	import { authClient } from '../../auth-client.js';
 	import { loginLang } from './lang.js';
 	import Button from '../../../components/ui/button/button.svelte';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { goto } from '$app/navigation';
 
-	const remotes = getRemotes();
 	let interfaceLanguage = useInterfaceLanguage();
 
-	const form = superForm(defaults(zod4(loginSchema)), {
+	const lang = () => loginLang[interfaceLanguage.current].login;
+	const forgotLang = () => loginLang[interfaceLanguage.current].forgot;
+
+	let mode: 'login' | 'forgot' | 'forgot-sent' = $state('login');
+	let forgotLoading = $state(false);
+	let forgotError = $state('');
+
+	const loginForm = superForm(defaults(zod4(loginSchema)), {
 		validators: zod4Client(loginSchema),
 		SPA: true,
+		resetForm: false,
 		onUpdate: async ({ form }) => {
 			if (form.valid) {
-				const { data, error } = await authClient.signIn.email(
+				await authClient.signIn.email(
 					{
 						email: form.data.email,
-						password: form.data.password,
-						callbackURL: '/admin'
+						password: form.data.password
 					},
 					{
-						onSuccess: () => {
-							toast.success('Login successful');
+						onSuccess: async () => {
+							toast.success(lang().login_success);
+							goto('/admin');
 						},
-						onError: (err) => {
-							toast.error(`Login failed`);
+						onError: async (error) => {
+							form.valid = false;
+							form.errors.password = [lang().login_error];
 						}
 					}
 				);
@@ -38,99 +47,232 @@
 		}
 	});
 
-	const { form: formData, enhance } = form;
+	const { form: formData, enhance } = loginForm;
+
+	const forgotForm = superForm(defaults(zod4(forgotPasswordSchema)), {
+		validators: zod4Client(forgotPasswordSchema),
+		SPA: true,
+		resetForm: false,
+		onUpdate: async ({ form }) => {
+			if (form.valid) {
+				forgotLoading = true;
+				forgotError = '';
+				const { error } = await authClient.forgetPassword({
+					email: form.data.email,
+					redirectTo: '/admin/reset-password'
+				});
+				forgotLoading = false;
+
+				if (error && error.message?.includes('not enabled')) {
+					forgotError = forgotLang().email_not_configured;
+				} else {
+					// Always show success to avoid email enumeration
+					mode = 'forgot-sent';
+				}
+			}
+		}
+	});
+
+	const { form: forgotFormData, enhance: forgotEnhance } = forgotForm;
 </script>
 
-<form method="POST" use:enhance class="p-8 md:p-12" aria-label="Login form">
-	<div class="flex flex-col gap-8">
-		<!-- Logo & Header -->
-		<div class="flex flex-col items-center text-center">
-			<!-- Logo -->
-			<div
-				class="mb-6 flex h-16 w-16 items-center justify-center rounded-2xl text-white"
-				style="background: linear-gradient(135deg, #2D4A77 0%, #4975AE 100%);"
-				aria-hidden="true"
+{#if mode === 'login'}
+	<form
+		method="POST"
+		use:enhance
+		aria-label={loginLang[interfaceLanguage.current].login.form_label}
+	>
+		<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>
+				<p class="text-muted-foreground text-[14px]">
+					{loginLang[interfaceLanguage.current].login.tagline}
+				</p>
+			</div>
+
+			<!-- Email field -->
+			<div class="grid gap-2">
+				<Form.Field name="email" form={loginForm}>
+					<Form.Control>
+						{#snippet children({ props })}
+							<Form.Label>
+								{loginLang[interfaceLanguage.current].login.email}
+							</Form.Label>
+							<Input
+								{...props}
+								bind:value={$formData.email}
+								autocomplete="email"
+								type="email"
+								placeholder="m@example.com"
+								required
+								class="login-input"
+								aria-label={loginLang[interfaceLanguage.current].login.email}
+							/>
+						{/snippet}
+					</Form.Control>
+					<Form.FieldErrors class="text-destructive mt-1 text-sm" />
+				</Form.Field>
+			</div>
+
+			<!-- Password field -->
+			<div class="grid gap-2">
+				<Form.Field name="password" form={loginForm}>
+					<Form.Control>
+						{#snippet children({ props })}
+							<Form.Label>
+								{loginLang[interfaceLanguage.current].login.password}
+							</Form.Label>
+							<Input
+								{...props}
+								autocomplete="current-password"
+								bind:value={$formData.password}
+								type="password"
+								required
+								class="login-input"
+								aria-label={loginLang[interfaceLanguage.current].login.password}
+							/>
+						{/snippet}
+					</Form.Control>
+					<Form.FieldErrors class="text-destructive mt-1 text-sm" />
+				</Form.Field>
+			</div>
+
+			<!-- Submit button -->
+			<Button
+				type="submit"
+				class="mt-1 h-11 w-full text-[15px] font-semibold"
+				aria-label={loginLang[interfaceLanguage.current].login.login_button}
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					class="h-8 w-8"
+				{loginLang[interfaceLanguage.current].login.login_button}
+			</Button>
+
+			<!-- Forgot password link -->
+			<div class="text-center">
+				<button
+					type="button"
+					onclick={() => (mode = 'forgot')}
+					class="text-primary hover:text-plum-dark focus-visible:outline-ring rounded-md px-1 py-0.5 text-[13px] font-medium transition-colors hover:underline focus-visible:outline-2 focus-visible:outline-offset-2"
 				>
-					<path d="M12 2L2 7l10 5 10-5-10-5z" />
-					<path d="M2 17l10 5 10-5" />
-					<path d="M2 12l10 5 10-5" />
-				</svg>
+					{loginLang[interfaceLanguage.current].login.forgot_password}
+				</button>
 			</div>
-
-			<h1 class="text-2xl font-bold text-slate-900 dark:text-white">
-				{loginLang[interfaceLanguage.current].login.hello}
-			</h1>
-			<p class="mt-2 text-balance text-slate-600 dark:text-slate-400">
-				{loginLang[interfaceLanguage.current].login.please_login}
-			</p>
 		</div>
+	</form>
+{:else if mode === 'forgot'}
+	<form method="POST" use:forgotEnhance aria-label={forgotLang().form_label}>
+		<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>
+			</div>
+
+			<div class="text-center">
+				<h2 class="text-foreground text-lg font-semibold">{forgotLang().heading}</h2>
+				<p class="text-muted-foreground mt-1 text-[14px]">{forgotLang().description}</p>
+			</div>
 
-		<!-- Email field -->
-		<div class="grid gap-2">
-			<Form.Field name="email" {form}>
-				<Form.Control>
-					{#snippet children({ props })}
-						<Form.Label class="text-sm font-medium text-slate-700 dark:text-slate-300">
-							{loginLang[interfaceLanguage.current].login.email}
-						</Form.Label>
-						<input
-							{...props}
-							bind:value={$formData.email}
-							autocomplete="email"
-							type="email"
-							placeholder="m@example.com"
-							required
-							aria-label={loginLang[interfaceLanguage.current].login.email}
-							class="mt-2 w-full rounded-full border border-slate-200 bg-white px-6 py-4 text-slate-900 placeholder-slate-400 transition-all duration-200 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-[#2D4A77] focus:ring-offset-2 dark:border-slate-700 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500 dark:focus:ring-[#4975AE] dark:focus:ring-offset-slate-900"
-						/>
-					{/snippet}
-				</Form.Control>
-				<Form.FieldErrors class="mt-1 text-sm text-red-500" />
-			</Form.Field>
+			<!-- Email field -->
+			<div class="grid gap-2">
+				<Form.Field name="email" form={forgotForm}>
+					<Form.Control>
+						{#snippet children({ props })}
+							<Form.Label>
+								{loginLang[interfaceLanguage.current].login.email}
+							</Form.Label>
+							<Input
+								{...props}
+								bind:value={$forgotFormData.email}
+								autocomplete="email"
+								type="email"
+								placeholder="m@example.com"
+								required
+								class="login-input"
+								aria-label={loginLang[interfaceLanguage.current].login.email}
+							/>
+						{/snippet}
+					</Form.Control>
+					<Form.FieldErrors class="text-destructive mt-1 text-sm" />
+				</Form.Field>
+			</div>
+
+			{#if forgotError}
+				<p class="text-destructive text-sm">{forgotError}</p>
+			{/if}
+
+			<!-- Submit button -->
+			<Button
+				type="submit"
+				class="mt-1 h-11 w-full text-[15px] font-semibold"
+				disabled={forgotLoading}
+			>
+				{forgotLang().send_link}
+			</Button>
+
+			<!-- Back to login -->
+			<div class="text-center">
+				<button
+					type="button"
+					onclick={() => (mode = 'login')}
+					class="text-primary hover:text-plum-dark focus-visible:outline-ring rounded-md px-1 py-0.5 text-[13px] font-medium transition-colors hover:underline focus-visible:outline-2 focus-visible:outline-offset-2"
+				>
+					{forgotLang().back_to_login}
+				</button>
+			</div>
+		</div>
+	</form>
+{:else}
+	<!-- forgot-sent -->
+	<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>
 		</div>
 
-		<!-- Password field -->
-		<div class="grid gap-2">
-			<Form.Field name="password" {form}>
-				<Form.Control>
-					{#snippet children({ props })}
-						<Form.Label class="text-sm font-medium text-slate-700 dark:text-slate-300">
-							{loginLang[interfaceLanguage.current].login.password}
-						</Form.Label>
-						<input
-							{...props}
-							autocomplete="current-password"
-							bind:value={$formData.password}
-							type="password"
-							required
-							aria-label={loginLang[interfaceLanguage.current].login.password}
-							class="mt-2 w-full rounded-full border border-slate-200 bg-white px-6 py-4 text-slate-900 placeholder-slate-400 transition-all duration-200 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-[#2D4A77] focus:ring-offset-2 dark:border-slate-700 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500 dark:focus:ring-[#4975AE] dark:focus:ring-offset-slate-900"
-						/>
-					{/snippet}
-				</Form.Control>
-				<Form.FieldErrors class="mt-1 text-sm text-red-500" />
-			</Form.Field>
+		<div class="text-center">
+			<h2 class="text-foreground text-lg font-semibold">{forgotLang().sent_heading}</h2>
+			<p class="text-muted-foreground mt-2 text-[14px]">{forgotLang().sent_description}</p>
 		</div>
 
-		<!-- Submit button -->
-		<Button
-			type="submit"
-			variant="gradient"
-			size="lg"
-			class="w-full px-6 py-4 text-base font-semibold"
-			aria-label={loginLang[interfaceLanguage.current].login.login_button}
-		>
-			{loginLang[interfaceLanguage.current].login.login_button}
-		</Button>
+		<div class="text-center">
+			<button
+				type="button"
+				onclick={() => (mode = 'login')}
+				class="text-primary hover:text-plum-dark focus-visible:outline-ring rounded-md px-1 py-0.5 text-[13px] font-medium transition-colors hover:underline focus-visible:outline-2 focus-visible:outline-offset-2"
+			>
+				{forgotLang().back_to_login}
+			</button>
+		</div>
 	</div>
-</form>
+{/if}

package/dist/admin/client/login/login-form.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const LoginForm: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type LoginForm = InstanceType<typeof LoginForm>;
+declare const LoginForm: import("svelte").Component<Record<string, never>, {}, "">;
+type LoginForm = ReturnType<typeof LoginForm>;
 export default LoginForm;