snice 1.14.2 → 2.1.0

package/components/login/demo-auth-controller.ts

@@ -0,0 +1,185 @@
+import { controller, respond } from 'snice';
+import type { LoginCredentials, LoginResult } from './snice-login.types';
+
+interface AuthUser {
+  id: string;
+  username: string;
+  email: string;
+  role: string;
+  lastLogin?: string;
+}
+
+@controller('demo-auth-controller')
+export class DemoAuthController {
+  element!: HTMLElement;
+
+  // Mock user database for demo purposes
+  private mockUsers: AuthUser[] = [
+    {
+      id: '1',
+      username: 'demo',
+      email: 'demo@example.com',
+      role: 'user'
+    },
+    {
+      id: '2',
+      username: 'admin',
+      email: 'admin@example.com',
+      role: 'admin'
+    },
+    {
+      id: '3',
+      username: 'test',
+      email: 'test@example.com',
+      role: 'user'
+    }
+  ];
+
+  // Valid passwords for demo (in real app, these would be hashed)
+  private mockPasswords: Record<string, string> = {
+    'demo': 'password',
+    'admin': 'admin123',
+    'test': 'test123'
+  };
+
+  async attach(element: HTMLElement) {
+    this.element = element;
+    console.log('Demo Auth Controller attached to', element.tagName);
+  }
+
+  async detach(element: HTMLElement) {
+    console.log('Demo Auth Controller detached from', element.tagName);
+  }
+
+  @respond('login-user')
+  async handleLogin(credentials: LoginCredentials): Promise<LoginResult> {
+    console.log('Auth controller handling login request:', { username: credentials.username });
+
+    // Simulate network delay
+    await this.delay(200 + Math.random() * 200);
+
+    // Validate credentials
+    const result = await this.authenticateUser(credentials);
+    
+    // Store successful login
+    if (result.success && result.user) {
+      this.storeUserSession(result.user, result.token!);
+    }
+
+    return result;
+  }
+
+  private async authenticateUser(credentials: LoginCredentials): Promise<LoginResult> {
+    const { username, password } = credentials;
+
+    // Basic validation
+    if (!username || !password) {
+      return {
+        success: false,
+        error: 'Username and password are required'
+      };
+    }
+
+    // Find user
+    const user = this.mockUsers.find(u => u.username.toLowerCase() === username.toLowerCase());
+    
+    if (!user) {
+      return {
+        success: false,
+        error: 'Invalid username or password'
+      };
+    }
+
+    // Check password
+    const expectedPassword = this.mockPasswords[user.username];
+    if (password !== expectedPassword) {
+      return {
+        success: false,
+        error: 'Invalid username or password'
+      };
+    }
+
+    // Simulate random authentication failure (10% chance)
+    if (Math.random() < 0.1) {
+      return {
+        success: false,
+        error: 'Authentication service temporarily unavailable'
+      };
+    }
+
+    // Generate mock JWT token
+    const token = this.generateMockToken(user);
+
+    // Update last login
+    user.lastLogin = new Date().toISOString();
+
+    return {
+      success: true,
+      token,
+      user: {
+        id: user.id,
+        username: user.username,
+        email: user.email
+      }
+    };
+  }
+
+  private generateMockToken(user: AuthUser): string {
+    // This is just a demo token - in real apps use proper JWT libraries
+    const header = btoa(JSON.stringify({ alg: 'HS256', typ: 'JWT' }));
+    const payload = btoa(JSON.stringify({
+      sub: user.id,
+      username: user.username,
+      email: user.email,
+      role: user.role,
+      iat: Math.floor(Date.now() / 1000),
+      exp: Math.floor(Date.now() / 1000) + (60 * 60 * 24) // 24 hours
+    }));
+    const signature = btoa('demo-signature-' + Math.random().toString(36));
+    
+    return `${header}.${payload}.${signature}`;
+  }
+
+  private storeUserSession(user: AuthUser, token: string): void {
+    // In a real app, you might store this in localStorage, sessionStorage, or cookies
+    const session = {
+      user: {
+        id: user.id,
+        username: user.username,
+        email: user.email
+      },
+      token,
+      loginTime: new Date().toISOString()
+    };
+
+    // Store in sessionStorage for demo
+    sessionStorage.setItem('demoUserSession', JSON.stringify(session));
+    
+    console.log('User session stored:', session);
+  }
+
+  private delay(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  // Helper method to get current session (for other components to use)
+  getCurrentSession(): { user: AuthUser; token: string } | null {
+    try {
+      const sessionData = sessionStorage.getItem('demoUserSession');
+      return sessionData ? JSON.parse(sessionData) : null;
+    } catch {
+      return null;
+    }
+  }
+
+  // Helper method to logout
+  logout(): void {
+    sessionStorage.removeItem('demoUserSession');
+    console.log('User logged out');
+  }
+
+  // Helper method to check if user is authenticated
+  isAuthenticated(): boolean {
+    return this.getCurrentSession() !== null;
+  }
+}

package/components/login/demo.html

@@ -0,0 +1,470 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Snice Login Component Demo</title>
+  <link rel="stylesheet" href="../theme/theme.css">
+  <style>
+    body {
+      font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
+      margin: 0;
+      padding: var(--snice-spacing-xl, 2rem);
+      background: var(--snice-color-background-secondary, rgb(250 250 250));
+      color: var(--snice-color-text, rgb(23 23 23));
+      min-height: 100vh;
+    }
+
+    .demo-container {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    .demo-header {
+      text-align: center;
+      margin-bottom: var(--snice-spacing-3xl, 4rem);
+    }
+
+    .demo-header h1 {
+      color: var(--snice-color-text, rgb(23 23 23));
+      margin-bottom: var(--snice-spacing-xs, 0.5rem);
+      font-size: var(--snice-font-size-3xl, 1.875rem);
+      font-weight: var(--snice-font-weight-bold, 700);
+    }
+
+    .demo-header p {
+      color: var(--snice-color-text-secondary, rgb(82 82 82));
+      font-size: var(--snice-font-size-lg, 1.125rem);
+    }
+
+    .demo-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+      gap: var(--snice-spacing-xl, 2rem);
+      margin-bottom: var(--snice-spacing-3xl, 4rem);
+    }
+
+    .demo-card {
+      background: var(--snice-color-background, rgb(255 255 255));
+      border-radius: var(--snice-border-radius-lg, 0.5rem);
+      border: 1px solid var(--snice-color-border, rgb(226 226 226));
+      padding: var(--snice-spacing-xl, 2rem);
+      box-shadow: var(--snice-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+    }
+
+    .demo-card h3 {
+      margin: 0 0 var(--snice-spacing-md, 1rem) 0;
+      color: var(--snice-color-text, rgb(23 23 23));
+      font-size: var(--snice-font-size-xl, 1.25rem);
+      font-weight: var(--snice-font-weight-semibold, 600);
+    }
+
+    .demo-card p {
+      margin: 0 0 var(--snice-spacing-lg, 1.5rem) 0;
+      color: var(--snice-color-text-secondary, rgb(82 82 82));
+      font-size: var(--snice-font-size-sm, 0.875rem);
+    }
+
+    .demo-controls {
+      background: var(--snice-color-background, rgb(255 255 255));
+      border-radius: var(--snice-border-radius-lg, 0.5rem);
+      border: 1px solid var(--snice-color-border, rgb(226 226 226));
+      padding: var(--snice-spacing-xl, 2rem);
+      box-shadow: var(--snice-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+      margin-bottom: var(--snice-spacing-xl, 2rem);
+    }
+
+    .demo-controls h3 {
+      margin: 0 0 var(--snice-spacing-md, 1rem) 0;
+      color: var(--snice-color-text, rgb(23 23 23));
+      font-size: var(--snice-font-size-xl, 1.25rem);
+      font-weight: var(--snice-font-weight-semibold, 600);
+    }
+
+    .controls-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: var(--snice-spacing-md, 1rem);
+    }
+
+    .control-group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--snice-spacing-xs, 0.5rem);
+    }
+
+    .control-group label {
+      font-size: var(--snice-font-size-sm, 0.875rem);
+      font-weight: var(--snice-font-weight-medium, 500);
+      color: var(--snice-color-text, rgb(23 23 23));
+    }
+
+    .control-group select,
+    .control-group input[type="text"] {
+      padding: var(--snice-spacing-sm, 0.75rem);
+      border: 1px solid var(--snice-color-border, rgb(226 226 226));
+      border-radius: var(--snice-border-radius-md, 0.25rem);
+      font-size: var(--snice-font-size-sm, 0.875rem);
+      font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
+      background: var(--snice-color-background, rgb(255 255 255));
+      color: var(--snice-color-text, rgb(23 23 23));
+      transition: border-color var(--snice-transition-fast, 150ms) ease;
+    }
+
+    .control-group select:focus,
+    .control-group input[type="text"]:focus {
+      outline: none;
+      border-color: var(--snice-color-border-focus, rgb(59 130 246));
+      box-shadow: 0 0 0 var(--snice-focus-ring-width, 2px) var(--snice-focus-ring-color, rgb(59 130 246 / 0.5));
+    }
+
+    .control-group button {
+      padding: var(--snice-spacing-sm, 0.75rem) var(--snice-spacing-md, 1rem);
+      background: var(--snice-color-primary, rgb(37 99 235));
+      color: var(--snice-color-text-inverse, rgb(250 250 250));
+      border: 1px solid var(--snice-color-primary, rgb(37 99 235));
+      border-radius: var(--snice-border-radius-md, 0.25rem);
+      cursor: pointer;
+      font-size: var(--snice-font-size-sm, 0.875rem);
+      font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
+      font-weight: var(--snice-font-weight-medium, 500);
+      transition: background-color var(--snice-transition-fast, 150ms) ease;
+    }
+
+    .control-group button:hover {
+      background: var(--snice-color-primary-hover, rgb(29 78 216));
+      border-color: var(--snice-color-primary-hover, rgb(29 78 216));
+    }
+
+    .demo-events {
+      background: var(--snice-color-background, rgb(255 255 255));
+      border-radius: var(--snice-border-radius-lg, 0.5rem);
+      border: 1px solid var(--snice-color-border, rgb(226 226 226));
+      padding: var(--snice-spacing-xl, 2rem);
+      box-shadow: var(--snice-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+    }
+
+    .demo-events h3 {
+      margin: 0 0 var(--snice-spacing-md, 1rem) 0;
+      color: var(--snice-color-text, rgb(23 23 23));
+      font-size: var(--snice-font-size-xl, 1.25rem);
+      font-weight: var(--snice-font-weight-semibold, 600);
+    }
+
+    .event-log {
+      background: var(--snice-color-background-secondary, rgb(250 250 250));
+      border: 1px solid var(--snice-color-border, rgb(226 226 226));
+      border-radius: var(--snice-border-radius-md, 0.25rem);
+      padding: var(--snice-spacing-md, 1rem);
+      max-height: 300px;
+      overflow-y: auto;
+      font-family: var(--snice-font-family-mono, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace);
+      font-size: var(--snice-font-size-xs, 0.75rem);
+    }
+
+    .event-entry {
+      margin-bottom: var(--snice-spacing-xs, 0.5rem);
+      padding: var(--snice-spacing-2xs, 0.25rem);
+      border-radius: var(--snice-border-radius-sm, 0.125rem);
+    }
+
+    .event-success {
+      background: rgb(var(--snice-color-green-100, 220 252 231));
+      color: rgb(var(--snice-color-green-800, 22 101 52));
+    }
+
+    .event-error {
+      background: rgb(var(--snice-color-red-100, 254 226 226));
+      color: rgb(var(--snice-color-red-800, 153 27 27));
+    }
+
+    .event-info {
+      background: rgb(var(--snice-color-blue-100, 219 234 254));
+      color: rgb(var(--snice-color-blue-800, 30 64 175));
+    }
+
+    /* Custom styling for login components */
+    snice-login[slot="footer"] {
+      text-align: center;
+      color: var(--snice-color-text-secondary, rgb(82 82 82));
+      font-size: var(--snice-font-size-sm, 0.875rem);
+    }
+
+    .footer-text {
+      margin: var(--snice-spacing-xs, 0.5rem) 0;
+    }
+
+    .footer-link {
+      color: var(--snice-color-primary, rgb(37 99 235));
+      text-decoration: none;
+      transition: color var(--snice-transition-fast, 150ms) ease;
+    }
+
+    .footer-link:hover {
+      color: var(--snice-color-primary-hover, rgb(29 78 216));
+      text-decoration: underline;
+    }
+
+    @media (max-width: 768px) {
+      .demo-grid {
+        grid-template-columns: 1fr;
+      }
+      
+      .controls-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h1>Snice Login Component Demo</h1>
+      <p>Interactive examples showcasing different variants, sizes, and configurations</p>
+    </div>
+
+    <div class="demo-controls">
+      <h3>Interactive Controls</h3>
+      <div class="controls-grid">
+        <div class="control-group">
+          <label for="variant-select">Variant</label>
+          <select id="variant-select">
+            <option value="default">Default</option>
+            <option value="card" selected>Card</option>
+            <option value="minimal">Minimal</option>
+          </select>
+        </div>
+        
+        <div class="control-group">
+          <label for="size-select">Size</label>
+          <select id="size-select">
+            <option value="small">Small</option>
+            <option value="medium" selected>Medium</option>
+            <option value="large">Large</option>
+          </select>
+        </div>
+        
+        <div class="control-group">
+          <label for="title-input">Title</label>
+          <input type="text" id="title-input" value="Welcome Back" />
+        </div>
+        
+        <div class="control-group">
+          <label for="action-text-input">Action Text</label>
+          <input type="text" id="action-text-input" value="Sign In" />
+        </div>
+        
+        <div class="control-group">
+          <label>
+            <input type="checkbox" id="show-remember" checked /> Show Remember Me
+          </label>
+        </div>
+        
+        <div class="control-group">
+          <label>
+            <input type="checkbox" id="show-forgot" checked /> Show Forgot Password
+          </label>
+        </div>
+        
+        <div class="control-group">
+          <label>
+            <input type="checkbox" id="disabled-toggle" /> Disabled
+          </label>
+        </div>
+        
+        <div class="control-group">
+          <button id="simulate-error">Simulate Error</button>
+        </div>
+        
+        <div class="control-group">
+          <button id="clear-log">Clear Event Log</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-grid">
+      <!-- Interactive Login -->
+      <div class="demo-card">
+        <h3>Interactive Login</h3>
+        <p>Use the controls above to modify this login component in real-time.</p>
+        
+        <snice-login 
+          id="interactive-login"
+          variant="card" 
+          size="medium"
+          title="Welcome Back"
+          action-text="Sign In"
+          show-remember-me
+          show-forgot-password
+          controller="demo-auth-controller">
+          
+          <p slot="subtitle">Please sign in to your account</p>
+          
+          <div slot="footer">
+            <p class="footer-text">Don't have an account?</p>
+            <a href="#" class="footer-link">Sign up here</a>
+          </div>
+        </snice-login>
+      </div>
+
+      <!-- Card Variant Examples -->
+      <div class="demo-card">
+        <h3>Card Variant (Large)</h3>
+        <p>Login form presented in a card layout with shadow and border.</p>
+        
+        <snice-login 
+          variant="card" 
+          size="large"
+          title="Admin Portal"
+          action-text="Access Portal"
+          controller="demo-auth-controller">
+          
+          <p slot="subtitle">Administrator access required</p>
+        </snice-login>
+      </div>
+
+      <!-- Minimal Variant -->
+      <div class="demo-card">
+        <h3>Minimal Variant</h3>
+        <p>Clean, borderless login form perfect for embedding.</p>
+        
+        <snice-login 
+          variant="minimal" 
+          size="small"
+          title="Quick Sign In"
+          action-text="Continue"
+          show-forgot-password="false"
+          controller="demo-auth-controller">
+          
+          <p slot="subtitle">Enter your credentials</p>
+        </snice-login>
+      </div>
+
+      <!-- Default Variant -->
+      <div class="demo-card">
+        <h3>Default Variant</h3>
+        <p>Standard login form without additional styling.</p>
+        
+        <snice-login 
+          variant="default" 
+          size="medium"
+          title="User Login"
+          action-text="Log In"
+          show-remember-me="false"
+          controller="demo-auth-controller">
+          
+          <div slot="footer">
+            <p class="footer-text">Test credentials: demo / password</p>
+          </div>
+        </snice-login>
+      </div>
+    </div>
+
+    <div class="demo-events">
+      <h3>Event Log</h3>
+      <div id="event-log" class="event-log">
+        <div class="event-entry event-info">
+          <strong>[INFO]</strong> Demo loaded. Try logging in with username: "demo" and password: "password"
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Import the components -->
+  <script type="module">
+    // Import the controller first, then the login component
+    import './demo-auth-controller.ts';
+    import './snice-login.ts';
+
+    // Get references to interactive elements
+    const interactiveLogin = document.getElementById('interactive-login');
+    const variantSelect = document.getElementById('variant-select');
+    const sizeSelect = document.getElementById('size-select');
+    const titleInput = document.getElementById('title-input');
+    const actionTextInput = document.getElementById('action-text-input');
+    const showRememberCheckbox = document.getElementById('show-remember');
+    const showForgotCheckbox = document.getElementById('show-forgot');
+    const disabledToggle = document.getElementById('disabled-toggle');
+    const simulateErrorBtn = document.getElementById('simulate-error');
+    const clearLogBtn = document.getElementById('clear-log');
+    const eventLog = document.getElementById('event-log');
+
+    // Update interactive login component
+    function updateInteractiveLogin() {
+      interactiveLogin.variant = variantSelect.value;
+      interactiveLogin.size = sizeSelect.value;
+      interactiveLogin.title = titleInput.value;
+      interactiveLogin.actionText = actionTextInput.value;
+      interactiveLogin.showRememberMe = showRememberCheckbox.checked;
+      interactiveLogin.showForgotPassword = showForgotCheckbox.checked;
+      interactiveLogin.disabled = disabledToggle.checked;
+    }
+
+    // Add event listeners for controls
+    variantSelect.addEventListener('change', updateInteractiveLogin);
+    sizeSelect.addEventListener('change', updateInteractiveLogin);
+    titleInput.addEventListener('input', updateInteractiveLogin);
+    actionTextInput.addEventListener('input', updateInteractiveLogin);
+    showRememberCheckbox.addEventListener('change', updateInteractiveLogin);
+    showForgotCheckbox.addEventListener('change', updateInteractiveLogin);
+    disabledToggle.addEventListener('change', updateInteractiveLogin);
+
+    // Simulate error
+    simulateErrorBtn.addEventListener('click', () => {
+      interactiveLogin.setError('Invalid credentials. Please try again.');
+      logEvent('error', 'Simulated error set on interactive login component');
+    });
+
+    // Clear event log
+    clearLogBtn.addEventListener('click', () => {
+      eventLog.innerHTML = '<div class="event-entry event-info"><strong>[INFO]</strong> Event log cleared</div>';
+    });
+
+    // Event logging function
+    function logEvent(type, message, data = null) {
+      const timestamp = new Date().toLocaleTimeString();
+      const entry = document.createElement('div');
+      entry.className = `event-entry event-${type}`;
+      
+      let logMessage = `<strong>[${timestamp}]</strong> ${message}`;
+      if (data) {
+        logMessage += `<br><em>${JSON.stringify(data, null, 2)}</em>`;
+      }
+      
+      entry.innerHTML = logMessage;
+      eventLog.appendChild(entry);
+      eventLog.scrollTop = eventLog.scrollHeight;
+    }
+
+    // Listen for login events on all login components
+    document.addEventListener('@snice/login-attempt', (event) => {
+      logEvent('info', 'Login attempt started', event.detail);
+    });
+
+    document.addEventListener('@snice/login-success', (event) => {
+      logEvent('success', 'Login successful!', event.detail);
+    });
+
+    document.addEventListener('@snice/login-error', (event) => {
+      logEvent('error', 'Login failed', event.detail);
+    });
+
+    document.addEventListener('@snice/login-forgot-password', (event) => {
+      logEvent('info', 'Forgot password clicked', event.detail);
+    });
+
+    // Demo-specific events
+    document.addEventListener('demo-auth-response', (event) => {
+      const { success, user, error } = event.detail;
+      if (success) {
+        logEvent('success', `Authentication successful for user: ${user.username}`, event.detail);
+      } else {
+        logEvent('error', `Authentication failed: ${error}`, event.detail);
+      }
+    });
+
+    // Initialize
+    logEvent('info', 'Demo initialized. All login components are ready.');
+  </script>
+</body>
+</html>

package/components/login/snice-login.ts

@@ -1,4 +1,4 @@
-import { element, property, query, queryAll, on, dispatch, request, type Response } from 'snice';
+import { element, property, query, queryAll, on, dispatch, request } from 'snice';
 import css from './snice-login.css?inline';
 import type { LoginVariant, LoginSize, LoginCredentials, LoginResult, SniceLoginElement } from './snice-login.types';
 import '../alert/snice-alert';
@@ -137,7 +137,7 @@ export class SniceLogin extends HTMLElement implements SniceLoginElement {
   }
 
   @request('login-user')
-  async *login(credentials?: LoginCredentials): Response<LoginResult> {
+  async *login(credentials?: LoginCredentials): any {
     if (!credentials) {
       credentials = this.getFormData();
     }