diff --git a/apps/browser/src/popup/app.module.ts b/apps/browser/src/popup/app.module.ts index 3f73b5881ed..e871b2a7874 100644 --- a/apps/browser/src/popup/app.module.ts +++ b/apps/browser/src/popup/app.module.ts @@ -64,6 +64,8 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { BitwardenToastModule } from "@bitwarden/angular/components/toastr.component"; import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe"; +import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe"; import { EnvironmentComponent } from "./accounts/environment.component"; import { HintComponent } from "./accounts/hint.component"; @@ -202,6 +204,8 @@ registerLocaleData(localeZhTw, "zh-TW"); CipherRowComponent, VaultItemsComponent, CollectionsComponent, + ColorPasswordPipe, + ColorPasswordCountPipe, CurrentTabComponent, EnvironmentComponent, ExcludedDomainsComponent, diff --git a/apps/browser/src/popup/scss/misc.scss b/apps/browser/src/popup/scss/misc.scss index 0a550915987..07f7b6d5091 100644 --- a/apps/browser/src/popup/scss/misc.scss +++ b/apps/browser/src/popup/scss/misc.scss @@ -193,7 +193,7 @@ p.lead { font-size: 8px; @include themify($themes) { - color: themed("mutedColor") !important; + color: themed("passwordCountText") !important; } } diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss index 0e99f1058a6..6d2842ebb70 100644 --- a/apps/browser/src/popup/scss/variables.scss +++ b/apps/browser/src/popup/scss/variables.scss @@ -109,6 +109,7 @@ $themes: ( logoSuffix: "dark", passwordNumberColor: #007fde, passwordSpecialColor: #c40800, + passwordCountText: #212529, calloutBorderColor: $border-color-dark, calloutBackgroundColor: $box-background-color, toastTextColor: #ffffff, @@ -170,6 +171,7 @@ $themes: ( logoSuffix: "white", passwordNumberColor: #6f9df1, passwordSpecialColor: #ff8d85, + passwordCountText: #ffffff, calloutBorderColor: #4c525f, calloutBackgroundColor: #3c424e, toastTextColor: #1f242e, @@ -230,6 +232,7 @@ $themes: ( logoSuffix: "white", passwordNumberColor: $nord8, passwordSpecialColor: $nord12, + passwordCountText: $nord5, calloutBorderColor: $nord0, calloutBackgroundColor: $nord2, toastTextColor: #ffffff, @@ -290,6 +293,7 @@ $themes: ( logoSuffix: "white", passwordNumberColor: $solarizedDarkCyan, passwordSpecialColor: $solarizedDarkYellow, + passwordCountText: $solarizedDarkBase2, calloutBorderColor: $solarizedDarkBase03, calloutBackgroundColor: $solarizedDarkBase01, toastTextColor: #ffffff, diff --git a/apps/browser/src/popup/vault/password-history.component.html b/apps/browser/src/popup/vault/password-history.component.html index 73a28bb2520..6286aa1022d 100644 --- a/apps/browser/src/popup/vault/password-history.component.html +++ b/apps/browser/src/popup/vault/password-history.component.html @@ -13,9 +13,10 @@
- - {{ h.password }} - + {{ h.lastUsedDate | date: "medium" }}
diff --git a/apps/desktop/src/app/app.module.ts b/apps/desktop/src/app/app.module.ts index 29d865e826d..d40c9833f65 100644 --- a/apps/desktop/src/app/app.module.ts +++ b/apps/desktop/src/app/app.module.ts @@ -58,6 +58,9 @@ import localeZhCn from "@angular/common/locales/zh-Hans"; import localeZhTw from "@angular/common/locales/zh-Hant"; import { NgModule } from "@angular/core"; +import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe"; +import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe"; + import { AccessibilityCookieComponent } from "./accounts/accessibility-cookie.component"; import { DeleteAccountComponent } from "./accounts/delete-account.component"; import { EnvironmentComponent } from "./accounts/environment.component"; @@ -170,6 +173,8 @@ registerLocaleData(localeZhTw, "zh-TW"); AttachmentsComponent, VaultItemsComponent, CollectionsComponent, + ColorPasswordPipe, + ColorPasswordCountPipe, DeleteAccountComponent, EnvironmentComponent, ExportComponent, diff --git a/apps/desktop/src/app/vault/password-generator-history.component.html b/apps/desktop/src/app/vault/password-generator-history.component.html index 6a8dfd909ef..7799dcaade6 100644 --- a/apps/desktop/src/app/vault/password-generator-history.component.html +++ b/apps/desktop/src/app/vault/password-generator-history.component.html @@ -10,7 +10,7 @@
diff --git a/apps/desktop/src/app/vault/password-history.component.html b/apps/desktop/src/app/vault/password-history.component.html index 49493273c16..362061b250d 100644 --- a/apps/desktop/src/app/vault/password-history.component.html +++ b/apps/desktop/src/app/vault/password-history.component.html @@ -9,9 +9,7 @@
- - {{ h.password }} - + {{ h.lastUsedDate | date: "medium" }}
diff --git a/apps/desktop/src/app/vault/view-custom-fields.component.html b/apps/desktop/src/app/vault/view-custom-fields.component.html index 5f2f110fbaa..492c7fbb23e 100644 --- a/apps/desktop/src/app/vault/view-custom-fields.component.html +++ b/apps/desktop/src/app/vault/view-custom-fields.component.html @@ -17,12 +17,16 @@ {{ field.value || " " }}
+ {{ field.maskedValue }} - {{ field.maskedValue }} +
@@ -41,7 +45,18 @@ {{ cipher.linkedFieldI18nKey(field.linkedId) | i18n }}
-
+
+
+
+
+ +
+ + +
+
@@ -870,7 +891,7 @@
{{ ph.lastUsedDate | date: "short" }} - - {{ ph.password }} +
diff --git a/apps/web/src/app/vault/add-edit.component.ts b/apps/web/src/app/vault/add-edit.component.ts index a8372871f9d..c17009fab9e 100644 --- a/apps/web/src/app/vault/add-edit.component.ts +++ b/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; diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 726d8da64ec..7960c6febbd 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -5487,6 +5487,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" }, diff --git a/apps/web/src/scss/pages.scss b/apps/web/src/scss/pages.scss index 088be84f501..b4c48de71e4 100644 --- a/apps/web/src/scss/pages.scss +++ b/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%; diff --git a/apps/web/src/scss/variables.scss b/apps/web/src/scss/variables.scss index 01bb9b80cc4..7bb37c5e359 100644 --- a/apps/web/src/scss/variables.scss +++ b/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, diff --git a/libs/angular/src/jslib.module.ts b/libs/angular/src/jslib.module.ts index 7c9ed79bb5e..20197886ccf 100644 --- a/libs/angular/src/jslib.module.ts +++ b/libs/angular/src/jslib.module.ts @@ -21,8 +21,6 @@ import { SelectCopyDirective } from "./directives/select-copy.directive"; import { StopClickDirective } from "./directives/stop-click.directive"; import { StopPropDirective } from "./directives/stop-prop.directive"; import { TrueFalseValueDirective } from "./directives/true-false-value.directive"; -import { ColorPasswordCountPipe } from "./pipes/color-password-count.pipe"; -import { ColorPasswordPipe } from "./pipes/color-password.pipe"; import { CreditCardNumberPipe } from "./pipes/credit-card-number.pipe"; import { EllipsisPipe } from "./pipes/ellipsis.pipe"; import { I18nPipe } from "./pipes/i18n.pipe"; @@ -49,8 +47,6 @@ import { PasswordStrengthComponent } from "./shared/components/password-strength AutofocusDirective, BoxRowDirective, CalloutComponent, - ColorPasswordCountPipe, - ColorPasswordPipe, CreditCardNumberPipe, EllipsisPipe, ExportScopeCalloutComponent, @@ -79,8 +75,6 @@ import { PasswordStrengthComponent } from "./shared/components/password-strength BitwardenToastModule, BoxRowDirective, CalloutComponent, - ColorPasswordCountPipe, - ColorPasswordPipe, CreditCardNumberPipe, EllipsisPipe, ExportScopeCalloutComponent, diff --git a/libs/components/src/color-password/color-password.component.ts b/libs/components/src/color-password/color-password.component.ts index b55384dea1f..8ebb29a31e8 100644 --- a/libs/components/src/color-password/color-password.component.ts +++ b/libs/components/src/color-password/color-password.component.ts @@ -48,12 +48,12 @@ export class ColorPasswordComponent { if (this.showCount) { return charClass.concat([ - "tw-inline-flex", "tw-flex-col", "tw-items-center", "tw-w-7", "tw-py-1", "odd:tw-bg-secondary-100", + "even:tw-bg-background", ]); }