default functions

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],
 })

src/app/core/auth/components/forgot-password/forgot-password.component.html

@@ -0,0 +1,35 @@
+<div class="mb-10"></div>
+
+<div class="max-w-sm mx-auto mb-10">
+  <h1 class="font-bold text-center text-skin-primary text-5xl mb-5">
+    Beekeeper
+  </h1>
+  <h1 class="font-bold text-center text-skin-accent text-xl">
+    Passwort vergessen?
+  </h1>
+</div>
+
+<form class="max-w-sm mx-auto" [formGroup]="forgotPasswordForm">
+  <div class="mb-5">
+    <label
+      for="mail"
+      class="block mb-2 text-sm font-medium text-skin-primary-muted"
+      >E-Mail</label
+    >
+    <input
+      formControlName="mail"
+      type="email"
+      id="mail"
+      class="bg-skin-primary border border-gray-300 text-skin-primary text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+      required
+    />
+  </div>
+  <button
+    (click)="confirm()"
+    [disabled]="!forgotPasswordForm.valid"
+    type="submit"
+    class="w-full 9xl:w-auto font-bold text-skin-secondary bg-skin-accent hover:text-skin-primary rounded-lg text-sm px-5 py-2.5 text-center"
+  >
+    Passwort zurücksetzen
+  </button>
+</form>

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");
+  }
+}

src/app/core/auth/components/login/login.component.html

@@ -22,6 +22,17 @@
       placeholder="username72 / your@email.com"
       required
     />
+    <p
+      id="helper-text-explanation"
+      class="mt-2 text-sm text-skin-primary-muted"
+    >
+      Neu hier?
+      <a
+        routerLink="/auth/registration"
+        class="font-medium text-skin-accent hover:underline hover:font-bold"
+        >Jetzt registrieren!</a
+      >
+    </p>
   </div>
   <div class="mb-5">
     <label
@@ -40,11 +51,10 @@
       id="helper-text-explanation"
       class="mt-2 text-sm text-skin-primary-muted"
     >
-      Neu hier?
       <a
-        routerLink="/auth/registration"
+        routerLink="/auth/forgot-password"
         class="font-medium text-skin-accent hover:underline hover:font-bold"
-        >Jetzt registrieren!</a
+        >Passwort vergessen?</a
       >
     </p>
   </div>

src/app/core/auth/components/reset-password/reset-password.component.html

@@ -0,0 +1,49 @@
+<div class="mb-10"></div>
+
+<div class="max-w-sm mx-auto mb-10">
+  <h1 class="font-bold text-center text-skin-primary text-5xl mb-5">
+    Beekeeper
+  </h1>
+  <h1 class="font-bold text-center text-skin-accent text-xl">
+    Passwort zurücksetzen
+  </h1>
+</div>
+
+<form class="max-w-sm mx-auto" [formGroup]="resetPasswordForm">
+  <div class="mb-5">
+    <label
+      for="newPassword"
+      class="block mb-2 text-sm font-medium text-skin-primary-muted"
+      >Neues Passwort</label
+    >
+    <input
+      formControlName="newPassword"
+      type="password"
+      id="newPassword"
+      class="bg-skin-primary border border-gray-300 text-skin-primary text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+      required
+    />
+  </div>
+  <div class="mb-5">
+    <label
+      for="passwordConfirmation"
+      class="block mb-2 text-sm font-medium text-skin-primary-muted"
+      >Passwort wiederholen</label
+    >
+    <input
+      formControlName="passwordConfirmation"
+      type="password"
+      id="passwordConfirmation"
+      class="bg-skin-primary border border-gray-300 text-skin-primary text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+      required
+    />
+  </div>
+  <button
+    (click)="confirm()"
+    [disabled]="!resetPasswordForm.valid"
+    type="submit"
+    class="w-full 9xl:w-auto font-bold text-skin-secondary bg-skin-accent hover:text-skin-primary rounded-lg text-sm px-5 py-2.5 text-center"
+  >
+    Neues Passwort bestätigen
+  </button>
+</form>

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");
+  }
+}

src/app/core/components/settings/settings.component.html

@@ -1,4 +1,13 @@
+<div class="rounded-lg shadow-sm shadow-skin-primary bg-skin-secondary p-5">
+  <div class="inline-block text-skin-secondary bg-skin-accent rounded-lg p-2">
+    <div class="font-bold">
+      {{ state.username }}
+    </div>
     <div>
+      {{ state.roleIdentifier }}
+    </div>
+  </div>
+
   <div class="mb-4 border-b border-skin-primary">
     <ul
       class="flex flex-wrap -mb-px text-sm font-medium text-center"

src/app/core/components/settings/settings.component.ts

@@ -1,5 +1,8 @@
 import { Component, OnInit } from "@angular/core";
 import { initFlowbite } from "flowbite";
+import { AuthService } from "../../services/auth.service";
+import { filter } from "rxjs";
+import { UserStateResponse } from "../../models/user-state-request.model";
 
 @Component({
   selector: "app-settings",
@@ -7,6 +10,12 @@ import { initFlowbite } from "flowbite";
   styleUrls: ["./settings.component.scss"],
 })
 export class SettingsComponent implements OnInit {
+  state: UserStateResponse;
+
+  constructor(private authService: AuthService) {
+    this.state = this.authService.currentState$.value!;
+  }
+
   ngOnInit(): void {
     initFlowbite();
   }

src/app/core/components/settings/tabs/tab-profile/tab-profile.component.html

@@ -1,12 +0,0 @@
-<shared-card
-  icon="/assets/icon.png"
-  header="Test"
-  subHeader="lol noch ein test"
->
-  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.
-</shared-card>

src/app/core/components/settings/tabs/tab-security/tab-security.component.html

@@ -1,5 +1,104 @@
+<div class="grid grid-cols-1 md:grid-cols-2">
+  <div>
+    <h2>Passwort ändern</h2>
+    <form class="mx-auto p-5" [formGroup]="changePasswordForm">
       <div class="mb-5">
-  <shared-table [items]="colonies" [columns]="columns"> </shared-table>
+        <label
+          for="password"
+          class="block mb-2 text-sm font-medium text-skin-primary-muted"
+          >Aktuelles Passwort</label
+        >
+        <input
+          formControlName="password"
+          type="password"
+          id="password"
+          class="bg-skin-primary border border-gray-300 text-skin-primary text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+          required
+        />
       </div>
 
-<shared-paginator total="20" perPage="5" />
+      <div class="mb-5">
+        <label
+          for="newPassword"
+          class="block mb-2 text-sm font-medium text-skin-primary-muted"
+          >Neues Passwort</label
+        >
+        <input
+          formControlName="newPassword"
+          type="password"
+          id="newPassword"
+          class="bg-skin-primary border border-gray-300 text-skin-primary text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+          required
+        />
+      </div>
+
+      <div class="mb-5">
+        <label
+          for="newPasswordConfirmation"
+          class="block mb-2 text-sm font-medium text-skin-primary-muted"
+          >Neues Passwort bestätigen</label
+        >
+        <input
+          formControlName="newPasswordConfirmation"
+          type="password"
+          id="newPasswordConfirmation"
+          class="bg-skin-primary border border-gray-300 text-skin-primary text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+          required
+        />
+      </div>
+
+      <button
+        (click)="changePassword()"
+        [disabled]="!changePasswordForm.valid"
+        type="submit"
+        class="w-full 9xl:w-auto font-bold text-skin-secondary bg-skin-accent hover:text-skin-primary rounded-lg text-sm px-5 py-2.5 text-center"
+      >
+        Passwort ändern
+      </button>
+    </form>
+  </div>
+
+  <div>
+    <h2>Benutername ändern</h2>
+    <form class="mx-auto p-5" [formGroup]="changeUsernameForm">
+      <div class="mb-5">
+        <label
+          for="password"
+          class="block mb-2 text-sm font-medium text-skin-primary-muted"
+          >Aktuelles Passwort</label
+        >
+        <input
+          formControlName="password"
+          type="password"
+          id="password"
+          class="bg-skin-primary border border-gray-300 text-skin-primary text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+          required
+        />
+      </div>
+
+      <div class="mb-5">
+        <label
+          for="newUsername"
+          class="block mb-2 text-sm font-medium text-skin-primary-muted"
+          >Neuer Benutzername</label
+        >
+        <input
+          formControlName="newUsername"
+          type="string"
+          id="newUsername"
+          class="bg-skin-primary border border-gray-300 text-skin-primary text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+          required
+        />
+      </div>
+
+      <button
+        (click)="changeUsername()"
+        [disabled]="!changeUsernameForm.valid"
+        type="submit"
+        class="w-full 9xl:w-auto font-bold text-skin-secondary bg-skin-accent hover:text-skin-primary rounded-lg text-sm px-5 py-2.5 text-center"
+      >
+        Benutzername ändern
+      </button>
+    </form>
+  </div>
+</div>

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";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
-
+import { AuthService } from "src/app/core/services/auth.service";
-interface Colony {
-  name: string;
-}
 
 @Component({
   selector: "app-tab-security",
@@ -11,17 +8,31 @@ interface Colony {
   styleUrls: ["./tab-security.component.scss"],
 })
 export class TabSecurityComponent {
-  columns: ColumnDefinition[] = [
+  changePasswordForm = new FormGroup({
-    {
+    password: new FormControl("", [Validators.required]),
-      header: "Name",
+    newPassword: new FormControl("", [Validators.required]),
-      columnFunction: (colony: Colony) => colony.name,
+    newPasswordConfirmation: new FormControl("", [Validators.required]),
-      routerLink: (colony: Colony) => "#",
+  });
-    },
-    {
-      header: "Name2",
-      columnFunction: (colony: Colony) => colony.name,
-    },
-  ];
 
-  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!,
+    });
+  }
 }

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, ReactiveFormsModule],
-  imports: [CommonModule, SharedModule, RouterModule],
   providers: [AuthGuard, AuthService, RequestService, AppService],
 })
 export class CoreModule {}

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 {}

src/app/core/models/change-username-request.model.ts

@@ -0,0 +1,6 @@
+export interface ChangeUsernameRequest {
+  password: string;
+  newUsername: string;
+}
+
+export interface ChangeUsernameResponse {}

src/app/core/models/forgot-password-request.model.ts

@@ -0,0 +1,5 @@
+export interface ForgotPasswordRequest {
+  mail: string;
+}
+
+export interface ForgotPasswordResponse {}

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 {}

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;
+  }
 }