[frontend] Implement account deletion

kibicara-frontend/src/app/auth/login/login.component.scss

@@ -37,6 +37,10 @@
   margin-right: 30px;
   display: flex;
   align-items: center;
+  @media (max-width: 900px) {
+    display: grid;
+    gap: 10px;
+  }
 }
 
 .login-form {

kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.html

@@ -0,0 +1,61 @@
+<app-heading-one [title]="title"></app-heading-one>
+
+<div class="container">
+  <mat-card>
+    <form [formGroup]="form" class="form">
+      <mat-form-field appearance="fill">
+        <mat-label for="email">E-Mail</mat-label>
+        <input type="text" formControlName="email" matInput disabled />
+        <mat-error
+          *ngIf="
+            form.controls.email.errors && form.controls.email.errors.required
+          "
+        >
+          E-Mail is required
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field appearance="fill">
+        <mat-label>Password</mat-label>
+        <input
+          type="password"
+          formControlName="password"
+          matInput
+          [type]="'password'"
+          disabled
+        />
+        <mat-error
+          *ngIf="
+            form.controls.password.errors &&
+            form.controls.password.errors.required
+          "
+        >
+          Password is required
+        </mat-error>
+        <mat-error
+          *ngIf="
+            form.controls.password.errors &&
+            form.controls.password.errors.minlength
+          "
+        >
+          Password requires minimal length 8
+        </mat-error>
+      </mat-form-field>
+      <button mat-raised-button color="primary" (click)="onUpdate()" disabled>
+        Update account information
+      </button>
+    </form>
+  </mat-card>
+
+  <mat-card>
+    <div class="delete">
+      <mat-card-title>Danger zone</mat-card-title>
+      <mat-divider></mat-divider>
+      <mat-card-content>
+        <button mat-raised-button color="warn" (click)="onDelete()">
+          Delete account
+        </button>
+      </mat-card-content>
+    </div>
+  </mat-card>
+</div>

kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.scss

@@ -0,0 +1,27 @@
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  align-items: stretch;
+  justify-items: stretch;
+  padding-left: 10%;
+  padding-right: 10%;
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
+  margin: 1%;
+}
+
+.form {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+}
+
+.delete {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+  align-items: center;
+  justify-items: center;
+}

kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountSettingsComponent } from './account-settings.component';
+
+describe('AccountSettingsComponent', () => {
+  let component: AccountSettingsComponent;
+  let fixture: ComponentFixture<AccountSettingsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountSettingsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kibicara-frontend/src/app/dashboard/account-settings/account-settings.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { AdminService } from 'src/app/core/api/api/admin.service';
+import { YesNoDialogComponent } from 'src/app/shared/yes-no-dialog/yes-no-dialog.component';
+
+@Component({
+  selector: 'app-account-settings',
+  templateUrl: './account-settings.component.html',
+  styleUrls: ['./account-settings.component.scss'],
+})
+export class AccountSettingsComponent implements OnInit {
+  title = 'Account Settings';
+  form: FormGroup;
+
+  constructor(
+    private dialog: MatDialog,
+    private adminService: AdminService,
+    private router: Router,
+    private formBuilder: FormBuilder
+  ) {}
+
+  ngOnInit(): void {
+    this.form = this.formBuilder.group({
+      email: ['', Validators.required],
+      password: ['', [Validators.required, Validators.minLength(8)]],
+    });
+  }
+
+  onUpdate() {}
+
+  onDelete() {
+    const dialogRef = this.dialog.open(YesNoDialogComponent, {
+      data: {
+        title: 'Warning',
+        content: 'This will also delete all of your hoods and bots.',
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((response) => {
+      if (response) {
+        this.adminService.deleteAdmin().subscribe(() => {
+          this.router.navigate(['/dashboard']);
+        });
+      }
+    });
+  }
+}

kibicara-frontend/src/app/dashboard/dashboard-routing.module.ts

@@ -5,6 +5,7 @@ import { HoodsComponent } from './hoods/hoods.component';
 import { AuthGuard } from '../core/auth/auth.guard';
 import { BoardComponent } from './board/board.component';
 import { TwitterCallbackComponent } from '../platforms/twitter/twitter-callback/twitter-callback.component';
+import { AccountSettingsComponent } from './account-settings/account-settings.component';
 
 const routes: Routes = [
   {
@@ -13,6 +14,7 @@ const routes: Routes = [
     children: [
       { path: '', component: HoodsComponent },
       { path: 'hoods/:id', component: BoardComponent },
+      { path: 'settings', component: AccountSettingsComponent },
       // Platform-specific Routes
       { path: 'twitter-callback', component: TwitterCallbackComponent },
     ],

kibicara-frontend/src/app/dashboard/dashboard.module.ts

@@ -15,6 +15,7 @@ import { NewHoodDialogComponent } from './hoods/new-hood-dialog/new-hood-dialog.
 import { PlatformsModule } from '../platforms/platforms.module';
 import { SettingsComponent } from './board/settings/settings.component';
 import { FaqComponent } from './hoods/faq/faq.component';
+import { AccountSettingsComponent } from './account-settings/account-settings.component';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { FaqComponent } from './hoods/faq/faq.component';
     NewHoodDialogComponent,
     SettingsComponent,
     FaqComponent,
+    AccountSettingsComponent,
   ],
   imports: [
     DashboardRoutingModule,

kibicara-frontend/src/app/dashboard/hoods/hoods.component.html

@@ -58,6 +58,9 @@
     >
       New hood
     </button>
+    <a mat-button color="primary" routerLink="/dashboard/settings">
+      User settings
+    </a>
   </div>
   <div class="banner"></div>
 </div>