"copy" UI related things from chrome

projects/firefox/src/app/components/vault-login/vault-login.component.html

@@ -0,0 +1,72 @@
+<div class="sam-text-header">
+  <span class="brand">Gooti</span>
+</div>
+
+<div class="content-login-vault">
+  <div class="sam-flex-column gap" style="align-items: center">
+    <div class="logo-frame">
+      <img src="gooti.svg" height="120" width="120" alt="" />
+    </div>
+
+    <div class="sam-mt-2 input-group">
+      <input
+        #passwordInputElement
+        type="password"
+        class="form-control"
+        placeholder="vault password"
+        [(ngModel)]="loginPassword"
+      />
+      <button
+        class="btn btn-outline-secondary"
+        type="button"
+        (click)="toggleType(passwordInputElement)"
+      >
+        <i
+          class="bi bi-eye"
+          [class.bi-eye]="passwordInputElement.type === 'password'"
+          [class.bi-eye-slash]="passwordInputElement.type === 'text'"
+        ></i>
+      </button>
+    </div>
+
+    <button
+      [disabled]="!loginPassword"
+      type="button"
+      class="sam-mt btn btn-primary"
+      (click)="loginVault()"
+    >
+      <div class="sam-flex-row gap-h">
+        <i class="bi bi-box-arrow-in-right"></i>
+        <span>Sign in</span>
+      </div>
+    </button>
+
+    <button
+      class="sam-mt"
+      (click)="
+        confirm.show(
+          'Do you really want to reset the extension? All data will be lost.',
+          onClickResetExtension.bind(this)
+        )
+      "
+      type="button"
+      class="btn btn-link"
+    >
+      Reset Extension
+    </button>
+  </div>
+</div>
+
+<!----------->
+<!-- ALERT -->
+<!----------->
+@if(showInvalidPasswordAlert) {
+<div style="position: absolute; bottom: 0; align-self: center">
+  <div class="alert alert-danger sam-flex-row gap" role="alert">
+    <i class="bi bi-exclamation-triangle"></i>
+    <span>Invalid password</span>
+  </div>
+</div>
+}
+
+<lib-confirm #confirm> </lib-confirm>