Add lock action to account

app/src/app/identity.service.ts

@@ -79,6 +79,18 @@ export class IdentityService {
     await agent.vault.changePassword({ oldPassword, newPassword });
   }
 
+  async lock() {
+    // TODO: Validate if we need to do more when locking the account.
+    console.log('Locking account...');
+
+    const agent = this.web5.agent as Web5IdentityAgent;
+    await agent.vault.lock();
+
+    console.log('Vault locked');
+
+    this.locked.set(true);
+  }
+
   async unlock(password: string) {
     console.log('Connecting to Web5...');
 

app/src/app/layout/layout.component.html

@@ -109,7 +109,7 @@
               <span>Accounts</span>
             </button>
 
-          <button mat-menu-item>
+          <button mat-menu-item (click)="lock()">
               <mat-icon>lock</mat-icon>
               <span>Lock account</span>
             </button>

app/src/app/layout/layout.component.ts

@@ -14,6 +14,7 @@ import { ThemeToggleComponent } from '../theme-toggle/theme-toggle.component';
 import { LayoutService } from '../layout.service';
 import { MatMenuModule } from '@angular/material/menu';
 import { StorageService } from '../storage.service';
+import { IdentityService } from '../identity.service';
 
 @Component({
   selector: 'app-layout',
@@ -38,6 +39,8 @@ export class LayoutComponent {
 
   private storage = inject(StorageService);
 
+  private identity = inject(IdentityService);
+
   rootRoutes = routes.filter(r=>r.path).filter(r=>r.data && r.data['hide'] != true);
 
   async wipe() {
@@ -60,6 +63,10 @@ export class LayoutComponent {
     window.location.reload();
   }
 
+  lock() {
+    this.identity.lock();
+  }
+
   isHandset$: Observable<boolean> = this.breakpointObserver.observe('(max-width: 700px)')
     .pipe(
       map(result => result.matches),