add email verification after account registration

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

@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { Router, RouterLink } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -25,6 +25,10 @@ import { NgIf } from '@angular/common';
           <p class="text-gray-500 mt-1">Sign in to your account</p>
         </div>
 
+        <div *ngIf="showVerifiedMessage" class="bg-green-50 border border-green-200 text-green-700 text-sm rounded-lg p-3 mb-4">
+          Your account is ready. Please sign in.
+        </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>
@@ -41,6 +45,13 @@ import { NgIf } from '@angular/common';
 
           <div *ngIf="error" class="text-red-600 text-sm">{{ error }}</div>
 
+          <div *ngIf="showResendLink" class="text-sm text-center">
+            <a (click)="resendVerification()" class="text-indigo-600 font-medium hover:underline cursor-pointer">
+              Resend verification email
+            </a>
+            <div *ngIf="resendMessage" class="text-green-600 mt-1">{{ resendMessage }}</div>
+          </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' }}
@@ -55,31 +66,63 @@ import { NgIf } from '@angular/common';
     </div>
   `,
 })
-export class LoginComponent {
+export class LoginComponent implements OnInit {
   loginForm = this.fb.group({
     email: ['', [Validators.required, Validators.email]],
     password: ['', Validators.required],
   });
   loading = false;
   error = '';
+  showResendLink = false;
+  resendMessage = '';
+  showVerifiedMessage = false;
+  private unverifiedEmail = '';
 
   constructor(
     private fb: FormBuilder,
     private authService: AuthService,
     private router: Router,
+    private route: ActivatedRoute,
   ) {}
 
+  ngOnInit(): void {
+    if (this.route.snapshot.queryParams['verified'] === 'true') {
+      this.showVerifiedMessage = true;
+    }
+  }
+
   onSubmit(): void {
     if (this.loginForm.invalid) return;
     this.loading = true;
     this.error = '';
+    this.showResendLink = false;
+    this.resendMessage = '';
     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';
+        const msg = err.error?.detail || err.error?.message || 'Invalid email or password';
+        if (msg.toLowerCase().includes('verify your email')) {
+          this.error = 'Please verify your email address before logging in.';
+          this.showResendLink = true;
+          this.unverifiedEmail = email!;
+        } else {
+          this.error = msg;
+        }
         this.loading = false;
       },
     });
   }
+
+  resendVerification(): void {
+    if (!this.unverifiedEmail) return;
+    this.authService.resendVerification(this.unverifiedEmail).subscribe({
+      next: () => {
+        this.resendMessage = 'Verification email resent.';
+      },
+      error: () => {
+        this.resendMessage = 'Failed to resend. Please try again later.';
+      },
+    });
+  }
 }