includio-cms 0.1.4 → 0.5.0

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

@@ -1,7 +1,8 @@
 export const usersLang = {
     en: {
         title: 'Users',
-        name: 'Name',
+        description: 'Manage team members and their permissions.',
+        name: 'Full name',
         email: 'Email',
         role: 'Role',
         createdAt: 'Created At',
@@ -13,17 +14,36 @@ export const usersLang = {
         save: 'Save',
         cancel: 'Cancel',
         password: 'Password',
-        roleAdmin: 'Admin',
+        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',
+        passwordMismatch: 'Passwords do not match',
+        roleAdmin: 'Administrator',
         roleUser: 'User',
+        roleHint: 'Administrators have full access to the panel and all settings.',
         deleteConfirmTitle: 'Delete user?',
         deleteConfirmDescription: 'This action cannot be undone. The user will be permanently deleted.',
+        deleteWarningTitle: 'This action cannot be undone',
+        deleteWarningDesc: (name) => `User <strong>${name}</strong> will be permanently deleted along with all their data.`,
+        deleteConfirmType: 'Type <strong>DELETE</strong> to confirm',
+        deleteConfirmWord: 'DELETE',
         userCreated: 'User created',
         userUpdated: 'User updated',
         userDeleted: 'User deleted',
         cannotDeleteSelf: 'You cannot delete your own account',
         cannotChangeSelfRole: 'You cannot change your own role',
         noResults: 'No users found',
-        generatePassword: 'Generate password',
+        generatePassword: 'Generate',
+        filterByRole: 'Filter by role',
+        allRoles: 'All roles',
+        showing: (start, end, total) => `Showing ${start}–${end} of ${total}`,
+        selected: (n) => `${n} selected`,
+        changeRole: 'Change role',
+        emptyTitle: 'No users yet',
+        emptyDescription: 'Create your first user to start managing your team.',
+        addUser: 'Add user',
+        selectAll: 'Select all',
+        selectUser: 'Select user',
         sessions: {
             title: 'User Sessions',
             noSessions: 'No active sessions',
@@ -48,16 +68,24 @@ export const usersLang = {
             acceptDescription: 'Set up your account to get started.',
             confirmPassword: 'Confirm password',
             acceptInvite: 'Create Account',
-            accepted: 'Account created! Redirecting to login...',
+            accepted: 'Account created!',
+            goToLogin: 'Go to login',
             invalidToken: 'Invalid or expired invitation link',
             emailConfigRequired: 'Email adapter not configured',
             resend: 'Resend',
-            resent: 'Invitation resent'
+            resent: 'Invitation resent',
+            emailPlaceholder: 'john@company.com',
+            emailHint: 'The user will receive an email with a link to create their account.',
+            roleHint: 'You can change the role later.',
+            expiringSoon: 'Expiring soon',
+            resendLabel: (email) => `Resend invitation to ${email}`,
+            cancelLabel: (email) => `Cancel invitation for ${email}`
         }
     },
     pl: {
         title: 'Użytkownicy',
-        name: 'Imię',
+        description: 'Zarządzaj członkami zespołu i ich uprawnieniami.',
+        name: 'Imię i nazwisko',
         email: 'E-mail',
         role: 'Rola',
         createdAt: 'Utworzono',
@@ -69,17 +97,36 @@ export const usersLang = {
         save: 'Zapisz',
         cancel: 'Anuluj',
         password: 'Hasło',
-        roleAdmin: 'Admin',
+        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',
+        passwordMismatch: 'Hasła nie są zgodne',
+        roleAdmin: 'Administrator',
         roleUser: 'Użytkownik',
+        roleHint: 'Administratorzy mają pełen dostęp do panelu i wszystkich ustawień.',
         deleteConfirmTitle: 'Usunąć użytkownika?',
         deleteConfirmDescription: 'Ta akcja jest nieodwracalna. Użytkownik zostanie trwale usunięty.',
+        deleteWarningTitle: 'Tej operacji nie można cofnąć',
+        deleteWarningDesc: (name) => `Użytkownik <strong>${name}</strong> zostanie trwale usunięty wraz ze wszystkimi danymi.`,
+        deleteConfirmType: 'Wpisz <strong>USUŃ</strong>, żeby potwierdzić',
+        deleteConfirmWord: 'USUŃ',
         userCreated: 'Użytkownik utworzony',
         userUpdated: 'Użytkownik zaktualizowany',
         userDeleted: 'Użytkownik usunięty',
         cannotDeleteSelf: 'Nie możesz usunąć swojego konta',
         cannotChangeSelfRole: 'Nie możesz zmienić swojej roli',
         noResults: 'Nie znaleziono użytkowników',
-        generatePassword: 'Wygeneruj hasło',
+        generatePassword: 'Generuj',
+        filterByRole: 'Filtruj po roli',
+        allRoles: 'Wszystkie role',
+        showing: (start, end, total) => `Wyświetlono ${start}–${end} z ${total}`,
+        selected: (n) => `Zaznaczono: ${n}`,
+        changeRole: 'Zmień rolę',
+        emptyTitle: 'Brak użytkowników',
+        emptyDescription: 'Utwórz pierwszego użytkownika, żeby zacząć zarządzać zespołem.',
+        addUser: 'Dodaj użytkownika',
+        selectAll: 'Zaznacz wszystkich',
+        selectUser: 'Zaznacz użytkownika',
         sessions: {
             title: 'Sesje użytkownika',
             noSessions: 'Brak aktywnych sesji',
@@ -104,11 +151,18 @@ export const usersLang = {
             acceptDescription: 'Skonfiguruj swoje konto, aby rozpocząć.',
             confirmPassword: 'Potwierdź hasło',
             acceptInvite: 'Utwórz konto',
-            accepted: 'Konto utworzone! Przekierowywanie do logowania...',
+            accepted: 'Konto utworzone!',
+            goToLogin: 'Przejdź do logowania',
             invalidToken: 'Nieprawidłowy lub wygasły link zaproszenia',
             emailConfigRequired: 'Adapter e-mail nie jest skonfigurowany',
             resend: 'Wyślij ponownie',
-            resent: 'Zaproszenie wysłane ponownie'
+            resent: 'Zaproszenie wysłane ponownie',
+            emailPlaceholder: 'jan@firma.pl',
+            emailHint: 'Użytkownik otrzyma e-mail z linkiem do utworzenia konta.',
+            roleHint: 'Możesz zmienić rolę później.',
+            expiringSoon: 'Wygasa wkrótce',
+            resendLabel: (email) => `Wyślij ponownie zaproszenie do ${email}`,
+            cancelLabel: (email) => `Anuluj zaproszenie dla ${email}`
         }
     }
 };

package/dist/admin/client/users/pending-invitations.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import * as Table from '../../../components/ui/table/index.js';
-	import { Badge } from '../../../components/ui/badge/index.js';
 	import Button from '../../../components/ui/button/button.svelte';
 	import Loader2 from '@tabler/icons-svelte/icons/loader-2';
-	import Trash from '@tabler/icons-svelte/icons/trash';
-	import Send from '@tabler/icons-svelte/icons/send';
+	import Refresh from '@tabler/icons-svelte/icons/refresh';
+	import X from '@tabler/icons-svelte/icons/x';
 	import { toast } from 'svelte-sonner';
 	import { usersLang } from './lang.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { toLocaleCode } from '../../utils/formatDate.js';
+	import { getRoleLabel } from '../../utils/roleLabel.js';
 
 	type Props = {
 		refreshTrigger?: number;
@@ -30,6 +30,12 @@
 	let invitations = $state<Invitation[]>([]);
 	let loading = $state(true);
 
+	const EXPIRING_SOON_MS = 48 * 60 * 60 * 1000;
+
+	function isExpiringSoon(expiresAt: string): boolean {
+		return new Date(expiresAt).getTime() - Date.now() < EXPIRING_SOON_MS;
+	}
+
 	$effect(() => {
 		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
 		refreshTrigger;
@@ -52,7 +58,7 @@
 		const res = await fetch('/admin/api/invite', {
 			method: 'PATCH',
 			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ id })
+			body: JSON.stringify({ id, lang: interfaceLanguage.current })
 		});
 
 		if (res.ok) {
@@ -85,54 +91,84 @@
 	}
 </script>
 
-<div class="mt-8">
-	<h2 class="mb-4 text-lg font-semibold">{lang.invite.pendingInvitations}</h2>
+<section class="mt-10 users-fade-up" aria-labelledby="invitations-heading">
+	<div class="mb-4 flex items-center gap-2.5">
+		<h2 id="invitations-heading" class="text-lg font-semibold">{lang.invite.pendingInvitations}</h2>
+		{#if !loading && invitations.length > 0}
+			<span
+				class="inline-flex items-center justify-center rounded-full px-2 py-0.5 text-[11px] font-bold"
+				style="background: var(--warning-bg); color: var(--warning);"
+			>
+				{invitations.length}
+			</span>
+		{/if}
+	</div>
 
 	{#if loading}
 		<div class="flex items-center justify-center py-8">
-			<Loader2 class="text-muted-foreground size-6 animate-spin" />
+			<Loader2 class="size-6 animate-spin" style="color: var(--muted-foreground);" />
 		</div>
 	{:else if invitations.length === 0}
-		<p class="text-muted-foreground py-4 text-center text-sm">{lang.invite.noPending}</p>
+		<p class="py-4 text-center text-sm" style="color: var(--muted-foreground);">
+			{lang.invite.noPending}
+		</p>
 	{:else}
-		<div class="overflow-hidden rounded-2xl border">
+		<div class="overflow-hidden rounded-xl border bg-card shadow-sm">
 			<Table.Root>
 				<Table.Header>
-					<Table.Row>
+					<Table.Row class="bg-muted/50">
 						<Table.Head>{lang.email}</Table.Head>
 						<Table.Head>{lang.role}</Table.Head>
 						<Table.Head>{lang.invite.expires}</Table.Head>
-						<Table.Head class="text-right">{lang.actions}</Table.Head>
+						<Table.Head class="w-[100px]">
+							<span class="sr-only">{lang.actions}</span>
+						</Table.Head>
 					</Table.Row>
 				</Table.Header>
 				<Table.Body>
 					{#each invitations as inv (inv.id)}
-						<Table.Row>
-							<Table.Cell>{inv.email}</Table.Cell>
+						<Table.Row class="transition-colors hover:bg-[var(--lavender-lighter)]">
+							<Table.Cell class="font-medium">{inv.email}</Table.Cell>
 							<Table.Cell>
-								<Badge variant={inv.role === 'admin' ? 'default' : 'secondary'}>
-									{inv.role === 'admin' ? lang.roleAdmin : lang.roleUser}
-								</Badge>
+								<span
+									class="users-role-badge"
+									class:users-role-admin={inv.role === 'admin'}
+									class:users-role-user={inv.role !== 'admin'}
+								>
+									{getRoleLabel(inv.role, interfaceLanguage.current)}
+								</span>
 							</Table.Cell>
-							<Table.Cell>{formatDate(inv.expiresAt)}</Table.Cell>
-							<Table.Cell class="text-right">
-								<div class="flex items-center justify-end gap-1">
+							<Table.Cell>
+								<span
+									class="text-xs"
+									class:users-expiring-soon={isExpiringSoon(inv.expiresAt)}
+									style={isExpiringSoon(inv.expiresAt) ? '' : 'color: var(--muted-foreground);'}
+								>
+									{formatDate(inv.expiresAt)}
+									{#if isExpiringSoon(inv.expiresAt)}
+										— {lang.invite.expiringSoon}
+									{/if}
+								</span>
+							</Table.Cell>
+							<Table.Cell>
+								<div class="flex items-center justify-end gap-0.5">
 									<Button
 										variant="ghost"
 										size="icon"
 										class="h-8 w-8"
-										title={lang.invite.resend}
 										onclick={() => resendInvitation(inv.id)}
+										aria-label={lang.invite.resendLabel(inv.email)}
 									>
-										<Send class="size-4" />
+										<Refresh class="size-4" />
 									</Button>
 									<Button
 										variant="ghost"
 										size="icon"
 										class="text-destructive h-8 w-8"
 										onclick={() => cancelInvitation(inv.id)}
+										aria-label={lang.invite.cancelLabel(inv.email)}
 									>
-										<Trash class="size-4" />
+										<X class="size-4" />
 									</Button>
 								</div>
 							</Table.Cell>
@@ -142,4 +178,4 @@
 			</Table.Root>
 		</div>
 	{/if}
-</div>
+</section>