Make the "change password" component functional

- Still needs a way to discover if the account is protected with the default static password or not. Probably need some local storage metadata for the account to know this.

app/src/app/account/password/password.component.html

@@ -1,5 +1,38 @@
-<p>password works!</p>
+<h1>Change your password</h1>
 
 <!-- TODO: Check if user has already set custom password, then change this into a change password dialog -->
 
-<button mat-flat-button (click)="changePassword('', '123', '123')">Save new password</button>
+<form (ngSubmit)="onSubmit()">
+    <mat-form-field appearance="outline" class="full-width">
+        <mat-label>Enter your old password</mat-label>
+        <input matInput [formControl]="passwordInputPrevious" type="password" />
+    </mat-form-field>
+    <br>
+
+    <mat-form-field appearance="outline" class="full-width">
+        <mat-label>Enter your new password</mat-label>
+        <input matInput [formControl]="passwordInput" type="password" />
+    </mat-form-field>
+    <br>
+
+    <mat-form-field appearance="outline" class="full-width">
+        <mat-label>Repeat your new password</mat-label>
+        <input matInput [formControl]="passwordInputRepeat" type="password" />
+    </mat-form-field>
+
+    &nbsp;
+    <button mat-flat-button type="submit" color="primary" [disabled]="!(passwordInput.valid && !unlocking())">
+        @if(unlocking()) {
+        <mat-spinner diameter="20"></mat-spinner>
+        } @else {
+        <span>Save new password</span>
+        }
+    </button>
+
+    <p>
+        @if (invalidPassword()) {
+        <mat-error>Password is <strong>invalid</strong></mat-error>
+        }
+    </p>
+
+</form>

app/src/app/account/password/password.component.scss

@@ -0,0 +1,3 @@
+.full-width {
+    width: 100%;
+}

app/src/app/account/password/password.component.ts

@@ -1,16 +1,31 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { IdentityService } from '../../identity.service';
 import { MatButtonModule } from '@angular/material/button';
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { Router, RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-password',
   standalone: true,
-  imports: [MatButtonModule],
+  imports: [FormsModule, MatProgressSpinnerModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule],
   templateUrl: './password.component.html',
   styleUrl: './password.component.scss'
 })
 export class PasswordComponent {
-  constructor(private identityService: IdentityService) {}
+
+  passwordInputPrevious = new FormControl('', Validators.required);
+  passwordInput = new FormControl('', Validators.required);
+  passwordInputRepeat = new FormControl('', Validators.required);
+
+  unlocking = signal(false);
+
+  invalidPassword = signal(false);
+
+  constructor(private identityService: IdentityService, private router: Router) { }
 
   async changePassword(oldPassword: string, newPassword: string, confirmPassword: string) {
     if (newPassword != confirmPassword) {
@@ -26,4 +41,29 @@ export class PasswordComponent {
 
     console.log('Password changed');
   }
+
+  async onSubmit() {
+    this.unlocking.set(true);
+
+    if (this.passwordInput.value !== this.passwordInputRepeat.value) {
+      this.invalidPassword.set(true);
+      this.unlocking.set(false);
+      console.error('Passwords do not match');
+      throw new Error('Passwords do not match');
+    }
+
+    try {
+      await this.changePassword(this.passwordInputPrevious.value!, this.passwordInput.value!, this.passwordInputRepeat.value!);
+    } catch (error) {
+      console.error(error);
+      this.invalidPassword.set(true);
+      this.unlocking.set(false);
+      return;
+    }
+
+    this.invalidPassword.set(false);
+    this.unlocking.set(false);
+
+    this.router.navigate(['/account', 'did:dht:umj7apgmkodtrb7mdpjo4h7xinqdnatzgy38j7wi67k9c7sdns1o']);
+  }
 }

app/src/app/account/unlock/unlock.component.html

@@ -5,7 +5,7 @@ <h1>Unlock your account</h1>
 <form (ngSubmit)="onSubmit()">
 <mat-form-field appearance="outline">
     <mat-label>Enter your password</mat-label>
-    <input matInput [formControl]="passwordInput" [type]="hide() ? 'password' : 'text'" />
+    <input matInput [formControl]="passwordInput" type="password" />
     <!--
     <button
         type="button"

app/src/app/account/unlock/unlock.component.ts

@@ -19,27 +19,12 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 export class UnlockComponent {
   passwordInput = new FormControl('', Validators.required);
 
-  hide = signal(true);
-
   unlocking = signal(false);
 
   invalidPassword = signal(false);
 
-  loading = false;
-
-  passwordSignal = toSignal(this.passwordInput.valueChanges, { initialValue: '' });
-
-  disabled = computed(() => {
-    console.log('computed');
-    return this.passwordInput.invalid;
-  });
-
   constructor(private identityService: IdentityService) { }
 
-  save() {
-    this.loading = true;
-  }
-
   async onSubmit() {
     this.unlocking.set(true);
     const unlocked = await this.identityService.unlock(this.passwordInput.value!);

app/src/app/introduction/introduction.component.html

@@ -17,7 +17,7 @@ <h1>Welcome</h1>
 
   <p>
     <button mat-stroked-button [routerLink]="['/communities']">Skip and jump into the app</button>
-    <button mat-flat-button>Set a secure password</button>
+    <button mat-flat-button [routerLink]="['/account/password']">Set a secure password</button>
     <button mat-flat-button>Backup your account</button>
   </p>