UI updates to encrypted export

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

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

apps/web/src/locales/en/messages.json

@@ -912,7 +912,7 @@
     "message": "This file export will be password protected and require the file password to decrypt."
   },
   "exportPasswordDescription": {
-    "message": "This password will be used to export and import this file"
+    "message": "This password will be used to export and import this file."
   },
   "confirmMasterPassword": {
     "message": "Confirm Master Password"

apps/web/src/locales/en_GB/messages.json

@@ -912,7 +912,7 @@
     "message": "This file export will be password protected and require the file password to decrypt."
   },
   "exportPasswordDescription": {
-    "message": "This password will be used to export and import this file"
+    "message": "This password will be used to export and import this file."
   },
   "confirmMasterPassword": {
     "message": "Confirm Master Password"