750 lines
20 KiB
TypeScript
750 lines
20 KiB
TypeScript
import {
|
|
customElement,
|
|
DeesElement,
|
|
type TemplateResult,
|
|
html,
|
|
property,
|
|
css,
|
|
cssManager,
|
|
state,
|
|
} from '@design.estate/dees-element';
|
|
import { DeesIcon } from '@design.estate/dees-catalog';
|
|
|
|
// Ensure icon component is registered
|
|
DeesIcon;
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'eco-view-login': EcoViewLogin;
|
|
}
|
|
}
|
|
|
|
export type TAuthMethod = 'pin' | 'password' | 'qr';
|
|
|
|
export interface ILoginConfig {
|
|
allowedMethods: TAuthMethod[];
|
|
pinLength?: number;
|
|
qrCodeData?: string;
|
|
logoUrl?: string;
|
|
welcomeMessage?: string;
|
|
subtitle?: string;
|
|
}
|
|
|
|
export interface ILoginCredentials {
|
|
method: TAuthMethod;
|
|
value: string;
|
|
}
|
|
|
|
@customElement('eco-view-login')
|
|
export class EcoViewLogin extends DeesElement {
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
.login-container {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Left Panel - Branding & Method Selection */
|
|
.left-panel {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 64px;
|
|
background: ${cssManager.bdTheme('hsl(220 15% 96%)', 'hsl(240 6% 10%)')};
|
|
border-right: 1px solid ${cssManager.bdTheme('hsl(220 15% 90%)', 'hsl(240 5% 16%)')};
|
|
}
|
|
|
|
.branding {
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.logo {
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 18px;
|
|
background: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.logo img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
border-radius: 18px;
|
|
}
|
|
|
|
.welcome-message {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 95%)')};
|
|
margin-bottom: 8px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 16px;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.method-selector {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.method-selector-label {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.method-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 16px 20px;
|
|
background: ${cssManager.bdTheme('white', 'hsl(240 5% 14%)')};
|
|
border: 2px solid ${cssManager.bdTheme('hsl(220 15% 90%)', 'hsl(240 5% 20%)')};
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.method-option:hover {
|
|
border-color: ${cssManager.bdTheme('hsl(220 15% 80%)', 'hsl(240 5% 28%)')};
|
|
background: ${cssManager.bdTheme('hsl(220 15% 98%)', 'hsl(240 5% 16%)')};
|
|
}
|
|
|
|
.method-option.active {
|
|
border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
|
|
background: ${cssManager.bdTheme('hsl(217 91% 97%)', 'hsl(217 91% 15%)')};
|
|
}
|
|
|
|
.method-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 10px;
|
|
background: ${cssManager.bdTheme('hsl(220 15% 94%)', 'hsl(240 5% 20%)')};
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.method-option.active .method-icon {
|
|
background: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
|
|
color: white;
|
|
}
|
|
|
|
.method-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.method-name {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.method-description {
|
|
font-size: 13px;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
|
|
}
|
|
|
|
.method-check {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
border: 2px solid ${cssManager.bdTheme('hsl(220 15% 85%)', 'hsl(240 5% 25%)')};
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.method-option.active .method-check {
|
|
background: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
|
|
border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
|
|
color: white;
|
|
}
|
|
|
|
/* Right Panel - Auth Input */
|
|
.right-panel {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 64px;
|
|
background: ${cssManager.bdTheme('white', 'hsl(240 6% 6%)')};
|
|
}
|
|
|
|
.auth-content {
|
|
width: 100%;
|
|
max-width: 320px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 32px;
|
|
}
|
|
|
|
.auth-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
|
|
text-align: center;
|
|
}
|
|
|
|
/* Error message */
|
|
.error-message {
|
|
color: hsl(0 72% 51%);
|
|
font-size: 14px;
|
|
text-align: center;
|
|
padding: 12px 16px;
|
|
background: hsla(0, 72%, 51%, 0.1);
|
|
border-radius: 8px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* PIN Input */
|
|
.pin-display {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
.pin-dot {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: ${cssManager.bdTheme('hsl(220 15% 85%)', 'hsl(240 5% 20%)')};
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.pin-dot.filled {
|
|
background: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
.pin-dot.error {
|
|
background: hsl(0 72% 51%);
|
|
animation: shake 0.3s ease;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-4px); }
|
|
75% { transform: translateX(4px); }
|
|
}
|
|
|
|
.numpad {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.numpad-button {
|
|
width: 76px;
|
|
height: 76px;
|
|
border-radius: 50%;
|
|
background: ${cssManager.bdTheme('hsl(220 15% 95%)', 'hsl(240 5% 14%)')};
|
|
border: none;
|
|
font-size: 28px;
|
|
font-weight: 500;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 85%)')};
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.numpad-button:hover {
|
|
background: ${cssManager.bdTheme('hsl(220 15% 90%)', 'hsl(240 5% 20%)')};
|
|
}
|
|
|
|
.numpad-button:active {
|
|
transform: scale(0.95);
|
|
background: ${cssManager.bdTheme('hsl(220 15% 85%)', 'hsl(240 5% 24%)')};
|
|
}
|
|
|
|
.numpad-button.action {
|
|
background: transparent;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.numpad-button.action:hover {
|
|
background: ${cssManager.bdTheme('hsl(220 15% 95%)', 'hsl(240 5% 14%)')};
|
|
}
|
|
|
|
.numpad-button.submit {
|
|
background: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
|
|
color: white;
|
|
}
|
|
|
|
.numpad-button.submit:hover {
|
|
background: ${cssManager.bdTheme('hsl(217 91% 55%)', 'hsl(217 91% 45%)')};
|
|
}
|
|
|
|
/* Password Input */
|
|
.password-form {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.password-input-wrapper {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.password-input {
|
|
width: 100%;
|
|
padding: 18px 52px 18px 18px;
|
|
font-size: 16px;
|
|
background: ${cssManager.bdTheme('hsl(220 15% 96%)', 'hsl(240 5% 12%)')};
|
|
border: 2px solid ${cssManager.bdTheme('hsl(220 15% 88%)', 'hsl(240 5% 20%)')};
|
|
border-radius: 12px;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.password-input:focus {
|
|
border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
|
|
}
|
|
|
|
.password-input.error {
|
|
border-color: hsl(0 72% 51%);
|
|
animation: shake 0.3s ease;
|
|
}
|
|
|
|
.password-toggle {
|
|
position: absolute;
|
|
right: 14px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
|
|
padding: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.password-toggle:hover {
|
|
background: ${cssManager.bdTheme('hsl(220 15% 90%)', 'hsl(240 5% 18%)')};
|
|
color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
|
|
}
|
|
|
|
.submit-button {
|
|
width: 100%;
|
|
padding: 18px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
background: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
|
|
color: white;
|
|
border: none;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.submit-button:hover {
|
|
background: ${cssManager.bdTheme('hsl(217 91% 55%)', 'hsl(217 91% 45%)')};
|
|
}
|
|
|
|
.submit-button:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* QR Code */
|
|
.qr-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
|
|
.qr-code {
|
|
width: 220px;
|
|
height: 220px;
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.qr-code img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.qr-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
hsl(0 0% 92%),
|
|
hsl(0 0% 92%) 10px,
|
|
hsl(0 0% 88%) 10px,
|
|
hsl(0 0% 88%) 20px
|
|
);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: hsl(0 0% 50%);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.qr-instruction {
|
|
font-size: 14px;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
|
|
text-align: center;
|
|
line-height: 1.6;
|
|
max-width: 280px;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 800px) {
|
|
.login-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.left-panel {
|
|
padding: 32px;
|
|
border-right: none;
|
|
border-bottom: 1px solid ${cssManager.bdTheme('hsl(220 15% 90%)', 'hsl(240 5% 16%)')};
|
|
}
|
|
|
|
.right-panel {
|
|
padding: 32px;
|
|
}
|
|
|
|
.branding {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.welcome-message {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.method-selector {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.method-option {
|
|
flex: 1;
|
|
min-width: 140px;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
padding: 12px;
|
|
}
|
|
|
|
.method-info {
|
|
text-align: center;
|
|
}
|
|
|
|
.method-check {
|
|
display: none;
|
|
}
|
|
}
|
|
`,
|
|
];
|
|
|
|
@property({ type: Object })
|
|
accessor config: ILoginConfig = {
|
|
allowedMethods: ['pin', 'password', 'qr'],
|
|
pinLength: 4,
|
|
welcomeMessage: 'Welcome',
|
|
subtitle: 'Sign in to continue',
|
|
};
|
|
|
|
@state()
|
|
accessor selectedMethod: TAuthMethod = 'pin';
|
|
|
|
@state()
|
|
accessor pinValue = '';
|
|
|
|
@state()
|
|
accessor passwordValue = '';
|
|
|
|
@state()
|
|
accessor showPassword = false;
|
|
|
|
@state()
|
|
accessor error = '';
|
|
|
|
@state()
|
|
accessor showError = false;
|
|
|
|
public render(): TemplateResult {
|
|
const effectivePinLength = this.config.pinLength || 4;
|
|
|
|
return html`
|
|
<div class="login-container">
|
|
<div class="left-panel">
|
|
<div class="branding">
|
|
${this.config.logoUrl
|
|
? html`<div class="logo"><img src=${this.config.logoUrl} alt="Logo" /></div>`
|
|
: html`<div class="logo"><dees-icon .icon=${'lucide:shield'} .iconSize=${32}></dees-icon></div>`
|
|
}
|
|
<h1 class="welcome-message">${this.config.welcomeMessage || 'Welcome'}</h1>
|
|
<p class="subtitle">${this.config.subtitle || 'Sign in to continue'}</p>
|
|
</div>
|
|
|
|
${this.config.allowedMethods.length > 1 ? this.renderMethodSelector() : ''}
|
|
</div>
|
|
|
|
<div class="right-panel">
|
|
<div class="auth-content">
|
|
<h2 class="auth-title">${this.getAuthTitle()}</h2>
|
|
${this.showError ? html`<div class="error-message">${this.error}</div>` : ''}
|
|
${this.selectedMethod === 'pin' ? this.renderPinInput(effectivePinLength) : ''}
|
|
${this.selectedMethod === 'password' ? this.renderPasswordInput() : ''}
|
|
${this.selectedMethod === 'qr' ? this.renderQrCode() : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private getAuthTitle(): string {
|
|
switch (this.selectedMethod) {
|
|
case 'pin':
|
|
return 'Enter your PIN';
|
|
case 'password':
|
|
return 'Enter your password';
|
|
case 'qr':
|
|
return 'Scan to sign in';
|
|
default:
|
|
return 'Sign in';
|
|
}
|
|
}
|
|
|
|
private renderMethodSelector(): TemplateResult {
|
|
const methods: Array<{ id: TAuthMethod; icon: string; name: string; description: string }> = [
|
|
{ id: 'pin', icon: 'lucide:keySquare', name: 'PIN Code', description: 'Quick numeric access' },
|
|
{ id: 'password', icon: 'lucide:key', name: 'Password', description: 'Traditional password' },
|
|
{ id: 'qr', icon: 'lucide:qrCode', name: 'QR Code', description: 'Scan with mobile app' },
|
|
];
|
|
|
|
const availableMethods = methods.filter((m) => this.config.allowedMethods.includes(m.id));
|
|
|
|
return html`
|
|
<div class="method-selector">
|
|
<span class="method-selector-label">Sign in method</span>
|
|
${availableMethods.map((method) => html`
|
|
<div
|
|
class="method-option ${this.selectedMethod === method.id ? 'active' : ''}"
|
|
@click=${() => this.selectMethod(method.id)}
|
|
>
|
|
<div class="method-icon">
|
|
<dees-icon .icon=${method.icon} .iconSize=${22}></dees-icon>
|
|
</div>
|
|
<div class="method-info">
|
|
<div class="method-name">${method.name}</div>
|
|
<div class="method-description">${method.description}</div>
|
|
</div>
|
|
<div class="method-check">
|
|
${this.selectedMethod === method.id
|
|
? html`<dees-icon .icon=${'lucide:check'} .iconSize=${14}></dees-icon>`
|
|
: ''
|
|
}
|
|
</div>
|
|
</div>
|
|
`)}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderPinInput(length: number): TemplateResult {
|
|
return html`
|
|
<div class="pin-display">
|
|
${Array.from({ length }, (_, i) => html`
|
|
<div class="pin-dot ${i < this.pinValue.length ? 'filled' : ''} ${this.showError ? 'error' : ''}"></div>
|
|
`)}
|
|
</div>
|
|
|
|
<div class="numpad">
|
|
${[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => html`
|
|
<button class="numpad-button" @click=${() => this.handlePinInput(String(num))}>${num}</button>
|
|
`)}
|
|
<button class="numpad-button action" @click=${this.handleBackspace}>
|
|
<dees-icon .icon=${'lucide:delete'} .iconSize=${24}></dees-icon>
|
|
</button>
|
|
<button class="numpad-button" @click=${() => this.handlePinInput('0')}>0</button>
|
|
<button class="numpad-button action submit" @click=${this.handlePinSubmit}>
|
|
<dees-icon .icon=${'lucide:arrowRight'} .iconSize=${24}></dees-icon>
|
|
</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderPasswordInput(): TemplateResult {
|
|
return html`
|
|
<div class="password-form">
|
|
<div class="password-input-wrapper">
|
|
<input
|
|
class="password-input ${this.showError ? 'error' : ''}"
|
|
type=${this.showPassword ? 'text' : 'password'}
|
|
placeholder="Enter your password"
|
|
.value=${this.passwordValue}
|
|
@input=${this.handlePasswordInput}
|
|
@keydown=${this.handlePasswordKeydown}
|
|
/>
|
|
<button class="password-toggle" @click=${this.togglePasswordVisibility}>
|
|
<dees-icon
|
|
.icon=${this.showPassword ? 'lucide:eyeOff' : 'lucide:eye'}
|
|
.iconSize=${20}
|
|
></dees-icon>
|
|
</button>
|
|
</div>
|
|
<button class="submit-button" @click=${this.handlePasswordSubmit}>
|
|
Sign In
|
|
</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderQrCode(): TemplateResult {
|
|
return html`
|
|
<div class="qr-container">
|
|
<div class="qr-code">
|
|
${this.config.qrCodeData
|
|
? html`<img src=${this.config.qrCodeData} alt="Login QR Code" />`
|
|
: html`<div class="qr-placeholder">QR Code</div>`
|
|
}
|
|
</div>
|
|
<p class="qr-instruction">
|
|
Open your authenticator app and scan this code to sign in securely without typing a password.
|
|
</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private selectMethod(method: TAuthMethod): void {
|
|
this.selectedMethod = method;
|
|
this.clearError();
|
|
this.pinValue = '';
|
|
this.passwordValue = '';
|
|
}
|
|
|
|
private handlePinInput(digit: string): void {
|
|
this.clearError();
|
|
const maxLength = this.config.pinLength || 4;
|
|
if (this.pinValue.length < maxLength) {
|
|
this.pinValue += digit;
|
|
this.dispatchKeyPress(digit);
|
|
}
|
|
}
|
|
|
|
private handleBackspace(): void {
|
|
this.clearError();
|
|
if (this.pinValue.length > 0) {
|
|
this.pinValue = this.pinValue.slice(0, -1);
|
|
this.dispatchEvent(new CustomEvent('backspace', {
|
|
bubbles: true,
|
|
composed: true,
|
|
}));
|
|
}
|
|
}
|
|
|
|
private handlePinSubmit(): void {
|
|
if (this.pinValue.length === 0) {
|
|
this.showErrorMessage('Please enter your PIN');
|
|
return;
|
|
}
|
|
|
|
this.dispatchLoginAttempt('pin', this.pinValue);
|
|
}
|
|
|
|
private handlePasswordInput(e: InputEvent): void {
|
|
this.clearError();
|
|
const input = e.target as HTMLInputElement;
|
|
this.passwordValue = input.value;
|
|
}
|
|
|
|
private handlePasswordKeydown(e: KeyboardEvent): void {
|
|
if (e.key === 'Enter') {
|
|
this.handlePasswordSubmit();
|
|
}
|
|
}
|
|
|
|
private handlePasswordSubmit(): void {
|
|
if (this.passwordValue.length === 0) {
|
|
this.showErrorMessage('Please enter your password');
|
|
return;
|
|
}
|
|
|
|
this.dispatchLoginAttempt('password', this.passwordValue);
|
|
}
|
|
|
|
private togglePasswordVisibility(): void {
|
|
this.showPassword = !this.showPassword;
|
|
}
|
|
|
|
private dispatchKeyPress(key: string): void {
|
|
this.dispatchEvent(new CustomEvent('key-press', {
|
|
detail: { key },
|
|
bubbles: true,
|
|
composed: true,
|
|
}));
|
|
}
|
|
|
|
private dispatchLoginAttempt(method: TAuthMethod, value: string): void {
|
|
this.dispatchEvent(new CustomEvent('login-attempt', {
|
|
detail: { method, value } as ILoginCredentials,
|
|
bubbles: true,
|
|
composed: true,
|
|
}));
|
|
}
|
|
|
|
public showErrorMessage(message: string): void {
|
|
this.error = message;
|
|
this.showError = true;
|
|
}
|
|
|
|
public clearError(): void {
|
|
this.error = '';
|
|
this.showError = false;
|
|
}
|
|
|
|
public clearInput(): void {
|
|
this.pinValue = '';
|
|
this.passwordValue = '';
|
|
}
|
|
}
|