update

ts_web/views/eco-view-login/eco-view-login.demo.ts

@@ -0,0 +1,48 @@
+import { html } from '@design.estate/dees-element';
+import type { ILoginConfig, ILoginCredentials } from './eco-view-login.js';
+
+const handleLoginAttempt = (e: CustomEvent<ILoginCredentials>) => {
+  const { method, value } = e.detail;
+  console.log(`Login attempt via ${method}:`, value);
+
+  // Demo: Show success for PIN "1234" or password "demo"
+  const loginView = e.target as HTMLElement & { showErrorMessage: (msg: string) => void; clearInput: () => void };
+
+  if ((method === 'pin' && value === '1234') || (method === 'password' && value === 'demo')) {
+    console.log('Login successful!');
+    alert('Login successful! (Demo)');
+    loginView.clearInput();
+  } else {
+    loginView.showErrorMessage('Invalid credentials. Try PIN: 1234 or Password: demo');
+  }
+};
+
+const pinOnlyConfig: ILoginConfig = {
+  allowedMethods: ['pin'],
+  pinLength: 4,
+  welcomeMessage: 'Enter PIN',
+};
+
+const allMethodsConfig: ILoginConfig = {
+  allowedMethods: ['pin', 'password', 'qr'],
+  pinLength: 6,
+  welcomeMessage: 'Sign In',
+};
+
+export const demo = () => html`
+  <style>
+    .demo-container {
+      width: 100%;
+      height: 100%;
+      background: hsl(240 10% 4%);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+  </style>
+  <div class="demo-container">
+    <eco-view-login
+      .config=${allMethodsConfig}
+      @login-attempt=${handleLoginAttempt}
+    ></eco-view-login>
+  </div>
+`;