From a14bd784150e1e3e9fc272748f7c45556219a78c Mon Sep 17 00:00:00 2001 From: Developer 02 Date: Mon, 19 Aug 2024 16:43:24 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20Navigationsleiste=20angepasst,=20Logout?= =?UTF-8?q?-=20und=20Neuen-Umschlag-Button=20hinzugef=C3=BCgt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Navigationsleiste überarbeitet und das Layout optimiert. - Logout-Button hinzugefügt, um den Benutzern das Abmelden zu erleichtern. - Button für das Erstellen eines neuen Umschlags hinzugefügt, um die Benutzerfreundlichkeit zu verbessern. --- .../app/components/login/login.component.html | 44 +++++++------- .../app/components/login/login.component.ts | 7 ++- .../components/navbar/navbar.component.html | 42 +++++++++++-- .../app/components/navbar/navbar.component.ts | 60 ++++++++++++++----- .../src/app/services/auth.service.ts | 15 ++++- .../src/assets/img/login_logo.svg | 4 ++ 6 files changed, 127 insertions(+), 45 deletions(-) create mode 100644 EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/assets/img/login_logo.svg diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/login/login.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/login/login.component.html index 14f264a3..5bef81d0 100644 --- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/login/login.component.html +++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/login/login.component.html @@ -1,23 +1,25 @@
-
- - Username - - -
-
- - Enter your password - - - -
-
- -
-
- \ No newline at end of file +
+ + Username + + +
+
+ + Enter your password + + + +
+
+ +
+ \ No newline at end of file diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/login/login.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/login/login.component.ts index 4eed30a7..e33a1b08 100644 --- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/login/login.component.ts +++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/login/login.component.ts @@ -18,6 +18,7 @@ import { ReactiveFormsModule } from '@angular/forms'; export class LoginComponent { hide = true; loginForm: FormGroup; + wait4waitRes: boolean = false; constructor(private fb: FormBuilder, private authService: AuthService, private router: Router) { this.loginForm = this.fb.group({ @@ -33,12 +34,14 @@ export class LoginComponent { onSubmit() { if (this.loginForm.valid) { + this.wait4waitRes = true; this.authService.login(this.loginForm.value).subscribe({ next: () => { - this.router.navigate(['/envelope']); + this.wait4waitRes = false; + this.router.navigate(['/envelope']); }, error: error => { - console.error('Login failed', error); + this.wait4waitRes = false; } }); } diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/navbar/navbar.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/navbar/navbar.component.html index d6cc033c..deb760a1 100644 --- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/navbar/navbar.component.html +++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/navbar/navbar.component.html @@ -1,6 +1,36 @@ - - - signFlow - \ No newline at end of file +
+ +
\ No newline at end of file diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/navbar/navbar.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/navbar/navbar.component.ts index 0d087537..5c19ac41 100644 --- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/navbar/navbar.component.ts +++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/navbar/navbar.component.ts @@ -1,23 +1,55 @@ -import { Component } from '@angular/core'; -import { MatToolbarModule } from '@angular/material/toolbar'; +import { Component, QueryList, ViewChildren } from '@angular/core'; +import { Router, RouterModule } from '@angular/router'; +import { CommonModule } from '@angular/common'; +import { MatBadgeModule } from '@angular/material/badge'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { FormsModule } from '@angular/forms'; +import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; -import { MatSidenavModule } from '@angular/material/sidenav'; -import { MatListModule } from '@angular/material/list'; +import { AuthService } from '../../services/auth.service' +import { Observable } from 'rxjs'; @Component({ - selector: 'app-navbar', standalone: true, - imports: [ - MatToolbarModule, - MatButtonModule, - MatIconModule, - MatSidenavModule, - MatListModule - ], + imports: [RouterModule, CommonModule, MatIconModule, MatBadgeModule, MatSlideToggleModule, FormsModule, MatButtonModule, MatTooltipModule], + selector: 'app-navbar', templateUrl: './navbar.component.html', - styleUrl: './navbar.component.scss' + styleUrls: ['./navbar.component.scss'] }) export class NavbarComponent { + isLogedIn(): boolean { + return this.authService.IsAuthenticated; + } + + async logInOut(): Promise { + if (this.isLogedIn()) + return this.authService.logoutAsync().then(() => { + this.router.navigate(['/']); + }) + else + this.router.navigate(['/login']); + } + + isExpanded = false; + + isChecked = true; + + constructor(public router: Router, public authService: AuthService) { + } + + get isDarkTheme(): boolean { + return false; + } + + collapse() { + this.isExpanded = false; + } + + toggle() { + this.isExpanded = !this.isExpanded; + } + + @ViewChildren(MatTooltip) tooltips: QueryList | undefined; -} +} \ No newline at end of file diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/services/auth.service.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/services/auth.service.ts index d9496162..893b1edc 100644 --- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/services/auth.service.ts +++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/services/auth.service.ts @@ -1,6 +1,6 @@ import { Injectable, inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -import { Observable } from 'rxjs'; +import { Observable, firstValueFrom, tap } from 'rxjs'; import { API_URL } from '../tokens/index'; @Injectable({ @@ -22,7 +22,18 @@ export class AuthService { return this.http.post(`${this.url}/logout`, {}); } + async logoutAsync(): Promise { + return await firstValueFrom(this.logout()); + } + isAuthenticated(): Observable { - return this.http.get(`${this.url}/check`); + return this.http.get(`${this.url}/check`).pipe( + tap(isAuthenticated => this.#IsAuthenticated = isAuthenticated) + ); + } + + #IsAuthenticated = false; + get IsAuthenticated(): boolean { + return this.#IsAuthenticated; } } \ No newline at end of file diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/assets/img/login_logo.svg b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/assets/img/login_logo.svg new file mode 100644 index 00000000..f2d2f856 --- /dev/null +++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/assets/img/login_logo.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file