diff --git a/src/app/core/auth/auth.module.ts b/src/app/core/auth/auth.module.ts index 07c0917..7626877 100644 --- a/src/app/core/auth/auth.module.ts +++ b/src/app/core/auth/auth.module.ts @@ -5,14 +5,21 @@ import { RegistrationComponent } from "./components/registration/registration.co import { ConfirmRegistrationComponent } from "./components/confirm-registration/confirm-registration.component"; import { RouterModule, Routes } from "@angular/router"; import { ReactiveFormsModule } from "@angular/forms"; +import { ForgotPasswordComponent } from "./components/forgot-password/forgot-password.component"; +import { ResetPasswordComponent } from "./components/reset-password/reset-password.component"; const routes: Routes = [ { path: "login", component: LoginComponent }, { path: "registration", component: RegistrationComponent }, + { path: "forgot-password", component: ForgotPasswordComponent }, { path: "registration/:registrationId", component: ConfirmRegistrationComponent, }, + { + path: "reset-password/:passwordToken", + component: ResetPasswordComponent, + }, { path: "", redirectTo: "login", pathMatch: "full" }, ]; @@ -21,11 +28,15 @@ const routes: Routes = [ LoginComponent, RegistrationComponent, ConfirmRegistrationComponent, + ForgotPasswordComponent, + ResetPasswordComponent, ], exports: [ LoginComponent, RegistrationComponent, ConfirmRegistrationComponent, + ForgotPasswordComponent, + ResetPasswordComponent, ], imports: [RouterModule.forChild(routes), CommonModule, ReactiveFormsModule], }) diff --git a/src/app/core/auth/components/forgot-password/forgot-password.component.html b/src/app/core/auth/components/forgot-password/forgot-password.component.html new file mode 100644 index 0000000..682b804 --- /dev/null +++ b/src/app/core/auth/components/forgot-password/forgot-password.component.html @@ -0,0 +1,35 @@ +
+ +
+

+ Beekeeper +

+

+ Passwort vergessen? +

+
+ +
+
+ + +
+ +
diff --git a/src/app/core/auth/components/forgot-password/forgot-password.component.scss b/src/app/core/auth/components/forgot-password/forgot-password.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/core/auth/components/forgot-password/forgot-password.component.ts b/src/app/core/auth/components/forgot-password/forgot-password.component.ts new file mode 100644 index 0000000..d6a88b8 --- /dev/null +++ b/src/app/core/auth/components/forgot-password/forgot-password.component.ts @@ -0,0 +1,30 @@ +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-forgot-password", + templateUrl: "./forgot-password.component.html", + styleUrls: ["./forgot-password.component.scss"], +}) +export class ForgotPasswordComponent { + forgotPasswordForm = new FormGroup({ + mail: new FormControl("", [Validators.required, Validators.email]), + }); + + constructor(private authService: AuthService, private router: Router) { + this.authService.currentState$ + .pipe(filter((state) => state !== undefined && state !== null)) + .subscribe((state) => this.router.navigateByUrl("/")); + } + + confirm(): void { + this.authService.forgotPassword({ + mail: this.forgotPasswordForm.value.mail!, + }); + + this.router.navigateByUrl("/auth/login"); + } +} diff --git a/src/app/core/auth/components/login/login.component.html b/src/app/core/auth/components/login/login.component.html index 46a14a1..af33de2 100644 --- a/src/app/core/auth/components/login/login.component.html +++ b/src/app/core/auth/components/login/login.component.html @@ -22,6 +22,17 @@ placeholder="username72 / your@email.com" required /> +

+ Neu hier? + Jetzt registrieren! +

diff --git a/src/app/core/auth/components/reset-password/reset-password.component.html b/src/app/core/auth/components/reset-password/reset-password.component.html new file mode 100644 index 0000000..7c1cd4e --- /dev/null +++ b/src/app/core/auth/components/reset-password/reset-password.component.html @@ -0,0 +1,49 @@ +
+ +
+

+ Beekeeper +

+

+ Passwort zurücksetzen +

+
+ +
+
+ + +
+
+ + +
+ +
diff --git a/src/app/core/auth/components/reset-password/reset-password.component.scss b/src/app/core/auth/components/reset-password/reset-password.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/core/auth/components/reset-password/reset-password.component.ts b/src/app/core/auth/components/reset-password/reset-password.component.ts new file mode 100644 index 0000000..fe80172 --- /dev/null +++ b/src/app/core/auth/components/reset-password/reset-password.component.ts @@ -0,0 +1,41 @@ +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-reset-password", + templateUrl: "./reset-password.component.html", + styleUrls: ["./reset-password.component.scss"], +}) +export class ResetPasswordComponent { + resetPasswordForm = new FormGroup({ + newPassword: new FormControl("", [Validators.required]), + passwordConfirmation: new FormControl("", [Validators.required]), + }); + + passwordToken: string | undefined; + + constructor( + private authService: AuthService, + private activatedRoute: ActivatedRoute, + private router: Router + ) { + this.activatedRoute.params.subscribe((params) => { + this.passwordToken = params["passwordToken"]; + }); + } + + confirm(): void { + if (this.passwordToken === undefined) return; + + this.authService.resetPassword({ + passwordToken: this.passwordToken!, + newPassword: this.resetPasswordForm.value.newPassword!, + passwordConfirmation: this.resetPasswordForm.value.passwordConfirmation!, + }); + + this.router.navigateByUrl("/auth/login"); + } +} diff --git a/src/app/core/components/settings/settings.component.html b/src/app/core/components/settings/settings.component.html index 8a265b8..5e07463 100644 --- a/src/app/core/components/settings/settings.component.html +++ b/src/app/core/components/settings/settings.component.html @@ -1,4 +1,13 @@ -
+
+
+
+ {{ state.username }} +
+
+ {{ state.roleIdentifier }} +
+
+
    - 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-security/tab-security.component.html b/src/app/core/components/settings/tabs/tab-security/tab-security.component.html index 0a4eeff..88114d5 100644 --- 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 @@ -1,5 +1,104 @@ -
    - -
    +
    +
    +

    Passwort ändern

    +
    +
    + + +
    - +
    + + +
    + +
    + + +
    + + + +
    + +
    +

    Benutername ändern

    +
    +
    + + +
    + +
    + + +
    + + +
    +
    +
    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 index b416a69..ee98d31 100644 --- 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 @@ -1,9 +1,6 @@ import { Component } from "@angular/core"; -import { ColumnDefinition } from "src/app/shared/components/table/table.component"; - -interface Colony { - name: string; -} +import { FormControl, FormGroup, Validators } from "@angular/forms"; +import { AuthService } from "src/app/core/services/auth.service"; @Component({ selector: "app-tab-security", @@ -11,17 +8,31 @@ interface Colony { 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, - }, - ]; + changePasswordForm = new FormGroup({ + password: new FormControl("", [Validators.required]), + newPassword: new FormControl("", [Validators.required]), + newPasswordConfirmation: new FormControl("", [Validators.required]), + }); - colonies: Colony[] = [{ name: "Die Römer" }, { name: "Die Griechen" }]; + changeUsernameForm = new FormGroup({ + password: new FormControl("", [Validators.required]), + newUsername: new FormControl("", [Validators.required]), + }); + + constructor(private authService: AuthService) {} + + changePassword(): void { + this.authService.changePassword({ + password: this.changePasswordForm.value.password!, + newPassword: this.changePasswordForm.value.newPassword!, + newPasswordConfirmation: + this.changePasswordForm.value.newPasswordConfirmation!, + }); + } + changeUsername(): void { + this.authService.changeUsername({ + password: this.changeUsernameForm.value.password!, + newUsername: this.changeUsernameForm.value.newUsername!, + }); + } } diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index 09afa0c..5eea6ec 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -10,6 +10,7 @@ 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"; +import { ReactiveFormsModule } from "@angular/forms"; @NgModule({ declarations: [ @@ -17,11 +18,14 @@ import { RouterModule } from "@angular/router"; SettingsComponent, TabProfileComponent, TabSecurityComponent, + ], + exports: [ + NavigationComponent, + SettingsComponent, TabProfileComponent, TabSecurityComponent, ], - exports: [NavigationComponent, SettingsComponent], - imports: [CommonModule, SharedModule, RouterModule], + imports: [CommonModule, SharedModule, RouterModule, ReactiveFormsModule], providers: [AuthGuard, AuthService, RequestService, AppService], }) export class CoreModule {} diff --git a/src/app/core/models/change-password-request.model.ts b/src/app/core/models/change-password-request.model.ts new file mode 100644 index 0000000..b6b524f --- /dev/null +++ b/src/app/core/models/change-password-request.model.ts @@ -0,0 +1,7 @@ +export interface ChangePasswordRequest { + password: string; + newPassword: string; + newPasswordConfirmation: string; +} + +export interface ChangePasswordResponse {} diff --git a/src/app/core/models/change-username-request.model.ts b/src/app/core/models/change-username-request.model.ts new file mode 100644 index 0000000..5c9875f --- /dev/null +++ b/src/app/core/models/change-username-request.model.ts @@ -0,0 +1,6 @@ +export interface ChangeUsernameRequest { + password: string; + newUsername: string; +} + +export interface ChangeUsernameResponse {} diff --git a/src/app/core/models/forgot-password-request.model.ts b/src/app/core/models/forgot-password-request.model.ts new file mode 100644 index 0000000..9361557 --- /dev/null +++ b/src/app/core/models/forgot-password-request.model.ts @@ -0,0 +1,5 @@ +export interface ForgotPasswordRequest { + mail: string; +} + +export interface ForgotPasswordResponse {} diff --git a/src/app/core/models/reset-password-request.model.ts b/src/app/core/models/reset-password-request.model.ts new file mode 100644 index 0000000..719ab74 --- /dev/null +++ b/src/app/core/models/reset-password-request.model.ts @@ -0,0 +1,7 @@ +export interface ResetPasswordRequest { + passwordToken: string; + newPassword: string; + passwordConfirmation: string; +} + +export interface ResetPasswordResponse {} diff --git a/src/app/core/services/auth.service.ts b/src/app/core/services/auth.service.ts index 9423910..ffb2373 100644 --- a/src/app/core/services/auth.service.ts +++ b/src/app/core/services/auth.service.ts @@ -12,6 +12,22 @@ import { ConfirmRegistrationRequest, ConfirmRegistrationResponse, } from "../models/confirm-registration-request.model"; +import { + ResetPasswordRequest, + ResetPasswordResponse, +} from "../models/reset-password-request.model"; +import { + ForgotPasswordRequest, + ForgotPasswordResponse, +} from "../models/forgot-password-request.model"; +import { + ChangePasswordRequest, + ChangePasswordResponse, +} from "../models/change-password-request.model"; +import { + ChangeUsernameRequest, + ChangeUsernameResponse, +} from "../models/change-username-request.model"; @Injectable() export class AuthService { @@ -56,7 +72,7 @@ export class AuthService { this.requestService.post( "auth/register-user", body, - (response: LoginResponse) => { + (response: RegisterUserResponse) => { result = response; this.readUserState(); } @@ -73,7 +89,37 @@ export class AuthService { this.requestService.post( "auth/confirm-registration", body, - (response: LoginResponse) => { + (response: ConfirmRegistrationResponse) => { + result = response; + this.readUserState(); + } + ); + + return result; + } + + resetPassword(body: ResetPasswordRequest): ResetPasswordResponse | null { + let result = null; + + this.requestService.post( + "auth/reset-password", + body, + (response: ResetPasswordResponse) => { + result = response; + this.readUserState(); + } + ); + + return result; + } + + forgotPassword(body: ForgotPasswordRequest): ForgotPasswordResponse | null { + let result = null; + + this.requestService.post( + "auth/forgot-password", + body, + (response: ForgotPasswordResponse) => { result = response; this.readUserState(); } @@ -88,4 +134,34 @@ export class AuthService { this.readUserState(); }); } + + changePassword(body: ChangePasswordRequest): ChangePasswordResponse | null { + let result = null; + + this.requestService.post( + "user/change-password", + body, + (response: ChangePasswordResponse) => { + result = response; + this.readUserState(); + } + ); + + return result; + } + + changeUsername(body: ChangeUsernameRequest): ChangeUsernameResponse | null { + let result = null; + + this.requestService.post( + "user/change-username", + body, + (response: ChangeUsernameResponse) => { + result = response; + this.readUserState(); + } + ); + + return result; + } }