From d2e5e6acac952114046bad608e024473d844ac31 Mon Sep 17 00:00:00 2001
From: Avnish Raut <avnishjraut@gmail.com>
Date: Tue, 10 Mar 2026 19:09:53 +0100
Subject: [PATCH 1/3] Adding UI for reset password and chaning *ngif to if for
 auth

---
 backend/src/mail/mail.module.ts               |  2 +-
 frontend/src/app/app.routes.ts                |  6 +-
 frontend/src/app/auth/auth.service.ts         | 18 ++++-
 .../auth/forgot-password/forgot-password.html | 21 ++++++
 .../auth/forgot-password/forgot-password.scss | 73 +++++++++++++++++++
 .../forgot-password/forgot-password.spec.ts   | 22 ++++++
 .../auth/forgot-password/forgot-password.ts   | 56 ++++++++++++++
 .../src/app/auth/login/login.component.html   | 26 ++++---
 .../src/app/auth/login/login.component.ts     |  6 +-
 .../app/auth/register/register.component.html | 29 ++++----
 .../auth/reset-password/reset-password.html   | 27 +++++++
 .../auth/reset-password/reset-password.scss   | 73 +++++++++++++++++++
 .../reset-password/reset-password.spec.ts     | 22 ++++++
 .../app/auth/reset-password/reset-password.ts | 63 ++++++++++++++++
 14 files changed, 414 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/app/auth/forgot-password/forgot-password.html
 create mode 100644 frontend/src/app/auth/forgot-password/forgot-password.scss
 create mode 100644 frontend/src/app/auth/forgot-password/forgot-password.spec.ts
 create mode 100644 frontend/src/app/auth/forgot-password/forgot-password.ts
 create mode 100644 frontend/src/app/auth/reset-password/reset-password.html
 create mode 100644 frontend/src/app/auth/reset-password/reset-password.scss
 create mode 100644 frontend/src/app/auth/reset-password/reset-password.spec.ts
 create mode 100644 frontend/src/app/auth/reset-password/reset-password.ts

diff --git a/backend/src/mail/mail.module.ts b/backend/src/mail/mail.module.ts
index 53bc297..1ea1d72 100644
--- a/backend/src/mail/mail.module.ts
+++ b/backend/src/mail/mail.module.ts
@@ -3,6 +3,6 @@ import { MailService } from './mail.service';
 
 @Module({
   providers: [MailService],
-  exports: [MailService], // ✅ VERY IMPORTANT
+  exports: [MailService],
 })
 export class MailModule {}
diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts
index a36dcf0..a5daf94 100644
--- a/frontend/src/app/app.routes.ts
+++ b/frontend/src/app/app.routes.ts
@@ -3,12 +3,16 @@ import { RegisterComponent } from './auth/register/register.component';
 import { LoginComponent } from './auth/login/login.component';
 import { authGuard } from './core/guards/auth.guard';
 import { rolesGuard } from './core/guards/roles.guard';
+import { ForgotPasswordComponent } from './auth/forgot-password/forgot-password';
+import { ResetPasswordComponent } from './auth/reset-password/reset-password';
 
 export const routes: Routes = [
   // Public routes
   { path: 'register', component: RegisterComponent },
   { path: 'login', component: LoginComponent },
+  { path: 'forgot-password', component: ForgotPasswordComponent },
 
+  { path: 'reset-password', component: ResetPasswordComponent },
   // Protected routes (canActivate: [authGuard] applied — add components as they are built)
   // Any logged-in user
   // { path: 'events', component: EventListComponent, canActivate: [authGuard] },
@@ -28,4 +32,4 @@ export const routes: Routes = [
 ];
 
 // Re-export guards so other modules can import from one place
-export { authGuard, rolesGuard };
\ No newline at end of file
+export { authGuard, rolesGuard };
diff --git a/frontend/src/app/auth/auth.service.ts b/frontend/src/app/auth/auth.service.ts
index 3ab8140..a88addc 100644
--- a/frontend/src/app/auth/auth.service.ts
+++ b/frontend/src/app/auth/auth.service.ts
@@ -18,6 +18,10 @@ interface LoginResponse {
   access_token: string;
 }
 
+interface ResetPasswordDto {
+  token: string;
+  password: string;
+}
 @Injectable({
   providedIn: 'root',
 })
@@ -35,10 +39,12 @@ export class AuthService {
       tap((res) => {
         // Save JWT in localStorage
         localStorage.setItem('token', res.access_token);
-      })
+      }),
     );
   }
-
+  reset(dto: ResetPasswordDto): Observable<any> {
+    return this.http.post(`${this.apiUrl}/reset-password`, dto);
+  }
   logout(): void {
     localStorage.removeItem('token');
   }
@@ -51,6 +57,12 @@ export class AuthService {
     return !!this.getToken();
   }
 
+  forgotPassword(email: string) {
+    return this.http.post(`${this.apiUrl}/forgot-password`, {
+      email: email,
+    });
+  }
+
   /**
    * Decodes the JWT payload and returns the user's role.
    * Returns null if no token or token is malformed.
@@ -79,4 +91,4 @@ export class AuthService {
       return null;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/auth/forgot-password/forgot-password.html b/frontend/src/app/auth/forgot-password/forgot-password.html
new file mode 100644
index 0000000..14c3793
--- /dev/null
+++ b/frontend/src/app/auth/forgot-password/forgot-password.html
@@ -0,0 +1,21 @@
+<div class="forgot-container">
+  <h2>Forgot Password</h2>
+
+  <form [formGroup]="forgotForm" (ngSubmit)="onSubmit()">
+    <label>Email</label>
+    <input type="email" formControlName="email" />
+    @if (forgotForm.get('email')?.invalid && forgotForm.get('email')?.touched) {
+      <div class="error">Enter a valid email</div>
+    }
+
+    <button type="submit" [disabled]="loading">
+      {{ loading ? 'Sent' : 'Send Reset Link' }}
+    </button>
+  </form>
+  @if (message) {
+    <p class="success">{{ message }}</p>
+  }
+  @if (error) {
+    <p class="error">{{ error }}</p>
+  }
+</div>
diff --git a/frontend/src/app/auth/forgot-password/forgot-password.scss b/frontend/src/app/auth/forgot-password/forgot-password.scss
new file mode 100644
index 0000000..348f65f
--- /dev/null
+++ b/frontend/src/app/auth/forgot-password/forgot-password.scss
@@ -0,0 +1,73 @@
+.forgot-container {
+  max-width: 400px;
+  margin: 2rem auto;
+  padding: 2rem;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  background: #f9f9f9;
+
+  h2 {
+    text-align: center;
+    margin-bottom: 1rem;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+
+    label {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 0.5rem;
+      font-weight: bold;
+
+      input {
+        padding: 0.5rem;
+        margin-top: 0.25rem;
+        border-radius: 5px;
+        border: 1px solid #ccc;
+      }
+    }
+
+    button {
+      margin-top: 1rem;
+      padding: 0.5rem;
+      border: none;
+      background-color: #007bff;
+      color: white;
+      border-radius: 5px;
+      cursor: pointer;
+
+      &:disabled {
+        background-color: #999;
+        cursor: not-allowed;
+      }
+    }
+
+    p {
+      margin-top: 1rem;
+      text-align: center;
+
+      a {
+        color: #007bff;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  .message {
+    color: green;
+    text-align: center;
+    margin-top: 0.5rem;
+  }
+
+  .error {
+    color: red;
+    font-size: 0.9rem;
+    text-align: center;
+  }
+}
diff --git a/frontend/src/app/auth/forgot-password/forgot-password.spec.ts b/frontend/src/app/auth/forgot-password/forgot-password.spec.ts
new file mode 100644
index 0000000..cfdf701
--- /dev/null
+++ b/frontend/src/app/auth/forgot-password/forgot-password.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ForgotPasswordComponent } from './forgot-password';
+
+describe('ForgotPasswordComponent', () => {
+  let component: ForgotPasswordComponent;
+  let fixture: ComponentFixture<ForgotPasswordComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ForgotPasswordComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ForgotPasswordComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/auth/forgot-password/forgot-password.ts b/frontend/src/app/auth/forgot-password/forgot-password.ts
new file mode 100644
index 0000000..dd0186e
--- /dev/null
+++ b/frontend/src/app/auth/forgot-password/forgot-password.ts
@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AuthService } from '../auth.service';
+
+@Component({
+  selector: 'app-forgot-password',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  templateUrl: './forgot-password.html',
+  styleUrls: ['./forgot-password.scss'],
+})
+export class ForgotPasswordComponent {
+  forgotForm: FormGroup;
+  message: string = '';
+  error: string = '';
+  loading: boolean = false;
+  constructor(
+    private fb: FormBuilder,
+    private auth: AuthService,
+  ) {
+    this.forgotForm = this.fb.group({
+      email: ['', [Validators.required, Validators.email]],
+    });
+  }
+
+  onSubmit() {
+    if (this.loading) return; // prevents second click
+
+    if (this.forgotForm.invalid) {
+      this.forgotForm.markAllAsTouched();
+      return;
+    }
+
+    this.loading = true; // disable button
+    this.message = '';
+    this.error = '';
+
+    const email = this.forgotForm.value.email;
+
+    this.auth.forgotPassword(email).subscribe({
+      next: () => {
+        this.message = 'Password reset email sent. Check your inbox.';
+
+        setTimeout(() => {
+          this.loading = true;
+        }, 1);
+      },
+
+      error: (err) => {
+        this.error = err.error?.message ?? 'Failed to send reset email';
+        this.loading = false;
+      },
+    });
+  }
+}
diff --git a/frontend/src/app/auth/login/login.component.html b/frontend/src/app/auth/login/login.component.html
index f087187..6a1383e 100644
--- a/frontend/src/app/auth/login/login.component.html
+++ b/frontend/src/app/auth/login/login.component.html
@@ -6,17 +6,17 @@ <h2>Login</h2>
       Email
       <input formControlName="email" />
     </label>
-    <div *ngIf="loginForm.get('email')?.invalid && loginForm.get('email')?.touched" class="error">
-      Enter a valid email
-    </div>
+    @if (loginForm.get('email')?.invalid && loginForm.get('email')?.touched) {
+      <div class="error">Enter a valid email</div>
+    }
 
     <label>
       Password
       <input type="password" formControlName="password" />
     </label>
-    <div *ngIf="loginForm.get('password')?.invalid && loginForm.get('password')?.touched" class="error">
-      Password must be at least 6 characters
-    </div>
+    @if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
+      <div class="error">Password must be at least 8 characters</div>
+    }
 
     <button type="submit" [disabled]="loginForm.invalid">Login</button>
 
@@ -24,8 +24,16 @@ <h2>Login</h2>
       Don't have an account?
       <a [routerLink]="['/register']">Go to Registration</a>
     </p>
+    <p>
+      Forgot Password?
+      <a [routerLink]="['/forgot-password']">Reset</a>
+    </p>
   </form>
 
-  <p class="message" *ngIf="message">{{ message }}</p>
-  <p class="error" *ngIf="error">{{ error }}</p>
-</div>
\ No newline at end of file
+  @if (message) {
+    <p class="message">{{ message }}</p>
+  }
+  @if (error) {
+    <p class="error">{{ error }}</p>
+  }
+</div>
diff --git a/frontend/src/app/auth/login/login.component.ts b/frontend/src/app/auth/login/login.component.ts
index c1e91f9..edea58c 100644
--- a/frontend/src/app/auth/login/login.component.ts
+++ b/frontend/src/app/auth/login/login.component.ts
@@ -9,7 +9,7 @@ import { AuthService } from '../auth.service';
   standalone: true,
   imports: [CommonModule, ReactiveFormsModule, RouterModule],
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+  styleUrls: ['./login.component.scss'],
 })
 export class LoginComponent {
   loginForm: FormGroup;
@@ -23,7 +23,7 @@ export class LoginComponent {
   ) {
     this.loginForm = this.fb.group({
       email: ['', [Validators.required, Validators.email]],
-      password: ['', [Validators.required, Validators.minLength(6)]]
+      password: ['', [Validators.required, Validators.minLength(8)]],
     });
   }
 
@@ -45,4 +45,4 @@ export class LoginComponent {
       this.error = 'Please enter valid email and password.';
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/auth/register/register.component.html b/frontend/src/app/auth/register/register.component.html
index ee052ef..29ecca2 100644
--- a/frontend/src/app/auth/register/register.component.html
+++ b/frontend/src/app/auth/register/register.component.html
@@ -6,25 +6,24 @@ <h2>Register</h2>
       Username
       <input formControlName="username" />
     </label>
-    <div *ngIf="registerForm.get('username')?.invalid && registerForm.get('username')?.touched" class="error">
-      Username is required
-    </div>
+    @if (registerForm.get('username')?.invalid && registerForm.get('username')?.touched) {
+      <div class="error">Username is required</div>
+    }
 
     <label>
       Email
       <input formControlName="email" />
     </label>
-    <div *ngIf="registerForm.get('email')?.invalid && registerForm.get('email')?.touched" class="error">
-      Enter a valid email
-    </div>
-
+    @if (registerForm.get('email')?.invalid && registerForm.get('email')?.touched) {
+      <div class="error">Enter a valid email</div>
+    }
     <label>
       Password
       <input type="password" formControlName="password" />
     </label>
-    <div *ngIf="registerForm.get('password')?.invalid && registerForm.get('password')?.touched" class="error">
-      Password must be at least 6 characters
-    </div>
+    @if (registerForm.get('password')?.invalid && registerForm.get('password')?.touched) {
+      <div class="error">Password must be at least 8 characters</div>
+    }
 
     <label>
       Role
@@ -42,6 +41,10 @@ <h2>Register</h2>
     </p>
   </form>
 
-  <p class="message" *ngIf="message">{{ message }}</p>
-  <p class="error" *ngIf="error">{{ error }}</p>
-</div>
\ No newline at end of file
+  @if (message) {
+    <p class="message">{{ message }}</p>
+  }
+  @if (error) {
+    <p class="error">{{ error }}</p>
+  }
+</div>
diff --git a/frontend/src/app/auth/reset-password/reset-password.html b/frontend/src/app/auth/reset-password/reset-password.html
new file mode 100644
index 0000000..a3eff3a
--- /dev/null
+++ b/frontend/src/app/auth/reset-password/reset-password.html
@@ -0,0 +1,27 @@
+<div class="reset-container">
+  <h2>Reset Password</h2>
+
+  <form [formGroup]="resetForm" (ngSubmit)="onSubmit()">
+    <label>New Password</label>
+    <input type="password" formControlName="password" />
+
+    @if (resetForm.get('password')?.touched && resetForm.get('password')?.invalid) {
+      <div>
+        @if (resetForm.get('password')?.errors?.['Matches']) {
+          <small>
+            Password must contain at least 1 uppercase letter, 1 lowercase letter, 1 number, and 1
+            special character
+          </small>
+        }
+      </div>
+    }
+    <button type="submit">Reset Password</button>
+  </form>
+
+  @if (message) {
+    <p class="success">{{ message }}</p>
+  }
+  @if (error) {
+    <p class="error">{{ error }}</p>
+  }
+</div>
diff --git a/frontend/src/app/auth/reset-password/reset-password.scss b/frontend/src/app/auth/reset-password/reset-password.scss
new file mode 100644
index 0000000..3980f23
--- /dev/null
+++ b/frontend/src/app/auth/reset-password/reset-password.scss
@@ -0,0 +1,73 @@
+.reset-container {
+  max-width: 400px;
+  margin: 2rem auto;
+  padding: 2rem;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  background: #f9f9f9;
+
+  h2 {
+    text-align: center;
+    margin-bottom: 1rem;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+
+    label {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 0.5rem;
+      font-weight: bold;
+
+      input {
+        padding: 0.5rem;
+        margin-top: 0.25rem;
+        border-radius: 5px;
+        border: 1px solid #ccc;
+      }
+    }
+
+    button {
+      margin-top: 1rem;
+      padding: 0.5rem;
+      border: none;
+      background-color: #28a745;
+      color: white;
+      border-radius: 5px;
+      cursor: pointer;
+
+      &:disabled {
+        background-color: #999;
+        cursor: not-allowed;
+      }
+    }
+
+    p {
+      margin-top: 1rem;
+      text-align: center;
+
+      a {
+        color: #007bff;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  .message {
+    color: green;
+    text-align: center;
+    margin-top: 0.5rem;
+  }
+
+  .error {
+    color: red;
+    font-size: 0.9rem;
+    text-align: center;
+  }
+}
diff --git a/frontend/src/app/auth/reset-password/reset-password.spec.ts b/frontend/src/app/auth/reset-password/reset-password.spec.ts
new file mode 100644
index 0000000..733211a
--- /dev/null
+++ b/frontend/src/app/auth/reset-password/reset-password.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResetPassword } from './reset-password';
+
+describe('ResetPassword', () => {
+  let component: ResetPassword;
+  let fixture: ComponentFixture<ResetPassword>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ResetPassword],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ResetPassword);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/auth/reset-password/reset-password.ts b/frontend/src/app/auth/reset-password/reset-password.ts
new file mode 100644
index 0000000..2ff4b80
--- /dev/null
+++ b/frontend/src/app/auth/reset-password/reset-password.ts
@@ -0,0 +1,63 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AuthService } from '../auth.service';
+
+@Component({
+  selector: 'app-reset-password',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  templateUrl: './reset-password.html',
+  styleUrls: ['./reset-password.scss'],
+})
+export class ResetPasswordComponent implements OnInit {
+  resetForm: FormGroup;
+  message: string = '';
+  error: string = '';
+  token: string = '';
+
+  constructor(
+    private fb: FormBuilder,
+    private auth: AuthService,
+    private route: ActivatedRoute,
+    private router: Router,
+  ) {
+    this.resetForm = this.fb.group({
+      password: ['', [Validators.required, Validators.minLength(8)]],
+    });
+  }
+
+  ngOnInit() {
+    this.token = this.route.snapshot.queryParamMap.get('token') ?? '';
+  }
+
+  onSubmit() {
+    this.resetForm.markAllAsTouched();
+
+    if (this.resetForm.valid) {
+      const payload = {
+        token: this.token,
+        password: this.resetForm.value.password,
+      };
+
+      this.auth.reset(payload).subscribe({
+        next: () => {
+          this.error = '';
+          this.message = 'Password successfully reset';
+
+          setTimeout(() => {
+            this.router.navigate(['/login']);
+          }, 2000);
+        },
+
+        error: (err) => {
+          this.error = err.error?.message ?? 'Reset password failed';
+          this.message = '';
+        },
+      });
+    } else {
+      this.error = 'Password must be at least 8 characters';
+    }
+  }
+}

From 6fe3cfcde7f4b7c893135d8a790d8ce5fd8a9011 Mon Sep 17 00:00:00 2001
From: Avnish Raut <avnishjraut@gmail.com>
Date: Wed, 11 Mar 2026 10:28:05 +0100
Subject: [PATCH 2/3] Changed to auto detect messages for auth without focus

---
 .../auth/forgot-password/forgot-password.ts   |  6 ++-
 .../src/app/auth/login/login.component.ts     | 11 ++--
 .../app/auth/register/register.component.html |  2 +-
 .../app/auth/register/register.component.ts   | 52 ++++++++++---------
 .../app/auth/reset-password/reset-password.ts | 10 ++--
 5 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/frontend/src/app/auth/forgot-password/forgot-password.ts b/frontend/src/app/auth/forgot-password/forgot-password.ts
index dd0186e..e0c4dca 100644
--- a/frontend/src/app/auth/forgot-password/forgot-password.ts
+++ b/frontend/src/app/auth/forgot-password/forgot-password.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectorRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AuthService } from '../auth.service';
@@ -18,6 +18,7 @@ export class ForgotPasswordComponent {
   constructor(
     private fb: FormBuilder,
     private auth: AuthService,
+    private cdr: ChangeDetectorRef,
   ) {
     this.forgotForm = this.fb.group({
       email: ['', [Validators.required, Validators.email]],
@@ -41,7 +42,7 @@ export class ForgotPasswordComponent {
     this.auth.forgotPassword(email).subscribe({
       next: () => {
         this.message = 'Password reset email sent. Check your inbox.';
-
+        this.cdr.detectChanges();
         setTimeout(() => {
           this.loading = true;
         }, 1);
@@ -49,6 +50,7 @@ export class ForgotPasswordComponent {
 
       error: (err) => {
         this.error = err.error?.message ?? 'Failed to send reset email';
+        this.cdr.detectChanges();
         this.loading = false;
       },
     });
diff --git a/frontend/src/app/auth/login/login.component.ts b/frontend/src/app/auth/login/login.component.ts
index edea58c..85c67fe 100644
--- a/frontend/src/app/auth/login/login.component.ts
+++ b/frontend/src/app/auth/login/login.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectorRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router, RouterModule } from '@angular/router';
@@ -20,6 +20,7 @@ export class LoginComponent {
     private fb: FormBuilder,
     private auth: AuthService,
     private router: Router,
+    private cdr: ChangeDetectorRef,
   ) {
     this.loginForm = this.fb.group({
       email: ['', [Validators.required, Validators.email]],
@@ -28,13 +29,15 @@ export class LoginComponent {
   }
 
   onSubmit() {
-    this.loginForm.markAllAsTouched();
-
     if (this.loginForm.valid) {
       this.auth.login(this.loginForm.value).subscribe({
         next: () => {
+          this.message = 'Login successful! Redirecting...';
           this.error = '';
-          this.router.navigate(['/events']);
+          this.cdr.detectChanges();
+          setTimeout(() => {
+            this.router.navigate(['/events']);
+          }, 1000);
         },
         error: (err) => {
           this.error = err.error?.message ?? 'Invalid email or password';
diff --git a/frontend/src/app/auth/register/register.component.html b/frontend/src/app/auth/register/register.component.html
index 29ecca2..5ffe3e9 100644
--- a/frontend/src/app/auth/register/register.component.html
+++ b/frontend/src/app/auth/register/register.component.html
@@ -14,7 +14,7 @@ <h2>Register</h2>
       Email
       <input formControlName="email" />
     </label>
-    @if (registerForm.get('email')?.invalid && registerForm.get('email')?.touched) {
+    @if (registerForm.get('email')?.invalid && registerForm.get('email')?.dirty) {
       <div class="error">Enter a valid email</div>
     }
     <label>
diff --git a/frontend/src/app/auth/register/register.component.ts b/frontend/src/app/auth/register/register.component.ts
index 8b5ec7c..192ec47 100644
--- a/frontend/src/app/auth/register/register.component.ts
+++ b/frontend/src/app/auth/register/register.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectorRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router, RouterModule } from '@angular/router';
@@ -9,7 +9,7 @@ import { AuthService } from '../auth.service';
   standalone: true,
   imports: [CommonModule, ReactiveFormsModule, RouterModule],
   templateUrl: './register.component.html',
-  styleUrls: ['./register.component.scss']
+  styleUrls: ['./register.component.scss'],
 })
 export class RegisterComponent {
   registerForm: FormGroup;
@@ -20,36 +20,40 @@ export class RegisterComponent {
     private fb: FormBuilder,
     private auth: AuthService,
     private router: Router,
+    private cdr: ChangeDetectorRef,
   ) {
     this.registerForm = this.fb.group({
       username: ['', Validators.required],
       email: ['', [Validators.required, Validators.email]],
-      password: ['', [Validators.required, Validators.minLength(6)]],
-      role: ['USER', Validators.required]
+      password: ['', [Validators.required, Validators.minLength(8)]],
+      role: ['USER', Validators.required],
     });
   }
 
   onSubmit() {
-    this.registerForm.markAllAsTouched();
-
-    if (this.registerForm.valid) {
-      this.auth.register(this.registerForm.value).subscribe({
-        next: () => {
-          this.message = 'Registration successful! Please log in.';
-          this.error = '';
-          this.router.navigate(['/login']);
-        },
-        error: (err) => {
-          if (err.status === 409) {
-            this.error = 'User with this email already exists.';
-          } else {
-            this.error = err.error?.message ?? 'Registration failed';
-          }
-          this.message = '';
-        },
-      });
-    } else {
+    if (this.registerForm.invalid) {
       this.error = 'Please fill in all fields correctly.';
+      return;
     }
+
+    this.auth.register(this.registerForm.value).subscribe({
+      next: () => {
+        this.message = 'Registration successful! Redirecting...';
+        this.error = '';
+        this.cdr.detectChanges();
+        setTimeout(() => {
+          this.router.navigate(['/login']);
+        }, 2000);
+      },
+      error: (err) => {
+        this.message = '';
+        if (err.status === 409) {
+          this.error = 'User with this email already exists.';
+        } else {
+          this.error = err.error?.message ?? 'Registration failed';
+        }
+        this.cdr.detectChanges();
+      },
+    });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/auth/reset-password/reset-password.ts b/frontend/src/app/auth/reset-password/reset-password.ts
index 2ff4b80..cdf5566 100644
--- a/frontend/src/app/auth/reset-password/reset-password.ts
+++ b/frontend/src/app/auth/reset-password/reset-password.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -22,6 +22,7 @@ export class ResetPasswordComponent implements OnInit {
     private auth: AuthService,
     private route: ActivatedRoute,
     private router: Router,
+    private cdr: ChangeDetectorRef,
   ) {
     this.resetForm = this.fb.group({
       password: ['', [Validators.required, Validators.minLength(8)]],
@@ -45,7 +46,7 @@ export class ResetPasswordComponent implements OnInit {
         next: () => {
           this.error = '';
           this.message = 'Password successfully reset';
-
+          this.cdr.detectChanges();
           setTimeout(() => {
             this.router.navigate(['/login']);
           }, 2000);
@@ -54,10 +55,13 @@ export class ResetPasswordComponent implements OnInit {
         error: (err) => {
           this.error = err.error?.message ?? 'Reset password failed';
           this.message = '';
+          this.cdr.detectChanges();
         },
       });
     } else {
-      this.error = 'Password must be at least 8 characters';
+      this.error =
+        'Password must contain at least 1 uppercase letter, 1 lowercase letter, 1 number, and 1 special character';
+      this.cdr.detectChanges();
     }
   }
 }

From 5861fe710299e0b714e33b0ade534f1c182ccf51 Mon Sep 17 00:00:00 2001
From: Avnish Raut <71318917+Avnish-Raut@users.noreply.github.com>
Date: Wed, 11 Mar 2026 10:29:36 +0100
Subject: [PATCH 3/3] Change email validation trigger from 'dirty' to 'touched'

---
 frontend/src/app/auth/register/register.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/auth/register/register.component.html b/frontend/src/app/auth/register/register.component.html
index 5ffe3e9..29ecca2 100644
--- a/frontend/src/app/auth/register/register.component.html
+++ b/frontend/src/app/auth/register/register.component.html
@@ -14,7 +14,7 @@ <h2>Register</h2>
       Email
       <input formControlName="email" />
     </label>
-    @if (registerForm.get('email')?.invalid && registerForm.get('email')?.dirty) {
+    @if (registerForm.get('email')?.invalid && registerForm.get('email')?.touched) {
       <div class="error">Enter a valid email</div>
     }
     <label>