Update user settings component for profile editing

src/app/api/api-client.ts

@@ -18,6 +18,7 @@ import {ApiResponse} from "./types/response/api-response";
 import {ApiError} from "./types/response/api-error";
 import {Route} from "./types/documentation/route";
 import {Router} from "@angular/router";
+import {UserUpdateRequest} from "./types/user-update-request";
 
 @Injectable({providedIn: 'root'})
 export class ApiClient {
@@ -226,6 +227,15 @@ export class ApiClient {
   public GetDocumentation() {
     return this.makeRequest<Route[]>("GET", "documentation");
   }
+
+  public UpdateUser(data: UserUpdateRequest): void {
+    this.makeRequest<User>("PATCH", "users/me", data)
+      .subscribe(data => {
+        this.bannerService.pushSuccess("User updated", "Your profile was successfully updated.");
+        this.user = data;
+        // this.userWatcher.emit(data); // TODO: don't trigger login detection
+      });
+  }
 }
 
 export function GetPhotoLink(photo: Photo, large: boolean = true): string {

src/app/api/types/user-update-request.ts

@@ -0,0 +1,3 @@
+export interface UserUpdateRequest {
+  description: string | undefined;
+}

src/app/pages/notification-listing/notification-listing.component.html

@@ -3,7 +3,7 @@
 </div>
 
 <div *ngIf="notifications?.length == 0">
-  <page-header class="text-2xl">No notifications</page-header>
+  <page-header class="text-3xl">No notifications</page-header>
   <p>You're all caught up!</p>
 </div>
 

src/app/pages/settings/settings.component.html

@@ -1,5 +1,15 @@
-<page-header class="text-3xl">Settings</page-header>
+<page-header class="text-3xl">Profile Settings</page-header>
 
-<div class="w-28 text-center">
-    <secondary-button text="Log out" routerLink="/logout"></secondary-button>
-</div>
+<form-input [icon]="faPencil" [name]="'Biography'" [id]="descriptionId"></form-input>
+
+<div class="w-44 text-center inline-block pr-2.5">
+  <primary-button text="Save changes" (click)="saveChanges()"></primary-button>
+</div>
+
+<div class="w-28 text-center inline-block pr-2.5">
+  <secondary-button text="Cancel" onclick="window.history.back()"></secondary-button>
+</div>
+
+<div class="w-28 text-center inline-block pr-2.5">
+  <dangerous-button text="Log out" routerLink="/logout"></dangerous-button>
+</div>

src/app/pages/settings/settings.component.ts

@@ -1,9 +1,41 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {faPencil} from "@fortawesome/free-solid-svg-icons/faPencil";
+import {ApiClient} from "../../api/api-client";
+import {User} from "../../api/types/user";
+import {UserUpdateRequest} from "../../api/types/user-update-request";
 
 @Component({
   selector: 'app-settings',
   templateUrl: './settings.component.html',
 })
-export class SettingsComponent {
+export class SettingsComponent implements OnInit {
+  descriptionId: string = "settings-description";
 
+  protected readonly faPencil = faPencil;
+
+  constructor(private apiClient: ApiClient) {
+  }
+
+  ngOnInit(): void {
+    this.apiClient.userWatcher.subscribe((data) => {
+      this.updateInputs(data);
+    })
+    // FIXME: this is stupid
+    setTimeout(() => {this.updateInputs(this.apiClient.user);}, 0);
+  }
+
+  updateInputs(data: User | undefined) {
+    const descriptionInput: HTMLInputElement = (<HTMLInputElement>document.getElementById(this.descriptionId));
+    descriptionInput.value = data?.description ?? "";
+  }
+
+  saveChanges() {
+    const descriptionInput: HTMLInputElement = (<HTMLInputElement>document.getElementById(this.descriptionId));
+
+    let request: UserUpdateRequest = {
+      description: descriptionInput.value
+    };
+
+    this.apiClient.UpdateUser(request);
+  }
 }