From f7d85387718530b591f84fff13667932332c881e Mon Sep 17 00:00:00 2001
From: "morteza.khoramdel" <morteza.khoramdel@zoodfood.com>
Date: Sun, 24 May 2026 09:49:38 +0330
Subject: [PATCH 1/2] Add static basic authentication (login/logout/AuthGuard)
 for DSOMM routes

---
 README.md                                | 21 ++++++++
 src/app/app-routing.module.ts            | 37 ++++++++-----
 src/app/app.component.css                | 32 ++++++++++-
 src/app/app.component.html               | 30 ++++++++---
 src/app/app.component.ts                 | 35 +++++++++++-
 src/app/app.module.ts                    |  2 +
 src/app/guards/auth.guard.spec.ts        | 68 ++++++++++++++++++++++++
 src/app/guards/auth.guard.ts             | 43 +++++++++++++++
 src/app/pages/login/login.component.css  | 31 +++++++++++
 src/app/pages/login/login.component.html | 35 ++++++++++++
 src/app/pages/login/login.component.ts   | 56 +++++++++++++++++++
 src/app/services/auth.service.spec.ts    | 41 ++++++++++++++
 src/app/services/auth.service.ts         | 48 +++++++++++++++++
 src/assets/Markdown Files/README.md      | 21 ++++++++
 14 files changed, 475 insertions(+), 25 deletions(-)
 create mode 100644 src/app/guards/auth.guard.spec.ts
 create mode 100644 src/app/guards/auth.guard.ts
 create mode 100644 src/app/pages/login/login.component.css
 create mode 100644 src/app/pages/login/login.component.html
 create mode 100644 src/app/pages/login/login.component.ts
 create mode 100644 src/app/services/auth.service.spec.ts
 create mode 100644 src/app/services/auth.service.ts

diff --git a/README.md b/README.md
index 40c908d78..895efa4ff 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,27 @@ You can switch on to show open TODO's for evidence by changing IS_SHOW_EVIDENCE_
 
 This page uses the Browser's localStorage to store the state of the circular headmap.
 
+# Static Demo Authentication
+
+This Angular frontend includes simple static-user authentication for demo and internal
+deployments. All users have the same permissions.
+
+Default credentials are defined in `src/app/services/auth.service.ts`:
+
+| Username | Password |
+| --- | --- |
+| `admin` | `dsomm-admin` |
+| `auditor` | `dsomm-audit` |
+| `developer` | `dsomm-dev` |
+| `viewer` | `dsomm-view` |
+
+Sign in at `/login`. The app stores the current user in the browser's `sessionStorage`, so the
+login lasts only for the current browser session.
+
+Security warning: this is frontend-only authentication. It is not secure for production because
+static credentials are shipped in the browser bundle and can be inspected by users. Use a backend
+identity provider or server-side access control for production deployments.
+
 # Changes
 Changes to the application are displayed at the release page of [DevSecOps-MaturityModel](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data/releases).
 
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index fe90fbf0b..25a12dbfe 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,4 +1,4 @@
-import { Component, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AboutUsComponent } from './pages/about-us/about-us.component';
 import { UserdayComponent } from './pages/userday/userday.component';
@@ -11,21 +11,30 @@ import { TeamsComponent } from './pages/teams/teams.component';
 import { RoadmapComponent } from './pages/roadmap/roadmap.component';
 import { SettingsComponent } from './pages/settings/settings.component';
 import { ReportComponent } from './pages/report/report.component';
+import { AuthGuard } from './guards/auth.guard';
+import { LoginComponent } from './pages/login/login.component';
 
 const routes: Routes = [
-  { path: '', component: CircularHeatmapComponent },
-  { path: 'circular-heatmap', component: CircularHeatmapComponent },
-  { path: 'matrix', component: MatrixComponent },
-  { path: 'activity-description', component: ActivityDescriptionPageComponent },
-  { path: 'mapping', component: MappingComponent },
-  { path: 'usage', redirectTo: 'usage/' },
-  { path: 'usage/:page', component: UsageComponent },
-  { path: 'teams', component: TeamsComponent },
-  { path: 'about', component: AboutUsComponent },
-  { path: 'userday', component: UserdayComponent },
-  { path: 'roadmap', component: RoadmapComponent },
-  { path: 'settings', component: SettingsComponent },
-  { path: 'report', component: ReportComponent },
+  { path: 'login', component: LoginComponent, canActivate: [AuthGuard] },
+  {
+    path: '',
+    canActivateChild: [AuthGuard],
+    children: [
+      { path: '', component: CircularHeatmapComponent },
+      { path: 'circular-heatmap', component: CircularHeatmapComponent },
+      { path: 'matrix', component: MatrixComponent },
+      { path: 'activity-description', component: ActivityDescriptionPageComponent },
+      { path: 'mapping', component: MappingComponent },
+      { path: 'usage', redirectTo: 'usage/' },
+      { path: 'usage/:page', component: UsageComponent },
+      { path: 'teams', component: TeamsComponent },
+      { path: 'about', component: AboutUsComponent },
+      { path: 'userday', component: UserdayComponent },
+      { path: 'roadmap', component: RoadmapComponent },
+      { path: 'settings', component: SettingsComponent },
+      { path: 'report', component: ReportComponent },
+    ],
+  },
 ];
 
 @NgModule({
diff --git a/src/app/app.component.css b/src/app/app.component.css
index d9d39268b..2099b4d9d 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -75,6 +75,27 @@
   transform: scale(1.05);
 }
 
+.toolbar-spacer {
+  flex: 1 1 auto;
+}
+
+.auth-actions {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.current-user {
+  font-size: 14px;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .content {
   padding: 24px;
   animation: fadeSlide 1s ease;
@@ -82,6 +103,12 @@
   box-sizing: border-box;
   overflow-y: auto;
 }
+
+.login-content {
+  flex: 1;
+  overflow-y: auto;
+}
+
 @keyframes fadeSlide {
   from {
     opacity: 0;
@@ -102,6 +129,9 @@
   .tag-subtitle {
     font-size: 11px;
   }
+  .current-user {
+    display: none;
+  }
   .logo,
   .logo-icon {
     opacity: 0;
@@ -110,4 +140,4 @@
     margin: 0;
     overflow: hidden;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 3cbe51e5b..f29628482 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,5 @@
 <mat-toolbar class="mat-elevation-z2 navbar">
-  <button mat-icon-button (click)="toggleMenu()" class="menu-btn">
+  <button mat-icon-button (click)="toggleMenu()" class="menu-btn" *ngIf="!isLoginPage">
     <mat-icon>menu</mat-icon>
   </button>
   <a routerLink="/" class="logo">
@@ -16,12 +16,26 @@
     </div>
     <div class="dummy"></div>
   </div>
+  <span class="toolbar-spacer"></span>
+  <div class="auth-actions" *ngIf="isAuthenticated">
+    <span class="current-user">{{ currentUser }}</span>
+    <button mat-icon-button (click)="logout()" title="Logout" aria-label="Logout">
+      <mat-icon>logout</mat-icon>
+    </button>
+  </div>
 </mat-toolbar>
-<mat-sidenav-container class="sidenav-container">
-  <mat-sidenav mode="side" opened class="sidenav" [style.width]="sidenavWidth">
-    <app-sidenav-buttons></app-sidenav-buttons>
-  </mat-sidenav>
-  <mat-sidenav-content class="content" [style.margin-left]="sidenavWidth">
+<ng-container *ngIf="isLoginPage; else dsommLayout">
+  <main class="login-content">
     <router-outlet></router-outlet>
-  </mat-sidenav-content>
-</mat-sidenav-container>
+  </main>
+</ng-container>
+<ng-template #dsommLayout>
+  <mat-sidenav-container class="sidenav-container">
+    <mat-sidenav mode="side" opened class="sidenav" [style.width]="sidenavWidth">
+      <app-sidenav-buttons></app-sidenav-buttons>
+    </mat-sidenav>
+    <mat-sidenav-content class="content" [style.margin-left]="sidenavWidth">
+      <router-outlet></router-outlet>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+</ng-template>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 353341899..71de88200 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,7 +1,9 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Subject, takeUntil } from 'rxjs';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter, Subject, takeUntil } from 'rxjs';
 import { ThemeService } from './service/theme.service';
 import { TitleService } from './service/title.service';
+import { AuthService } from './services/auth.service';
 
 @Component({
   selector: 'app-root',
@@ -14,10 +16,16 @@ export class AppComponent implements OnInit, OnDestroy {
   subtitle = '';
   menuIsOpen: boolean = true;
   sidenavWidth: string = '250px';
+  isLoginPage = false;
 
   private destroy$ = new Subject<void>();
 
-  constructor(private themeService: ThemeService, private titleService: TitleService) {
+  constructor(
+    private themeService: ThemeService,
+    private titleService: TitleService,
+    private authService: AuthService,
+    private router: Router
+  ) {
     this.themeService.initTheme();
   }
 
@@ -37,6 +45,16 @@ export class AppComponent implements OnInit, OnDestroy {
       this.title = titleInfo?.dimension || '';
       this.subtitle = titleInfo?.level ? 'Level ' + titleInfo?.level : '';
     });
+
+    this.isLoginPage = this.router.url.split('?')[0] === '/login';
+    this.router.events
+      .pipe(
+        filter((event): event is NavigationEnd => event instanceof NavigationEnd),
+        takeUntil(this.destroy$)
+      )
+      .subscribe(event => {
+        this.isLoginPage = event.urlAfterRedirects.split('?')[0] === '/login';
+      });
   }
 
   ngOnDestroy(): void {
@@ -49,4 +67,17 @@ export class AppComponent implements OnInit, OnDestroy {
     this.sidenavWidth = this.menuIsOpen ? '250px' : '0px';
     localStorage.setItem('state.menuIsOpen', this.menuIsOpen.toString());
   }
+
+  get isAuthenticated(): boolean {
+    return this.authService.isAuthenticated();
+  }
+
+  get currentUser(): string | null {
+    return this.authService.getCurrentUser();
+  }
+
+  logout(): void {
+    this.authService.logout();
+    void this.router.navigate(['/login']);
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index a86dca2ea..706500433 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -40,6 +40,7 @@ import { ColResizeDirective } from './directive/col-resize.directive';
 import { AddEvidenceModalComponent } from './component/add-evidence-modal/add-evidence-modal.component';
 import { EvidencePanelComponent } from './component/evidence-panel/evidence-panel.component';
 import { ViewEvidenceModalComponent } from './component/view-evidence-modal/view-evidence-modal.component';
+import { LoginComponent } from './pages/login/login.component';
 
 @NgModule({
   declarations: [
@@ -71,6 +72,7 @@ import { ViewEvidenceModalComponent } from './component/view-evidence-modal/view
     AddEvidenceModalComponent,
     EvidencePanelComponent,
     ViewEvidenceModalComponent,
+    LoginComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/guards/auth.guard.spec.ts b/src/app/guards/auth.guard.spec.ts
new file mode 100644
index 000000000..5075ca35a
--- /dev/null
+++ b/src/app/guards/auth.guard.spec.ts
@@ -0,0 +1,68 @@
+import { TestBed } from '@angular/core/testing';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AuthGuard } from './auth.guard';
+import { AuthService } from '../services/auth.service';
+
+describe('AuthGuard', () => {
+  let guard: AuthGuard;
+  let authService: AuthService;
+  let router: Router;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule.withRoutes([])],
+    });
+
+    guard = TestBed.inject(AuthGuard);
+    authService = TestBed.inject(AuthService);
+    router = TestBed.inject(Router);
+    sessionStorage.clear();
+  });
+
+  afterEach(() => {
+    sessionStorage.clear();
+  });
+
+  it('allows authenticated access to protected routes', () => {
+    authService.login('developer', 'dsomm-dev');
+
+    const result = guard.canActivate(routeSnapshot(), routerState('/matrix'));
+
+    expect(result).toBeTrue();
+  });
+
+  it('redirects unauthenticated users to login with the requested URL', () => {
+    const result = guard.canActivate(routeSnapshot(), routerState('/matrix'));
+
+    expect(router.serializeUrl(result as UrlTree)).toBe('/login?returnUrl=%2Fmatrix');
+  });
+
+  it('allows unauthenticated users to visit login', () => {
+    const result = guard.canActivate(routeSnapshot(), routerState('/login'));
+
+    expect(result).toBeTrue();
+  });
+
+  it('redirects authenticated users away from login', () => {
+    authService.login('auditor', 'dsomm-audit');
+
+    const result = guard.canActivate(routeSnapshot(), routerState('/login'));
+
+    expect(router.serializeUrl(result as UrlTree)).toBe(AuthGuard.DEFAULT_AUTHENTICATED_ROUTE);
+  });
+
+  it('redirects unauthenticated child route activation to login', () => {
+    const result = guard.canActivateChild(routeSnapshot(), routerState('/teams'));
+
+    expect(router.serializeUrl(result as UrlTree)).toBe('/login?returnUrl=%2Fteams');
+  });
+});
+
+function routeSnapshot(): ActivatedRouteSnapshot {
+  return {} as ActivatedRouteSnapshot;
+}
+
+function routerState(url: string): RouterStateSnapshot {
+  return { url } as RouterStateSnapshot;
+}
diff --git a/src/app/guards/auth.guard.ts b/src/app/guards/auth.guard.ts
new file mode 100644
index 000000000..831e94ee4
--- /dev/null
+++ b/src/app/guards/auth.guard.ts
@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import {
+  ActivatedRouteSnapshot,
+  CanActivate,
+  CanActivateChild,
+  Router,
+  RouterStateSnapshot,
+  UrlTree,
+} from '@angular/router';
+import { AuthService } from '../services/auth.service';
+
+@Injectable({ providedIn: 'root' })
+export class AuthGuard implements CanActivate, CanActivateChild {
+  static readonly DEFAULT_AUTHENTICATED_ROUTE = '/';
+
+  constructor(private authService: AuthService, private router: Router) {}
+
+  canActivate(_route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
+    return this.checkAccess(state.url);
+  }
+
+  canActivateChild(_route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
+    return this.checkAccess(state.url);
+  }
+
+  private checkAccess(url: string): boolean | UrlTree {
+    if (this.isLoginUrl(url)) {
+      return this.authService.isAuthenticated()
+        ? this.router.parseUrl(AuthGuard.DEFAULT_AUTHENTICATED_ROUTE)
+        : true;
+    }
+
+    if (this.authService.isAuthenticated()) {
+      return true;
+    }
+
+    return this.router.createUrlTree(['/login'], { queryParams: { returnUrl: url } });
+  }
+
+  private isLoginUrl(url: string): boolean {
+    return url.split('?')[0] === '/login';
+  }
+}
diff --git a/src/app/pages/login/login.component.css b/src/app/pages/login/login.component.css
new file mode 100644
index 000000000..dda959b62
--- /dev/null
+++ b/src/app/pages/login/login.component.css
@@ -0,0 +1,31 @@
+.login-page {
+  min-height: calc(100vh - 64px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+.login-panel {
+  width: 100%;
+  max-width: 380px;
+  border-radius: 8px;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.login-error {
+  color: #b00020;
+  min-height: 20px;
+  font-size: 14px;
+}
+
+button[type='submit'] {
+  align-self: stretch;
+}
diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html
new file mode 100644
index 000000000..8861437a7
--- /dev/null
+++ b/src/app/pages/login/login.component.html
@@ -0,0 +1,35 @@
+<div class="login-page">
+  <mat-card class="login-panel">
+    <mat-card-header>
+      <mat-card-title>Sign in to DSOMM</mat-card-title>
+    </mat-card-header>
+
+    <mat-card-content>
+      <form [formGroup]="loginForm" (ngSubmit)="login()" novalidate>
+        <mat-form-field appearance="outline">
+          <mat-label>Username</mat-label>
+          <input matInput type="text" formControlName="username" autocomplete="username" />
+          <mat-error *ngIf="loginForm.controls['username'].hasError('required')">
+            Username is required
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Password</mat-label>
+          <input
+            matInput
+            type="password"
+            formControlName="password"
+            autocomplete="current-password" />
+          <mat-error *ngIf="loginForm.controls['password'].hasError('required')">
+            Password is required
+          </mat-error>
+        </mat-form-field>
+
+        <div class="login-error" *ngIf="loginFailed">Invalid credentials</div>
+
+        <button mat-raised-button color="primary" type="submit">Sign in</button>
+      </form>
+    </mat-card-content>
+  </mat-card>
+</div>
diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts
new file mode 100644
index 000000000..51f7965d6
--- /dev/null
+++ b/src/app/pages/login/login.component.ts
@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AuthGuard } from '../../guards/auth.guard';
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css'],
+})
+export class LoginComponent {
+  loginFailed = false;
+
+  loginForm = this.formBuilder.group({
+    username: ['', Validators.required],
+    password: ['', Validators.required],
+  });
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private authService: AuthService,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
+
+  login(): void {
+    this.loginFailed = false;
+
+    if (this.loginForm.invalid) {
+      this.loginForm.markAllAsTouched();
+      return;
+    }
+
+    const username = this.loginForm.controls['username'].value || '';
+    const password = this.loginForm.controls['password'].value || '';
+
+    if (!this.authService.login(username, password)) {
+      this.loginFailed = true;
+      return;
+    }
+
+    void this.router.navigateByUrl(this.getReturnUrl());
+  }
+
+  private getReturnUrl(): string {
+    const returnUrl =
+      this.route.snapshot.queryParamMap.get('returnUrl') || AuthGuard.DEFAULT_AUTHENTICATED_ROUTE;
+
+    if (!returnUrl.startsWith('/') || returnUrl.startsWith('//')) {
+      return AuthGuard.DEFAULT_AUTHENTICATED_ROUTE;
+    }
+
+    return returnUrl;
+  }
+}
diff --git a/src/app/services/auth.service.spec.ts b/src/app/services/auth.service.spec.ts
new file mode 100644
index 000000000..2d138f2ee
--- /dev/null
+++ b/src/app/services/auth.service.spec.ts
@@ -0,0 +1,41 @@
+import { TestBed } from '@angular/core/testing';
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthService);
+    sessionStorage.clear();
+  });
+
+  afterEach(() => {
+    sessionStorage.clear();
+  });
+
+  it('logs in a static user with valid credentials', () => {
+    const loggedIn = service.login('admin', 'dsomm-admin');
+
+    expect(loggedIn).toBeTrue();
+    expect(service.isAuthenticated()).toBeTrue();
+    expect(service.getCurrentUser()).toBe('admin');
+  });
+
+  it('rejects invalid credentials', () => {
+    const loggedIn = service.login('admin', 'wrong-password');
+
+    expect(loggedIn).toBeFalse();
+    expect(service.isAuthenticated()).toBeFalse();
+    expect(service.getCurrentUser()).toBeNull();
+  });
+
+  it('clears the authenticated user on logout', () => {
+    service.login('viewer', 'dsomm-view');
+
+    service.logout();
+
+    expect(service.isAuthenticated()).toBeFalse();
+    expect(service.getCurrentUser()).toBeNull();
+  });
+});
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
new file mode 100644
index 000000000..48f31e9cd
--- /dev/null
+++ b/src/app/services/auth.service.ts
@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+
+interface StaticUser {
+  username: string;
+  password: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class AuthService {
+  private readonly SESSION_USER_KEY = 'dsomm.auth.currentUser';
+
+  /*
+   * Demo/internal-only static users.
+   * This is not secure for production: credentials in frontend code are visible
+   * to anyone who can load the application bundle.
+   */
+  private readonly users: StaticUser[] = [
+    { username: 'admin', password: 'dsomm-admin' },
+    { username: 'auditor', password: 'dsomm-audit' },
+    { username: 'developer', password: 'dsomm-dev' },
+    { username: 'viewer', password: 'dsomm-view' },
+  ];
+
+  login(username: string, password: string): boolean {
+    const matchedUser = this.users.find(
+      user => user.username === username && user.password === password
+    );
+
+    if (!matchedUser) {
+      return false;
+    }
+
+    sessionStorage.setItem(this.SESSION_USER_KEY, matchedUser.username);
+    return true;
+  }
+
+  logout(): void {
+    sessionStorage.removeItem(this.SESSION_USER_KEY);
+  }
+
+  isAuthenticated(): boolean {
+    return this.getCurrentUser() !== null;
+  }
+
+  getCurrentUser(): string | null {
+    return sessionStorage.getItem(this.SESSION_USER_KEY);
+  }
+}
diff --git a/src/assets/Markdown Files/README.md b/src/assets/Markdown Files/README.md
index fabed8aff..b3c133077 100644
--- a/src/assets/Markdown Files/README.md	
+++ b/src/assets/Markdown Files/README.md	
@@ -24,6 +24,27 @@ You can switch on to show open TODO's for evidence by changing IS_SHOW_EVIDENCE_
 
 This page uses the Browser's localStorage to store the state of the circular headmap.
 
+# Static Demo Authentication
+
+This Angular frontend includes simple static-user authentication for demo and internal
+deployments. All users have the same permissions.
+
+Default credentials are defined in `src/app/services/auth.service.ts`:
+
+| Username | Password |
+| --- | --- |
+| `admin` | `dsomm-admin` |
+| `auditor` | `dsomm-audit` |
+| `developer` | `dsomm-dev` |
+| `viewer` | `dsomm-view` |
+
+Sign in at `/login`. The app stores the current user in the browser's `sessionStorage`, so the
+login lasts only for the current browser session.
+
+Security warning: this is frontend-only authentication. It is not secure for production because
+static credentials are shipped in the browser bundle and can be inspected by users. Use a backend
+identity provider or server-side access control for production deployments.
+
 # Changes
 Changes to the application are displayed at the release page of [DevSecOps-MaturityModel](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel-data/releases).
 

From af672cbd606c58b46eebb8d5ba7733db648c746f Mon Sep 17 00:00:00 2001
From: "morteza.khoramdel" <morteza.khoramdel@zoodfood.com>
Date: Sun, 24 May 2026 16:00:28 +0330
Subject: [PATCH 2/2] add auth

---
 src/app/guards/auth.guard.spec.ts           |  5 +-
 src/app/pages/login/login.component.spec.ts | 99 +++++++++++++++++++++
 src/app/services/auth.service.spec.ts       |  5 +-
 3 files changed, 105 insertions(+), 4 deletions(-)
 create mode 100644 src/app/pages/login/login.component.spec.ts

diff --git a/src/app/guards/auth.guard.spec.ts b/src/app/guards/auth.guard.spec.ts
index 5075ca35a..7d9760e54 100644
--- a/src/app/guards/auth.guard.spec.ts
+++ b/src/app/guards/auth.guard.spec.ts
@@ -8,6 +8,7 @@ describe('AuthGuard', () => {
   let guard: AuthGuard;
   let authService: AuthService;
   let router: Router;
+  const sessionUserKey = 'dsomm.auth.currentUser';
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -17,11 +18,11 @@ describe('AuthGuard', () => {
     guard = TestBed.inject(AuthGuard);
     authService = TestBed.inject(AuthService);
     router = TestBed.inject(Router);
-    sessionStorage.clear();
+    sessionStorage.removeItem(sessionUserKey);
   });
 
   afterEach(() => {
-    sessionStorage.clear();
+    sessionStorage.removeItem(sessionUserKey);
   });
 
   it('allows authenticated access to protected routes', () => {
diff --git a/src/app/pages/login/login.component.spec.ts b/src/app/pages/login/login.component.spec.ts
new file mode 100644
index 000000000..34f10983b
--- /dev/null
+++ b/src/app/pages/login/login.component.spec.ts
@@ -0,0 +1,99 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, convertToParamMap, Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AuthService } from '../../services/auth.service';
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+  let authService: AuthService;
+  let router: Router;
+  let routeStub: { snapshot: { queryParamMap: ReturnType<typeof convertToParamMap> } };
+  const sessionUserKey = 'dsomm.auth.currentUser';
+
+  beforeEach(async () => {
+    routeStub = {
+      snapshot: {
+        queryParamMap: convertToParamMap({}),
+      },
+    };
+
+    await TestBed.configureTestingModule({
+      declarations: [LoginComponent],
+      imports: [ReactiveFormsModule, RouterTestingModule.withRoutes([])],
+      providers: [{ provide: ActivatedRoute, useValue: routeStub }],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    authService = TestBed.inject(AuthService);
+    router = TestBed.inject(Router);
+    sessionStorage.removeItem(sessionUserKey);
+  });
+
+  afterEach(() => {
+    sessionStorage.removeItem(sessionUserKey);
+  });
+
+  function createComponent(): void {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }
+
+  it('requires username and password before attempting login', () => {
+    createComponent();
+    const loginSpy = spyOn(authService, 'login').and.callThrough();
+
+    component.login();
+
+    expect(component.loginForm.invalid).toBeTrue();
+    expect(loginSpy).not.toHaveBeenCalled();
+  });
+
+  it('shows a generic error for invalid credentials', () => {
+    createComponent();
+    const navigateSpy = spyOn(router, 'navigateByUrl').and.resolveTo(true);
+    component.loginForm.setValue({ username: 'admin', password: 'wrong-password' });
+
+    component.login();
+
+    expect(component.loginFailed).toBeTrue();
+    expect(navigateSpy).not.toHaveBeenCalled();
+  });
+
+  it('logs in and redirects to the DSOMM default page', () => {
+    createComponent();
+    const navigateSpy = spyOn(router, 'navigateByUrl').and.resolveTo(true);
+    component.loginForm.setValue({ username: 'admin', password: 'dsomm-admin' });
+
+    component.login();
+
+    expect(authService.getCurrentUser()).toBe('admin');
+    expect(navigateSpy).toHaveBeenCalledOnceWith('/');
+  });
+
+  it('redirects to the originally requested URL after login', () => {
+    routeStub.snapshot.queryParamMap = convertToParamMap({ returnUrl: '/matrix?team=Team%20A' });
+    createComponent();
+    const navigateSpy = spyOn(router, 'navigateByUrl').and.resolveTo(true);
+    component.loginForm.setValue({ username: 'viewer', password: 'dsomm-view' });
+
+    component.login();
+
+    expect(navigateSpy).toHaveBeenCalledOnceWith('/matrix?team=Team%20A');
+  });
+
+  it('falls back to the default route for unsafe return URLs', () => {
+    routeStub.snapshot.queryParamMap = convertToParamMap({ returnUrl: 'https://example.com' });
+    createComponent();
+    const navigateSpy = spyOn(router, 'navigateByUrl').and.resolveTo(true);
+    component.loginForm.setValue({ username: 'auditor', password: 'dsomm-audit' });
+
+    component.login();
+
+    expect(navigateSpy).toHaveBeenCalledOnceWith('/');
+  });
+});
diff --git a/src/app/services/auth.service.spec.ts b/src/app/services/auth.service.spec.ts
index 2d138f2ee..4df4ea974 100644
--- a/src/app/services/auth.service.spec.ts
+++ b/src/app/services/auth.service.spec.ts
@@ -3,15 +3,16 @@ import { AuthService } from './auth.service';
 
 describe('AuthService', () => {
   let service: AuthService;
+  const sessionUserKey = 'dsomm.auth.currentUser';
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
     service = TestBed.inject(AuthService);
-    sessionStorage.clear();
+    sessionStorage.removeItem(sessionUserKey);
   });
 
   afterEach(() => {
-    sessionStorage.clear();
+    sessionStorage.removeItem(sessionUserKey);
   });
 
   it('logs in a static user with valid credentials', () => {