Merge pull request 'Merge pull request 'develop' (#14) from develop into main' (#15) from main into develop

Reviewed-on: #15

.idea/.idea.DotNetAngular/.idea/workspace.xml

@@ -13,13 +13,41 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="1ac72a4a-52ad-4e70-9b15-c330b1ed3e7a" name="Changes" comment="">
-      <change beforePath="$PROJECT_DIR$/.idea/.idea.DotNetAngular/.idea/watcherTasks.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/.idea.DotNetAngular/.idea/watcherTasks.xml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/admin-dashboard/admin-dashboard.component.html" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/admin-dashboard/admin-dashboard.component.scss" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/admin-dashboard/admin-dashboard.component.spec.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/admin-dashboard/admin-dashboard.component.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/unauthorized/unauthorized.component.html" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/unauthorized/unauthorized.component.scss" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/unauthorized/unauthorized.component.spec.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/unauthorized/unauthorized.component.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/user-dashboard/user-dashboard.component.html" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/user-dashboard/user-dashboard.component.scss" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/user-dashboard/user-dashboard.component.spec.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/user-dashboard/user-dashboard.component.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/user-table/user-table.component.html" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/user-table/user-table.component.scss" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/user-table/user-table.component.spec.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/user-table/user-table.component.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/guards/admin.guard.spec.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/guards/admin.guard.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/guards/authentication.guard.spec.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/guards/authentication.guard.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/guards/guest.guard.spec.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/guards/guest.guard.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/interceptors/token.interceptor.spec.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/interceptors/token.interceptor.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/shared/popup-modal/popup-modal.component.html" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/shared/popup-modal/popup-modal.component.scss" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/shared/popup-modal/popup-modal.component.spec.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/shared/popup-modal/popup-modal.component.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/.idea.DotNetAngular/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/.idea.DotNetAngular/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/API/API.csproj" beforeDir="false" afterPath="$PROJECT_DIR$/src/API/API.csproj" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/ClientApp/src/app/app.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/ClientApp/src/app/app.config.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/Application/Application.csproj" beforeDir="false" afterPath="$PROJECT_DIR$/src/Application/Application.csproj" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/ClientApp/src/app/app.routes.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/ClientApp/src/app/app.routes.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/Infrastructure/Infrastructure.csproj" beforeDir="false" afterPath="$PROJECT_DIR$/src/Infrastructure/Infrastructure.csproj" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/ClientApp/src/app/domain/entities/user.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/ClientApp/src/app/domain/entities/user.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/tests/Application.FunctionalTest/Application.FunctionalTest.csproj" beforeDir="false" afterPath="$PROJECT_DIR$/tests/Application.FunctionalTest/Application.FunctionalTest.csproj" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/authentication/login/login.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/authentication/login/login.component.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/tests/Application.UnitTest/Application.UnitTest.csproj" beforeDir="false" afterPath="$PROJECT_DIR$/tests/Application.UnitTest/Application.UnitTest.csproj" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/header/header.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/header/header.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/header/header.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/ClientApp/src/app/presentation/components/header/header.component.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -42,6 +70,7 @@
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
   <component name="HighlightingSettingsPerFile">
+    <setting file="file://$PROJECT_DIR$/dotnet-tools.json" root0="FORCE_HIGHLIGHTING" />
     <setting file="file://$PROJECT_DIR$/src/ClientApp/package-lock.json" root0="SKIP_HIGHLIGHTING" />
     <setting file="file://$PROJECT_DIR$/src/ClientApp/package.json" root0="FORCE_HIGHLIGHTING" />
   </component>
@@ -50,6 +79,9 @@
     <urls />
   </component>
   <component name="MetaFilesCheckinStateConfiguration" checkMetaFiles="true" />
+  <component name="ProblemsViewState">
+    <option name="selectedTabId" value="Toolset" />
+  </component>
   <component name="ProjectColorInfo">{
   &quot;associatedIndex&quot;: 5
 }</component>
@@ -58,28 +90,28 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
+  <component name="PropertiesComponent">{
-  "keyToString": {
+  &quot;keyToString&quot;: {
-    ".NET Launch Settings Profile.API: Angular_dev.executor": "Run",
+    &quot;.NET Launch Settings Profile.API: Angular_dev.executor&quot;: &quot;Run&quot;,
-    "RunOnceActivity.MCP Project settings loaded": "true",
+    &quot;RunOnceActivity.MCP Project settings loaded&quot;: &quot;true&quot;,
-    "RunOnceActivity.ShowReadmeOnStart": "true",
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    "RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252": "true",
+    &quot;RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252&quot;: &quot;true&quot;,
-    "RunOnceActivity.git.unshallow": "true",
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
-    "RunOnceActivity.typescript.service.memoryLimit.init": "true",
+    &quot;RunOnceActivity.typescript.service.memoryLimit.init&quot;: &quot;true&quot;,
-    "com.intellij.ml.llm.matterhorn.ej.ui.settings.DefaultModelSelectionForGA.v1": "true",
+    &quot;com.intellij.ml.llm.matterhorn.ej.ui.settings.DefaultModelSelectionForGA.v1&quot;: &quot;true&quot;,
-    "git-widget-placeholder": "feature/nuget",
+    &quot;git-widget-placeholder&quot;: &quot;feature/guards&quot;,
-    "junie.onboarding.icon.badge.shown": "true",
+    &quot;junie.onboarding.icon.badge.shown&quot;: &quot;true&quot;,
-    "node.js.detected.package.eslint": "true",
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    "node.js.detected.package.tslint": "true",
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    "node.js.selected.package.eslint": "(autodetect)",
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    "node.js.selected.package.tslint": "(autodetect)",
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    "nodejs_package_manager_path": "npm",
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    "settings.editor.selected.configurable": "preferences.pluginManager",
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
-    "to.speed.mode.migration.done": "true",
+    &quot;to.speed.mode.migration.done&quot;: &quot;true&quot;,
-    "ts.external.directory.path": "/home/natlinux/RiderProjects/DotNetAngular/src/ClientApp/node_modules/typescript/lib",
+    &quot;ts.external.directory.path&quot;: &quot;/home/natlinux/RiderProjects/DotNetAngular/src/ClientApp/node_modules/typescript/lib&quot;,
-    "vue.rearranger.settings.migration": "true"
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RecapUselessUpdatesCounter">
     <option name="suspendCountdown" value="0" />
   </component>
@@ -218,7 +250,10 @@
       <workItem from="1772664092787" duration="54000" />
       <workItem from="1772664174287" duration="646000" />
       <workItem from="1773053172796" duration="1432000" />
-      <workItem from="1773597121547" duration="367000" />
+      <workItem from="1773597121547" duration="689000" />
+      <workItem from="1773599776473" duration="3799000" />
+      <workItem from="1773605341198" duration="3147000" />
+      <workItem from="1773678089390" duration="1025000" />
     </task>
     <task id="LOCAL-00001" summary="updating template">
       <option name="closed" value="true" />
@@ -260,7 +295,31 @@
       <option name="project" value="LOCAL" />
       <updated>1771506336945</updated>
     </task>
-    <option name="localTasksCounter" value="6" />
+    <task id="LOCAL-00006" summary="update NuGet Package to new Version">
+      <option name="closed" value="true" />
+      <created>1773597809588</created>
+      <option name="number" value="00006" />
+      <option name="presentableId" value="LOCAL-00006" />
+      <option name="project" value="LOCAL" />
+      <updated>1773597809588</updated>
+    </task>
+    <task id="LOCAL-00007" summary="update Angular core to new version">
+      <option name="closed" value="true" />
+      <created>1773598259701</created>
+      <option name="number" value="00007" />
+      <option name="presentableId" value="LOCAL-00007" />
+      <option name="project" value="LOCAL" />
+      <updated>1773598259701</updated>
+    </task>
+    <task id="LOCAL-00008" summary="fix dropdown">
+      <option name="closed" value="true" />
+      <created>1773601314558</created>
+      <option name="number" value="00008" />
+      <option name="presentableId" value="LOCAL-00008" />
+      <option name="project" value="LOCAL" />
+      <updated>1773601314558</updated>
+    </task>
+    <option name="localTasksCounter" value="9" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -301,7 +360,10 @@
     <MESSAGE value="login.component, register.component" />
     <MESSAGE value="update to dotnet 10" />
     <MESSAGE value="update nuget packages to new versions" />
-    <option name="LAST_COMMIT_MESSAGE" value="update nuget packages to new versions" />
+    <MESSAGE value="update NuGet Package to new Version" />
+    <MESSAGE value="update Angular core to new version" />
+    <MESSAGE value="fix dropdown" />
+    <option name="LAST_COMMIT_MESSAGE" value="fix dropdown" />
   </component>
   <component name="XDebuggerManager">
     <breakpoint-manager>

src/ClientApp/package.json

@@ -12,14 +12,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.1.2",
+    "@angular/animations": "^21.2.4",
-    "@angular/common": "^21.1.2",
+    "@angular/common": "^21.2.4",
-    "@angular/compiler": "^21.1.2",
+    "@angular/compiler": "^21.2.4",
-    "@angular/core": "^21.1.2",
+    "@angular/core": "^21.2.4",
-    "@angular/forms": "^21.1.2",
+    "@angular/forms": "^21.2.4",
-    "@angular/platform-browser": "^21.1.2",
+    "@angular/platform-browser": "^21.2.4",
-    "@angular/platform-browser-dynamic": "^21.1.2",
+    "@angular/platform-browser-dynamic": "^21.2.4",
-    "@angular/router": "^21.1.2",
+    "@angular/router": "^21.2.4",
     "@auth0/angular-jwt": "^5.2.0",
     "@ng-bootstrap/ng-bootstrap": "^20.0.0",
     "bootstrap": "^5.3.8",
@@ -29,9 +29,9 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^21.1.2",
+    "@angular/build": "^21.2.2",
-    "@angular/cli": "^21.1.2",
+    "@angular/cli": "^21.2.2",
-    "@angular/compiler-cli": "^21.1.2",
+    "@angular/compiler-cli": "^21.2.4",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",

src/ClientApp/src/app/app.config.ts

@@ -2,7 +2,12 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import {provideHttpClient, withFetch, withInterceptors} from "@angular/common/http";
+import {tokenInterceptor} from "./presentation/interceptors/token.interceptor";
+import {provideClientHydration, withEventReplay} from "@angular/platform-browser";
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes),
+    provideHttpClient(withFetch(), withInterceptors([tokenInterceptor
+    ])), provideClientHydration(withEventReplay())]
 };

src/ClientApp/src/app/app.routes.ts

@@ -2,10 +2,21 @@ import { Routes } from '@angular/router';
 import {RegisterComponent} from "./presentation/authentication/register/register.component";
 import {LoginComponent} from "./presentation/authentication/login/login.component";
 import {StartpageComponent} from "./presentation/components/startpage/startpage.component";
+import {AdminDashboardComponent} from "./presentation/components/admin-dashboard/admin-dashboard.component";
+import {UserDashboardComponent} from "./presentation/components/user-dashboard/user-dashboard.component";
+import {UnauthorizedComponent} from "./presentation/components/unauthorized/unauthorized.component";
+import {guestGuard} from "./presentation/guards/guest.guard";
+import {AuthenticationGuard} from "./presentation/guards/authentication.guard";
+import {adminGuard} from "./presentation/guards/admin.guard";
+import {UserTableComponent} from "./presentation/components/user-table/user-table.component";
 
 export const routes: Routes = [
-  {path: '', redirectTo: 'login', pathMatch: 'full'},
+  {path: '', redirectTo: 'startpage', pathMatch: 'full'},
-  {path: 'register', component: RegisterComponent},
+  {path: 'register', component: RegisterComponent, canActivate: [guestGuard]},
-  {path: 'login', component: LoginComponent},
+  {path: 'login', component: LoginComponent, canActivate: [guestGuard]},
-  {path: 'startpage', component: StartpageComponent}
+  {path: 'startpage', component: StartpageComponent, canActivate: [guestGuard]},
+  {path: 'user-table', component: UserTableComponent, canActivate: [adminGuard]},
+  {path: 'admin-dashboard', component: AdminDashboardComponent, canActivate: [adminGuard]},
+  {path: 'user-dashboard', component: UserDashboardComponent, canActivate: [AuthenticationGuard]},
+  {path: 'unauthorized', component: UnauthorizedComponent, canActivate: [AuthenticationGuard]}
 ];

src/ClientApp/src/app/domain/entities/user.ts

@@ -1,4 +1,3 @@
-import {RssFeed} from "./rss-feed";
 import {UserRole} from "./user-role";
 
 export interface User {
@@ -8,9 +7,5 @@ export interface User {
   password: string;
   lastLogin: Date;
 
-  rssFeedId: number;
-  rssFeed: RssFeed;
-
   UserRoles: UserRole[];
-  rssFeeds: RssFeed [];
 }

src/ClientApp/src/app/infrastructure/services/auth-service.ts

@@ -36,7 +36,7 @@ export class AuthService implements IAuthService {
   }
 
   signOut() {
-    if (!this.isBrowser) {
+    if (this.isBrowser) {
       localStorage.clear();
       this.router.navigate(['/login']).catch(error => {
         console.error('Navigation error:', error);

src/ClientApp/src/app/presentation/authentication/login/login.component.ts

@@ -66,7 +66,8 @@ export class LoginComponent {
           this.userStore.setEmailForStore(tokenPayload.email);
           this.userStore.setRoleForStore(tokenPayload.role);
           this.loadingService.hide()
-          this.router.navigate(['startpage']).then(success => {
+          // TODO redirect to...
+          this.router.navigate(['user-dashboard']).then(success => {
             if (success) {
                this.loginForm.reset();
             }

src/ClientApp/src/app/presentation/components/admin-dashboard/admin-dashboard.component.html

@@ -0,0 +1,10 @@
+<div class="container-fluid d-flex justify-content-center">
+  <div class="card mt-2 col-2 me-2" [routerLink]="['/user-table']" style="cursor: pointer;">
+    <div class="card-body text-center">
+      <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="blue" class="bi bi-people-fill " viewBox="0 0 16 16">
+        <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/>
+      </svg>
+      <h4 class="my-3">Users</h4>
+    </div>
+  </div>
+</div>

src/ClientApp/src/app/presentation/components/admin-dashboard/admin-dashboard.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminDashboardComponent } from './admin-dashboard.component';
+
+describe('AdminDashboardComponent', () => {
+  let component: AdminDashboardComponent;
+  let fixture: ComponentFixture<AdminDashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AdminDashboardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AdminDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/ClientApp/src/app/presentation/components/admin-dashboard/admin-dashboard.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import {RouterLink} from "@angular/router";
+
+@Component({
+  selector: 'app-admin-dashboard',
+  imports: [
+    RouterLink
+  ],
+  templateUrl: './admin-dashboard.component.html',
+  styleUrl: './admin-dashboard.component.scss',
+  standalone: true
+})
+export class AdminDashboardComponent {
+
+}

src/ClientApp/src/app/presentation/components/header/header.component.html

@@ -1,28 +1,11 @@
 <nav class="navbar navbar-expand-lg border-bottom position-relative bg-body-tertiary">
   <div class="container-fluid">
-    @if (showOverviewTools){
-      <div class="sidebar-toggle p-2 me-1 text-secondary" data-bs-target="#offcanvasExample" data-bs-toggle="offcanvas"
-           type="button">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-list"
-             viewBox="0 0 16 16">
-          <path fill-rule="evenodd"
-                d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
-        </svg>
-      </div>
-    }
     <a class="navbar-brand" [routerLink]="['/#']" title="Refresh" data-bs-target="#offcanvasExample" data-bs-dismiss="offcanvas">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-app" viewBox="0 0 16 16">
         <path d="M11 2a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zM5 1a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4z"/>
       </svg>
-
     </a>
-    <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
+ </div>
-      class="navbar-toggler"
-      data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse" type="button">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-
-  </div>
 <!-- Dropdown -->
   @if (!showDropdown){
     <ul class="navbar-nav ms-auto" data-bs-target="#offcanvasExample" data-bs-dismiss="offcanvas">

src/ClientApp/src/app/presentation/components/header/header.component.ts

@@ -1,7 +1,6 @@
-import {Component, inject, OnInit, viewChild} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {DarkModeService} from '../../../infrastructure/services/dark-mode.service';
-import {FormsModule, NgForm} from "@angular/forms";
+import {FormsModule} from "@angular/forms";
-import {ToastService} from "../../../infrastructure/services/toast.service";
 import {ActivatedRoute, NavigationEnd, Router, RouterLink} from "@angular/router";
 import {AuthService} from "../../../infrastructure/services/auth-service";
 import {UserStoreService} from "../../../infrastructure/services/user-store.service";
@@ -19,7 +18,6 @@ import {filter} from "rxjs/operators";
 })
 export class HeaderComponent implements OnInit {
 
-  toastService = inject(ToastService);
   darkModeService = inject(DarkModeService);
   userStore = inject(UserStoreService);
 
@@ -50,9 +48,9 @@ export class HeaderComponent implements OnInit {
         while (route.firstChild) route = route.firstChild;
 
         // Header-Logic
-        const headerRoutes = ['/login', '/register', '/legal' , '/start'];
+        // TODO hide dropdown for login register and legal
-        this.showDropdown = headerRoutes.some(route => event.urlAfterRedirects.startsWith(route));
+        const headerRoutes = ['/login', '/register', '/legal', '/startpage'];
-        this.showOverviewTools = event.urlAfterRedirects.startsWith('/rss-feed-overview');
+        this.showDropdown = headerRoutes.some(route => event.urlAfterRedirects.startsWith(route))
       });
   }
 

src/ClientApp/src/app/presentation/components/unauthorized/unauthorized.component.html

@@ -0,0 +1 @@
+<p>unauthorized works!</p>

src/ClientApp/src/app/presentation/components/unauthorized/unauthorized.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UnauthorizedComponent } from './unauthorized.component';
+
+describe('UnauthorizedComponent', () => {
+  let component: UnauthorizedComponent;
+  let fixture: ComponentFixture<UnauthorizedComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UnauthorizedComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(UnauthorizedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/ClientApp/src/app/presentation/components/unauthorized/unauthorized.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-unauthorized',
+  imports: [],
+  templateUrl: './unauthorized.component.html',
+  styleUrl: './unauthorized.component.scss',
+})
+export class UnauthorizedComponent {
+
+}

src/ClientApp/src/app/presentation/components/user-dashboard/user-dashboard.component.html

@@ -0,0 +1,73 @@
+<div class="container-fluid">
+  <div class="align-items-center justify-content-center mt-3 d-flex">
+    <div class="container">
+      <div class="row justify-content-center ">
+        <div class="col-lg-3">
+          <div class="card mb-3">
+            <div class="card-body text-center">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="150" height="150" class="bi bi-person-fill bg-primary rounded-circle" viewBox="0 0 16 16">
+                <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
+              </svg>
+              <h4 class="my-3">{{username}}</h4>
+              <!--              <button class="btn btn-primary">Update Picture</button>-->
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-8">
+          <div class="row mb-2">
+            <div class="col-md-6">
+              <div class="card mb-3">
+                <div class="card-header text-center">
+                  <h2 class="mb-4">Personal Data</h2>
+                </div>
+                <div class="card-body">
+                  <p class="mb-1"><strong>Username:</strong> <br> {{username}}</p> <br>
+                  <p class="mb-1"><strong>E-Mail:</strong> <br>{{email}}</p>
+                </div>
+              </div>
+            </div>
+            <!--            <div class="col-md-6">-->
+            <!--              <div class="card mb-3" style="height: 92%">-->
+            <!--                <div class="card-header text-center">-->
+            <!--                  <h2 class="mb-4">Payment Method</h2>-->
+            <!--                </div>-->
+            <!--                <div class="card-body">-->
+            <!--                  <p class="mb-1"></p>-->
+            <!--                </div>-->
+            <!--              </div>-->
+            <!--            </div>-->
+          </div>
+          <a class="text-decoration-none">
+            <div class="row">
+              <div class="col-md-6">
+                <!--                <div class="card mb-3">-->
+                <!--                  <div class="card-header text-center">-->
+                <!--                    <h4 class="my-3">Change password</h4>-->
+                <!--                  </div>-->
+                <!--                  <div class="card-body d-flex flex-wrap">-->
+                <!--                   <input type="password" class="form-control mt-2" placeholder="Enter new password">-->
+                <!--                    <input type="password" class="form-control mt-2" placeholder="Repeat new password">-->
+                <!--                    <button class="btn btn-primary mt-4">Change password</button>-->
+                <!--                  </div>-->
+                <!--                </div>-->
+              </div>
+              <div class="col-md-6">
+                <!--                <div class="card mb-3">-->
+                <!--                  <div class="card-header text-center">-->
+                <!--                    <h4 class="my-3">Change E-Mail</h4>-->
+                <!--                  </div>-->
+                <!--                  <div class="card-body d-flex flex-wrap">-->
+                <!--                    <input type="password" class="form-control mt-2" placeholder="Enter new E-Mail">-->
+                <!--                    <input type="password" class="form-control mt-2" placeholder="Repeat new E-Mail">-->
+                <!--                    <button class="btn btn-primary mt-4">Change E-Mail</button>-->
+                <!--                  </div>-->
+                <!--                </div>-->
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+

src/ClientApp/src/app/presentation/components/user-dashboard/user-dashboard.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserDashboardComponent } from './user-dashboard.component';
+
+describe('UserDashboardComponent', () => {
+  let component: UserDashboardComponent;
+  let fixture: ComponentFixture<UserDashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UserDashboardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(UserDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/ClientApp/src/app/presentation/components/user-dashboard/user-dashboard.component.ts

@@ -0,0 +1,38 @@
+import {Component, inject} from '@angular/core';
+import {Title} from "@angular/platform-browser";
+import {UserStoreService} from "../../../infrastructure/services/user-store.service";
+import {AuthService} from "../../../infrastructure/services/auth-service";
+
+@Component({
+  selector: 'app-user-dashboard',
+  imports: [],
+  templateUrl: './user-dashboard.component.html',
+  styleUrl: './user-dashboard.component.scss',
+})
+export class UserDashboardComponent {
+  public username!: string;
+  public email!: string;
+  public userId!: number;
+  userStore = inject(UserStoreService);
+  private authenticateService = inject(AuthService);
+  title = inject(Title)
+
+  constructor() {
+    //TODO App Name
+    this.title.setTitle('User Dashboard | App Name');
+  }
+  ngOnInit(): void {
+    this.userStore.getUsernameFromStore()
+      .subscribe(val => {
+        const usernameFromToken = this.authenticateService.getUsernameFromToken();
+        this.username = val || usernameFromToken
+      });
+
+    this.userStore.getEmailFromStore()
+      .subscribe(val => {
+        const emailFromToken = this.authenticateService.getEmailFromToken();
+        this.email = val || emailFromToken
+      });
+
+  }
+}

src/ClientApp/src/app/presentation/components/user-table/user-table.component.html

@@ -0,0 +1,98 @@
+<div class="container-fluid p-4">
+  <div class="card">
+    <div class="card-header bg-primary text-center text-dark"><h4>User-List</h4></div>
+    <div class="card-body p-0">
+      <table class="table table-striped table-hover table-bordered table-sm mb-0">
+        <thead>
+        <tr class="text-center">
+          <th>#</th>
+          <th (click)="sort('username')" class="sortable">
+            Username
+            <i class="bi"
+               [ngClass]="{
+       'bi bi-arrow-up': sortColumn === 'username' && sortDirection === 'asc',
+       'bi bi-arrow-down': sortColumn === 'username' && sortDirection === 'desc',
+       'bi bi-arrow-down-up': sortColumn !== 'username'
+     }"></i>
+          </th>
+          <th (click)="sort('email')" class="sortable">
+            E-Mail
+            <i class="bi"
+               [ngClass]="{
+       'bi bi-arrow-up': sortColumn === 'email' && sortDirection === 'asc',
+       'bi bi-arrow-down': sortColumn === 'email' && sortDirection === 'desc',
+       'bi bi-arrow-down-up': sortColumn !== 'email'
+     }"></i>
+          </th>
+          <th (click)="sort('lastLogin')" class="sortable">
+            Last Login
+            <i class="bi"
+               [ngClass]="{
+       'bi bi-arrow-up': sortColumn === 'lastLogin' && sortDirection === 'asc',
+       'bi bi-arrow-down': sortColumn === 'lastLogin' && sortDirection === 'desc',
+       'bi bi-arrow-down-up': sortColumn !== 'lastLogin'
+     }"></i>
+          </th>
+          <th>Action</th>
+
+        </tr>
+        </thead>
+        <tbody class="table-group-divider">
+          @for (user of users; track user.id; let i = $index;) {
+            <tr>
+              <td class="text-center">{{ i + 1 }}</td>
+              <td>{{ user.username }}</td>
+              <td>{{ user.email }}</td>
+              <td class="text-center">{{ user.lastLogin | date:'dd.MM.yyyy HH:mm:ss':'Europe/Berlin' }}</td>
+              <td class="d-flex justify-content-center">
+                <button (click)="selectUser(user)" class="btn btn-sm btn-danger"
+                        data-bs-target="#warningModal"
+                        data-bs-toggle="modal"
+                ><i class="bi bi-trash3-fill"></i></button>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+    <!-- Pagination Buttons Bootstrap -->
+    <nav aria-label="Page navigation">
+      <ul class="pagination justify-content-center mt-3">
+
+        <!-- Previous Button -->
+        <li class="page-item me-1" [class.disabled]="pageNumber === 1">
+          <a class="btn btn-primary" (click)="previousPage()" href="javascript:void(0)" aria-label="Previous">
+            <span aria-hidden="true">&laquo;</span>
+          </a>
+        </li>
+        <!-- Dynamic Page Buttons -->
+        @for (Page of [].constructor(totalPages); track Page ;let i = $index;) {
+          <li class="page-item me-1">
+            <a class="btn btn-outline-primary" href="javascript:void(0)" (click)="goToPage(i + 1)">
+              {{ i + 1 }}
+            </a>
+          </li>
+        }
+
+        <!-- Next Button -->
+        <li class="page-item me-1" [class.disabled]="pageNumber === totalPages">
+          <a class="btn btn-primary" (click)="nextPage()" href="javascript:void(0)" aria-label="Next">
+            <span aria-hidden="true">&raquo;</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+
+    <div class="d-flex justify-content-center align-items-center mb-3">
+      <span>Page {{ pageNumber }} of {{ totalPages }}</span>
+    </div>
+  </div>
+</div>
+<app-popup-modal
+  [title]="'Warning'"
+  [headerClass]="'bg-warning text-dark'"
+  (confirm)="handleConfirm()">
+  <p>
+    Do you really want to delete
+    <strong class="text-danger">{{ selectedUser?.username }}</strong> ?
+  </p></app-popup-modal>

src/ClientApp/src/app/presentation/components/user-table/user-table.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserTableComponent } from './user-table.component';
+
+describe('UserTableComponent', () => {
+  let component: UserTableComponent;
+  let fixture: ComponentFixture<UserTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UserTableComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(UserTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/ClientApp/src/app/presentation/components/user-table/user-table.component.ts

@@ -0,0 +1,120 @@
+import {Component, inject} from '@angular/core';
+import {User} from "../../../domain/entities/user";
+import {UserService} from "../../../infrastructure/services/user.service";
+import {ToastService} from "../../../infrastructure/services/toast.service";
+import {Title} from "@angular/platform-browser";
+import {PopupModalComponent} from "../../shared/popup-modal/popup-modal.component";
+import {DatePipe, NgClass} from "@angular/common";
+
+@Component({
+  selector: 'app-user-table',
+  imports: [
+    PopupModalComponent,
+    DatePipe,
+    NgClass
+  ],
+  templateUrl: './user-table.component.html',
+  styleUrl: './user-table.component.scss',
+  standalone: true
+})
+export class UserTableComponent {
+  public users: User[] = [];
+  selectedUser: User | null = null;
+
+  pageNumber: number = 1;
+  pageSize: number = 10;
+  totalPages: number = 0;
+
+  sortColumn: string = '';
+  sortDirection: 'asc' | 'desc' = 'asc';
+
+  private apiService = inject(UserService)
+  toastService = inject(ToastService);
+  title = inject(Title)
+
+  constructor() {
+    this.title.setTitle('User Table | RSS Feed Reader');
+  }
+
+  ngOnInit(): void {
+    this.getAllUsers()
+  }
+  getAllUsers(): void {
+    this.apiService.getAllUsers(this.pageNumber, this.pageSize).subscribe(result => {
+      this.users = result.value.items;
+      this.totalPages = result.value.totalPages;
+      this.sort(this.sortColumn);
+    });
+  }
+  nextPage(): void {
+    if (this.pageNumber < this.totalPages) {
+      this.pageNumber++;
+      this.getAllUsers();
+    }
+  }
+
+  previousPage(): void {
+    if (this.pageNumber > 1) {
+      this.pageNumber--;
+      this.getAllUsers();
+    }
+  }
+  goToPage(page: number): void {
+    if (page >= 1 && page <= this.totalPages) {
+      this.pageNumber = page;
+      this.getAllUsers();
+    }
+  }
+  // Sortiermethode
+  sort(column: string): void {
+    if (this.sortColumn === column) {
+      // Wenn die Spalte bereits sortiert ist, wechsle die Richtung
+      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+    } else {
+      // Andernfalls aufsteigend sortieren
+      this.sortDirection = 'asc';
+      this.sortColumn = column;
+    }
+
+    // Sortiere die Tabelle basierend auf Spalte und Richtung
+    this.users.sort((a: any, b: any) => {
+      const valueA = a[column];
+      const valueB = b[column];
+      if (valueA < valueB) {
+        return this.sortDirection === 'asc' ? -1 : 1;
+      }
+      if (valueA > valueB) {
+        return this.sortDirection === 'asc' ? 1 : -1;
+      }
+      return 0;
+    });
+  }
+
+  deleteUser(id: number): void {
+    this.apiService.deleteUser(id).subscribe({
+      next: (result) => {
+        console.log('delete',result);
+        this.toastService.show(result.value, {
+          classname: 'bg-success text-light',
+          delay: 3000
+        })
+        this.users = this.users.filter(user => user.id !== id);
+      },
+      error: (err) => {
+        console.error(err.error.error.message);
+        this.toastService.show(err.error.error.message, {
+          classname: 'bg-danger text-light',
+          delay: 3000
+        });
+      }
+    });
+  }
+
+  selectUser(user: User): void {
+    this.selectedUser = user;
+    console.log('selectedUser', user);
+  }
+  handleConfirm() {
+    this.deleteUser(this.selectedUser!.id);
+  }
+}

src/ClientApp/src/app/presentation/guards/admin.guard.spec.ts

@@ -0,0 +1,17 @@
+import {TestBed} from '@angular/core/testing';
+import {CanActivateFn} from '@angular/router';
+
+import {adminGuard} from './admin.guard';
+
+describe('adminGuard', () => {
+  const executeGuard: CanActivateFn = (...guardParameters) =>
+    TestBed.runInInjectionContext(() => adminGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});

src/ClientApp/src/app/presentation/guards/admin.guard.ts

@@ -0,0 +1,43 @@
+import {CanActivateFn, Router} from '@angular/router';
+import {inject} from "@angular/core";
+import {AuthService} from "../../infrastructure/services/auth-service";
+import {ToastService} from "../../infrastructure/services/toast.service";
+import {UserStoreService} from "../../infrastructure/services/user-store.service";
+import {catchError, map} from 'rxjs/operators';
+import {of} from 'rxjs';
+
+export const adminGuard: CanActivateFn = (route, state) => {
+
+
+  const userStore = inject(UserStoreService);
+  const authenticateService = inject(AuthService);
+  const toastService = inject(ToastService);
+  const router = inject(Router);
+
+  return userStore.getRoleFromStore().pipe(
+    map(val => {
+      const roleFromToken = authenticateService.getRoleFromToken();
+      const role = val || roleFromToken;
+
+      if (role === "Admin" || role === "SuperAdmin") {
+        return true;
+      } else {
+        toastService.show("Access denied. Admins only.", {
+          classname: 'bg-warning text-dark',
+          delay: 3000
+        });
+        void router.navigate(['/unauthorized']);
+        return false;
+      }
+    }),
+    catchError(() => {
+      toastService.show("An error occurred. Please try again later.", {
+        classname: 'bg-danger text-light',
+        delay: 2000
+      });
+      void router.navigate(['/login']);
+      return of(false);
+    })
+  );
+};
+

src/ClientApp/src/app/presentation/guards/authentication.guard.spec.ts

@@ -0,0 +1,24 @@
+import {TestBed} from '@angular/core/testing';
+
+import {AuthenticationGuard} from './authentication.guard';
+import {provideHttpClient} from "@angular/common/http";
+import {ActivatedRoute} from "@angular/router";
+import {of} from "rxjs";
+
+describe('AuthenticationGuard', () => {
+  let guard: AuthenticationGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient(),
+        { provide: ActivatedRoute, useValue: { data: of({}), firstChild: null } },
+      ]
+    });
+    guard = TestBed.inject(AuthenticationGuard);
+
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

src/ClientApp/src/app/presentation/guards/authentication.guard.ts

@@ -0,0 +1,29 @@
+import {inject, Injectable} from '@angular/core';
+import {CanActivate, Router} from '@angular/router';
+import {AuthService} from "../../infrastructure/services/auth-service";
+import {ToastService} from "../../infrastructure/services/toast.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthenticationGuard implements CanActivate {
+  toastService = inject(ToastService);
+  private authenticateService = inject(AuthService)
+  private router = inject(Router)
+
+  canActivate(): boolean {
+    if (this.authenticateService.isLoggedIn()) {
+      return true;
+    } else {
+      this.toastService.show("Please Login first", {
+        classname: 'bg-warning text-dark',
+        delay: 2000
+      });
+      this.router.navigate(['/login']).catch(error => {
+        console.error('Navigation error:', error);
+      })
+      return false;
+    }
+  }
+
+}

src/ClientApp/src/app/presentation/guards/guest.guard.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateFn } from '@angular/router';
+
+import { guestGuard } from './guest.guard';
+
+describe('guestGuard', () => {
+  const executeGuard: CanActivateFn = (...guardParameters) => 
+      TestBed.runInInjectionContext(() => guestGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});

src/ClientApp/src/app/presentation/guards/guest.guard.ts

@@ -0,0 +1,16 @@
+import {CanActivateFn, Router} from '@angular/router';
+import {inject} from "@angular/core";
+import {AuthService} from "../../infrastructure/services/auth-service";
+
+
+export const guestGuard: CanActivateFn = (route, state) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  if (!authService.isLoggedIn()){
+    return true;
+  }
+  // TODO rout
+  void router.navigate(['/user-dashboard']);
+  return false;
+};

src/ClientApp/src/app/presentation/interceptors/token.interceptor.spec.ts

@@ -0,0 +1,17 @@
+import {TestBed} from '@angular/core/testing';
+import {HttpInterceptorFn} from '@angular/common/http';
+
+import {tokenInterceptor} from './token.interceptor';
+
+describe('tokenInterceptor', () => {
+  const interceptor: HttpInterceptorFn = (req, next) =>
+    TestBed.runInInjectionContext(() => tokenInterceptor(req, next));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(interceptor).toBeTruthy();
+  });
+});

src/ClientApp/src/app/presentation/interceptors/token.interceptor.ts

@@ -0,0 +1,75 @@
+import {HttpErrorResponse, HttpEvent, HttpHandlerFn, HttpInterceptorFn, HttpRequest} from '@angular/common/http';
+import {inject} from "@angular/core";
+import {AuthService} from "../../infrastructure/services/auth-service";
+import {catchError, Observable, switchMap, throwError} from "rxjs";
+import {ToastService} from "../../infrastructure/services/toast.service";
+import {Router} from '@angular/router';
+import {RefreshTokenRequest} from "../models/refresh-token-request";
+
+export const tokenInterceptor: HttpInterceptorFn = (req, next) => {
+  const authService = inject(AuthService);
+  const token = authService.getToken();
+  const toastService = inject(ToastService);
+  const router = inject(Router);
+
+  if (token) {
+    req = req.clone({
+      setHeaders: {Authorization: `Bearer ${token}`}
+    });
+  }
+
+  return next(req).pipe(
+    catchError((err: any) => {
+      if (err instanceof HttpErrorResponse) {
+        if (err.status === 401) {
+          return handleUnAuthorizedError(req, next, authService, router, toastService);
+        }
+      }
+      console.log("interceptor error",err.error?.error?.message);
+      return throwError(() => err);
+
+    })
+  );
+};
+
+function handleUnAuthorizedError(
+  req: HttpRequest<any>,
+  next: HttpHandlerFn,
+  authenticateService: AuthService,
+  router: Router,
+  toastService: ToastService
+): Observable<HttpEvent<any>> {
+
+  const refreshTokenRequest = new RefreshTokenRequest();
+  refreshTokenRequest.refreshToken = authenticateService.getRefreshToken()!;
+  refreshTokenRequest.userId = authenticateService.getUserIdFromToken()!;
+
+  return authenticateService.renewToken(refreshTokenRequest).pipe(
+    switchMap((data) => {
+      const tokenResponse = data.value;
+      authenticateService.storeRefreshToken(tokenResponse.refreshToken);
+      authenticateService.storeToken(tokenResponse.accessToken);
+
+      req = req.clone({
+        setHeaders: {Authorization: `Bearer ${tokenResponse.accessToken}`}
+      });
+
+      return next(req);
+    }),
+    catchError((err) => {
+      return throwError(() => {
+        authenticateService.signOut();
+        router.navigate(['login']).then(success => {
+          if (success) {
+            toastService.show(err.error?.error?.message ||'Token is expired, login again!', {
+              classname: 'bg-warning text-light',
+              delay: 2000
+            });
+          }
+        })
+      });
+    })
+  );
+}
+
+

src/ClientApp/src/app/presentation/shared/popup-modal/popup-modal.component.html

@@ -0,0 +1,19 @@
+<div class="modal fade" id="warningModal" tabindex="-1" aria-labelledby="warningModalLabel" aria-hidden="true" data-bs-backdrop="static">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header" [ngClass]="headerClass">
+        <h1 class="modal-title fs-5 text-center w-100" id="warningModalLabel">{{ title }}</h1>
+      </div>
+      <div class="modal-body">
+        <ng-content></ng-content>
+        @if (body) {
+          <p>{{ body }}</p>
+        }
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">No</button>
+        <button type="button" class="btn btn-warning" (click)="onConfirm()" data-bs-dismiss="modal">Yes</button>
+      </div>
+    </div>
+  </div>
+</div>

src/ClientApp/src/app/presentation/shared/popup-modal/popup-modal.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PopupModalComponent } from './popup-modal.component';
+
+describe('PopupModalComponent', () => {
+  let component: PopupModalComponent;
+  let fixture: ComponentFixture<PopupModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PopupModalComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PopupModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/ClientApp/src/app/presentation/shared/popup-modal/popup-modal.component.ts

@@ -0,0 +1,26 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {NgClass} from "@angular/common";
+
+@Component({
+  selector: 'app-popup-modal',
+  imports: [
+    NgClass
+  ],
+  templateUrl: './popup-modal.component.html',
+  styleUrl: './popup-modal.component.scss',
+  standalone: true
+})
+export class PopupModalComponent {
+
+
+  @Input() headerClass: string = 'bg-light';
+  @Input() title: string = '';
+  @Input() body: string = '';
+
+  @Output() confirm = new EventEmitter<void>();
+  @Output() cancel = new EventEmitter<void>();
+
+  onConfirm() {
+    this.confirm.emit();
+  }
+}

src/ClientApp/src/main.ts

@@ -1,6 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
+import 'bootstrap';
 
 bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));