includio-cms 0.1.3 → 0.5.0

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

@@ -1,107 +1,43 @@
 <script lang="ts">
-	import { cn } from '../../../utils.js';
 	import '../../styles/admin.css';
 	import LoginForm from './login-form.svelte';
+	import { loginLang } from './lang.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
 </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"
 >
-	<!-- Dark mode background -->
-	<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 md:max-w-4xl">
-		<div class={cn('flex flex-col gap-6')}>
-			<!-- Main card with glass effect -->
-			<div
-				class="grid overflow-hidden rounded-3xl border border-slate-200/50 bg-white/80 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/60 md:grid-cols-2"
-			>
-				<!-- Left: Form -->
-				<LoginForm />
-
-				<!-- Right: Gradient panel with orbs -->
-				<div
-					class="relative hidden overflow-hidden md:block"
-					style="background: linear-gradient(135deg, #2D4A77 0%, #4975AE 50%, #375C92 100%);"
-					aria-hidden="true"
-				>
-					<!-- Dot pattern overlay -->
-					<div
-						class="absolute inset-0 opacity-10"
-						style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 20px 20px;"
-					></div>
-
-					<!-- Floating orbs -->
-					<div
-						class="animate-float-slow absolute -top-10 -right-10 h-40 w-40 rounded-full bg-white/20 blur-xl"
-					></div>
-					<div
-						class="animate-float-slow absolute top-1/3 -left-5 h-32 w-32 rounded-full bg-white/15 blur-lg"
-						style="animation-delay: -3s;"
-					></div>
-					<div
-						class="animate-float-slow absolute bottom-20 right-10 h-24 w-24 rounded-full bg-white/25 blur-lg"
-						style="animation-delay: -5s;"
-					></div>
-					<div
-						class="animate-float-slow absolute bottom-1/4 left-1/3 h-16 w-16 rounded-full bg-white/20 blur-md"
-						style="animation-delay: -7s;"
-					></div>
-
-					<!-- Accent glow -->
-					<div
-						class="animate-pulse-glow absolute top-1/2 left-1/2 h-64 w-64 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/10 blur-3xl"
-					></div>
-
-					<!-- Center text/branding -->
-					<div class="absolute inset-0 flex flex-col items-center justify-center p-8 text-white">
-						<div class="mb-4 text-5xl font-bold opacity-90">includio</div>
-						<p class="text-center text-lg text-white/70">Content Management System</p>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+	{loginLang[interfaceLanguage.current].login.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>
 
-<style>
-	@keyframes float-slow {
-		0%,
-		100% {
-			transform: translateY(0px) translateX(0px);
-		}
-		25% {
-			transform: translateY(-20px) translateX(10px);
-		}
-		50% {
-			transform: translateY(-10px) translateX(-5px);
-		}
-		75% {
-			transform: translateY(-25px) translateX(5px);
-		}
-	}
-
-	@keyframes pulse-glow {
-		0%,
-		100% {
-			opacity: 0.1;
-			transform: translate(-50%, -50%) scale(1);
-		}
-		50% {
-			opacity: 0.2;
-			transform: translate(-50%, -50%) scale(1.1);
-		}
-	}
-
-	:global(.animate-float-slow) {
-		animation: float-slow 10s ease-in-out infinite;
-	}
+<!-- Main -->
+<main
+	id="main-content"
+	class="relative z-[1] flex min-h-svh flex-col items-center justify-center p-6"
+>
+	<!-- Card -->
+	<div
+		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"
+	>
+		<LoginForm />
+	</div>
 
-	:global(.animate-pulse-glow) {
-		animation: pulse-glow 4s ease-in-out infinite;
-	}
-</style>
+	<!-- Footer -->
+	<footer class="login-footer-enter mt-6 text-center">
+		<p class="text-xs text-text-light">
+			{loginLang[interfaceLanguage.current].login.footer_credit}
+		</p>
+	</footer>
+</main>

package/dist/admin/client/login/reset-password-page.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+	import '../../styles/admin.css';
+	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 Loader2 from '@tabler/icons-svelte/icons/loader-2';
+	import * as Alert from '../../../components/ui/alert/index.js';
+	import { page } from '$app/state';
+	import { loginLang } from './lang.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { authClient } from '../../auth-client.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const lang = $derived(loginLang[interfaceLanguage.current]);
+
+	const token = $derived(page.url.searchParams.get('token'));
+
+	let password = $state('');
+	let confirmPassword = $state('');
+	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.reset.passwordMinLength;
+		if (!/[A-Z]/.test(password) || !/[0-9]/.test(password) || !/[^A-Za-z0-9]/.test(password)) {
+			return lang.reset.passwordRequirements;
+		}
+		if (password !== confirmPassword) return lang.reset.password_mismatch;
+		return null;
+	}
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		const validationError = validate();
+		if (validationError) {
+			error = validationError;
+			return;
+		}
+
+		loading = true;
+		error = '';
+
+		const { error: apiError } = await authClient.resetPassword({
+			newPassword: password,
+			token: token!
+		});
+
+		if (apiError) {
+			error = lang.reset.invalid_link;
+			loading = false;
+			return;
+		}
+
+		success = true;
+	}
+</script>
+
+<!-- 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"
+>
+	{lang.login.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="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>
+			</div>
+
+			<div class="text-center">
+				<h1 class="text-lg font-semibold text-foreground">{lang.reset.heading}</h1>
+				<p class="text-muted-foreground mt-1 text-[14px]">{lang.reset.description}</p>
+			</div>
+
+			{#if success}
+				<Alert.Root variant="success" class="text-center" role="status">
+					<Alert.Description>{lang.reset.success}</Alert.Description>
+				</Alert.Root>
+				<Button href="/admin/login" class="h-11 w-full text-[15px] font-semibold">
+					{lang.reset.go_to_login}
+				</Button>
+			{:else if !token}
+				<Alert.Root variant="destructive" class="text-center">
+					<Alert.Description>{lang.reset.invalid_link}</Alert.Description>
+				</Alert.Root>
+			{:else}
+				<form onsubmit={handleSubmit} class="space-y-4" aria-label={lang.reset.form_label}>
+					<div class="space-y-2">
+						<Label for="reset-password">{lang.reset.new_password}</Label>
+						<div class="acct-input-wrap">
+							<Input
+								id="reset-password"
+								type={showPassword ? 'text' : 'password'}
+								bind:value={password}
+								required
+								minlength={8}
+								autocomplete="new-password"
+								aria-describedby="reset-pw-hint reset-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="reset-pw-strength" class="acct-strength-text {strength.level}">
+								{strengthLabelText}: {strengthLabels[strength.level]}
+							</p>
+						{/if}
+						<p id="reset-pw-hint" class="text-text-light mt-1 text-xs">
+							{lang.reset.passwordHint}
+						</p>
+					</div>
+					<div class="space-y-2">
+						<Label for="reset-confirm">{lang.reset.confirm_password}</Label>
+						<div class="acct-input-wrap">
+							<Input
+								id="reset-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" role="alert">{error}</p>
+					{/if}
+					<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}
+						{lang.reset.submit}
+					</Button>
+				</form>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Footer -->
+	<footer class="login-footer-enter mt-6 text-center">
+		<p class="text-xs text-text-light">
+			{lang.login.footer_credit}
+		</p>
+	</footer>
+</main>

package/dist/admin/client/login/reset-password-page.svelte.d.ts

@@ -0,0 +1,4 @@
+import '../../styles/admin.css';
+declare const ResetPasswordPage: import("svelte").Component<Record<string, never>, {}, "">;
+type ResetPasswordPage = ReturnType<typeof ResetPasswordPage>;
+export default ResetPasswordPage;

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

@@ -3,3 +3,18 @@ export declare const loginSchema: z.ZodObject<{
     email: z.ZodString;
     password: z.ZodString;
 }, z.core.$strip>;
+export declare const forgotPasswordSchema: z.ZodObject<{
+    email: z.ZodString;
+}, z.core.$strip>;
+export declare function createResetPasswordSchema(errors: {
+    minLength: string;
+    requirements: string;
+    mismatch: string;
+}): z.ZodObject<{
+    password: z.ZodString;
+    confirmPassword: z.ZodString;
+}, z.core.$strip>;
+export declare const resetPasswordSchema: z.ZodObject<{
+    password: z.ZodString;
+    confirmPassword: z.ZodString;
+}, z.core.$strip>;

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

@@ -1,5 +1,26 @@
 import { z } from 'zod';
+import { passwordField } from '../../shared/password-schema.js';
 export const loginSchema = z.object({
     email: z.string().email(),
     password: z.string().min(6).max(255, 'Invalid password (min 6, max 255 characters)')
 });
+export const forgotPasswordSchema = z.object({
+    email: z.string().email()
+});
+export function createResetPasswordSchema(errors) {
+    return z
+        .object({
+        password: passwordField({ minLength: errors.minLength, requirements: errors.requirements }),
+        confirmPassword: z.string().min(1)
+    })
+        .refine((data) => data.password === data.confirmPassword, {
+        message: errors.mismatch,
+        path: ['confirmPassword']
+    });
+}
+// Static schema for backward compat (English defaults)
+export const resetPasswordSchema = createResetPasswordSchema({
+    minLength: 'Password must be at least 8 characters',
+    requirements: 'Password must contain an uppercase letter, a number and a special character',
+    mismatch: 'Passwords do not match'
+});