[CL-58] Make icon button compatible with bit suffix directive (#4057)

* [CL-58] feat: add support for modyfing button types from directives

* [CL-58] feat: set button type secondary when used as prefix/suffix

* [CL-58] chore: add example using suffix to async actions story

* [CL-58] feat: update story with examples

* [CL-58] feat: allow buttons to have their style unset

* [CL-58] feat: move all styling into prefix/suffix

* [CL-58] fix: static content prefix/suffix

* [CL-58] fix: add missing bitFormButton to bitAction

* [CL-58] fix: disabled opacity not overriding correctly

* [CL-58] feat: change hover color to muted

* [CL-58] feat: replace undefined with unstyled

* [CL-58] fix: focus borders on input and prefix/suffix

* [CL-58] feat: update production code to use icon button correctly

* [CL-58] refactor: move out button type to common place

* [CL-58] fix: buttons not migrated correctly

* [CL-58] feat: use icon button in password toggle

* [CL-58] fix: remove button icon stories

* [SM-358] Migrate password toggles (#4129)

* [CL-58] fix: missing i18n service in story

* [CL-58] fix: missing bitIconButton directive in export comp

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
Co-authored-by: Thomas Rittson <trittson@bitwarden.com>

apps/web/src/app/accounts/login/login.component.html

@@ -77,18 +77,12 @@
       <bit-label>{{ "masterPass" | i18n }}</bit-label>
       <input
         id="login_input_master-password"
+        type="password"
         bitInput
-        [type]="showPassword ? 'text' : 'password'"
         formControlName="masterPassword"
         appAutofocus
       />
-      <button type="button" bitSuffix bitButton (click)="togglePassword()">
-        <i
-          aria-hidden="true"
-          class="bwi bwi-lg bwi-eye"
-          [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
-        ></i>
-      </button>
+      <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
     </bit-form-field>
     <a class="-tw-mt-2" routerLink="/hint" (mousedown)="goToHint()" (click)="setFormValues()">{{
       "getMasterPasswordHint" | i18n

apps/web/src/app/accounts/register-form/register-form.component.html

@@ -34,16 +34,16 @@
         <input
           id="register-form_input_master-password"
           bitInput
-          [type]="showPassword ? 'text' : 'password'"
+          type="password"
           formControlName="masterPassword"
         />
-        <button type="button" bitSuffix bitButton (click)="togglePassword()">
-          <i
-            aria-hidden="true"
-            class="bwi bwi-lg bwi-eye"
-            [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
-          ></i>
-        </button>
+        <button
+          type="button"
+          bitSuffix
+          bitIconButton
+          bitPasswordInputToggle
+          [(toggled)]="showPassword"
+        ></button>
         <bit-hint>
           <span class="tw-font-semibold">Important:</span>
           {{ "masterPassImportant" | i18n }}
@@ -65,16 +65,16 @@
         <input
           id="register-form_input_confirm-master-password"
           bitInput
-          [type]="showPassword ? 'text' : 'password'"
+          type="password"
           formControlName="confirmMasterPassword"
         />
-        <button type="button" bitSuffix bitButton (click)="togglePassword()">
-          <i
-            aria-hidden="true"
-            class="bwi bwi-lg bwi-eye"
-            [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
-          ></i>
-        </button>
+        <button
+          type="button"
+          bitSuffix
+          bitIconButton
+          bitPasswordInputToggle
+          [(toggled)]="showPassword"
+        ></button>
       </bit-form-field>
     </div>
 

apps/web/src/app/tools/import-export/export.component.html

@@ -84,73 +84,41 @@
         <br />
 
         <ng-container *ngIf="fileEncryptionType == encryptedExportType.FileEncrypted">
-          <div class="input-group">
-            <bit-form-field class="tw-w-full">
-              <bit-label>{{ "filePassword" | i18n }}</bit-label>
-              <input
-                bitInput
-                [type]="showFilePassword ? 'text' : 'password'"
-                id="filePassword"
-                formControlName="filePassword"
-                name="password"
-              />
-
-              <div class="input-group-append">
-                <button
-                  bitSuffix
-                  bitButton
-                  buttonType="secondary"
-                  appStopClick
-                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-                  [attr.aria-pressed]="showFilePassword"
-                  (click)="toggleFilePassword()"
-                  type="button"
-                >
-                  <i
-                    class="bwi bwi-lg"
-                    aria-hidden="true"
-                    [ngClass]="{ 'bwi-eye': !showFilePassword, 'bwi-eye-slash': showFilePassword }"
-                  ></i>
-                </button>
-              </div>
-            </bit-form-field>
-            <div class="small text-muted">
-              {{ "exportPasswordDescription" | i18n }}
-            </div>
-          </div>
-          <div class="input-group tw-mt-4">
-            <bit-form-field class="tw-w-full">
-              <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
-              <input
-                bitInput
-                [type]="showConfirmFilePassword ? 'text' : 'password'"
-                id="confirmFilePassword"
-                formControlName="confirmFilePassword"
-                name="confirmFilePassword"
-              />
-              <div class="input-group-append">
-                <button
-                  bitSuffix
-                  bitButton
-                  buttonType="secondary"
-                  appStopClick
-                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-                  [attr.aria-pressed]="showConfirmFilePassword"
-                  (click)="toggleConfirmFilePassword()"
-                  type="button"
-                >
-                  <i
-                    class="bwi bwi-lg"
-                    aria-hidden="true"
-                    [ngClass]="{
-                      'bwi-eye': !showConfirmFilePassword,
-                      'bwi-eye-slash': showConfirmFilePassword
-                    }"
-                  ></i>
-                </button>
-              </div>
-            </bit-form-field>
-          </div>
+          <bit-form-field>
+            <bit-label>{{ "filePassword" | i18n }}</bit-label>
+            <input
+              bitInput
+              type="password"
+              id="filePassword"
+              formControlName="filePassword"
+              name="password"
+            />
+            <button
+              type="button"
+              bitSuffix
+              bitIconButton
+              bitPasswordInputToggle
+              [(toggled)]="showFilePassword"
+            ></button>
+            <bit-hint>{{ "exportPasswordDescription" | i18n }}</bit-hint>
+          </bit-form-field>
+          <bit-form-field>
+            <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
+            <input
+              bitInput
+              type="password"
+              id="confirmFilePassword"
+              formControlName="confirmFilePassword"
+              name="confirmFilePassword"
+            />
+            <button
+              type="button"
+              bitSuffix
+              bitIconButton
+              bitPasswordInputToggle
+              [(toggled)]="showFilePassword"
+            ></button>
+          </bit-form-field>
         </ng-container>
       </ng-container>
 

apps/web/src/app/tools/import-export/export.component.ts

@@ -23,6 +23,7 @@ import { UserVerificationPromptComponent } from "../../components/user-verificat
 export class ExportComponent extends BaseExportComponent {
   organizationId: string;
   encryptedExportType = EncryptedExportType;
+  protected showFilePassword: boolean;
 
   constructor(
     cryptoService: CryptoService,

apps/web/src/app/tools/import-export/file-password-prompt.component.html

@@ -14,32 +14,17 @@
           class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-pr-3.5 tw-pt-3.5 tw-pl-3.5"
         >
           {{ "confirmVaultImportDesc" | i18n }}
-          <bit-form-field class="tw-w-full tw-pt-3.5">
+          <bit-form-field class="tw-pt-3.5">
             <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
             <input
               bitInput
-              required
-              [type]="showFilePassword ? 'text' : 'password'"
+              type="password"
               name="filePassword"
               [formControl]="filePassword"
               appAutofocus
               appInputVerbatim
             />
-            <button
-              bitSuffix
-              bitButton
-              appStopClick
-              appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-              [attr.aria-pressed]="showFilePassword"
-              (click)="toggleFilePassword()"
-              type="button"
-            >
-              <i
-                class="bwi bwi-lg"
-                aria-hidden="true"
-                [ngClass]="{ 'bwi-eye': !showFilePassword, 'bwi-eye-slash': showFilePassword }"
-              ></i>
-            </button>
+            <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
           </bit-form-field>
         </div>
         <div

apps/web/src/app/tools/import-export/file-password-prompt.component.ts

@@ -7,15 +7,10 @@ import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
   templateUrl: "file-password-prompt.component.html",
 })
 export class FilePasswordPromptComponent {
-  showFilePassword: boolean;
   filePassword = new FormControl("", Validators.required);
 
   constructor(private modalRef: ModalRef) {}
 
-  toggleFilePassword() {
-    this.showFilePassword = !this.showFilePassword;
-  }
-
   submit() {
     this.filePassword.markAsTouched();
     if (!this.filePassword.valid) {