signin-update

src/app/homepage/sign-in/sign-in.component.ts

@@ -222,6 +222,17 @@ export class SignInComponent {
       ...userData
     }));
 
+    // Ensure any auth modal/backdrop is closed before navigating
+    try {
+      window.dispatchEvent(new CustomEvent('auth-close'));
+      this.close.emit();
+      document.body.classList.remove('modal-open');
+      const modal = document.querySelector('.modal');
+      if (modal && modal.parentElement) modal.parentElement.removeChild(modal);
+      const backdrop = document.querySelector('.modal-backdrop');
+      if (backdrop && backdrop.parentElement) backdrop.parentElement.removeChild(backdrop);
+    } catch { /* ignore */ }
+
     this.redirectBasedOnRole(userRole);
   }
 
@@ -262,4 +273,13 @@ export class SignInComponent {
     // ensure template updates under OnPush
     this.cdr.markForCheck();
   }
+
+  ngOnDestroy() {
+    // Defensive cleanup so returning to homepage never keeps a blurred overlay
+    try {
+      document.body.classList.remove('modal-open');
+      const backdrop = document.querySelector('.modal-backdrop');
+      if (backdrop && backdrop.parentElement) backdrop.parentElement.removeChild(backdrop);
+    } catch { /* ignore */ }
+  }
 }

src/app/homepage/sign-up/sign-up.component.html

@@ -53,6 +53,7 @@
                   <div class="form-field role-field-wrapper">
                     <label for="roleGroup">Role Group <span class="required-star">*</span>
                       <span class="label-cross" *ngIf="submitted && controlHasError('roleGroup')" aria-hidden="true">✖</span>
+                      <button type="button" class="info-btn" (click)="showInfo = true" aria-label="Role info">i</button>
                     </label>
                     <select id="roleGroup" formControlName="roleGroup" (change)="onRoleGroupChange($any($event.target).value)" aria-label="Role group" [class.input-invalid]="submitted && controlHasError('roleGroup')">
                       <option value="">-- Select role group --</option>
@@ -183,9 +184,9 @@
   </div>
 
   <!-- Floating Info Popup -->
-  <div *ngIf="showInfo" class="info-popup-bg">
-    <div class="info-popup">
-      <button class="info-close" type="button" (click)="showInfo = false">&times;</button>
+  <div *ngIf="showInfo" class="info-popup-bg" (click)="showInfo = false">
+    <div class="info-popup" (click)="$event.stopPropagation()">
+      <button class="info-close" type="button" (click)="showInfo = false" aria-label="Close">&times;</button>
       <div class="info-title">Role Information</div>
 
       <div class="info-text">

src/environments/environment.ts

@@ -9,7 +9,7 @@ const isLocal =
 
 // Decide API URL based on where the app is running
 const pyDetectApiUrl = isLocal
-  ? 'http://127.0.0.1:5000'                        // your local Flask
+  ? 'http://127.0.0.1:5002'                        // your local Flask
   : 'https://pykara-Py-detect-backend.hf.space';   // Hugging Face backend
 
 export const environment = {