1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 09:13:33 +00:00

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

This commit is contained in:
Jacob Fink
2022-12-20 12:59:34 -05:00
63 changed files with 585 additions and 350 deletions

View File

@@ -1,6 +1,6 @@
{
"name": "@bitwarden/browser",
"version": "2022.12.0",
"version": "2022.12.1",
"scripts": {
"build": "webpack",
"build:mv3": "cross-env MANIFEST_VERSION=3 webpack",

View File

@@ -2,7 +2,7 @@
"manifest_version": 2,
"name": "__MSG_extName__",
"short_name": "__MSG_appName__",
"version": "2022.12.0",
"version": "2022.12.1",
"description": "__MSG_extDesc__",
"default_locale": "en",
"author": "Bitwarden Inc.",

View File

@@ -3,7 +3,7 @@
"minimum_chrome_version": "102.0",
"name": "__MSG_extName__",
"short_name": "__MSG_appName__",
"version": "2022.12.0",
"version": "2022.12.1",
"description": "__MSG_extDesc__",
"default_locale": "en",
"author": "Bitwarden Inc.",

View File

@@ -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,

View File

@@ -193,7 +193,7 @@ p.lead {
font-size: 8px;
@include themify($themes) {
color: themed("mutedColor") !important;
color: themed("passwordCountText") !important;
}
}

View File

@@ -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,

View File

@@ -13,9 +13,10 @@
<div class="box-content-row box-content-row-flex" *ngFor="let h of history">
<div class="row-main">
<div class="row-main-content">
<span class="text monospaced no-ellipsis">
{{ h.password }}
</span>
<span
class="text monospaced no-ellipsis"
[innerHTML]="h.password | colorPassword"
></span>
<span class="detail">{{ h.lastUsedDate | date: "medium" }}</span>
</div>
</div>

View File

@@ -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,

View File

@@ -10,7 +10,7 @@
<div class="box-content-row box-content-row-flex" *ngFor="let h of history">
<div class="row-main">
<div
class="generated-wrapper monospaced"
class="password-wrapper monospaced"
appSelectCopy
[innerHTML]="h.password | colorPassword"
></div>

View File

@@ -9,9 +9,7 @@
<div class="box-content condensed">
<div class="box-content-row box-content-row-flex" *ngFor="let h of history">
<div class="row-main">
<span class="text monospaced">
{{ h.password }}
</span>
<span class="text monospaced" [innerHTML]="h.password | colorPassword"></span>
<span class="detail">{{ h.lastUsedDate | date: "medium" }}</span>
</div>
<div class="action-buttons">

View File

@@ -17,12 +17,16 @@
{{ field.value || "&nbsp;" }}
</div>
<div *ngIf="field.type === fieldType.Hidden">
<span *ngIf="!field.showValue" class="monospaced">{{ field.maskedValue }}</span>
<span
*ngIf="field.showValue"
*ngIf="field.showValue && !field.showCount"
class="monospaced show-whitespace"
[innerHTML]="field.value | colorPassword"
></span>
<span *ngIf="!field.showValue" class="monospaced">{{ field.maskedValue }}</span>
<span
*ngIf="field.showValue && field.showCount"
[innerHTML]="field.value | colorPasswordCount"
></span>
</div>
<div *ngIf="field.type === fieldType.Boolean">
<i class="bwi bwi-check-square" *ngIf="field.value === 'true'" aria-hidden="true"></i>
@@ -41,7 +45,18 @@
<span>{{ cipher.linkedFieldI18nKey(field.linkedId) | i18n }}</span>
</div>
</div>
<div class="action-buttons">
<div class="action-buttons action-buttons-fixed">
<button
type="button"
class="row-btn"
appStopClick
appA11yTitle="{{ 'toggleCharacterCount' | i18n }}"
*ngIf="field.type === fieldType.Hidden && cipher.viewPassword && field.showValue"
(click)="toggleFieldCount(field)"
[attr.aria-pressed]="field.showCount"
>
<i class="bwi bwi-lg bwi-numbered-list" aria-hidden="true"></i>
</button>
<button
type="button"
class="row-btn"

View File

@@ -50,11 +50,15 @@
{{ cipher.login.maskedPassword }}
</div>
<div
*ngIf="showPassword"
class="monospaced generated-wrapper"
*ngIf="showPassword && !showPasswordCount"
class="monospaced password-wrapper"
appSelectCopy
[innerHTML]="cipher.login.password | colorPassword"
></div>
<div
*ngIf="showPassword && showPasswordCount"
[innerHTML]="cipher.login.password | colorPasswordCount"
></div>
</div>
<div class="action-buttons" *ngIf="cipher.viewPassword">
<button
@@ -77,6 +81,18 @@
aria-hidden="true"
></i>
</button>
<button
type="button"
class="row-btn"
appStopClick
attr.aria-label="{{ 'toggleCharacterCount' | i18n }} {{ 'password' | i18n }}"
appA11yTitle="{{ 'toggleCharacterCount' | i18n }}"
(click)="togglePasswordCount()"
*ngIf="showPassword"
[attr.aria-pressed]="showPasswordCount"
>
<i class="bwi bwi-lg bwi-numbered-list" aria-hidden="true"></i>
</button>
<button
type="button"
class="row-btn"

View File

@@ -2057,5 +2057,9 @@
},
"logInWithAnotherDevice": {
"message": "Log in with another device"
},
"toggleCharacterCount": {
"message": "Toggle character count",
"description": "'Character count' describes a feature that displays a number next to each character of the password."
}
}

View File

@@ -366,6 +366,11 @@
display: flex;
margin-left: 5px;
&.action-buttons-fixed {
align-self: start;
margin-top: 2px;
}
.row-btn {
@extend .icon-btn;
}

View File

@@ -215,8 +215,8 @@ p.lead {
}
}
.generated-wrapper {
word-break: break-all;
.password-wrapper {
overflow-wrap: break-word;
white-space: pre-wrap;
min-width: 0;
}
@@ -233,6 +233,30 @@ p.lead {
}
}
.password-character {
display: inline-flex;
flex-direction: column;
align-items: center;
width: 30px;
height: 36px;
font-weight: 600;
&:nth-child(odd) {
@include themify($themes) {
background-color: themed("backgroundColorAlt2");
}
}
}
.password-count {
white-space: nowrap;
font-size: 8px;
@include themify($themes) {
color: themed("passwordCountText") !important;
}
}
#duo-frame {
background: url("../images/loading.svg") 0 0 no-repeat;
height: 330px;

View File

@@ -88,6 +88,7 @@ $themes: (
logoSuffix: "dark",
passwordNumberColor: #007fde,
passwordSpecialColor: #c40800,
passwordCountText: #212529,
calloutBorderColor: $border-color-dark,
calloutBackgroundColor: $background-color,
accountSwitcherBackgroundColor: $background-color,
@@ -142,6 +143,7 @@ $themes: (
logoSuffix: "white",
passwordNumberColor: #52bdfb,
passwordSpecialColor: #ff7c70,
passwordCountText: #ffffff,
calloutBorderColor: #2f2f2f,
calloutBackgroundColor: #363636,
accountSwitcherBackgroundColor: #2f2f2f,
@@ -196,6 +198,7 @@ $themes: (
logoSuffix: "white",
passwordNumberColor: $nord8,
passwordSpecialColor: $nord12,
passwordCountText: $nord5,
calloutBorderColor: $nord1,
calloutBackgroundColor: $nord2,
accountSwitcherBackgroundColor: $nord0,

View File

@@ -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

View File

@@ -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>

View File

@@ -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

View File

@@ -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
],

View File

@@ -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">

View File

@@ -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>

View File

@@ -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,

View File

@@ -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

View File

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

View File

@@ -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">

View File

@@ -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">

View File

@@ -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>

View File

@@ -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;

View File

@@ -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"
},

View File

@@ -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%;

View File

@@ -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,