new.component.ts raw

   1  import { Component, inject, ViewChild } from '@angular/core';
   2  import { FormsModule } from '@angular/forms';
   3  import { Router } from '@angular/router';
   4  import { LoggerService, NavComponent, StorageService, DerivingModalComponent } from '@common';
   5  
   6  @Component({
   7    selector: 'app-new',
   8    imports: [FormsModule, DerivingModalComponent],
   9    templateUrl: './new.component.html',
  10    styleUrl: './new.component.scss',
  11  })
  12  export class NewComponent extends NavComponent {
  13    @ViewChild('derivingModal') derivingModal!: DerivingModalComponent;
  14  
  15    password = '';
  16  
  17    readonly #router = inject(Router);
  18    readonly #storage = inject(StorageService);
  19    readonly #logger = inject(LoggerService);
  20  
  21    toggleType(element: HTMLInputElement) {
  22      if (element.type === 'password') {
  23        element.type = 'text';
  24      } else {
  25        element.type = 'password';
  26      }
  27    }
  28  
  29    async createVault() {
  30      if (!this.password) {
  31        return;
  32      }
  33  
  34      // Show deriving modal during key derivation (~3-6 seconds)
  35      this.derivingModal.show('Creating secure vault');
  36      try {
  37        await this.#storage.createNewVault(this.password);
  38        this.derivingModal.hide();
  39        this.#logger.logVaultCreated();
  40        this.#router.navigateByUrl('/home/identities');
  41      } catch (error) {
  42        this.derivingModal.hide();
  43        console.error('Failed to create vault:', error);
  44      }
  45    }
  46  }
  47