From 9145bc245f0e40370a78f04fc7439a1673fa02c0 Mon Sep 17 00:00:00 2001 From: Flo Date: Mon, 26 Aug 2024 20:19:10 +0000 Subject: [PATCH] changes --- src/app/app.component.html | 2 +- src/app/app.component.ts | 17 +-- src/app/app.module.ts | 38 +++-- src/app/core/auth/auth.module.ts | 37 +++-- .../confirm-registration.component.html | 60 +++++--- .../confirm-registration.component.ts | 44 +++--- .../components/login/login.component.html | 71 ++++++--- .../auth/components/login/login.component.ts | 35 ++--- .../registration/registration.component.html | 71 ++++++--- .../registration/registration.component.ts | 37 ++--- .../core/components/home/home.component.html | 25 +--- .../core/components/home/home.component.ts | 42 +----- .../navigation/navigation.component.html | 133 +++++++++++------ .../navigation/navigation.component.ts | 83 +++++++++-- .../settings/settings.component.html | 84 +++++++---- .../components/settings/settings.component.ts | 15 +- .../tab-profile/tab-profile.component.html | 12 ++ .../tab-profile/tab-profile.component.scss | 0 .../tabs/tab-profile/tab-profile.component.ts | 10 ++ .../tab-security/tab-security.component.html | 5 + .../tab-security/tab-security.component.scss | 0 .../tab-security/tab-security.component.ts | 27 ++++ src/app/core/core.module.ts | 39 +++-- src/app/core/guards/auth.guard.ts | 40 ++--- .../confirm-registration-request.model.ts | 20 +-- src/app/core/models/login-request.model.ts | 8 +- .../models/register-user-request.model.ts | 7 +- .../core/models/user-state-request.model.ts | 19 ++- src/app/core/services/app.service.ts | 42 +++--- src/app/core/services/auth.service.ts | 139 +++++++++--------- src/app/core/services/request.service.ts | 109 +++++++------- .../components/card/card.component.html | 17 ++- .../shared/components/card/card.component.ts | 8 +- .../paginator/paginator.component.html | 6 +- .../paginator/paginator.component.ts | 8 +- .../components/table/table.component.ts | 10 +- src/app/shared/models/TabItem.ts | 4 - src/app/shared/models/tab-item.model.ts | 4 + src/app/shared/shared.module.ts | 34 ++--- src/main.ts | 10 +- src/styles.scss | 47 +++--- tailwind.config.js | 55 ++++--- 42 files changed, 839 insertions(+), 635 deletions(-) create mode 100644 src/app/core/components/settings/tabs/tab-profile/tab-profile.component.html create mode 100644 src/app/core/components/settings/tabs/tab-profile/tab-profile.component.scss create mode 100644 src/app/core/components/settings/tabs/tab-profile/tab-profile.component.ts create mode 100644 src/app/core/components/settings/tabs/tab-security/tab-security.component.html create mode 100644 src/app/core/components/settings/tabs/tab-security/tab-security.component.scss create mode 100644 src/app/core/components/settings/tabs/tab-security/tab-security.component.ts delete mode 100644 src/app/shared/models/TabItem.ts create mode 100644 src/app/shared/models/tab-item.model.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 90c6b64..0680b43 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index beaa4c8..58970ff 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,18 +1,17 @@ -import { Component, OnInit } from '@angular/core'; -import { AuthService } from './core/services/auth.service'; -import { AppService } from './core/services/app.service'; +import { Component, OnInit } from "@angular/core"; +import { AuthService } from "./core/services/auth.service"; +import { AppService } from "./core/services/app.service"; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + selector: "app-root", + templateUrl: "./app.component.html", + styleUrls: ["./app.component.scss"], }) export class AppComponent implements OnInit { constructor( private authService: AuthService, - private appService: AppService, - ) { - } + private appService: AppService + ) {} ngOnInit(): void { this.authService.readUserState(); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ca351f2..efcb67e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,21 +1,28 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { HttpClientModule } from '@angular/common/http'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { NgModule } from "@angular/core"; +import { BrowserModule } from "@angular/platform-browser"; +import { HttpClientModule } from "@angular/common/http"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; -import { AppComponent } from './app.component'; -import { RouterModule, Routes } from '@angular/router'; -import { SharedModule } from './shared/shared.module'; -import { HomeComponent } from './core/components/home/home.component'; -import { CoreModule } from './core/core.module'; -import { AuthGuard } from './core/guards/auth.guard'; -import { SettingsComponent } from './core/components/settings/settings.component'; +import { AppComponent } from "./app.component"; +import { RouterModule, Routes } from "@angular/router"; +import { SharedModule } from "./shared/shared.module"; +import { HomeComponent } from "./core/components/home/home.component"; +import { CoreModule } from "./core/core.module"; +import { AuthGuard } from "./core/guards/auth.guard"; +import { SettingsComponent } from "./core/components/settings/settings.component"; const routes: Routes = [ - { path: 'auth', loadChildren: () => import('./core/auth/auth.module').then(m => m.AuthModule) }, - { path: '', component: HomeComponent, canActivate: [AuthGuard], children: [ - {path: 'settings', component: SettingsComponent} - ]}, + { + path: "auth", + loadChildren: () => + import("./core/auth/auth.module").then((m) => m.AuthModule), + }, + { + path: "", + component: HomeComponent, + canActivate: [AuthGuard], + children: [{ path: "settings", component: SettingsComponent }], + }, ]; @NgModule({ @@ -24,6 +31,7 @@ const routes: Routes = [ BrowserModule, BrowserAnimationsModule, HttpClientModule, + RouterModule, RouterModule.forRoot(routes), SharedModule, CoreModule, diff --git a/src/app/core/auth/auth.module.ts b/src/app/core/auth/auth.module.ts index 883512c..07c0917 100644 --- a/src/app/core/auth/auth.module.ts +++ b/src/app/core/auth/auth.module.ts @@ -1,33 +1,32 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { LoginComponent } from './components/login/login.component'; -import { RegistrationComponent } from './components/registration/registration.component'; -import { ConfirmRegistrationComponent } from './components/confirm-registration/confirm-registration.component'; -import { RouterModule, Routes } from '@angular/router'; -import { ReactiveFormsModule } from '@angular/forms'; +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { LoginComponent } from "./components/login/login.component"; +import { RegistrationComponent } from "./components/registration/registration.component"; +import { ConfirmRegistrationComponent } from "./components/confirm-registration/confirm-registration.component"; +import { RouterModule, Routes } from "@angular/router"; +import { ReactiveFormsModule } from "@angular/forms"; const routes: Routes = [ - { path: 'login', component: LoginComponent }, - { path: 'registration', component: RegistrationComponent }, - { path: 'registration/:registrationId', component: ConfirmRegistrationComponent }, - { path: '', redirectTo: 'login', pathMatch: 'full' }, + { path: "login", component: LoginComponent }, + { path: "registration", component: RegistrationComponent }, + { + path: "registration/:registrationId", + component: ConfirmRegistrationComponent, + }, + { path: "", redirectTo: "login", pathMatch: "full" }, ]; @NgModule({ declarations: [ LoginComponent, RegistrationComponent, - ConfirmRegistrationComponent + ConfirmRegistrationComponent, ], exports: [ LoginComponent, RegistrationComponent, - ConfirmRegistrationComponent + ConfirmRegistrationComponent, ], - imports: [ - RouterModule.forChild(routes), - CommonModule, - ReactiveFormsModule - ] + imports: [RouterModule.forChild(routes), CommonModule, ReactiveFormsModule], }) -export class AuthModule { } +export class AuthModule {} diff --git a/src/app/core/auth/components/confirm-registration/confirm-registration.component.html b/src/app/core/auth/components/confirm-registration/confirm-registration.component.html index 463299d..1b46718 100644 --- a/src/app/core/auth/components/confirm-registration/confirm-registration.component.html +++ b/src/app/core/auth/components/confirm-registration/confirm-registration.component.html @@ -1,23 +1,49 @@ -
-
+
-

- Beekeeper -

-

- Registrierung Abschließen -

+

+ Beekeeper +

+

+ Registrierung Abschließen +

-
- - -
-
- - -
- +
+ + +
+
+ + +
+
diff --git a/src/app/core/auth/components/confirm-registration/confirm-registration.component.ts b/src/app/core/auth/components/confirm-registration/confirm-registration.component.ts index f6f4c8b..d15379f 100644 --- a/src/app/core/auth/components/confirm-registration/confirm-registration.component.ts +++ b/src/app/core/auth/components/confirm-registration/confirm-registration.component.ts @@ -1,18 +1,18 @@ -import { Component } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; -import { ActivatedRoute, Router } from '@angular/router'; -import { filter } from 'rxjs'; -import { AuthService } from 'src/app/core/services/auth.service'; +import { Component } from "@angular/core"; +import { FormControl, FormGroup, Validators } from "@angular/forms"; +import { ActivatedRoute, Router } from "@angular/router"; +import { filter } from "rxjs"; +import { AuthService } from "src/app/core/services/auth.service"; @Component({ - selector: 'app-confirm-registration', - templateUrl: './confirm-registration.component.html', - styleUrls: ['./confirm-registration.component.scss'] + selector: "app-confirm-registration", + templateUrl: "./confirm-registration.component.html", + styleUrls: ["./confirm-registration.component.scss"], }) export class ConfirmRegistrationComponent { confirmRegistrationForm = new FormGroup({ - password: new FormControl('', [Validators.required]), - passwordConfirmation: new FormControl('', [Validators.required]), + password: new FormControl("", [Validators.required]), + passwordConfirmation: new FormControl("", [Validators.required]), }); registrationId: string | undefined; @@ -22,27 +22,23 @@ export class ConfirmRegistrationComponent { private activatedRoute: ActivatedRoute, private router: Router ) { - this.activatedRoute.params.subscribe( - (params) => { - this.registrationId = params['registrationId']; - } - ); - - this.authService.currentState$.pipe( - filter(state=>state !== undefined && state !== null) - ).subscribe((state) => - this.router.navigateByUrl('/') - ); + this.activatedRoute.params.subscribe((params) => { + this.registrationId = params["registrationId"]; + }); + + this.authService.currentState$ + .pipe(filter((state) => state !== undefined && state !== null)) + .subscribe((state) => this.router.navigateByUrl("/")); } confirm(): void { - if (this.registrationId === undefined) - return; + if (this.registrationId === undefined) return; this.authService.confirmRegistration({ id: this.registrationId!, password: this.confirmRegistrationForm.value.password!, - passwordConfirmation: this.confirmRegistrationForm.value.passwordConfirmation! + passwordConfirmation: + this.confirmRegistrationForm.value.passwordConfirmation!, }); } } diff --git a/src/app/core/auth/components/login/login.component.html b/src/app/core/auth/components/login/login.component.html index c45b672..46a14a1 100644 --- a/src/app/core/auth/components/login/login.component.html +++ b/src/app/core/auth/components/login/login.component.html @@ -1,24 +1,59 @@ -
-
+
-

- Beekeeper -

-

- Anmeldung -

+

+ Beekeeper +

+

Anmeldung

-
- - -
-
- - -

Neu hier? Jetzt registrieren!

-
- +
+ + +
+
+ + +

+ Neu hier? + Jetzt registrieren! +

+
+
diff --git a/src/app/core/auth/components/login/login.component.ts b/src/app/core/auth/components/login/login.component.ts index 98577c7..700b9e8 100644 --- a/src/app/core/auth/components/login/login.component.ts +++ b/src/app/core/auth/components/login/login.component.ts @@ -1,35 +1,30 @@ -import { Component } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; -import { Router } from '@angular/router'; -import { filter, map } from 'rxjs'; -import { AuthService } from 'src/app/core/services/auth.service'; +import { Component } from "@angular/core"; +import { FormControl, FormGroup, Validators } from "@angular/forms"; +import { Router } from "@angular/router"; +import { filter, map } from "rxjs"; +import { AuthService } from "src/app/core/services/auth.service"; @Component({ - selector: 'app-login', - templateUrl: './login.component.html', - styleUrls: ['./login.component.scss'] + selector: "app-login", + templateUrl: "./login.component.html", + styleUrls: ["./login.component.scss"], }) export class LoginComponent { loginForm = new FormGroup({ - identifier: new FormControl('', [Validators.required]), - password: new FormControl('', [Validators.required]), + identifier: new FormControl("", [Validators.required]), + password: new FormControl("", [Validators.required]), }); - constructor( - private authService: AuthService, - private router: Router - ) { - this.authService.currentState$.pipe( - filter(state=>state !== undefined && state !== null) - ).subscribe((state) => - this.router.navigateByUrl('/') - ); + constructor(private authService: AuthService, private router: Router) { + this.authService.currentState$ + .pipe(filter((state) => state !== undefined && state !== null)) + .subscribe((state) => this.router.navigateByUrl("/")); } login(): void { this.authService.login({ identifier: this.loginForm.value.identifier!, - password: this.loginForm.value.password! + password: this.loginForm.value.password!, }); } } diff --git a/src/app/core/auth/components/registration/registration.component.html b/src/app/core/auth/components/registration/registration.component.html index bdcda16..4a3e88b 100644 --- a/src/app/core/auth/components/registration/registration.component.html +++ b/src/app/core/auth/components/registration/registration.component.html @@ -1,24 +1,59 @@ -
-
+
-

- Beekeeper -

-

- Registrierung -

+

+ Beekeeper +

+

Registrierung

-
- - -
-
- - -

Bereits registiert? Jetzt anmelden!

-
- +
+ + +
+
+ + +

+ Bereits registiert? + Jetzt anmelden! +

+
+
diff --git a/src/app/core/auth/components/registration/registration.component.ts b/src/app/core/auth/components/registration/registration.component.ts index 2502fa4..6244137 100644 --- a/src/app/core/auth/components/registration/registration.component.ts +++ b/src/app/core/auth/components/registration/registration.component.ts @@ -1,37 +1,32 @@ -import { Component } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; -import { Router } from '@angular/router'; -import { filter } from 'rxjs'; -import { AuthService } from 'src/app/core/services/auth.service'; +import { Component } from "@angular/core"; +import { FormControl, FormGroup, Validators } from "@angular/forms"; +import { Router } from "@angular/router"; +import { filter } from "rxjs"; +import { AuthService } from "src/app/core/services/auth.service"; @Component({ - selector: 'app-registration', - templateUrl: './registration.component.html', - styleUrls: ['./registration.component.scss'] + selector: "app-registration", + templateUrl: "./registration.component.html", + styleUrls: ["./registration.component.scss"], }) export class RegistrationComponent { registrationForm = new FormGroup({ - mail: new FormControl('', [Validators.required]), - username: new FormControl('', [Validators.required]), + mail: new FormControl("", [Validators.required]), + username: new FormControl("", [Validators.required]), }); - constructor( - private authService: AuthService, - private router: Router - ) { - this.authService.currentState$.pipe( - filter(state=>state !== undefined && state !== null) - ).subscribe((state) => - this.router.navigateByUrl('/') - ); + constructor(private authService: AuthService, private router: Router) { + this.authService.currentState$ + .pipe(filter((state) => state !== undefined && state !== null)) + .subscribe((state) => this.router.navigateByUrl("/")); } register(): void { this.authService.register({ mail: this.registrationForm.value.mail!, - username: this.registrationForm.value.username! + username: this.registrationForm.value.username!, }); - this.router.navigateByUrl('/auth/login'); + this.router.navigateByUrl("/auth/login"); } } diff --git a/src/app/core/components/home/home.component.html b/src/app/core/components/home/home.component.html index de0a307..4b8a0ee 100644 --- a/src/app/core/components/home/home.component.html +++ b/src/app/core/components/home/home.component.html @@ -1,26 +1,5 @@
- - I'm working - - - - I'm working - - - - I'm working - - -
- - - -
- - - - - -
\ No newline at end of file + + diff --git a/src/app/core/components/home/home.component.ts b/src/app/core/components/home/home.component.ts index a6cf3ac..be17790 100644 --- a/src/app/core/components/home/home.component.ts +++ b/src/app/core/components/home/home.component.ts @@ -1,40 +1,8 @@ -import { Component } from '@angular/core'; -import { RequestService } from 'src/app/core/services/request.service'; -import { ColumnDefinition } from 'src/app/shared/components/table/table.component'; - -interface Colony { - name: string; - -} +import { Component } from "@angular/core"; @Component({ - selector: 'app-home', - templateUrl: './home.component.html', - styleUrls: ['./home.component.scss'], + selector: "app-home", + templateUrl: "./home.component.html", + styleUrls: ["./home.component.scss"], }) -export class HomeComponent { - - columns: ColumnDefinition[] = [ - { - header: 'Name', - columnFunction: (colony:Colony) => colony.name, - routerLink: (colony:Colony) => '#', - }, - { - header: 'Name2', - columnFunction: (colony:Colony) => colony.name, - } - ]; - - colonies: Colony[] = [ - { - name: 'Die Römer' - }, - { - name: 'Die Griechen' - } - ]; - - constructor(public requestService: RequestService) { - } -} +export class HomeComponent {} diff --git a/src/app/core/components/navigation/navigation.component.html b/src/app/core/components/navigation/navigation.component.html index d261342..8d7c27d 100644 --- a/src/app/core/components/navigation/navigation.component.html +++ b/src/app/core/components/navigation/navigation.component.html @@ -1,60 +1,105 @@ - - diff --git a/src/app/core/components/navigation/navigation.component.ts b/src/app/core/components/navigation/navigation.component.ts index e6ba97a..dff0350 100644 --- a/src/app/core/components/navigation/navigation.component.ts +++ b/src/app/core/components/navigation/navigation.component.ts @@ -1,17 +1,54 @@ -import { Component, OnInit } from '@angular/core'; -import { initFlowbite } from 'flowbite'; -import { AuthService } from '../../services/auth.service'; -import { UserStateResponse } from '../../models/user-state-request.model'; -import { Router } from '@angular/router'; -import { filter, map } from 'rxjs'; -import { AppService } from '../../services/app.service'; +import { Component, OnInit } from "@angular/core"; +import { initFlowbite } from "flowbite"; +import { AuthService } from "../../services/auth.service"; +import { UserStateResponse } from "../../models/user-state-request.model"; +import { Router } from "@angular/router"; +import { filter, map } from "rxjs"; +import { AppService } from "../../services/app.service"; + +interface NavigationLink { + label: string; + routerLink: string; +} + +interface UserMenuButton { + label: Function | string; + routerLink: string | undefined; + clickCallback: Function | undefined; +} @Component({ - selector: 'app-navigation', - templateUrl: './navigation.component.html', - styleUrls: ['./navigation.component.scss'], + selector: "app-navigation", + templateUrl: "./navigation.component.html", + styleUrls: ["./navigation.component.scss"], }) export class NavigationComponent implements OnInit { + navigationLinks: NavigationLink[] = [ + { routerLink: "/", label: "Startseite" }, + { routerLink: "/settings", label: "Völker" }, + ]; + + usermenuButtons: UserMenuButton[] = [ + { + label: "Einstellungen", + routerLink: "/settings", + clickCallback: undefined, + }, + { + label: () => (this.darkMode ? "Hell" : "Dunkel"), + routerLink: undefined, + clickCallback: () => { + this.toggleDarkmode(); + }, + }, + { + label: "Ausloggen", + routerLink: undefined, + clickCallback: () => { + this.logout(); + }, + }, + ]; state: UserStateResponse | undefined | null; darkMode: boolean; @@ -19,15 +56,15 @@ export class NavigationComponent implements OnInit { constructor( private authService: AuthService, private appService: AppService, - private router: Router, + private router: Router ) { this.darkMode = this.appService.darkMode; this.state = this.authService.currentState$.value; - this.authService.currentState$.pipe( - filter(state => state === undefined) - ).subscribe( state =>{ - this.router.navigateByUrl('/auth/login'); - }); + this.authService.currentState$ + .pipe(filter((state) => state === undefined)) + .subscribe((state) => { + this.router.navigateByUrl("/auth/login"); + }); } ngOnInit(): void { @@ -42,4 +79,18 @@ export class NavigationComponent implements OnInit { this.appService.toggleDarkMode(); this.darkMode = this.appService.darkMode; } + + clickUserMenuButtonLabel(button: UserMenuButton) { + if (button.clickCallback !== undefined) { + button.clickCallback(); + } + } + + getUserMenuButtonLabel(button: UserMenuButton) { + if (typeof button.label === "function") { + return button.label(); + } else { + return button.label; + } + } } diff --git a/src/app/core/components/settings/settings.component.html b/src/app/core/components/settings/settings.component.html index 96629a7..8a265b8 100644 --- a/src/app/core/components/settings/settings.component.html +++ b/src/app/core/components/settings/settings.component.html @@ -1,33 +1,57 @@ -
-
-
    - - - -
  • - -
    • -
+
+
    + + +
+
+
+ -
- - - - + -
\ No newline at end of file +
+
diff --git a/src/app/core/components/settings/settings.component.ts b/src/app/core/components/settings/settings.component.ts index 1433a64..c383834 100644 --- a/src/app/core/components/settings/settings.component.ts +++ b/src/app/core/components/settings/settings.component.ts @@ -1,10 +1,13 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from "@angular/core"; +import { initFlowbite } from "flowbite"; @Component({ - selector: 'app-settings', - templateUrl: './settings.component.html', - styleUrls: ['./settings.component.scss'] + selector: "app-settings", + templateUrl: "./settings.component.html", + styleUrls: ["./settings.component.scss"], }) -export class SettingsComponent { - +export class SettingsComponent implements OnInit { + ngOnInit(): void { + initFlowbite(); + } } diff --git a/src/app/core/components/settings/tabs/tab-profile/tab-profile.component.html b/src/app/core/components/settings/tabs/tab-profile/tab-profile.component.html new file mode 100644 index 0000000..547a4e7 --- /dev/null +++ b/src/app/core/components/settings/tabs/tab-profile/tab-profile.component.html @@ -0,0 +1,12 @@ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ligula erat, + auctor eget dolor sed, interdum interdum quam. Donec dui nisl, dignissim quis + sollicitudin vitae, eleifend sit amet dui. Cras mattis pretium metus nec + venenatis. Nam tempus eros in tempus facilisis. Aliquam sit amet consequat + lacus. Mauris lacinia mollis justo eu dapibus. Maecenas vestibulum diam id mi + pellentesque accumsan. + diff --git a/src/app/core/components/settings/tabs/tab-profile/tab-profile.component.scss b/src/app/core/components/settings/tabs/tab-profile/tab-profile.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/core/components/settings/tabs/tab-profile/tab-profile.component.ts b/src/app/core/components/settings/tabs/tab-profile/tab-profile.component.ts new file mode 100644 index 0000000..5e2a028 --- /dev/null +++ b/src/app/core/components/settings/tabs/tab-profile/tab-profile.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-tab-profile', + templateUrl: './tab-profile.component.html', + styleUrls: ['./tab-profile.component.scss'] +}) +export class TabProfileComponent { + +} diff --git a/src/app/core/components/settings/tabs/tab-security/tab-security.component.html b/src/app/core/components/settings/tabs/tab-security/tab-security.component.html new file mode 100644 index 0000000..0a4eeff --- /dev/null +++ b/src/app/core/components/settings/tabs/tab-security/tab-security.component.html @@ -0,0 +1,5 @@ +
+ +
+ + diff --git a/src/app/core/components/settings/tabs/tab-security/tab-security.component.scss b/src/app/core/components/settings/tabs/tab-security/tab-security.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/core/components/settings/tabs/tab-security/tab-security.component.ts b/src/app/core/components/settings/tabs/tab-security/tab-security.component.ts new file mode 100644 index 0000000..b416a69 --- /dev/null +++ b/src/app/core/components/settings/tabs/tab-security/tab-security.component.ts @@ -0,0 +1,27 @@ +import { Component } from "@angular/core"; +import { ColumnDefinition } from "src/app/shared/components/table/table.component"; + +interface Colony { + name: string; +} + +@Component({ + selector: "app-tab-security", + templateUrl: "./tab-security.component.html", + styleUrls: ["./tab-security.component.scss"], +}) +export class TabSecurityComponent { + columns: ColumnDefinition[] = [ + { + header: "Name", + columnFunction: (colony: Colony) => colony.name, + routerLink: (colony: Colony) => "#", + }, + { + header: "Name2", + columnFunction: (colony: Colony) => colony.name, + }, + ]; + + colonies: Colony[] = [{ name: "Die Römer" }, { name: "Die Griechen" }]; +} diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index 905f416..09afa0c 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -1,20 +1,27 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { NavigationComponent } from './components/navigation/navigation.component'; -import { AuthGuard } from './guards/auth.guard'; -import { AuthService } from './services/auth.service'; -import { RequestService } from './services/request.service'; -import { AppService } from './services/app.service'; -import { SharedModule } from '../shared/shared.module'; -import { SettingsComponent } from './components/settings/settings.component'; +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { NavigationComponent } from "./components/navigation/navigation.component"; +import { AuthGuard } from "./guards/auth.guard"; +import { AuthService } from "./services/auth.service"; +import { RequestService } from "./services/request.service"; +import { AppService } from "./services/app.service"; +import { SharedModule } from "../shared/shared.module"; +import { SettingsComponent } from "./components/settings/settings.component"; +import { TabProfileComponent } from "./components/settings/tabs/tab-profile/tab-profile.component"; +import { TabSecurityComponent } from "./components/settings/tabs/tab-security/tab-security.component"; +import { RouterModule } from "@angular/router"; @NgModule({ - declarations: [NavigationComponent, SettingsComponent], - exports: [NavigationComponent, SettingsComponent], - imports: [ - CommonModule, - SharedModule + declarations: [ + NavigationComponent, + SettingsComponent, + TabProfileComponent, + TabSecurityComponent, + TabProfileComponent, + TabSecurityComponent, ], - providers: [AuthGuard, AuthService, RequestService, AppService] + exports: [NavigationComponent, SettingsComponent], + imports: [CommonModule, SharedModule, RouterModule], + providers: [AuthGuard, AuthService, RequestService, AppService], }) -export class CoreModule { } +export class CoreModule {} diff --git a/src/app/core/guards/auth.guard.ts b/src/app/core/guards/auth.guard.ts index bcce273..63f8f16 100644 --- a/src/app/core/guards/auth.guard.ts +++ b/src/app/core/guards/auth.guard.ts @@ -1,26 +1,28 @@ import { Injectable } from "@angular/core"; -import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from "@angular/router"; +import { + ActivatedRouteSnapshot, + CanActivate, + Router, + RouterStateSnapshot, + UrlTree, +} from "@angular/router"; import { filter, map, Observable } from "rxjs"; import { AuthService } from "../services/auth.service"; @Injectable() export class AuthGuard implements CanActivate { + constructor(private authService: AuthService, private router: Router) {} - constructor( - private authService: AuthService, - private router: Router - ) { - } - - canActivate(): Observable | boolean { - return this.authService.currentState$.pipe( - filter(currentState=>currentState!==undefined), - map((currentState) => { - if (currentState === null) { - this.router.navigateByUrl('/auth/login'); - return false; - } - return true; - })); - } -} \ No newline at end of file + canActivate(): Observable | boolean { + return this.authService.currentState$.pipe( + filter((currentState) => currentState !== undefined), + map((currentState) => { + if (currentState === null) { + this.router.navigateByUrl("/auth/login"); + return false; + } + return true; + }) + ); + } +} diff --git a/src/app/core/models/confirm-registration-request.model.ts b/src/app/core/models/confirm-registration-request.model.ts index 8167c09..4ca62be 100644 --- a/src/app/core/models/confirm-registration-request.model.ts +++ b/src/app/core/models/confirm-registration-request.model.ts @@ -1,14 +1,14 @@ export interface ConfirmRegistrationRequest { - id: string, - password: string, - passwordConfirmation: string, + id: string; + password: string; + passwordConfirmation: string; } export interface ConfirmRegistrationResponse { - id: string, - username: string, - roleIdentifier: string, - createdAt: string, - updatedAt: string, - permissions: string[] -} \ No newline at end of file + id: string; + username: string; + roleIdentifier: string; + createdAt: string; + updatedAt: string; + permissions: string[]; +} diff --git a/src/app/core/models/login-request.model.ts b/src/app/core/models/login-request.model.ts index 679a754..097dea6 100644 --- a/src/app/core/models/login-request.model.ts +++ b/src/app/core/models/login-request.model.ts @@ -1,8 +1,8 @@ export interface LoginRequest { - identifier: string, - password: string, + identifier: string; + password: string; } export interface LoginResponse { - sessionId: string -} \ No newline at end of file + sessionId: string; +} diff --git a/src/app/core/models/register-user-request.model.ts b/src/app/core/models/register-user-request.model.ts index 422369e..dbd4c68 100644 --- a/src/app/core/models/register-user-request.model.ts +++ b/src/app/core/models/register-user-request.model.ts @@ -1,7 +1,6 @@ export interface RegisterUserRequest { - mail: string, - username: string, + mail: string; + username: string; } -export interface RegisterUserResponse { -} \ No newline at end of file +export interface RegisterUserResponse {} diff --git a/src/app/core/models/user-state-request.model.ts b/src/app/core/models/user-state-request.model.ts index 64d1f79..1dfba69 100644 --- a/src/app/core/models/user-state-request.model.ts +++ b/src/app/core/models/user-state-request.model.ts @@ -1,12 +1,11 @@ -export interface UserStateRequest { -} +export interface UserStateRequest {} export interface UserStateResponse { - id: string, - sessionId: string, - username: string, - roleIdentifier: string, - createdAt: string, - updatedAt: string, - permissions: string[], -} \ No newline at end of file + id: string; + sessionId: string; + username: string; + roleIdentifier: string; + createdAt: string; + updatedAt: string; + permissions: string[]; +} diff --git a/src/app/core/services/app.service.ts b/src/app/core/services/app.service.ts index 1177ed6..8026d53 100644 --- a/src/app/core/services/app.service.ts +++ b/src/app/core/services/app.service.ts @@ -2,29 +2,29 @@ import { Injectable } from "@angular/core"; @Injectable() export class AppService { - - darkMode: boolean; + darkMode: boolean; - constructor( - ) { - this.darkMode = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches); - this.applyDarkMode(); - } + constructor() { + this.darkMode = + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches; + this.applyDarkMode(); + } - private applyDarkMode(): void { - if (this.darkMode) { - document.documentElement.classList.add('theme-dark'); - } else { - document.documentElement.classList.remove('theme-dark'); - } + private applyDarkMode(): void { + if (this.darkMode) { + document.documentElement.classList.add("theme-dark"); + } else { + document.documentElement.classList.remove("theme-dark"); } + } - toggleDarkMode() { - this.darkMode = !this.darkMode; - this.applyDarkMode(); - } + toggleDarkMode() { + this.darkMode = !this.darkMode; + this.applyDarkMode(); + } - getDarkMode(): boolean { - return this.darkMode; - } -} \ No newline at end of file + getDarkMode(): boolean { + return this.darkMode; + } +} diff --git a/src/app/core/services/auth.service.ts b/src/app/core/services/auth.service.ts index b309628..9423910 100644 --- a/src/app/core/services/auth.service.ts +++ b/src/app/core/services/auth.service.ts @@ -4,87 +4,88 @@ import { UserStateResponse } from "../models/user-state-request.model"; import { BehaviorSubject } from "rxjs"; import { LoginRequest, LoginResponse } from "../models/login-request.model"; import { Router } from "@angular/router"; -import { RegisterUserRequest, RegisterUserResponse } from "../models/register-user-request.model"; -import { ConfirmRegistrationRequest, ConfirmRegistrationResponse } from "../models/confirm-registration-request.model"; +import { + RegisterUserRequest, + RegisterUserResponse, +} from "../models/register-user-request.model"; +import { + ConfirmRegistrationRequest, + ConfirmRegistrationResponse, +} from "../models/confirm-registration-request.model"; @Injectable() export class AuthService { - - currentState$ = new BehaviorSubject(undefined); + currentState$ = new BehaviorSubject( + undefined + ); - constructor( - private requestService: RequestService, - private router: Router - ) { - } + constructor(private requestService: RequestService, private router: Router) {} - readUserState(): void { - this.requestService.get( - 'user/state', - {}, - (response: UserStateResponse) => { - console.log('set next state'); - this.currentState$.next(response); - }, - () => { - this.currentState$.next(null); - } - ) - } + readUserState(): void { + this.requestService.get( + "user/state", + {}, + (response: UserStateResponse) => { + console.log("set next state"); + this.currentState$.next(response); + }, + () => { + this.currentState$.next(null); + } + ); + } - login(body: LoginRequest): LoginResponse|null { - let result = null; + login(body: LoginRequest): LoginResponse | null { + let result = null; - this.requestService.post( - 'auth/login-user', - body, - (response: LoginResponse) => { - result = response; - this.readUserState(); - } - ); + this.requestService.post( + "auth/login-user", + body, + (response: LoginResponse) => { + result = response; + this.readUserState(); + } + ); - return result; - } + return result; + } - register(body: RegisterUserRequest): RegisterUserResponse|null { - let result = null; + register(body: RegisterUserRequest): RegisterUserResponse | null { + let result = null; - this.requestService.post( - 'auth/register-user', - body, - (response: LoginResponse) => { - result = response; - this.readUserState(); - } - ); + this.requestService.post( + "auth/register-user", + body, + (response: LoginResponse) => { + result = response; + this.readUserState(); + } + ); - return result; - } + return result; + } - confirmRegistration(body: ConfirmRegistrationRequest): ConfirmRegistrationResponse|null { - let result = null; + confirmRegistration( + body: ConfirmRegistrationRequest + ): ConfirmRegistrationResponse | null { + let result = null; - this.requestService.post( - 'auth/confirm-registration', - body, - (response: LoginResponse) => { - result = response; - this.readUserState(); - } - ); + this.requestService.post( + "auth/confirm-registration", + body, + (response: LoginResponse) => { + result = response; + this.readUserState(); + } + ); - return result; - } + return result; + } - logout(): void { - this.requestService.post( - 'auth/logout-user', - {}, - (response: any) => { - this.currentState$.next(undefined); - this.readUserState(); - } - ); - } -} \ No newline at end of file + logout(): void { + this.requestService.post("auth/logout-user", {}, (response: any) => { + this.currentState$.next(undefined); + this.readUserState(); + }); + } +} diff --git a/src/app/core/services/request.service.ts b/src/app/core/services/request.service.ts index c390d63..6b2834b 100644 --- a/src/app/core/services/request.service.ts +++ b/src/app/core/services/request.service.ts @@ -1,71 +1,73 @@ -import { HttpClient } from '@angular/common/http'; -import { Router } from '@angular/router'; -import { Injectable } from '@angular/core'; +import { HttpClient } from "@angular/common/http"; +import { Router } from "@angular/router"; +import { Injectable } from "@angular/core"; @Injectable({ - providedIn: 'root' + providedIn: "root", }) export class RequestService { + constructor(private http: HttpClient, private router: Router) {} - constructor( - private http: HttpClient, - private router: Router, + public post( + apiPath: string, + body: any, + successFunction: Function, + errorFunction: Function | null = null ) { - } - - public post(apiPath: string, body: any, successFunction: Function, errorFunction: Function|null = null) - { let url = this.obtainUrl(apiPath); let observable = this.http.post(url, body).subscribe( - (answer:any) => { + (answer: any) => { successFunction(answer); }, - (error:any) => { - if (errorFunction === null) - this.handleError(error); - else - errorFunction(error); - } - ); - } - - public get(apiPath: string, body: any, successFunction: Function, errorFunction: Function|null = null) - { - let url = this.obtainUrl(apiPath); - let observable = this.http.get(url, body).subscribe( - (answer:any) => { - successFunction(answer); - }, - (error:any) => { - if (errorFunction === null) - this.handleError(error); - else - errorFunction(error); + (error: any) => { + if (errorFunction === null) this.handleError(error); + else errorFunction(error); } ); } - public postFiles(apiPath: string, files: File[], successFunction: Function, errorFunction: Function|null = null) { + public get( + apiPath: string, + body: any, + successFunction: Function, + errorFunction: Function | null = null + ) { + let url = this.obtainUrl(apiPath); + let observable = this.http.get(url, body).subscribe( + (answer: any) => { + successFunction(answer); + }, + (error: any) => { + if (errorFunction === null) this.handleError(error); + else errorFunction(error); + } + ); + } + + public postFiles( + apiPath: string, + files: File[], + successFunction: Function, + errorFunction: Function | null = null + ) { if (!files || files.length === 0) { - throw 'Need to select at least one file'; + throw "Need to select at least one file"; } - + const formData = new FormData(); - + for (let fileIndex = 0; fileIndex < files.length; fileIndex++) { - formData.append('file' + fileIndex, files[fileIndex]); + formData.append("file" + fileIndex, files[fileIndex]); } - + let url = this.obtainUrl(apiPath); let observable = this.http.post(url, formData).subscribe( (answer: any) => { successFunction(answer); }, (error: any) => { - if (errorFunction === null) - this.handleError(error); - else - errorFunction(error); + if (errorFunction === null) this.handleError(error); + else errorFunction(error); } ); } @@ -73,34 +75,33 @@ export class RequestService { private obtainUrl(apiPath: string): string { let hostString = window.location.host; let protocol = window.location.protocol; - return protocol + '//' + hostString + '/api/' + apiPath; + return protocol + "//" + hostString + "/api/" + apiPath; } private handleError(answer: any): void { - if (answer.status == 401) { - console.log('Deine Sitzung konnte nicht gefunden werden'); - this.router.navigate(['/auth']); + console.log("Deine Sitzung konnte nicht gefunden werden"); + this.router.navigate(["/auth"]); return; } - + if (answer.status == 403) { - this.showSnackBar('Du bist nicht für diese Aktion autorisiert', 'Ok'); + this.showSnackBar("Du bist nicht für diese Aktion autorisiert", "Ok"); return; } - + try { let errorObject = answer.error.error; - if (errorObject.hasOwnProperty('message')) { + if (errorObject.hasOwnProperty("message")) { throw errorObject.message.toString(); } - if (errorObject.hasOwnProperty('code')) { + if (errorObject.hasOwnProperty("code")) { throw errorObject.code.toString(); } - } catch(error:any) { - this.showSnackBar(error.toString(), 'Ok'); + } catch (error: any) { + this.showSnackBar(error.toString(), "Ok"); } } diff --git a/src/app/shared/components/card/card.component.html b/src/app/shared/components/card/card.component.html index 56166c9..cf77bdb 100644 --- a/src/app/shared/components/card/card.component.html +++ b/src/app/shared/components/card/card.component.html @@ -2,7 +2,11 @@ id="card" class="grow p-3 my-2 rounded-xl shadow-sm shadow-skin-primary border border-skin-primary divide-y divide-skin-primary" > -