Merge branch 'master' into feature/org-admin-refresh

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/organizations/members/people.component.ts

@@ -310,7 +310,7 @@ export class PeopleComponent
     if (
       !user &&
       this.organization.planProductType === ProductType.Free &&
-      this.users.length === this.organization.seats
+      this.allUsers.length === this.organization.seats
     ) {
       // Show org upgrade modal
 

apps/web/src/app/shared/shared.module.ts

@@ -25,6 +25,7 @@ import {
   TableModule,
   TabsModule,
   ToggleGroupModule,
+  ColorPasswordModule,
 } from "@bitwarden/components";
 
 // Register the locales for the application
@@ -66,6 +67,8 @@ import "./locales";
     TableModule,
     TabsModule,
     ToggleGroupModule,
+    LinkModule,
+    ColorPasswordModule,
 
     // Web specific
   ],
@@ -97,6 +100,8 @@ import "./locales";
     TableModule,
     TabsModule,
     ToggleGroupModule,
+    LinkModule,
+    ColorPasswordModule,
 
     // Web specific
   ],

apps/web/src/app/tools/generator.component.html

@@ -6,18 +6,10 @@
 </app-callout>
 <div class="card card-generated bg-light my-4">
   <div class="card-body">
-    <div
-      *ngIf="type === 'password'"
-      class="generated-wrapper"
-      [innerHTML]="password | colorPassword"
+    <bit-color-password
+      [password]="type === 'password' ? password : username"
       appSelectCopy
-    ></div>
-    <div
-      *ngIf="type === 'username'"
-      class="generated-wrapper"
-      [innerHTML]="username | colorPassword"
-      appSelectCopy
-    ></div>
+    ></bit-color-password>
   </div>
 </div>
 <div class="form-group" role="radiogroup" aria-labelledby="typeHeading">

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) {

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

@@ -288,6 +288,10 @@
       From the Yoti browser extension, click on "Settings", then "Export Saved Logins" and save the
       CSV file.
     </ng-container>
+    <ng-container *ngIf="format === 'passkyjson'">
+      Log in to "https://vault.passky.org" &rarr; "Import & Export" &rarr; "Export" in the Passky
+      section. ("Backup" is unsupported as it is encrypted).
+    </ng-container>
   </app-callout>
   <div class="row">
     <div class="col-6">

apps/web/src/app/tools/password-generator-history.component.html

@@ -15,12 +15,12 @@
       <div class="modal-body" *ngIf="history.length">
         <ul class="list-group list-group-flush">
           <li class="list-group-item d-flex" *ngFor="let h of history">
-            <div class="password-row">
-              <div
-                class="text-monospace generated-wrapper"
-                [innerHTML]="h.password | colorPassword"
+            <div class="tw-min-w-0">
+              <bit-color-password
+                [password]="h.password"
+                class="tw-block tw-font-mono"
                 appSelectCopy
-              ></div>
+              ></bit-color-password>
               <small class="text-muted">{{ h.date | date: "medium" }}</small>
             </div>
             <div class="ml-auto">

apps/web/src/app/vault/add-edit.component.html

@@ -128,6 +128,15 @@
                       title="{{ 'loading' | i18n }}"
                     ></i>
                   </a>
+                  <a
+                    href="#"
+                    class="d-block bwi-icon-above-input"
+                    appStopClick
+                    [appA11yTitle]="'toggleCharacterCount' | i18n"
+                    (click)="togglePasswordCount()"
+                  >
+                    <i class="bwi bwi-lg bwi-fw bwi-numbered-list" aria-hidden="true"></i>
+                  </a>
                 </div>
               </div>
               <div class="input-group">
@@ -169,6 +178,18 @@
               </div>
             </div>
           </div>
+          <div *ngIf="showPasswordCount" class="tw-mb-4">
+            <label>{{ "passwordCharacterCount" | i18n }}</label>
+            <div class="tw-flex tw-justify-between">
+              <bit-color-password
+                [password]="cipher.login.password"
+                [showCount]="true"
+              ></bit-color-password>
+              <button type="button" bitLink (click)="togglePasswordCount()">
+                {{ "hide" | i18n }}
+              </button>
+            </div>
+          </div>
           <div class="tw-flex tw-flex-row">
             <div class="tw-mb-4 tw-w-1/2">
               <label for="loginTotp">{{ "authenticatorKeyTotp" | i18n }}</label>
@@ -870,7 +891,7 @@
             <div class="ml-3" *ngIf="viewingPasswordHistory">
               <div *ngFor="let ph of cipher.passwordHistory">
                 {{ ph.lastUsedDate | date: "short" }} -
-                <span class="generated-wrapper text-monospace ml-2">{{ ph.password }}</span>
+                <bit-color-password [password]="ph.password"></bit-color-password>
               </div>
             </div>
           </div>

apps/web/src/app/vault/add-edit.component.ts

@@ -35,6 +35,7 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
   hasPasswordHistory = false;
   viewingPasswordHistory = false;
   viewOnly = false;
+  showPasswordCount = false;
 
   protected totpInterval: number;
   protected override componentName = "app-vault-add-edit";
@@ -104,6 +105,26 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
     this.cipher.favorite = !this.cipher.favorite;
   }
 
+  togglePassword() {
+    super.togglePassword();
+
+    // Hide password count when password is hidden to be safe
+    if (!this.showPassword && this.showPasswordCount) {
+      this.togglePasswordCount();
+    }
+  }
+
+  togglePasswordCount() {
+    this.showPasswordCount = !this.showPasswordCount;
+
+    if (this.editMode && this.showPasswordCount) {
+      this.eventCollectionService.collect(
+        EventType.Cipher_ClientToggledPasswordVisible,
+        this.cipherId
+      );
+    }
+  }
+
   launch(uri: LoginUriView) {
     if (!uri.canLaunch) {
       return;

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

@@ -5579,6 +5579,17 @@
   "multiSelectClearAll": {
     "message": "Clear all"
   },
+  "toggleCharacterCount": {
+    "message": "Toggle character count",
+    "description": "'Character count' describes a feature that displays a number next to each character of the password."
+  },
+  "passwordCharacterCount": {
+    "message": "Password character count",
+    "description": "'Character count' describes a feature that displays a number next to each character of the password."
+  },
+  "hide": {
+    "message": "Hide"
+  },
   "projects":{
     "message": "Projects"
   },

apps/web/src/scss/pages.scss

@@ -1,31 +1,3 @@
-.generated-wrapper {
-  min-width: 0;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.password-row {
-  min-width: 0;
-}
-
-.password-letter {
-  @include themify($themes) {
-    color: themed("pwLetter");
-  }
-}
-
-.password-number {
-  @include themify($themes) {
-    color: themed("pwNumber");
-  }
-}
-
-.password-special {
-  @include themify($themes) {
-    color: themed("pwSpecial");
-  }
-}
-
 app-generator {
   #lengthRange {
     width: 100%;

apps/web/src/scss/variables.scss

@@ -201,9 +201,6 @@ $themes: (
     navBackgroundAlt: $secondary-alt,
     navOrgBackgroundColor: #fbfbfb,
     navWeight: 600,
-    pwLetter: $body-color,
-    pwNumber: #007fde,
-    pwSpecial: #c40800,
     pwStrengthBackground: #e9ecef,
     separator: $secondary,
     separatorHr: rgb(0, 0, 0, 0.1),
@@ -313,9 +310,6 @@ $themes: (
     navBackgroundAlt: $darkDarkBlue1,
     navOrgBackgroundColor: #161c26,
     navWeight: 400,
-    pwLetter: $white,
-    pwNumber: #52bdfb,
-    pwSpecial: #ff7c70,
     pwStrengthBackground: $darkBlue2,
     separator: $darkBlue1,
     separatorHr: $darkBlue1,