Add page for sending password reset email

src/app/api/auth.service.ts

@@ -11,6 +11,7 @@ import {ApiPasswordResetRequest} from "./types/auth/reset-request";
 import {UserUpdateRequest} from "./types/user-update-request";
 import {TokenStorageService} from "./token-storage.service";
 import {ApiAuthenticationRefreshRequest} from "./types/auth/auth-refresh-request";
+import {ApiResetPasswordRequest} from "./types/auth/send-reset-request";
 
 @Injectable({
     providedIn: 'root'
@@ -217,6 +218,24 @@ export class AuthService {
             });
     }
 
+    public SendPasswordResetRequest(email: string): void {
+      const body: ApiResetPasswordRequest = {
+        emailAddress: email
+      }
+
+      this.apiRequestCreator.makeRequest("PUT", "sendPasswordResetEmail", body)
+        .subscribe(() => {
+          this.router.navigateByUrl('/login');
+
+          this.bannerService.push({
+            Color: 'success',
+            Icon: 'reply',
+            Title: "Sent Reset Code",
+            Text: "If the email you entered match an account, we will send a password reset request to that inbox.",
+          })
+        });
+    }
+
     public VerifyEmail(code: string): void {
         this.apiRequestCreator.makeRequest("POST", "verify?code=" + code)
             .subscribe(() => {

src/app/api/types/auth/send-reset-request.ts

@@ -0,0 +1,3 @@
+export interface ApiResetPasswordRequest {
+  emailAddress: string
+}

src/app/app-routing.module.ts

@@ -29,6 +29,7 @@ import {EditLevelComponent} from "./pages/edit-level/edit-level.component";
 import {authenticationGuard} from "./api/guards/authentication.guard";
 import {adminAuthenticationGuard} from "./api/guards/admin-authentication.guard";
 import {noAuthenticationGuard} from "./api/guards/no-authentication.guard";
+import {ForgotPasswordComponent} from "./pages/forgot-password/forgot-password.component";
 
 const routes: Routes = [
   { path: "", component: MainComponent },
@@ -48,6 +49,8 @@ const routes: Routes = [
   { path: "login", component: LoginComponent, canActivate: [noAuthenticationGuard] },
   { path: "logout", component: LogoutComponent, canActivate: [authenticationGuard] },
   { path: "resetPassword", component: ResetPasswordComponent },
+  { path: "forgorPassword", redirectTo: "forgotPassword" }, // I'm sorry but I have to
+  { path: "forgotPassword", component: ForgotPasswordComponent },
   { path: "register", component: RegisterComponent, canActivate: [noAuthenticationGuard] },
 
   { path: "settings", component: SettingsComponent, canActivate: [authenticationGuard] },

src/app/app.module.ts

@@ -88,6 +88,7 @@ import { MenuLinkComponent } from './components/menu-link/menu-link.component';
 import { AdminLinkButtonComponent } from './components/admin-link-button/admin-link-button.component';
 import { EditLevelComponent } from './pages/edit-level/edit-level.component';
 import {FormsModule} from "@angular/forms";
+import { ForgotPasswordComponent } from './pages/forgot-password/forgot-password.component';
 
 @NgModule({
     declarations: [
@@ -150,6 +151,7 @@ import {FormsModule} from "@angular/forms";
         MenuLinkComponent,
         AdminLinkButtonComponent,
         EditLevelComponent,
+        ForgotPasswordComponent,
     ],
     imports: [
         BrowserModule,

src/app/pages/forgot-password/forgot-password.component.html

@@ -0,0 +1,10 @@
+<form-holder>
+  <page-header class="text-3xl">Forgor Password</page-header> <!-- I'm sorry. -->
+
+  <form-input [icon]="faEnvelope" name="Email Address" type="email" [(value)]="email"></form-input>
+
+  <div class="flex flex-row my-1 justify-between space-x-4">
+    <primary-button [icon]="faSkull" class="w-full" text="Send" (click)="send()"></primary-button>
+    <dangerous-button [icon]="faCancel" class="min-w-fit" text="Cancel" onclick="window.history.back()"></dangerous-button>
+  </div>
+</form-holder>

src/app/pages/forgot-password/forgot-password.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import {faCancel, faEnvelope, faKey, faReply, faSkull} from "@fortawesome/free-solid-svg-icons";
+import {AuthService} from "../../api/auth.service";
+
+@Component({
+  selector: 'app-forgot-password',
+  templateUrl: './forgot-password.component.html'
+})
+export class ForgotPasswordComponent {
+  email: string = "";
+
+  constructor(private authService: AuthService) {}
+
+  send(): void {
+    this.authService.SendPasswordResetRequest(this.email);
+  }
+
+
+  protected readonly faKey = faKey;
+  protected readonly faCancel = faCancel;
+  protected readonly faEnvelope = faEnvelope;
+  protected readonly faReply = faReply;
+  protected readonly faSkull = faSkull;
+}

src/app/pages/reset-password/reset-password.component.ts

@@ -17,8 +17,12 @@ export class ResetPasswordComponent implements OnInit {
 
   ngOnInit() {
     this.route.queryParams.subscribe((params) => {
-      const tokenParam: string | undefined = params['token'];
-      if(tokenParam) this.authService.resetToken = tokenParam;
+      let tokenParam: string | undefined = params['token'];
+      if(tokenParam) {
+        tokenParam = tokenParam.replaceAll(' ', '+');
+        this.authService.resetToken = tokenParam;
+        console.log(tokenParam);
+      }
     })
   }