@svadmin/ui 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -40,7 +40,8 @@
   "author": "zuohuadong",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/zuohuadong/svadmin.git"
+    "url": "https://github.com/zuohuadong/svadmin.git",
+    "directory": "packages/ui"
   },
   "homepage": "https://github.com/zuohuadong/svadmin#readme",
   "bugs": {

package/src/components/CanAccess.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { canAccess } from '@svadmin/core/permissions';
-  import type { Action } from '@svadmin/core/permissions';
+  import { useCan } from '@svadmin/core';
+  import type { Action } from '@svadmin/core';
 
   let { resource, action, params, children, fallback } = $props<{
     resource: string;
@@ -11,10 +11,12 @@
     fallback?: Snippet;
   }>();
 
-  const result = $derived(canAccess(resource, action, params));
+  const can = $derived(useCan(resource, action, params));
 </script>
 
-{#if result.can}
+{#if can.isLoading}
+  <!-- Loading: nothing rendered -->
+{:else if can.allowed}
   {@render children()}
 {:else if fallback}
   {@render fallback()}

package/src/components/LoginPage.svelte

@@ -8,11 +8,34 @@
   import * as Card from './ui/card/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
+  import { Separator } from './ui/separator/index.js';
   import { LogIn, Mail, Loader2, AlertCircle } from 'lucide-svelte';
 
-  let { title = 'Admin', onSuccess } = $props<{
+  /**
+   * Social provider config for the login page.
+   * Each entry renders a button that calls `onClick()` when clicked.
+   *
+   * @example
+   * ```ts
+   * const socialProviders = [
+   *   { name: 'Google', icon: '🔵', onClick: () => googleAuth.login({}) },
+   *   { name: 'GitHub', icon: '🐙', onClick: () => githubAuth.login({}) },
+   * ];
+   * ```
+   */
+  interface SocialProvider {
+    /** Display name (e.g., 'Google') */
+    name: string;
+    /** Icon character, emoji, or SVG string */
+    icon?: string;
+    /** Handler to initiate social login */
+    onClick: () => void | Promise<void>;
+  }
+
+  let { title = 'Admin', onSuccess, socialProviders = [] } = $props<{
     title?: string;
     onSuccess?: () => void;
+    socialProviders?: SocialProvider[];
   }>();
 
   const login = useLogin();
@@ -97,6 +120,30 @@
           </Button>
         </form>
 
+        {#if socialProviders.length > 0}
+          <div class="relative my-5">
+            <Separator />
+            <span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-xs text-muted-foreground">
+              {t('auth.orContinueWith')}
+            </span>
+          </div>
+
+          <div class="grid gap-2" class:grid-cols-2={socialProviders.length >= 2}>
+            {#each socialProviders as provider (provider.name)}
+              <Button
+                variant="outline"
+                class="w-full"
+                onclick={provider.onClick}
+              >
+                {#if provider.icon}
+                  <span class="mr-2">{provider.icon}</span>
+                {/if}
+                {provider.name}
+              </Button>
+            {/each}
+          </div>
+        {/if}
+
         {#if authProvider.register}
           <div class="flex items-center justify-center gap-1 mt-5 pt-5 border-t">
             <span class="text-sm text-muted-foreground">{t('auth.noAccount')}</span>

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/index.ts

@@ -28,6 +28,7 @@ export { default as DrawerForm } from './components/DrawerForm.svelte';
 export { default as DevTools } from './components/DevTools.svelte';
 export { default as Authenticated } from './components/Authenticated.svelte';
 export { default as UpdatePasswordPage } from './components/UpdatePasswordPage.svelte';
+export { default as ProfilePage } from './components/ProfilePage.svelte';
 export { default as ConfigErrorScreen } from './components/ConfigErrorScreen.svelte';
 export { default as InferencerPanel } from './components/InferencerPanel.svelte';
 export { default as LiveIndicator } from './components/LiveIndicator.svelte';