@svadmin/ui 0.0.2 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.0.2",
+  "version": "0.0.6",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -21,7 +21,7 @@
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@svadmin/core": "0.1.0",
+    "@svadmin/core": "0.0.5",
     "bits-ui": "^2.0.0",
     "tailwind-variants": "^3.0.0",
     "clsx": "^2.0.0",

package/src/components/AdminApp.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode } from '@svadmin/core';
-  import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme } from '@svadmin/core';
+  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider } from '@svadmin/core';
+  import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, getAuthProvider, createHashRouterProvider } from '@svadmin/core';
   import { navigate } from '@svadmin/core/router';
   import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
   import Layout from './Layout.svelte';
@@ -9,11 +9,18 @@
   import AutoForm from './AutoForm.svelte';
   import ShowPage from './ShowPage.svelte';
   import Toast from './Toast.svelte';
+  import LoginPage from './LoginPage.svelte';
+  import RegisterPage from './RegisterPage.svelte';
+  import ForgotPasswordPage from './ForgotPasswordPage.svelte';
+  import UpdatePasswordPage from './UpdatePasswordPage.svelte';
+  import ConfigErrorScreen from './ConfigErrorScreen.svelte';
+  import DevTools from './DevTools.svelte';
   import { initRouter, getRoute, getParams } from '../router-state.svelte.js';
 
   interface Props {
     dataProvider: DataProvider;
     authProvider?: AuthProvider;
+    routerProvider?: RouterProvider;
     resources: ResourceDefinition[];
     locale?: string;
     title?: string;
@@ -25,6 +32,7 @@
   let {
     dataProvider,
     authProvider,
+    routerProvider,
     resources,
     locale,
     title = 'Admin',
@@ -33,10 +41,14 @@
     loginPage,
   }: Props = $props();
 
+  // Resolve router provider (default to hash)
+  const resolvedRouter = routerProvider ?? createHashRouterProvider();
+
   // Set up context
   setDataProvider(dataProvider);
   if (authProvider) setAuthProvider(authProvider);
   setResources(resources);
+  setRouterProvider(resolvedRouter);
   if (locale) setLocale(locale);
   if (defaultTheme) setTheme(defaultTheme);
 
@@ -46,23 +58,27 @@
     },
   });
 
-  // Initialize hash router
-  initRouter();
+  // Initialize router with provider
+  initRouter(resolvedRouter);
 
   // Reactive getters for route state
   const route = $derived(getRoute());
   const params = $derived(getParams());
 
   // Auth check
-  let isAuthenticated = $state(!authProvider);
-  let authChecked = $state(!authProvider);
+  let isAuthenticated = $state(false);
+  let authChecked = $state(false);
 
   $effect(() => {
-    if (!authProvider) return;
+    if (!authProvider) {
+      isAuthenticated = true;
+      authChecked = true;
+      return;
+    }
     authProvider.check().then(result => {
       isAuthenticated = result.authenticated;
       authChecked = true;
-      if (!result.authenticated && route !== '/login') {
+      if (!result.authenticated && route !== '/login' && route !== '/register' && route !== '/forgot-password' && route !== '/update-password') {
         navigate(result.redirectTo ?? '/login');
       }
     });
@@ -76,13 +92,16 @@
     </div>
   {:else if route === '/login' && loginPage}
     {@render loginPage()}
-  {:else if route === '/login'}
-    <div class="flex min-h-screen items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
-      <div class="w-full max-w-sm rounded-2xl bg-white p-8 shadow-xl text-center">
-        <h1 class="text-xl font-bold text-gray-900">{title}</h1>
-        <p class="mt-2 text-sm text-gray-500">Please configure a loginPage snippet or authProvider.</p>
-      </div>
-    </div>
+  {:else if route === '/login' && authProvider}
+    <LoginPage {title} onSuccess={() => { isAuthenticated = true; navigate('/'); }} />
+  {:else if route === '/register' && authProvider?.register}
+    <RegisterPage {title} />
+  {:else if route === '/forgot-password' && authProvider?.forgotPassword}
+    <ForgotPasswordPage {title} />
+  {:else if route === '/update-password' && authProvider?.updatePassword}
+    <UpdatePasswordPage {title} />
+  {:else if route === '/login' || route === '/register' || route === '/forgot-password' || route === '/update-password'}
+    <ConfigErrorScreen title="{title} — Configuration Required" />
   {:else if isAuthenticated || !authProvider}
     <Layout {title}>
       {#if route === '/'}
@@ -118,4 +137,5 @@
     </div>
   {/if}
   <Toast />
+  <DevTools />
 </QueryClientProvider>

package/src/components/Authenticated.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { useIsAuthenticated } from '@svadmin/core';
+
+  let { children, fallback, loading } = $props<{
+    children: Snippet;
+    fallback?: Snippet;
+    loading?: Snippet;
+  }>();
+
+  const auth = useIsAuthenticated();
+</script>
+
+{#if auth.isLoading}
+  {#if loading}
+    {@render loading()}
+  {:else}
+    <div class="flex items-center justify-center min-h-[200px]">
+      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+    </div>
+  {/if}
+{:else if auth.isAuthenticated}
+  {@render children()}
+{:else if fallback}
+  {@render fallback()}
+{/if}

package/src/components/AutoForm.svelte

@@ -34,6 +34,7 @@
 
   // Form state
   let formData = $state<Record<string, unknown>>({});
+  let fieldErrors = $state<Record<string, string>>({});
   let submitting = $state(false);
   let error = $state<string | null>(null);
   let initialized = $state(false);
@@ -84,10 +85,36 @@
   const createMut = useCreate(resourceName);
   const updateMut = useUpdate(resourceName);
 
+  function validateFields(): boolean {
+    const errors: Record<string, string> = {};
+    for (const field of formFields) {
+      const value = formData[field.key];
+      // Required check
+      if (field.required) {
+        if (value === undefined || value === null || value === '') {
+          errors[field.key] = t('validation.required');
+          continue;
+        }
+      }
+      // Custom per-field validator
+      if (field.validate) {
+        const msg = field.validate(value);
+        if (msg) { errors[field.key] = msg; }
+      }
+    }
+    fieldErrors = errors;
+    return Object.keys(errors).length === 0;
+  }
+
   async function handleSubmit() {
     submitting = true;
     error = null;
 
+    if (!validateFields()) {
+      submitting = false;
+      return;
+    }
+
     try {
       const cleanData: Record<string, unknown> = {};
       for (const field of formFields) {
@@ -115,6 +142,12 @@
   function handleFieldChange(key: string, val: unknown) {
     formData[key] = val;
     isDirty = true;
+    // Clear field error when user starts typing
+    if (fieldErrors[key]) {
+      const next = { ...fieldErrors };
+      delete next[key];
+      fieldErrors = next;
+    }
   }
 
   const isLoading = $derived(mode === 'edit' && existingQuery ? existingQuery?.isLoading : false);
@@ -158,11 +191,16 @@
       <Card.Root>
         <Card.Content class="space-y-5">
           {#each formFields as field (field.key)}
-            <FieldRenderer
-              {field}
-              value={formData[field.key]}
-              onchange={(val: unknown) => handleFieldChange(field.key, val)}
-            />
+            <div class="field-wrapper" class:has-error={fieldErrors[field.key]}>
+              <FieldRenderer
+                {field}
+                value={formData[field.key]}
+                onchange={(val: unknown) => handleFieldChange(field.key, val)}
+              />
+              {#if fieldErrors[field.key]}
+                <p class="field-error">{fieldErrors[field.key]}</p>
+              {/if}
+            </div>
           {/each}
         </Card.Content>
       </Card.Root>
@@ -190,3 +228,17 @@
     </form>
   {/if}
 </div>
+
+<style>
+  .field-error {
+    color: hsl(var(--destructive));
+    font-size: 0.8125rem;
+    margin-top: 0.25rem;
+  }
+
+  .field-wrapper.has-error :global(input),
+  .field-wrapper.has-error :global(textarea),
+  .field-wrapper.has-error :global(select) {
+    border-color: hsl(var(--destructive));
+  }
+</style>

package/src/components/CanAccess.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { canAccess } from '@svadmin/core/permissions';
+  import type { Action } from '@svadmin/core/permissions';
+
+  let { resource, action, params, children, fallback } = $props<{
+    resource: string;
+    action: Action;
+    params?: Record<string, unknown>;
+    children: Snippet;
+    fallback?: Snippet;
+  }>();
+
+  const result = $derived(canAccess(resource, action, params));
+</script>
+
+{#if result.can}
+  {@render children()}
+{:else if fallback}
+  {@render fallback()}
+{/if}

package/src/components/ConfigErrorScreen.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { AlertTriangle, Copy, CheckCircle } from 'lucide-svelte';
+  import { Button } from './ui/button/index.js';
+  import * as Card from './ui/card/index.js';
+
+  let { title = 'Configuration Required', missingVars = [], envTemplate = '' } = $props<{
+    title?: string;
+    missingVars?: { key: string; description?: string }[];
+    envTemplate?: string;
+  }>();
+
+  let copied = $state<Record<string, boolean>>({});
+
+  async function copyToClipboard(text: string, key: string) {
+    try {
+      await navigator.clipboard.writeText(text);
+      copied = { ...copied, [key]: true };
+      setTimeout(() => {
+        copied = { ...copied, [key]: false };
+      }, 2000);
+    } catch {
+      console.warn('[svadmin] clipboard API unavailable');
+    }
+  }
+
+  async function copyAll() {
+    const text = envTemplate || missingVars.map((v: { key: string }) => `${v.key}=`).join('\n');
+    await copyToClipboard(text, '__all__');
+  }
+</script>
+
+<div class="config-error-page">
+  <div class="config-error-container">
+    <Card.Card class="config-error-card">
+      <Card.CardHeader class="config-error-header">
+        <div class="config-error-icon">
+          <AlertTriangle class="h-7 w-7" />
+        </div>
+        <Card.CardTitle class="text-xl font-bold">{title}</Card.CardTitle>
+        <p class="text-sm text-muted-foreground">
+          {t('config.missingEnvDescription')}
+        </p>
+      </Card.CardHeader>
+      <Card.CardContent class="space-y-4">
+        {#if missingVars.length > 0}
+          <div class="env-var-list">
+            {#each missingVars as v (v.key)}
+              <div class="env-var-row">
+                <div class="env-var-info">
+                  <code class="env-var-key">{v.key}</code>
+                  {#if v.description}
+                    <span class="env-var-desc">{v.description}</span>
+                  {/if}
+                </div>
+                <button
+                  class="copy-btn"
+                  onclick={() => copyToClipboard(`${v.key}=`, v.key)}
+                  title="Copy"
+                >
+                  {#if copied[v.key]}
+                    <CheckCircle class="h-3.5 w-3.5 text-green-500" />
+                  {:else}
+                    <Copy class="h-3.5 w-3.5" />
+                  {/if}
+                </button>
+              </div>
+            {/each}
+          </div>
+        {/if}
+
+        {#if envTemplate}
+          <div class="env-template">
+            <div class="env-template-header">
+              <span class="text-xs font-medium text-muted-foreground">{t('config.envFilePath')}</span>
+              <button
+                class="copy-btn"
+                onclick={copyAll}
+              >
+                {#if copied['__all__']}
+                  <CheckCircle class="h-3.5 w-3.5 text-green-500" />
+                  <span class="text-xs">Copied!</span>
+                {:else}
+                  <Copy class="h-3.5 w-3.5" />
+                  <span class="text-xs">Copy All</span>
+                {/if}
+              </button>
+            </div>
+            <pre class="env-template-code">{envTemplate}</pre>
+          </div>
+        {/if}
+
+        <p class="text-xs text-muted-foreground text-center mt-4">
+          {t('config.reload')}
+        </p>
+
+        <Button variant="outline" class="w-full" onclick={() => window.location.reload()}>
+          Reload Page
+        </Button>
+      </Card.CardContent>
+    </Card.Card>
+  </div>
+</div>
+
+<style>
+  .config-error-page {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, hsl(var(--destructive) / 0.05) 0%, hsl(var(--background)) 50%, hsl(var(--destructive) / 0.03) 100%);
+    padding: 1rem;
+  }
+
+  .config-error-container {
+    width: 100%;
+    max-width: 480px;
+  }
+
+  :global(.config-error-card) {
+    backdrop-filter: blur(20px);
+    border: 1px solid hsl(var(--border) / 0.5);
+    box-shadow: 0 8px 32px hsl(var(--destructive) / 0.08), 0 2px 8px hsl(0 0% 0% / 0.06);
+  }
+
+  :global(.config-error-header) {
+    text-align: center;
+    padding-bottom: 0.5rem;
+  }
+
+  .config-error-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 14px;
+    background: hsl(var(--destructive) / 0.1);
+    color: hsl(var(--destructive));
+    margin: 0 auto 0.75rem;
+  }
+
+  .env-var-list {
+    border: 1px solid hsl(var(--border));
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  .env-var-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.625rem 0.75rem;
+    border-bottom: 1px solid hsl(var(--border) / 0.5);
+    gap: 0.5rem;
+  }
+  .env-var-row:last-child {
+    border-bottom: none;
+  }
+
+  .env-var-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  .env-var-key {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: hsl(var(--foreground));
+    font-family: monospace;
+  }
+
+  .env-var-desc {
+    font-size: 0.6875rem;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .copy-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    color: hsl(var(--muted-foreground));
+    border-radius: 0.25rem;
+    transition: all 0.15s;
+    flex-shrink: 0;
+  }
+  .copy-btn:hover {
+    color: hsl(var(--foreground));
+    background: hsl(var(--muted) / 0.5);
+  }
+
+  .env-template {
+    border: 1px solid hsl(var(--border));
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  .env-template-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    background: hsl(var(--muted) / 0.5);
+    border-bottom: 1px solid hsl(var(--border) / 0.5);
+  }
+
+  .env-template-code {
+    padding: 0.75rem;
+    font-size: 0.75rem;
+    font-family: monospace;
+    line-height: 1.6;
+    color: hsl(var(--foreground));
+    background: hsl(var(--muted) / 0.2);
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+</style>