49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
|
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>
|
||
|
|
`;
|