Add confirmation on backup

app/src/app/account/backup/backup.component.html

@@ -29,7 +29,7 @@ <h1>Backup your account</h1>
     </mat-card>
 
     <p>
-      <button mat-flat-button (click)="backupToFile()">
+      <button mat-flat-button (click)="confirmBackup()">
           <mat-icon>done</mat-icon>
           Confirm you have saved the recovery phrase
         </button>

app/src/app/account/backup/backup.component.scss

@@ -25,5 +25,4 @@ mat-card {
 
 .copy-button {
     margin-left: 0.1em;
-
 }

app/src/app/account/backup/backup.component.ts

@@ -7,11 +7,12 @@ import { Web5IdentityAgent } from '@web5/identity-agent';
 import { AppService } from '../../app.service';
 import { CommonModule } from '@angular/common';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { Router, RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-backup',
   standalone: true,
-  imports: [CommonModule, MatButtonModule, MatIconModule, MatCardModule, MatTooltipModule],
+  imports: [CommonModule, MatButtonModule, MatIconModule, MatCardModule, MatTooltipModule, RouterModule],
   templateUrl: './backup.component.html',
   styleUrl: './backup.component.scss'
 })
@@ -21,7 +22,7 @@ export class BackupComponent {
 
   reveal = signal<boolean>(false);
 
-  constructor(public identityService: IdentityService, public appService: AppService) {
+  constructor(private router: Router, public identityService: IdentityService, public appService: AppService) {
    }
 
   async backupToFile() {
@@ -39,6 +40,13 @@ export class BackupComponent {
   }
 }
 
+confirmBackup() {
+  this.appService.state().backupConfirmed = true;
+  this.appService.saveState();
+
+  this.router.navigate(['/introduction']);
+}
+
   async saveFile(data: string) {
 
     const blob = new Blob([data], { type: 'text/plain' });

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

@@ -91,6 +91,6 @@ export class PasswordComponent {
     this.invalidPassword.set(false);
     this.unlocking.set(false);
 
-    this.router.navigate(['/account', 'did:dht:umj7apgmkodtrb7mdpjo4h7xinqdnatzgy38j7wi67k9c7sdns1o']);
+    this.router.navigate(['/introduction']);
   }
 }

app/src/app/app.service.ts

@@ -6,6 +6,7 @@ import { Web5ConnectResult } from '@web5/api';
 
 export interface AppState {
   selectedAccount: string;
+  backupConfirmed?: boolean;
 }
 
 export interface Account {
@@ -45,6 +46,10 @@ export class AppService {
     this.storage.save('accounts', this.accounts());
   }
 
+  saveState() {
+    this.storage.save('state', this.state());
+  }
+
   async initialize() {
     console.log('Initializing Ariton...');
 

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

@@ -22,11 +22,17 @@ <h1>Welcome</h1>
       <button mat-flat-button [routerLink]="['/account/password']">Set a password</button>
     }
     @else {
-      <button mat-flat-button disabled="true" [routerLink]="['/account/password']"><s>Set a password</s></button>
+      <button mat-flat-button [routerLink]="['/account/password']"><s>Set a password</s></button>
+    }
 
+    @if(!backup()) {
+      <button mat-flat-button [routerLink]="['/account/backup']">Backup your account</button>
+    }
+    @else {
+      <button mat-flat-button [routerLink]="['/account/backup']"><s>Backup your account</s></button>
     }
 
-    <button mat-flat-button [routerLink]="['/account/backup']">Backup your account</button>
+
 
   </p>
 

app/src/app/introduction/introduction.component.ts

@@ -16,4 +16,7 @@ export class IntroductionComponent {
   appService = inject(AppService);
 
   reset = computed(() => (this.appService.account().passwordHash));
+
+  backup = computed(() => (this.appService.state().backupConfirmed));
+
 }