register, login, create and manage sites and pages

frontend/src/app/auth/login/login.component.ts

@@ -0,0 +1,99 @@
+import { Component } from '@angular/core';
+import { Router, RouterLink } from '@angular/router';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatDividerModule } from '@angular/material/divider';
+import { AuthService } from '../../core/services/auth.service';
+import { NgIf } from '@angular/common';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [
+    RouterLink, ReactiveFormsModule, NgIf,
+    MatCardModule, MatFormFieldModule, MatInputModule, MatButtonModule,
+    MatProgressSpinnerModule, MatDividerModule,
+  ],
+  template: `
+    <div class="min-h-screen flex items-center justify-center bg-gray-50 px-4">
+      <mat-card class="w-full max-w-md p-8">
+        <div class="text-center mb-8">
+          <h1 class="text-3xl font-bold text-indigo-600">Indie</h1>
+          <p class="text-gray-500 mt-1">Sign in to your account</p>
+        </div>
+
+        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-4">
+          <mat-form-field appearance="outline" class="w-full">
+            <mat-label>Email</mat-label>
+            <input matInput type="email" formControlName="email" placeholder="you@example.com" />
+            <mat-error *ngIf="loginForm.get('email')?.hasError('required')">Email is required</mat-error>
+            <mat-error *ngIf="loginForm.get('email')?.hasError('email')">Invalid email format</mat-error>
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" class="w-full">
+            <mat-label>Password</mat-label>
+            <input matInput type="password" formControlName="password" />
+            <mat-error *ngIf="loginForm.get('password')?.hasError('required')">Password is required</mat-error>
+          </mat-form-field>
+
+          <div *ngIf="error" class="text-red-600 text-sm">{{ error }}</div>
+
+          <button mat-flat-button color="primary" type="submit" [disabled]="loading" class="w-full py-2">
+            <mat-spinner *ngIf="loading" diameter="20" class="inline-block mr-2"></mat-spinner>
+            {{ loading ? 'Signing in...' : 'Sign In' }}
+          </button>
+        </form>
+
+        <div class="my-4">
+          <mat-divider></mat-divider>
+        </div>
+
+        <div class="flex flex-col gap-3">
+          <a mat-stroked-button href="/oauth2/authorization/google" class="w-full">
+            Sign in with Google
+          </a>
+          <a mat-stroked-button href="/oauth2/authorization/github" class="w-full">
+            Sign in with GitHub
+          </a>
+        </div>
+
+        <p class="text-center mt-6 text-sm text-gray-500">
+          Don't have an account?
+          <a routerLink="/register" class="text-indigo-600 font-medium hover:underline">Register</a>
+        </p>
+      </mat-card>
+    </div>
+  `,
+})
+export class LoginComponent {
+  loginForm = this.fb.group({
+    email: ['', [Validators.required, Validators.email]],
+    password: ['', Validators.required],
+  });
+  loading = false;
+  error = '';
+
+  constructor(
+    private fb: FormBuilder,
+    private authService: AuthService,
+    private router: Router,
+  ) {}
+
+  onSubmit(): void {
+    if (this.loginForm.invalid) return;
+    this.loading = true;
+    this.error = '';
+    const { email, password } = this.loginForm.value;
+    this.authService.login(email!, password!).subscribe({
+      next: () => this.router.navigate(['/dashboard']),
+      error: (err) => {
+        this.error = err.error?.message || err.error?.error || 'Invalid email or password';
+        this.loading = false;
+      },
+    });
+  }
+}