From 1786cc307799386dd949b58d300980368875231e Mon Sep 17 00:00:00 2001 From: Igor Propisnov Date: Thu, 18 Jul 2024 22:50:24 +0200 Subject: [PATCH 1/3] added logout function --- .../layout/main-layout/layout.component.html | 40 ++++++++++++--- .../layout/main-layout/layout.component.ts | 41 +++++++++++++--- .../register-root/register-root.component.ts | 49 ++++++++++--------- 3 files changed, 96 insertions(+), 34 deletions(-) diff --git a/frontend/src/app/layout/main-layout/layout.component.html b/frontend/src/app/layout/main-layout/layout.component.html index e0ec047..1ec156f 100644 --- a/frontend/src/app/layout/main-layout/layout.component.html +++ b/frontend/src/app/layout/main-layout/layout.component.html @@ -1,5 +1,4 @@
-
+ class="transform h-full z-20 overflow-y-auto fixed md:relative flex flex-col">
@if (!isCollapsed && !isDesktopCollapsed) { -
Logo
+
LOGO
} @if (!isCollapsed && !showMobileMenu) { @@ -58,15 +57,44 @@
  • + +
    + +
    +
    + + {{ item.name }} +
    +
    +
    • +
+
    +
  • +
    diff --git a/frontend/src/app/layout/main-layout/layout.component.ts b/frontend/src/app/layout/main-layout/layout.component.ts index f7afb6e..c711d32 100644 --- a/frontend/src/app/layout/main-layout/layout.component.ts +++ b/frontend/src/app/layout/main-layout/layout.component.ts @@ -9,15 +9,23 @@ import { import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { Router, RouterOutlet } from '@angular/router'; +import { SuccessDtoApiModel } from '../../api'; import { BackgroundPatternService, ThemeService } from '../../shared/service'; +import { AuthService } from '../../shared/service/auth.service'; -interface MenuItem { +interface TopMenuItem { name: string; icon: SafeHtml; route: string; active?: boolean; } +interface BottomMenuItem { + name: string; + icon: SafeHtml; + action?: () => void; +} + @Component({ selector: 'app-layout', standalone: true, @@ -31,7 +39,7 @@ export class LayoutComponent implements OnInit { public isDesktopCollapsed: boolean = false; public showMobileMenu: boolean = false; public userHasInteracted: boolean = false; - public menuItems: MenuItem[] = [ + public menuItems: TopMenuItem[] = [ { name: 'Dashboard', route: '/dashboard', @@ -41,6 +49,16 @@ export class LayoutComponent implements OnInit { `), }, ]; + public bottomMenuItems: BottomMenuItem[] = [ + { + name: 'Logout', + action: () => this.signout(), + icon: this.sanitizer + .bypassSecurityTrustHtml(` + + `), + }, + ]; public mainContent: { 'background-image': string } | null = null; public navigation: { 'background-image': string } | null = null; @@ -49,7 +67,8 @@ export class LayoutComponent implements OnInit { private readonly router: Router, private readonly backgroundPatternService: BackgroundPatternService, private readonly themeService: ThemeService, - private readonly el: ElementRef + private readonly el: ElementRef, + private readonly authService: AuthService ) {} public ngOnInit(): void { @@ -122,8 +141,8 @@ export class LayoutComponent implements OnInit { this.isDesktopCollapsed = !this.isDesktopCollapsed; } - public setActive(item: MenuItem): void { - this.menuItems.forEach((menu: MenuItem) => { + public setActive(item: TopMenuItem): void { + this.menuItems.forEach((menu: TopMenuItem) => { menu.active = false; }); item.active = true; @@ -132,8 +151,18 @@ export class LayoutComponent implements OnInit { private setActiveItemBasedOnRoute(): void { const url = this.router.url; - this.menuItems.forEach((item: MenuItem) => { + this.menuItems.forEach((item: TopMenuItem) => { item.active = url.startsWith(item.route); }); } + + private signout(): void { + this.authService.signout().subscribe((response: SuccessDtoApiModel) => { + if (response.success) { + this.router.navigate(['/welcome'], { + queryParams: { signedOut: true }, + }); + } + }); + } } diff --git a/frontend/src/app/pages/register-root/register-root.component.ts b/frontend/src/app/pages/register-root/register-root.component.ts index 3793149..d96f063 100644 --- a/frontend/src/app/pages/register-root/register-root.component.ts +++ b/frontend/src/app/pages/register-root/register-root.component.ts @@ -25,7 +25,7 @@ import { ButtonModule } from 'primeng/button'; import { CheckboxModule } from 'primeng/checkbox'; import { InputTextModule } from 'primeng/inputtext'; import { PasswordModule } from 'primeng/password'; -import { delay, finalize, tap } from 'rxjs'; +import { delay, finalize, takeWhile, tap } from 'rxjs'; import { Configuration, @@ -78,6 +78,7 @@ export class RegisterRootComponent implements OnInit { public verified: InputSignal = input(false); public login: InputSignal = input(false); public email: InputSignal = input(''); + public signedOut: InputSignal = input(true); public form!: FormGroup; public rememberMe: FormControl = new FormControl(false); public isSigninSignal: WritableSignal = signal(false); @@ -107,30 +108,10 @@ export class RegisterRootComponent implements OnInit { this.clearRouteParams(); } }); - const rememberMe = this.localStorageService.getItem('remember-me'); - - if (rememberMe) { - this.authService - .status() - .pipe(delay(1500)) - .subscribe({ - next: (response: SuccessDtoApiModel) => { - if (response.success) { - this.router.navigate(['/dashboard']); - } else { - this.displaySkeleton.set(false); - } - }, - error: () => { - this.displaySkeleton.set(false); - }, - }); - } else { - this.displaySkeleton.set(false); - } } public ngOnInit(): void { + this.autologin(); this.setBackground(); this.initializeForm(); this.setupValueChanges(); @@ -141,6 +122,30 @@ export class RegisterRootComponent implements OnInit { } } + public autologin(): void { + const rememberMe = this.localStorageService.getItem('remember-me'); + + if (rememberMe && !this.signedOut()) { + this.authService + .status() + .pipe( + delay(1500), + takeWhile((response: SuccessDtoApiModel) => response.success, true), + tap({ + next: (response: SuccessDtoApiModel) => { + if (response.success) { + this.router.navigate(['/dashboard']); + } + }, + finalize: () => this.displaySkeleton.set(false), + }) + ) + .subscribe(); + } else { + this.displaySkeleton.set(false); + } + } + public setBackground(): void { const theme = this.themeService.getTheme(); let opacity: number; From 635b30d33b5680a563c04a69954f7df7fab071d6 Mon Sep 17 00:00:00 2001 From: Igor Propisnov Date: Thu, 18 Jul 2024 22:52:49 +0200 Subject: [PATCH 2/3] Renaming --- frontend/src/app/app.routes.ts | 4 ++-- .../welcome-root.component.html} | 0 .../welcome-root.component.scss} | 0 .../welcome-root.component.ts} | 6 +++--- 4 files changed, 5 insertions(+), 5 deletions(-) rename frontend/src/app/pages/{register-root/register-root.component.html => welcome-root/welcome-root.component.html} (100%) rename frontend/src/app/pages/{register-root/register-root.component.scss => welcome-root/welcome-root.component.scss} (100%) rename frontend/src/app/pages/{register-root/register-root.component.ts => welcome-root/welcome-root.component.ts} (98%) diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index 1459b8f..a9754fc 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -6,8 +6,8 @@ const simpleLayoutRoutes: Routes = [ { path: '', loadComponent: () => - import('./pages/register-root/register-root.component').then( - (m) => m.RegisterRootComponent + import('./pages/welcome-root/welcome-root.component').then( + (m) => m.WelcomeRootComponent ), }, { diff --git a/frontend/src/app/pages/register-root/register-root.component.html b/frontend/src/app/pages/welcome-root/welcome-root.component.html similarity index 100% rename from frontend/src/app/pages/register-root/register-root.component.html rename to frontend/src/app/pages/welcome-root/welcome-root.component.html diff --git a/frontend/src/app/pages/register-root/register-root.component.scss b/frontend/src/app/pages/welcome-root/welcome-root.component.scss similarity index 100% rename from frontend/src/app/pages/register-root/register-root.component.scss rename to frontend/src/app/pages/welcome-root/welcome-root.component.scss diff --git a/frontend/src/app/pages/register-root/register-root.component.ts b/frontend/src/app/pages/welcome-root/welcome-root.component.ts similarity index 98% rename from frontend/src/app/pages/register-root/register-root.component.ts rename to frontend/src/app/pages/welcome-root/welcome-root.component.ts index d96f063..7fd00a2 100644 --- a/frontend/src/app/pages/register-root/register-root.component.ts +++ b/frontend/src/app/pages/welcome-root/welcome-root.component.ts @@ -67,11 +67,11 @@ type AuthAction = 'signin' | 'signup'; new ApiConfiguration({ withCredentials: true }), }, ], - templateUrl: './register-root.component.html', - styleUrl: './register-root.component.scss', + templateUrl: './welcome-root.component.html', + styleUrl: './welcome-root.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class RegisterRootComponent implements OnInit { +export class WelcomeRootComponent implements OnInit { public dialogBackgroundStyle: { 'background-image': string } | null = null; public leftBackgroundStyle: { 'background-image': string } | null = null; public rightBackgroundStyle: { 'background-image': string } | null = null; From b0b3fa72e10ddf96282faf888c6a59f96058039e Mon Sep 17 00:00:00 2001 From: Igor Propisnov Date: Thu, 18 Jul 2024 22:53:08 +0200 Subject: [PATCH 3/3] remove unused component --- .../pages/home-root/home-root.component.html | 0 .../pages/home-root/home-root.component.scss | 0 .../pages/home-root/home-root.component.ts | 38 ------------------- 3 files changed, 38 deletions(-) delete mode 100644 frontend/src/app/pages/home-root/home-root.component.html delete mode 100644 frontend/src/app/pages/home-root/home-root.component.scss delete mode 100644 frontend/src/app/pages/home-root/home-root.component.ts diff --git a/frontend/src/app/pages/home-root/home-root.component.html b/frontend/src/app/pages/home-root/home-root.component.html deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/app/pages/home-root/home-root.component.scss b/frontend/src/app/pages/home-root/home-root.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/app/pages/home-root/home-root.component.ts b/frontend/src/app/pages/home-root/home-root.component.ts deleted file mode 100644 index 7b5328d..0000000 --- a/frontend/src/app/pages/home-root/home-root.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { HttpErrorResponse } from '@angular/common/http'; -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; - -import { SuccessDtoApiModel } from '../../api'; -import { AuthService } from '../../shared/service'; - -@Component({ - selector: 'app-foo', - standalone: true, - providers: [], - imports: [], - templateUrl: './home-root.component.html', - styleUrl: './home-root.component.scss', -}) -export class HomeComponent implements OnInit { - public constructor( - private readonly authService: AuthService, - private readonly router: Router - ) {} - - public ngOnInit(): void { - this.authService.status().subscribe( - (response: SuccessDtoApiModel) => { - if (response.success) { - this.router.navigate(['/dashboard']); - } - }, - (error: HttpErrorResponse) => { - if (error.status === 401) { - this.router.navigate(['welcome'], { - queryParams: { login: true }, - }); - } - } - ); - } -}