snice 4.28.0 → 4.30.0

package/bin/templates/react/src/pages/LoginPage.tsx

@@ -0,0 +1,46 @@
+import { useRef, useState } from 'react';
+import { useSniceContext, useNavigate, Login, useRequestHandler } from 'snice/react';
+import 'snice/components/login/snice-login';
+
+export function LoginPage() {
+  const ctx = useSniceContext();
+  const navigate = useNavigate();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState('');
+
+  useRequestHandler(containerRef, {
+    'login-user': async (credentials: { username: string; password: string }) => {
+      setError('');
+      try {
+        await ctx.application.login(credentials.username, credentials.password);
+        navigate('/dashboard');
+        return { success: true };
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Login failed';
+        setError(message);
+        return { success: false, error: message };
+      }
+    }
+  });
+
+  return (
+    <div className="login-page" ref={containerRef}>
+      <Login
+        variant="card"
+        size="medium"
+        title={'{{projectName}}'}
+        actionText="Sign In"
+        showForgotPassword={false}
+        alertMessage={error}
+        alertVariant={error ? 'error' : undefined}
+      >
+        <p slot="subtitle">Sign in to your account</p>
+        <div slot="footer">
+          <p className="hint">Demo credentials:</p>
+          <p className="hint"><strong>Email:</strong> demo@example.com</p>
+          <p className="hint"><strong>Password:</strong> demo</p>
+        </div>
+      </Login>
+    </div>
+  );
+}

package/bin/templates/react/src/pages/NotificationsPage.tsx

@@ -0,0 +1,119 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useSniceContext, Alert, Button, EmptyState } from 'snice/react';
+import type { NotificationsDaemon } from '../daemons/notifications';
+import type { Notification, NotificationType } from '../types/notifications';
+
+function getVariant(type: string): string {
+  const variants: Record<string, string> = {
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    error: 'danger'
+  };
+  return variants[type] || 'info';
+}
+
+export function NotificationsPage() {
+  const ctx = useSniceContext();
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [filter, setFilter] = useState<NotificationType | 'all'>('all');
+
+  useEffect(() => {
+    const daemon = ctx.application.notifications as NotificationsDaemon | undefined;
+    if (!daemon) return;
+
+    const unsubscribe = daemon.subscribe((notification) => {
+      setNotifications(prev => [notification, ...prev]);
+    });
+
+    return unsubscribe;
+  }, [ctx.application.notifications]);
+
+  const clearAll = useCallback(() => {
+    setNotifications([]);
+  }, []);
+
+  const removeNotification = useCallback((id: string) => {
+    setNotifications(prev => prev.filter(n => n.id !== id));
+  }, []);
+
+  // Keyboard shortcut: Ctrl+Backspace to clear all
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === 'Backspace') {
+        clearAll();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [clearAll]);
+
+  const filteredNotifications = filter === 'all'
+    ? notifications
+    : notifications.filter(n => n.type === filter);
+
+  return (
+    <div className="page-container-narrow">
+      <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        marginBottom: '1.5rem'
+      }}>
+        <div>
+          <h1 style={{ margin: 0, color: 'var(--snice-color-primary)' }}>Notifications</h1>
+          <span style={{ fontSize: '0.8125rem', color: 'var(--snice-color-text-secondary)' }}>
+            {notifications.length} total
+          </span>
+        </div>
+        {notifications.length > 0 && (
+          <Button variant="secondary" size="small" onClick={clearAll}>
+            Clear All (Ctrl+Backspace)
+          </Button>
+        )}
+      </div>
+
+      {notifications.length > 0 && (
+        <div className="filters" style={{ display: 'flex', gap: '0.5rem', marginBottom: '1.5rem' }}>
+          {(['all', 'info', 'success', 'warning', 'error'] as const).map(f => (
+            <button
+              key={f}
+              className={`filter-btn ${filter === f ? 'active' : ''}`}
+              onClick={() => setFilter(f)}
+            >
+              {f.charAt(0).toUpperCase() + f.slice(1)}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {filteredNotifications.length === 0 ? (
+        <EmptyState
+          icon="&#128276;"
+          title="No notifications"
+          description="You'll see live notifications here as they arrive"
+        />
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          {filteredNotifications.map(notification => (
+            <Alert
+              key={notification.id}
+              variant={getVariant(notification.type)}
+              dismissible
+              className="notification-slide-in"
+              onAlertDismiss={() => removeNotification(notification.id)}
+            >
+              <strong style={{ display: 'block', marginBottom: '0.5rem' }}>
+                {notification.title}
+              </strong>
+              <p style={{ margin: '0 0 0.5rem 0' }}>{notification.message}</p>
+              <small style={{ opacity: 0.7 }}>
+                {new Date(notification.timestamp).toLocaleTimeString()}
+              </small>
+            </Alert>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/bin/templates/react/src/pages/ProfilePage.tsx

@@ -0,0 +1,92 @@
+import { useSniceContext, Card, Avatar, Button, Divider, Spinner } from 'snice/react';
+
+export function ProfilePage() {
+  const ctx = useSniceContext();
+  const principal = ctx.application.principal;
+  const user = principal?.user;
+
+  const handleLogout = async () => {
+    await ctx.application.logout();
+    window.location.hash = '#/login';
+  };
+
+  if (!user) {
+    return (
+      <div className="page-container-narrow">
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '3rem' }}>
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="page-container-narrow">
+      <Card style={{ padding: '2rem' }}>
+        <div style={{ textAlign: 'center', paddingBottom: '1.5rem' }}>
+          <Avatar
+            src={user.avatar || ''}
+            name={user.name}
+            size="large"
+            style={{ marginBottom: '1rem' }}
+          />
+          <h1 style={{ margin: '0 0 0.5rem 0', color: 'var(--snice-color-primary)' }}>{user.name}</h1>
+          <p style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-text-secondary)' }}>{user.email}</p>
+          <a href="#/settings" style={{ textDecoration: 'none' }}>
+            <Button variant="secondary" size="small">Edit Profile</Button>
+          </a>
+        </div>
+
+        <Divider style={{ margin: '0.5rem 0' }} />
+
+        <div style={{ paddingTop: '1.5rem' }}>
+          <h3 style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-primary)' }}>Account Information</h3>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              padding: '0.75rem',
+              background: 'var(--snice-color-background-secondary)',
+              borderRadius: 'var(--snice-border-radius-md)'
+            }}>
+              <span style={{ fontWeight: 600, color: 'var(--snice-color-text)' }}>User ID</span>
+              <span style={{ color: 'var(--snice-color-text-secondary)' }}>{user.id}</span>
+            </div>
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              padding: '0.75rem',
+              background: 'var(--snice-color-background-secondary)',
+              borderRadius: 'var(--snice-border-radius-md)'
+            }}>
+              <span style={{ fontWeight: 600, color: 'var(--snice-color-text)' }}>Email</span>
+              <span style={{ color: 'var(--snice-color-text-secondary)' }}>{user.email}</span>
+            </div>
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              padding: '0.75rem',
+              background: 'var(--snice-color-background-secondary)',
+              borderRadius: 'var(--snice-border-radius-md)'
+            }}>
+              <span style={{ fontWeight: 600, color: 'var(--snice-color-text)' }}>Name</span>
+              <span style={{ color: 'var(--snice-color-text-secondary)' }}>{user.name}</span>
+            </div>
+          </div>
+        </div>
+
+        <Divider style={{ margin: '0.5rem 0' }} />
+
+        <div style={{ paddingTop: '1.5rem' }}>
+          <h3 style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-primary)' }}>Session</h3>
+          <p style={{ margin: '0 0 1rem 0', color: 'var(--snice-color-text-secondary)' }}>
+            You are currently logged in with JWT authentication.
+          </p>
+          <Button variant="danger" onClick={handleLogout}>
+            Sign Out
+          </Button>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/bin/templates/react/src/pages/SettingsPage.tsx

@@ -0,0 +1,165 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useSniceContext, Card, Input, Button, Switch, Alert } from 'snice/react';
+
+export function SettingsPage() {
+  const ctx = useSniceContext();
+  const principal = ctx.application.principal;
+  const user = principal?.user;
+
+  const [displayName, setDisplayName] = useState(user?.name || '');
+  const [email, setEmail] = useState(user?.email || '');
+  const [theme, setThemeState] = useState<'light' | 'dark' | 'system'>(() => {
+    return (localStorage.getItem('app-theme') as 'light' | 'dark' | 'system') || 'system';
+  });
+  const [notificationsEnabled, setNotificationsEnabled] = useState(() => {
+    return localStorage.getItem('notifications-enabled') !== 'false';
+  });
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    if (user) {
+      setDisplayName(user.name || '');
+      setEmail(user.email || '');
+    }
+  }, [user]);
+
+  const setTheme = useCallback((newTheme: 'light' | 'dark' | 'system') => {
+    setThemeState(newTheme);
+    localStorage.setItem('app-theme', newTheme);
+    if (newTheme === 'system') {
+      document.documentElement.removeAttribute('data-theme');
+    } else {
+      document.documentElement.setAttribute('data-theme', newTheme);
+    }
+  }, []);
+
+  const toggleNotifications = useCallback(() => {
+    setNotificationsEnabled(prev => {
+      const next = !prev;
+      localStorage.setItem('notifications-enabled', String(next));
+      return next;
+    });
+  }, []);
+
+  const saveSettings = useCallback(() => {
+    ctx.application.refreshAuth();
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  }, [ctx.application]);
+
+  // Keyboard shortcut: Ctrl+S to save
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === 's') {
+        e.preventDefault();
+        saveSettings();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [saveSettings]);
+
+  return (
+    <div className="page-container-narrow">
+      <h1 style={{ margin: '0 0 0.25rem 0', color: 'var(--snice-color-primary)' }}>Settings</h1>
+      <p style={{ margin: '0 0 2rem 0', fontSize: '0.8125rem', color: 'var(--snice-color-text-secondary)' }}>
+        Press Ctrl+S to save
+      </p>
+
+      {saved && (
+        <Alert variant="success" dismissible style={{ marginBottom: '1.5rem' }}>
+          Settings saved successfully!
+        </Alert>
+      )}
+
+      <Card style={{ padding: '1.5rem', marginBottom: '1.5rem' }}>
+        <h3 style={{ margin: '0 0 1.25rem 0', color: 'var(--snice-color-primary)' }}>Profile</h3>
+        <div style={{ marginBottom: '1rem' }}>
+          <label style={{
+            display: 'block',
+            marginBottom: '0.375rem',
+            fontSize: '0.875rem',
+            fontWeight: 500,
+            color: 'var(--snice-color-text)'
+          }}>Display Name</label>
+          <Input
+            value={displayName}
+            onInput={(e: any) => setDisplayName(e.target.value)}
+            placeholder="Your name"
+            style={{ width: '100%' }}
+          />
+        </div>
+        <div>
+          <label style={{
+            display: 'block',
+            marginBottom: '0.375rem',
+            fontSize: '0.875rem',
+            fontWeight: 500,
+            color: 'var(--snice-color-text)'
+          }}>Email</label>
+          <Input
+            value={email}
+            onInput={(e: any) => setEmail(e.target.value)}
+            placeholder="your@email.com"
+            style={{ width: '100%' }}
+          />
+        </div>
+      </Card>
+
+      <Card style={{ padding: '1.5rem', marginBottom: '1.5rem' }}>
+        <h3 style={{ margin: '0 0 1.25rem 0', color: 'var(--snice-color-primary)' }}>Appearance</h3>
+        <div className="theme-options" style={{ display: 'flex', gap: '0.75rem' }}>
+          <button
+            className={`theme-btn ${theme === 'light' ? 'active' : ''}`}
+            onClick={() => setTheme('light')}
+          >
+            <span className="theme-icon">&#9728;&#65039;</span>
+            Light
+          </button>
+          <button
+            className={`theme-btn ${theme === 'dark' ? 'active' : ''}`}
+            onClick={() => setTheme('dark')}
+          >
+            <span className="theme-icon">&#127769;</span>
+            Dark
+          </button>
+          <button
+            className={`theme-btn ${theme === 'system' ? 'active' : ''}`}
+            onClick={() => setTheme('system')}
+          >
+            <span className="theme-icon">&#128187;</span>
+            System
+          </button>
+        </div>
+      </Card>
+
+      <Card style={{ padding: '1.5rem', marginBottom: '1.5rem' }}>
+        <h3 style={{ margin: '0 0 1.25rem 0', color: 'var(--snice-color-primary)' }}>Notifications</h3>
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between'
+        }}>
+          <div>
+            <p style={{ margin: 0, fontWeight: 500, color: 'var(--snice-color-text)' }}>
+              Push Notifications
+            </p>
+            <p style={{ margin: '0.25rem 0 0 0', fontSize: '0.8125rem', color: 'var(--snice-color-text-secondary)' }}>
+              Receive real-time notification alerts
+            </p>
+          </div>
+          <Switch
+            checked={notificationsEnabled}
+            onChange={toggleNotifications}
+          />
+        </div>
+      </Card>
+
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Button variant="primary" onClick={saveSettings}>
+          Save Settings
+        </Button>
+      </div>
+    </div>
+  );
+}

package/bin/templates/react/src/services/auth.ts

@@ -0,0 +1,48 @@
+import type { LoginCredentials, LoginResponse, User } from '../types/auth';
+import { setToken, setUser, clearToken, getToken } from './storage';
+import { isTokenExpired } from './jwt';
+
+// Mock API - replace with real API calls
+const MOCK_USER: User = {
+  id: '1',
+  email: 'demo@example.com',
+  name: 'Demo User',
+  avatar: 'https://i.pravatar.cc/150?img=1'
+};
+
+const MOCK_TOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiZW1haWwiOiJkZW1vQGV4YW1wbGUuY29tIiwiaWF0IjoxNjE2MjM5MDIyLCJleHAiOjk5OTk5OTk5OTl9.mock';
+
+export async function login(credentials: LoginCredentials): Promise<LoginResponse> {
+  // Simulate API call
+  await new Promise(resolve => setTimeout(resolve, 500));
+
+  // Mock validation
+  if (credentials.email === 'demo@example.com' && credentials.password === 'demo') {
+    setToken(MOCK_TOKEN);
+    setUser(MOCK_USER);
+
+    return {
+      token: MOCK_TOKEN,
+      user: MOCK_USER
+    };
+  }
+
+  throw new Error('Invalid credentials');
+}
+
+export async function logout(): Promise<void> {
+  clearToken();
+}
+
+export function isAuthenticated(): boolean {
+  const token = getToken();
+  if (!token) return false;
+  return !isTokenExpired(token);
+}
+
+export async function refreshToken(): Promise<string> {
+  // Mock refresh - in real app, call refresh endpoint
+  await new Promise(resolve => setTimeout(resolve, 300));
+  setToken(MOCK_TOKEN);
+  return MOCK_TOKEN;
+}

package/bin/templates/react/src/services/jwt.ts

@@ -0,0 +1,35 @@
+interface JWTPayload {
+  exp?: number;
+  iat?: number;
+  sub?: string;
+  [key: string]: any;
+}
+
+export function decodeJWT(token: string): JWTPayload | null {
+  try {
+    const parts = token.split('.');
+    if (parts.length !== 3) return null;
+
+    const payload = parts[1];
+    const decoded = atob(payload.replace(/-/g, '+').replace(/_/g, '/'));
+    return JSON.parse(decoded);
+  } catch (err) {
+    console.error('Failed to decode JWT:', err);
+    return null;
+  }
+}
+
+export function isTokenExpired(token: string): boolean {
+  const payload = decodeJWT(token);
+  if (!payload || !payload.exp) return true;
+
+  const now = Math.floor(Date.now() / 1000);
+  return payload.exp < now;
+}
+
+export function getTokenExpiration(token: string): Date | null {
+  const payload = decodeJWT(token);
+  if (!payload || !payload.exp) return null;
+
+  return new Date(payload.exp * 1000);
+}

package/bin/templates/react/src/services/storage.ts

@@ -0,0 +1,24 @@
+const TOKEN_KEY = 'auth_token';
+const USER_KEY = 'auth_user';
+
+export function getToken(): string | null {
+  return localStorage.getItem(TOKEN_KEY);
+}
+
+export function setToken(token: string): void {
+  localStorage.setItem(TOKEN_KEY, token);
+}
+
+export function clearToken(): void {
+  localStorage.removeItem(TOKEN_KEY);
+  localStorage.removeItem(USER_KEY);
+}
+
+export function getUser<T>(): T | null {
+  const user = localStorage.getItem(USER_KEY);
+  return user ? JSON.parse(user) : null;
+}
+
+export function setUser<T>(user: T): void {
+  localStorage.setItem(USER_KEY, JSON.stringify(user));
+}