Secure auth flows and harden validation across the UI

src/app/app.config.ts

@@ -1,4 +1,10 @@
-import { ApplicationConfig, inject, provideAppInitializer, provideZonelessChangeDetection } from '@angular/core';
+import {
+  ApplicationConfig,
+  inject,
+  isDevMode,
+  provideAppInitializer,
+  provideZonelessChangeDetection,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
@@ -55,7 +61,9 @@ function setupDebugInterface(jwtService: JwtService, userService: UserService):
  */
 export function initAuth(jwtService: JwtService, userService: UserService) {
   return () => {
-    setupDebugInterface(jwtService, userService);
+    if (isDevMode()) {
+      setupDebugInterface(jwtService, userService);
+    }
 
     if (jwtService.getToken()) {
       return userService.getCurrentUser();

src/app/core/auth/auth.component.html

@@ -32,7 +32,7 @@ <h1 class="text-xs-center">{{ title }}</h1>
                 name="email"
                 placeholder="Email"
                 class="form-control form-control-lg"
-                type="text"
+                type="email"
               />
             </fieldset>
             <fieldset class="form-group">

src/app/core/auth/auth.component.ts

@@ -12,6 +12,8 @@ interface AuthForm {
   username?: FormControl<string>;
 }
 
+const STRONG_PASSWORD_PATTERN = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9])\S{8,}$/;
+
 @Component({
   selector: 'app-auth-page',
   templateUrl: './auth.component.html',
@@ -33,7 +35,7 @@ export default class AuthComponent implements OnInit {
   ) {
     this.authForm = new FormGroup<AuthForm>({
       email: new FormControl('', {
-        validators: [Validators.required],
+        validators: [Validators.required, Validators.email],
         nonNullable: true,
       }),
       password: new FormControl('', {
@@ -46,6 +48,17 @@ export default class AuthComponent implements OnInit {
   ngOnInit(): void {
     this.authType = this.route.snapshot.url.at(-1)!.path;
     this.title = this.authType === 'login' ? 'Sign in' : 'Sign up';
+    const passwordControl = this.authForm.controls.password;
+    if (this.authType === 'register') {
+      passwordControl.setValidators([
+        Validators.required,
+        Validators.minLength(6),
+        Validators.pattern(STRONG_PASSWORD_PATTERN),
+      ]);
+    } else {
+      passwordControl.setValidators([Validators.required, Validators.minLength(6)]);
+    }
+    passwordControl.updateValueAndValidity({ emitEvent: false });
     if (this.authType === 'register') {
       this.authForm.addControl(
         'username',
@@ -58,6 +71,11 @@ export default class AuthComponent implements OnInit {
   }
 
   submitForm(): void {
+    if (this.authForm.invalid) {
+      this.authForm.markAllAsTouched();
+      return;
+    }
+
     this.isSubmitting.set(true);
     this.errors.set({ errors: {} });
 

src/app/core/auth/if-authenticated.directive.ts

@@ -14,25 +14,40 @@ export class IfAuthenticatedDirective<T> implements OnInit {
     private viewContainer: ViewContainerRef,
   ) {}
 
+  isAuthenticated = signal<boolean | null>(null);
   condition = signal(false);
   hasView = signal(false);
 
   ngOnInit() {
     this.userService.isAuthenticated.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((isAuthenticated: boolean) => {
-      const authRequired = isAuthenticated && this.condition();
-      const unauthRequired = !isAuthenticated && !this.condition();
-
-      if ((authRequired || unauthRequired) && !this.hasView()) {
-        this.viewContainer.createEmbeddedView(this.templateRef);
-        this.hasView.set(true);
-      } else if (this.hasView()) {
-        this.viewContainer.clear();
-        this.hasView.set(false);
-      }
+      this.isAuthenticated.set(isAuthenticated);
+      this.updateView();
     });
   }
 
   @Input() set ifAuthenticated(condition: boolean) {
     this.condition.set(condition);
+    this.updateView();
+  }
+
+  private updateView(): void {
+    const isAuthenticated = this.isAuthenticated();
+
+    if (isAuthenticated === null) {
+      return;
+    }
+
+    const shouldShow = (isAuthenticated && this.condition()) || (!isAuthenticated && !this.condition());
+
+    if (shouldShow && !this.hasView()) {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+      this.hasView.set(true);
+      return;
+    }
+
+    if (!shouldShow && this.hasView()) {
+      this.viewContainer.clear();
+      this.hasView.set(false);
+    }
   }
 }

src/app/core/auth/services/jwt.service.spec.ts

@@ -53,9 +53,9 @@ describe('JwtService', () => {
       expect(token).toBe(mockToken);
     });
 
-    it('should return undefined when no token exists', () => {
+    it('should return null when no token exists', () => {
       const token = service.getToken();
-      expect(token).toBeUndefined();
+      expect(token).toBeNull();
     });
 
     it('should handle empty string token', () => {
@@ -168,7 +168,7 @@ describe('JwtService', () => {
       service.destroyToken();
       delete localStorageSpy['jwtToken'];
       const token = service.getToken();
-      expect(token).toBeUndefined();
+      expect(token).toBeNull();
     });
 
     it('should be idempotent', () => {
@@ -305,7 +305,7 @@ describe('JwtService', () => {
       // User logs out
       service.destroyToken();
       delete localStorageSpy['jwtToken'];
-      expect(service.getToken()).toBeUndefined();
+      expect(service.getToken()).toBeNull();
     });
 
     it('should support session management', () => {

src/app/core/auth/services/jwt.service.ts

@@ -1,16 +1,34 @@
-import { Injectable } from '@angular/core';
+import { Injectable, isDevMode } from '@angular/core';
+
+const TOKEN_KEY = 'jwtToken';
 
 @Injectable({ providedIn: 'root' })
 export class JwtService {
-  getToken(): string {
-    return window.localStorage['jwtToken'];
+  private inMemoryToken: string | null = null;
+
+  getToken(): string | null {
+    if (isDevMode()) {
+      return window.localStorage[TOKEN_KEY] ?? null;
+    }
+
+    return this.inMemoryToken;
   }
 
   saveToken(token: string): void {
-    window.localStorage['jwtToken'] = token;
+    if (isDevMode()) {
+      window.localStorage[TOKEN_KEY] = token;
+      return;
+    }
+
+    this.inMemoryToken = token;
   }
 
   destroyToken(): void {
-    window.localStorage.removeItem('jwtToken');
+    if (isDevMode()) {
+      window.localStorage.removeItem(TOKEN_KEY);
+      return;
+    }
+
+    this.inMemoryToken = null;
   }
 }

src/app/features/article/pages/article/article.component.ts

@@ -108,6 +108,11 @@ export default class ArticleComponent implements OnInit {
     const article = this.article();
     if (!article) return;
 
+    if (this.isDeleting()) return;
+
+    const confirmed = window.confirm('Are you sure you want to delete this article?');
+    if (!confirmed) return;
+
     this.isDeleting.set(true);
 
     this.articleService

src/app/features/settings/settings.component.ts

@@ -15,6 +15,8 @@ interface SettingsForm {
   password: FormControl<string>;
 }
 
+const STRONG_PASSWORD_PATTERN = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9])\S{8,}$/;
+
 @Component({
   selector: 'app-settings-page',
   templateUrl: './settings.component.html',
@@ -27,9 +29,12 @@ export default class SettingsComponent implements OnInit {
     image: new FormControl('', { nonNullable: true }),
     username: new FormControl('', { nonNullable: true }),
     bio: new FormControl('', { nonNullable: true }),
-    email: new FormControl('', { nonNullable: true }),
+    email: new FormControl('', {
+      validators: [Validators.required, Validators.email],
+      nonNullable: true,
+    }),
     password: new FormControl('', {
-      validators: [Validators.required],
+      validators: [Validators.pattern(STRONG_PASSWORD_PATTERN)],
       nonNullable: true,
     }),
   });
@@ -58,6 +63,11 @@ export default class SettingsComponent implements OnInit {
   }
 
   submitForm() {
+    if (this.settingsForm.invalid) {
+      this.settingsForm.markAllAsTouched();
+      return;
+    }
+
     this.isSubmitting.set(true);
 
     const payload = { ...this.settingsForm.value };