Added a confirmation message when deleting your account

3 files changed, 25 insertions, 7 deletions

diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css
index 8a915d2..7e0978d 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css
@@ -60,3 +60,12 @@ hr {
   color: indianred;
   border-color: indianred !important;
 }
+
+#confirm-delete {
+  box-sizing: border-box;
+  width: 100%;
+  background-color: var(--failure);
+  color: white;
+  padding: .2em;
+  text-align: center;
+}
diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
index 039a45e..8da7f86 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
@@ -63,6 +63,9 @@
 			<app-error-bar></app-error-bar>
 		</form>
 		<hr>
+		<div id="confirm-delete" *ngIf="deleteAccountConfirm">
+			Are you sure you want to delete your account?<br>This is permanent!
+		</div>
 		<button id="delete-account" class="submit-btn" (click)="deleteAccount()">Delete account</button>
 	</div>
 </div>
diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts
index 4954eb7..0ea5ea2 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts
@@ -21,6 +21,7 @@ export class ProfileSettingsComponent implements OnInit {
   public updateUserFormGroup: FormGroup;
   public dataArrived = false;
   public user: User;
+  public deleteAccountConfirm = false;
 
   constructor(private _router: Router, private _userService: UserService, private _fb: FormBuilder, private _location: Location)
   { }
@@ -128,12 +129,17 @@ export class ProfileSettingsComponent implements OnInit {
   }
 
   deleteAccount(): void {
-    this._userService.deleteUserFromSessionStorageRequest().subscribe(
-      (res: object) => {
-        this._userService.logoutUserFromSessionStorage();
-        this._router.navigate(['/login']);
-      },
-      (err: HttpErrorResponse) => console.log(err)
-    );
+    if (this.deleteAccountConfirm) {
+      this._userService.deleteUserFromSessionStorageRequest().subscribe(
+        (res: object) => {
+          this._userService.logoutUserFromSessionStorage();
+          this._router.navigate(['/login']);
+        },
+        (err: HttpErrorResponse) => console.log(err)
+      );
+    }
+    else {
+      this.deleteAccountConfirm = true;
+    }
   }
 }