Ability to set own password when deleting account

src/app/api/api-request.creator.ts

@@ -118,4 +118,9 @@ export class ApiRequestCreator {
         // @ts-ignore
         return result;
     }
+
+    // Extra method for this because I couldn't find a working way to have makeRequest() not send a next event on receiving an error
+    public deleteAccount(passwordSha512: string) {
+        return this.httpClient.delete<Response>(environment.apiBaseUrl + "/users/me", {body: {passwordSha512: passwordSha512}});
+    }
 }

src/app/api/auth.service.ts

@@ -294,22 +294,33 @@ export class AuthService {
             });
     }
 
-    public DeleteAccount(): void {
-        this.apiRequestCreator.makeRequest("DELETE", "users/me")
-            .subscribe(() => {
-                this.bannerService.push({
-                    Color: 'dangerous',
-                    Icon: 'trash',
-                    Title: "Account Deleted.",
-                    Text: "Your account has been successfully deleted. Goodbye.",
-                });
-
-                this._userId = undefined;
-                this.user = undefined;
-
-                this.userWatcher.emit(undefined);
-                this.tokenStorage.ClearStoredGameToken();
-                this.tokenStorage.ClearStoredUser();
+    public DeleteAccount(passwordSha512: string): void {
+        this.apiRequestCreator.deleteAccount(passwordSha512)
+            .subscribe({
+                error: err => {
+                    const apiError: ApiError | undefined = err.error?.error;
+                    this.bannerService.push({
+                        Color: 'warning',
+                        Icon: 'trash',
+                        Title: "Account deletion failed",
+                        Text: apiError == null ? err.message : apiError.message,
+                    });
+                },
+                next: _ => {
+                    this.bannerService.push({
+                        Color: 'dangerous',
+                        Icon: 'trash',
+                        Title: "Account Deleted.",
+                        Text: "Your account has been successfully deleted. Goodbye.",
+                    });
+
+                    this._userId = undefined;
+                    this.user = undefined;
+
+                    this.userWatcher.emit(undefined);
+                    this.tokenStorage.ClearStoredGameToken();
+                    this.tokenStorage.ClearStoredUser();
+                }
             });
     }
 

src/app/pages/delete-account/delete-account.component.html

@@ -17,6 +17,9 @@
     <br>
     <p class="font-bold">Are you absolutely sure you want to proceed?</p>
     <br>
+    <p class="font-bold">You must enter your password in order to delete your account</p>
+    <form-input [icon]="faKey" name="Password" type="password" [(value)]="password"></form-input>
+    <br>
 
     <dangerous-button class="min-w-full" text="Yes, I want to permanently delete my account." (click)="delete()"></dangerous-button>
     <div class="my-2.5"></div>

src/app/pages/delete-account/delete-account.component.ts

@@ -1,17 +1,29 @@
 import {Component} from '@angular/core';
 import {AuthService} from "../../api/auth.service";
+import { sha512Async } from 'src/app/hash';
+import { faKey } from '@fortawesome/free-solid-svg-icons';
+import { FormHandler } from 'src/app/helpers/FormHandler';
 
 @Component({
     selector: 'app-delete-account',
     templateUrl: './delete-account.component.html'
 })
-export class DeleteAccountComponent {
+export class DeleteAccountComponent extends FormHandler {
+    password: string = "";
+
     constructor(private authService: AuthService) {
+        super();
     }
 
     delete(): void {
-        this.authService.DeleteAccount();
+        const formInputs = this.cleanUpFormInputs(this.password);
+        const [password] = formInputs;
+
+        sha512Async(password).then((hash) => {
+            this.authService.DeleteAccount(hash);
+        });
     }
 
     protected readonly window = window;
+    protected readonly faKey = faKey;
 }