@svadmin/ui 0.3.0 → 0.5.0

package/src/components/ProfilePage.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+  import { useGetIdentity, useUpdatePassword } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from './ui/button/index.js';
+  import { Label } from './ui/label/index.js';
+  import * as Card from './ui/card/index.js';
+  import * as Alert from './ui/alert/index.js';
+  import PasswordInput from './PasswordInput.svelte';
+  import { User, Mail, Lock, Loader2, AlertCircle, CheckCircle } from 'lucide-svelte';
+
+  const identity = useGetIdentity();
+  const updatePw = useUpdatePassword();
+
+  // Password change form
+  let currentPassword = $state('');
+  let newPassword = $state('');
+  let confirmPassword = $state('');
+  let pwError = $state('');
+  let pwSuccess = $state(false);
+
+  async function handlePasswordChange(e: SubmitEvent) {
+    e.preventDefault();
+    pwError = '';
+    pwSuccess = false;
+
+    if (!newPassword) { pwError = t('auth.passwordRequired'); return; }
+    if (newPassword !== confirmPassword) { pwError = t('auth.passwordMismatch'); return; }
+
+    const result = await updatePw.mutate({
+      password: newPassword,
+      currentPassword,
+      confirmPassword,
+    });
+    if (result.success) {
+      pwSuccess = true;
+      currentPassword = '';
+      newPassword = '';
+      confirmPassword = '';
+    } else {
+      pwError = result.error?.message ?? t('common.operationFailed');
+    }
+  }
+
+  // Avatar initials
+  const initials = $derived(
+    identity.data?.name
+      ? identity.data.name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2)
+      : '?'
+  );
+</script>
+
+<div class="max-w-2xl mx-auto space-y-6 p-4 sm:p-6">
+  <!-- Profile Info -->
+  <Card.Card>
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2">
+        <User class="h-5 w-5" />
+        {t('profile.title')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      {#if identity.isLoading}
+        <div class="flex items-center gap-2 text-muted-foreground">
+          <Loader2 class="h-4 w-4 animate-spin" />
+          {t('common.loading')}
+        </div>
+      {:else if identity.data}
+        <div class="flex items-start gap-6">
+          <!-- Avatar -->
+          <div class="shrink-0">
+            {#if identity.data.avatar}
+              <img
+                src={identity.data.avatar}
+                alt={identity.data.name ?? ''}
+                class="h-20 w-20 rounded-xl object-cover ring-2 ring-primary/20"
+              />
+            {:else}
+              <div class="h-20 w-20 rounded-xl bg-primary/10 text-primary flex items-center justify-center text-2xl font-bold">
+                {initials}
+              </div>
+            {/if}
+          </div>
+
+          <!-- Info -->
+          <div class="space-y-3 flex-1 min-w-0">
+            <div>
+              <Label class="text-xs text-muted-foreground">{t('profile.name')}</Label>
+              <p class="text-lg font-semibold truncate">{identity.data.name ?? '—'}</p>
+            </div>
+
+            {#if identity.data.email}
+              <div class="flex items-center gap-2 text-sm text-muted-foreground">
+                <Mail class="h-4 w-4 shrink-0" />
+                <span class="truncate">{identity.data.email}</span>
+              </div>
+            {/if}
+
+            {#if identity.data.id}
+              <div class="text-xs text-muted-foreground/60 font-mono">
+                ID: {identity.data.id}
+              </div>
+            {/if}
+          </div>
+        </div>
+      {:else}
+        <p class="text-sm text-muted-foreground">{t('profile.notAvailable')}</p>
+      {/if}
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Change Password -->
+  <Card.Card>
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2">
+        <Lock class="h-5 w-5" />
+        {t('profile.changePassword')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <form onsubmit={handlePasswordChange} class="space-y-4 max-w-sm">
+        {#if pwError}
+          <Alert.Root variant="destructive">
+            <AlertCircle class="h-4 w-4" />
+            <Alert.Description>{pwError}</Alert.Description>
+          </Alert.Root>
+        {/if}
+
+        {#if pwSuccess}
+          <Alert.Root class="border-green-500/30 bg-green-500/5 text-green-600 dark:text-green-400">
+            <CheckCircle class="h-4 w-4" />
+            <Alert.Description>{t('profile.passwordChanged')}</Alert.Description>
+          </Alert.Root>
+        {/if}
+
+        <PasswordInput
+          id="current-password"
+          label={t('profile.currentPassword')}
+          bind:value={currentPassword}
+          autocomplete="current-password"
+        />
+
+        <PasswordInput
+          id="new-password"
+          label={t('auth.password')}
+          bind:value={newPassword}
+          autocomplete="new-password"
+          showStrength
+        />
+
+        <PasswordInput
+          id="confirm-new-password"
+          label={t('auth.confirmPassword')}
+          bind:value={confirmPassword}
+          autocomplete="new-password"
+        />
+
+        <Button type="submit" disabled={updatePw.isLoading}>
+          {#if updatePw.isLoading}
+            <Loader2 class="h-4 w-4 animate-spin mr-2" />
+          {/if}
+          {t('profile.updatePassword')}
+        </Button>
+      </form>
+    </Card.CardContent>
+  </Card.Card>
+</div>

package/src/components/RegisterPage.svelte

@@ -4,8 +4,11 @@
   import { navigate } from '@svadmin/core/router';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
+  import { Label } from './ui/label/index.js';
   import * as Card from './ui/card/index.js';
-  import { UserPlus, Mail, Lock, Eye, EyeOff } from 'lucide-svelte';
+  import * as Alert from './ui/alert/index.js';
+  import PasswordInput from './PasswordInput.svelte';
+  import { UserPlus, Mail, Loader2, AlertCircle } from 'lucide-svelte';
 
   let { title = 'Admin', onSuccess } = $props<{
     title?: string;
@@ -17,7 +20,6 @@
   let email = $state('');
   let password = $state('');
   let confirmPassword = $state('');
-  let showPassword = $state(false);
   let error = $state('');
 
   async function handleSubmit(e: SubmitEvent) {
@@ -37,11 +39,11 @@
   }
 </script>
 
-<div class="register-page">
-  <div class="register-container">
-    <Card.Card class="login-card">
-      <Card.CardHeader class="login-header">
-        <div class="register-icon">
+<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/[0.08] via-background to-primary/[0.04] p-4">
+  <div class="w-full max-w-[420px]">
+    <Card.Card class="backdrop-blur-xl border-border/50 shadow-[0_8px_32px_hsl(var(--primary)/0.08),0_2px_8px_hsl(0_0%_0%/0.06)]">
+      <Card.CardHeader class="text-center pb-2">
+        <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10 text-primary mx-auto mb-3">
           <UserPlus class="h-6 w-6" />
         </div>
         <Card.CardTitle class="text-2xl font-bold">{t('auth.createAccount')}</Card.CardTitle>
@@ -50,15 +52,16 @@
       <Card.CardContent>
         <form onsubmit={handleSubmit} class="space-y-4">
           {#if error}
-            <div class="error-alert">
-              <p>{error}</p>
-            </div>
+            <Alert.Root variant="destructive">
+              <AlertCircle class="h-4 w-4" />
+              <Alert.Description>{error}</Alert.Description>
+            </Alert.Root>
           {/if}
 
           <div class="space-y-2">
-            <label for="register-email" class="text-sm font-medium text-foreground">{t('auth.email')}</label>
-            <div class="input-with-icon">
-              <Mail class="input-icon h-4 w-4" />
+            <Label for="register-email">{t('auth.email')}</Label>
+            <div class="relative">
+              <Mail class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
               <Input
                 id="register-email"
                 type="email"
@@ -70,63 +73,34 @@
             </div>
           </div>
 
-          <div class="space-y-2">
-            <label for="register-password" class="text-sm font-medium text-foreground">{t('auth.password')}</label>
-            <div class="input-with-icon">
-              <Lock class="input-icon h-4 w-4" />
-              <Input
-                id="register-password"
-                type={showPassword ? 'text' : 'password'}
-                placeholder="••••••••"
-                bind:value={password}
-                class="pl-9 pr-9"
-                autocomplete="new-password"
-              />
-              <button
-                type="button"
-                class="password-toggle"
-                onclick={() => showPassword = !showPassword}
-                tabindex={-1}
-              >
-                {#if showPassword}
-                  <EyeOff class="h-4 w-4" />
-                {:else}
-                  <Eye class="h-4 w-4" />
-                {/if}
-              </button>
-            </div>
-          </div>
-
-          <div class="space-y-2">
-            <label for="register-confirm" class="text-sm font-medium text-foreground">{t('auth.confirmPassword')}</label>
-            <div class="input-with-icon">
-              <Lock class="input-icon h-4 w-4" />
-              <Input
-                id="register-confirm"
-                type={showPassword ? 'text' : 'password'}
-                placeholder="••••••••"
-                bind:value={confirmPassword}
-                class="pl-9"
-                autocomplete="new-password"
-              />
-            </div>
-          </div>
+          <PasswordInput
+            id="register-password"
+            label={t('auth.password')}
+            bind:value={password}
+            autocomplete="new-password"
+            showStrength
+          />
+
+          <PasswordInput
+            id="register-confirm"
+            label={t('auth.confirmPassword')}
+            bind:value={confirmPassword}
+            autocomplete="new-password"
+          />
 
           <Button type="submit" class="w-full" disabled={register.isLoading}>
             {#if register.isLoading}
-              <span class="loading-spinner"></span>
+              <Loader2 class="h-4 w-4 animate-spin mr-2" />
             {/if}
             {t('auth.registerButton')}
           </Button>
         </form>
 
-        <div class="auth-link">
+        <div class="flex items-center justify-center gap-1 mt-5 pt-5 border-t">
           <span class="text-sm text-muted-foreground">{t('auth.hasAccount')}</span>
-          <button
-            type="button"
-            class="text-sm text-primary hover:underline font-medium"
-            onclick={() => navigate('/login')}
-          >{t('auth.login')}</button>
+          <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => navigate('/login')}>
+            {t('auth.login')}
+          </Button>
         </div>
       </Card.CardContent>
     </Card.Card>
@@ -136,106 +110,3 @@
     </p>
   </div>
 </div>
-
-<style>
-  .register-page {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(135deg, hsl(var(--primary) / 0.08) 0%, hsl(var(--background)) 50%, hsl(var(--primary) / 0.04) 100%);
-    padding: 1rem;
-  }
-
-  .register-container {
-    width: 100%;
-    max-width: 420px;
-  }
-
-  .register-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    border-radius: 12px;
-    background: hsl(var(--primary) / 0.1);
-    color: hsl(var(--primary));
-    margin: 0 auto 0.75rem;
-  }
-
-  :global(.login-card) {
-    backdrop-filter: blur(20px);
-    border: 1px solid hsl(var(--border) / 0.5);
-    box-shadow: 0 8px 32px hsl(var(--primary) / 0.08), 0 2px 8px hsl(0 0% 0% / 0.06);
-  }
-
-  :global(.login-header) {
-    text-align: center;
-    padding-bottom: 0.5rem;
-  }
-
-  .input-with-icon {
-    position: relative;
-  }
-
-  :global(.input-icon) {
-    position: absolute;
-    left: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: hsl(var(--muted-foreground));
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  .password-toggle {
-    position: absolute;
-    right: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: hsl(var(--muted-foreground));
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 2px;
-    z-index: 1;
-  }
-  .password-toggle:hover {
-    color: hsl(var(--foreground));
-  }
-
-  .error-alert {
-    padding: 0.75rem;
-    border-radius: 0.5rem;
-    background: hsl(var(--destructive) / 0.1);
-    border: 1px solid hsl(var(--destructive) / 0.3);
-    color: hsl(var(--destructive));
-    font-size: 0.875rem;
-  }
-
-  .loading-spinner {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    border: 2px solid transparent;
-    border-top-color: currentColor;
-    border-radius: 50%;
-    animation: spin 0.6s linear infinite;
-    margin-right: 0.5rem;
-  }
-
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-
-  .auth-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.25rem;
-    margin-top: 1.25rem;
-    padding-top: 1.25rem;
-    border-top: 1px solid hsl(var(--border));
-  }
-</style>

package/src/components/ShowPage.svelte

@@ -5,7 +5,10 @@
   import { t, getLocale } from '@svadmin/core/i18n';
   import { Button } from './ui/button/index.js';
   import * as Card from './ui/card/index.js';
-  import { ArrowLeft, Pencil, Loader2 } from 'lucide-svelte';
+  import { Skeleton } from './ui/skeleton/index.js';
+  import PageHeader from './PageHeader.svelte';
+  import { getDisplayComponent } from './fieldComponentMap';
+  import { Pencil } from 'lucide-svelte';
 
   let { resourceName, id } = $props<{ resourceName: string; id: string | number }>();
 
@@ -13,54 +16,50 @@
   const showFields = resource.fields.filter(f => f.showInShow !== false);
 
   const query = useShow({ resource: resourceName, id });
-
-  function formatValue(field: FieldDefinition, value: unknown): string {
-    if (value == null) return '—';
-    if (field.type === 'boolean') return value ? t('common.yes') : t('common.no');
-    if (field.type === 'date') return new Date(value as string).toLocaleDateString(getLocale());
-    if (field.type === 'json') return JSON.stringify(value, null, 2);
-    if (field.type === 'tags' && Array.isArray(value)) return (value as string[]).join(', ');
-    if (field.type === 'select' && field.options) {
-      const opt = field.options.find(o => o.value === value);
-      return opt?.label ?? String(value);
-    }
-    return String(value);
-  }
 </script>
 
 <div class="space-y-6">
-  <div class="flex items-center justify-between">
-    <div class="flex items-center gap-4">
+  <PageHeader title="{resource.label} {t('common.detail')}">
+    {#snippet actions()}
       <Button variant="ghost" size="icon" onclick={() => navigate(`/${resourceName}`)}>
-        <ArrowLeft class="h-5 w-5" />
-      </Button>
-      <h1 class="text-2xl font-bold text-foreground">{resource.label} {t('common.detail')}</h1>
-    </div>
-    {#if resource.canEdit !== false}
-      <Button onclick={() => navigate(`/${resourceName}/edit/${id}`)}>
-        <Pencil class="h-4 w-4" data-icon="inline-start" /> {t('common.edit')}
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
       </Button>
-    {/if}
-  </div>
+      {#if resource.canEdit !== false}
+        <Button onclick={() => navigate(`/${resourceName}/edit/${id}`)}>
+          <Pencil class="h-4 w-4" data-icon="inline-start" /> {t('common.edit')}
+        </Button>
+      {/if}
+    {/snippet}
+  </PageHeader>
 
   {#if query.query.isLoading}
-    <div class="flex h-64 items-center justify-center">
-      <Loader2 class="h-6 w-6 animate-spin text-primary" />
-    </div>
+    <Card.Root>
+      <Card.Content class="divide-y divide-border p-0">
+        {#each showFields.slice(0, 6) as _}
+          <div class="flex px-6 py-4">
+            <Skeleton class="h-4 w-1/4" />
+            <Skeleton class="h-4 w-2/5 ml-auto" />
+          </div>
+        {/each}
+      </Card.Content>
+    </Card.Root>
   {:else if query.query.data?.data}
     <Card.Root>
       <Card.Content class="divide-y divide-border p-0">
         {#each showFields as field}
           {@const value = (query.query.data!.data as Record<string, unknown>)[field.key]}
+          {@const DisplayComponent = getDisplayComponent(field.type)}
           <div class="flex px-6 py-4">
             <div class="w-1/3 text-sm font-medium text-muted-foreground">{field.label}</div>
             <div class="w-2/3 text-sm text-foreground">
-              {#if field.type === 'image' && value}
-                <img src={value as string} alt={field.label} class="h-20 w-20 rounded-lg object-cover" />
-              {:else if field.type === 'json' && value}
-                <pre class="rounded-lg bg-muted p-3 text-xs overflow-auto max-h-40">{formatValue(field, value)}</pre>
+              {#if DisplayComponent && value != null}
+                <DisplayComponent
+                  {value}
+                  options={field.options}
+                  resourceName={field.resource}
+                />
               {:else}
-                {formatValue(field, value)}
+                {value != null ? String(value) : '—'}
               {/if}
             </div>
           </div>