94 lines
3.7 KiB
TypeScript
94 lines
3.7 KiB
TypeScript
import { Component, inject } from '@angular/core';
|
|
import { RouterLink } from '@angular/router';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { AuthService } from '../../services/auth.service';
|
|
import { Router } from '@angular/router';
|
|
|
|
@Component({
|
|
selector: 'app-login',
|
|
standalone: true,
|
|
imports: [RouterLink, FormsModule],
|
|
template: `
|
|
<div class="min-h-screen relative flex items-center justify-center">
|
|
<!-- Synthwave фон -->
|
|
<div class="synth-bg" aria-hidden="true">
|
|
<div class="synth-sun"></div>
|
|
<div class="synth-grid">
|
|
<div class="synth-grid-plane"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Форма логина -->
|
|
<div class="relative z-10 w-full max-w-md px-4">
|
|
<div class="glass-panel p-8">
|
|
<div class="text-center mb-8">
|
|
<div class="w-16 h-16 mx-auto rounded-xl bg-gradient-to-br from-synth-pink to-synth-cyan flex items-center justify-center text-synth-dark font-black text-2xl font-orbitron shadow-[0_0_20px_rgba(255,0,127,0.8)] mb-4">
|
|
M
|
|
</div>
|
|
<h1 class="text-3xl font-orbitron font-extrabold tracking-wider neon-text-primary mb-2">
|
|
MAIL<span class="text-synth-cyan font-normal">SERVER</span>
|
|
</h1>
|
|
<p class="text-sm text-slate-400 font-mono">Sign in to your mailbox</p>
|
|
</div>
|
|
|
|
@if (error) {
|
|
<div class="mb-4 p-3 rounded-lg bg-synth-pink/20 border border-synth-pink/40 text-synth-pink text-sm font-mono">
|
|
{{ error }}
|
|
</div>
|
|
}
|
|
|
|
<form (ngSubmit)="onLogin()" class="space-y-4">
|
|
<div>
|
|
<label for="email" class="block text-xs font-mono text-synth-cyan mb-1">EMAIL</label>
|
|
<input id="email" type="email" [(ngModel)]="email" name="email" required
|
|
class="w-full bg-synth-darker/80 border border-synth-cyan/40 rounded-xl px-4 py-3 text-sm text-slate-200 font-mono focus:outline-none focus:ring-2 focus:ring-synth-pink focus:border-synth-cyan transition-all"
|
|
placeholder="user@example.com">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="password" class="block text-xs font-mono text-synth-cyan mb-1">PASSWORD</label>
|
|
<input id="password" type="password" [(ngModel)]="password" name="password" required
|
|
class="w-full bg-synth-darker/80 border border-synth-cyan/40 rounded-xl px-4 py-3 text-sm text-slate-200 font-mono focus:outline-none focus:ring-2 focus:ring-synth-pink focus:border-synth-cyan transition-all"
|
|
placeholder="••••••••">
|
|
</div>
|
|
|
|
<button type="submit" [disabled]="loading"
|
|
class="cyber-btn w-full py-3 rounded-xl text-sm font-bold mt-6">
|
|
{{ loading ? 'CONNECTING...' : 'LOGIN' }}
|
|
</button>
|
|
</form>
|
|
|
|
<p class="text-center text-sm text-slate-400 mt-6">
|
|
No account?
|
|
<a routerLink="/register" class="text-synth-cyan hover:text-synth-pink font-mono transition-colors">
|
|
Register here
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
styles: ``
|
|
})
|
|
export default class LoginComponent {
|
|
private authService = inject(AuthService);
|
|
private router = inject(Router);
|
|
|
|
email = '';
|
|
password = '';
|
|
error = '' as string | null;
|
|
loading = false as boolean;
|
|
|
|
onLogin(): void {
|
|
this.loading = true;
|
|
this.error = null;
|
|
this.authService.login({ email: this.email, password: this.password }).subscribe({
|
|
next: () => this.router.navigate(['/inbox']),
|
|
error: (err) => {
|
|
this.error = 'Invalid email or password';
|
|
this.loading = false;
|
|
}
|
|
});
|
|
}
|
|
}
|