bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-11 13:53:34 +00:00
Code Issues Releases Wiki Activity

[PM-1802] Update 2fa provider icons and description (#9568)

Browse Source 
* Update yubikey to yubico

* Update icons and descriptions

* Change order of 2fa providers

* Refactor 2fa providers into separate component

* Update i18n messages for 2fa providers

* Update design

* Fix link

* Remove unused SVGs

* Undo changes to scss

* Add speedbumps to links

* Fix missing i18n string

* Add a11y tags

* Fix incorrect filepath

* Remove unused i18n strings

* Delete accidentally committed file

* Fix premium and enabled checkmark being in new line

* Rename two-factor-icon selector

* Update authenticator names in two-factor-authenticator setup component

* Update text according to figma design

* Update keys to notify crowdin translators of changed content

* Move svg icons to separate file

* Fix incorrect i18n key
This commit is contained in:
Bernd Schoolmann
2024-06-27 19:14:21 +02:00
committed by GitHub
parent 3c8eeb4420
commit c01f6be286
20 changed files with 728 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
libs/angular/src/auth/components/two-factor-icon.component.html Normal file
View File

@@ -0,0 +1,16 @@
<ng-container>
<!-- TOTP Authenticator -->
<bit-icon [icon]="Icons.TOTPIcon" *ngIf="provider == 0"></bit-icon>
<!-- Email -->
<bit-icon [icon]="Icons.EmailIcon" *ngIf="provider == 1"></bit-icon>
<!-- Webauthn -->
<bit-icon [icon]="Icons.WebAuthnIcon" *ngIf="provider == 7"></bit-icon>
<!-- Recovery Code -->
<bit-icon [icon]="Icons.RecoveryCodeIcon" *ngIf="provider == 'rc'"></bit-icon>
<!-- Other 2FA Types (Duo, Yubico, U2F as PNG) -->
<img
[class]="'mfaType' + provider"
[alt]="name"
*ngIf="provider == 2 || provider == 3 || provider == 4 || provider == 5 || provider == 6"
/>
</ng-container>

24
libs/angular/src/auth/components/two-factor-icon.component.ts Normal file
View File

@@ -0,0 +1,24 @@
import { Component, Input } from "@angular/core";
import { EmailIcon } from "../icons/email.icon";
import { RecoveryCodeIcon } from "../icons/recovery.icon";
import { TOTPIcon } from "../icons/totp.icon";
import { WebAuthnIcon } from "../icons/webauthn.icon";
@Component({
selector: "auth-two-factor-icon",
templateUrl: "./two-factor-icon.component.html",
})
export class TwoFactorIconComponent {
@Input() provider: any;
@Input() name: string;
protected readonly Icons = {
TOTPIcon,
EmailIcon,
WebAuthnIcon,
RecoveryCodeIcon,
};
constructor() {}
}

44
libs/angular/src/auth/icons/email.icon.ts Normal file
View File

@@ -0,0 +1,44 @@
import { svgIcon } from "@bitwarden/components";
export const EmailIcon = svgIcon`
<svg
xmlns="http://www.w3.org/2000/svg"
width="67"
height="64"
fill="none"
class="tw-text-primary-600"
role="img"
aria-label="[title]"
>
<title>Email</title>
<path
stroke="currentColor"
stroke-width="2"
d="m9.28 19.155-5.848 4.363a4 4 0 0 0-1.608 3.206V59a4 4 0 0 0 4 4h56.044a4 4 0 0 0 4-4V26.742a4 4 0 0 0-1.63-3.223L58.3 19.155M42.438 7.49l-6.442-4.736a4 4 0 0 0-4.762.017l-6.324 4.72"
/>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
d="M58.373 30.978V9.473a2 2 0 0 0-2-2H11.318a2 2 0 0 0-2 2v21.505"
/>
<path
stroke="currentColor"
stroke-width="2"
d="M64.504 61.637 43.35 42.107a6 6 0 0 0-4.07-1.59H27.421a6 6 0 0 0-4.175 1.69l-20.06 19.43"
/>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
d="m65.181 27.239-22.81 13.623M2.51 27.24l22.81 13.622"
/>
<rect width="35" height="12" x="16.324" y="17.5" stroke="currentColor" rx="6" />
<circle cx="21.324" cy="23.5" r="1.5" fill="currentColor" />
<circle cx="31.324" cy="23.5" r="1.5" fill="currentColor" />
<circle cx="41.324" cy="23.5" r="1.5" fill="currentColor" />
<circle cx="26.324" cy="23.5" r="1.5" fill="currentColor" />
<circle cx="36.324" cy="23.5" r="1.5" fill="currentColor" />
<circle cx="46.324" cy="23.5" r="1.5" fill="currentColor" />
</svg>
`;

51
libs/angular/src/auth/icons/recovery.icon.ts Normal file
View File

@@ -0,0 +1,51 @@
import { svgIcon } from "@bitwarden/components";
export const RecoveryCodeIcon = svgIcon`
<svg
xmlns="http://www.w3.org/2000/svg"
alt="rc logo"
width="76"
height="63"
fill="none"
class="tw-text-primary-600"
role="img"
aria-label="[title]"
>
<title>Recovery Code</title>
<rect
width="49.459"
height="17.255"
x="1"
y="-1"
stroke="currentColor"
stroke-width="2"
rx="8.627"
transform="matrix(-1 0 0 1 52.15 38.12)"
/>
<path
fill="currentColor"
d="M7.742 19.337a1 1 0 0 1 1.635-1.152l-1.635 1.152Zm7.499 8.895.576.817a1 1 0 0 1-1.393-.24l.817-.577Zm8.895-7.498a1 1 0 1 1 1.152 1.634l-1.152-1.634Zm44.129 29.953-.776-.631.776.631ZM63.942 8.483l.631-.775-.631.775Zm-42.205 4.323.776.631-.776-.631Zm22.266 49.925a1 1 0 1 1 .063-1.999l-.063 2ZM16.358 27.183a1 1 0 1 1-1.975-.313l1.975.313Zm-6.981-8.998 6.681 9.47-1.634 1.153-6.682-9.47 1.635-1.154Zm5.287 9.23 9.472-6.681 1.152 1.634-9.47 6.681-1.154-1.634ZM67.49 50.056c10.112-12.42 8.241-30.685-4.179-40.797l1.263-1.551C77.85 18.517 79.85 38.042 69.04 51.318l-1.55-1.262ZM63.31 9.259C50.89-.853 32.625 1.018 22.513 13.437l-1.551-1.262C31.772-1.102 51.297-3.102 64.573 7.708l-1.263 1.55ZM44.066 60.732c8.732.275 17.484-3.381 23.423-10.676l1.551 1.263c-6.35 7.799-15.708 11.706-25.037 11.412l.063-1.999ZM22.513 13.437a28.861 28.861 0 0 0-6.155 13.746l-1.975-.313a30.861 30.861 0 0 1 6.579-14.695l1.551 1.262Z"
/>
<path
stroke="currentColor"
stroke-linejoin="round"
stroke-width="2"
d="M36.59 25.167v-5.445c0-4.021 3.806-7.267 8.475-7.267s8.475 3.264 8.475 7.267v5.445"
/>
<path
stroke="currentColor"
stroke-width="2"
d="M32.353 37.345v-6.098a6 6 0 0 1 6-6h13.424a6 6 0 0 1 6 6v9.187a6 6 0 0 1-6 6h-.601"
/>
<path
fill="currentColor"
d="M45.886 35.63c.491-.285.822-.82.822-1.432v-.5c0-.913-.736-1.653-1.643-1.653-.908 0-1.643.74-1.643 1.654v.499c0 .612.33 1.146.82 1.432v1.283c0 .457.368.827.822.827.454 0 .822-.37.822-.827v-1.282Z"
/>
<circle cx="2" cy="2" r="2" fill="currentColor" transform="matrix(-1 0 0 1 46.001 44.148)" />
<circle cx="2" cy="2" r="2" fill="currentColor" transform="matrix(-1 0 0 1 32.001 44.148)" />
<circle cx="2" cy="2" r="2" fill="currentColor" transform="matrix(-1 0 0 1 18.001 44.148)" />
<circle cx="2" cy="2" r="2" fill="currentColor" transform="matrix(-1 0 0 1 39.001 44.148)" />
<circle cx="2" cy="2" r="2" fill="currentColor" transform="matrix(-1 0 0 1 25.001 44.148)" />
<circle cx="2" cy="2" r="2" fill="currentColor" transform="matrix(-1 0 0 1 11.001 44.148)" />
</svg>
`;

61
libs/angular/src/auth/icons/totp.icon.ts Normal file
View File

@@ -0,0 +1,61 @@
import { svgIcon } from "@bitwarden/components";
export const TOTPIcon = svgIcon`
<svg
xmlns="http://www.w3.org/2000/svg"
width="120"
height="62"
fill="none"
class="tw-text-primary-600"
role="img"
aria-label="[title]"
>
<title>TOTP Authenticator</title>
<rect width="35" height="12" x="50.324" y="21.5" stroke="currentColor" rx="6" />
<circle cx="55.324" cy="27.5" r="1.5" fill="currentColor" />
<circle cx="65.324" cy="27.5" r="1.5" fill="currentColor" />
<circle cx="75.324" cy="27.5" r="1.5" fill="currentColor" />
<circle cx="60.324" cy="27.5" r="1.5" fill="currentColor" />
<circle cx="70.324" cy="27.5" r="1.5" fill="currentColor" />
<circle cx="80.324" cy="27.5" r="1.5" fill="currentColor" />
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M52.703 61h34.706"
/>
<path
stroke="currentColor"
stroke-linejoin="round"
stroke-width="2"
d="M63.932 51.166V61M75.16 51.166V61"
/>
<path
stroke="currentColor"
stroke-width="2"
d="M38.952 51.166h64.894a6 6 0 0 0 6-6V7a6 6 0 0 0-6-6h-68a6 6 0 0 0-6 6v7.655"
/>
<path
stroke="currentColor"
d="M38.692 46.517h62.999a4 4 0 0 0 4-4V9.552a4 4 0 0 0-4-4H38.537a4 4 0 0 0-4 4v5.103"
/>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
d="M32.284 27.382h11.064l-2.912-2.895M43.348 30.276H32.284l2.912 2.895"
/>
<path
stroke="currentColor"
stroke-width="2"
d="M37.846 27.75V19a4 4 0 0 0-4-4h-18a4 4 0 0 0-4 4v38a4 4 0 0 0 4 4h18a4 4 0 0 0 4-4V30.5"
/>
<path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M24.806 18.5h.08" />
<path stroke="currentColor" d="M24.846 36a8 8 0 1 0 7.858 6.5" />
<path
fill="currentColor"
d="M21.547 45.36h1.02v-3.64l-1.221.584v-.626l1.215-.575h.657v4.258h1.007v.545h-2.678v-.545ZM25.793 45.358h2.23v.548h-2.948v-.548c.405-.424.76-.799 1.063-1.124a27 27 0 0 0 .627-.687c.216-.263.363-.475.438-.636.076-.164.114-.33.114-.5 0-.27-.08-.48-.24-.633-.158-.153-.376-.23-.653-.23a1.99 1.99 0 0 0-.621.107 3.493 3.493 0 0 0-.69.323v-.658c.224-.106.443-.185.657-.24.217-.053.43-.08.64-.08.475 0 .856.126 1.145.378.29.25.435.578.435.984 0 .207-.049.413-.146.62a3.005 3.005 0 0 1-.468.684c-.122.14-.298.334-.53.581-.23.248-.58.618-1.053 1.11Z"
/>
</svg>
`;

42
libs/angular/src/auth/icons/webauthn.icon.ts Normal file
View File

@@ -0,0 +1,42 @@
import { svgIcon } from "@bitwarden/components";
export const WebAuthnIcon = svgIcon`
<svg
xmlns="http://www.w3.org/2000/svg"
width="62.176998"
height="60.152"
fill="none"
class="tw-text-primary-600"
role="img"
aria-label="[title]"
>
<title>Webauthn</title>
<g stroke="currentColor" clip-path="url(#a)" transform="translate(-6.081,-1.143)">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-width="2"
d="M20.418 33.19c5.614 0 10.42 3.56 12.396 8.533h29.012l5.434 5.522-4.491 4.563h-6.602l-3.413-3.468-3.279 3.24-1.167-1.187-1.303 1.323-3.188-3.24-3.1 3.149H32.86c-1.932 5.065-6.782 8.67-12.44 8.67-7.366 0-13.339-6.069-13.339-13.553 0-7.483 5.928-13.552 13.338-13.552Zm-6.152 16.975c1.841 0 3.368-1.506 3.368-3.422 0-1.871-1.482-3.423-3.368-3.423-1.887 0-3.369 1.506-3.369 3.422 0 1.917 1.527 3.423 3.369 3.423Z"
/>
<path
stroke-linecap="round"
d="M59.78 44.722H36.32M19.99 36.722c4.036 0 7.569 2.405 9.51 6"
/>
<circle
cx="12.24"
cy="12.24"
r="12.24"
stroke-width="2"
transform="matrix(-1 0 0 1 50.6 2.143)"
/>
<path
stroke-width="2"
d="M22.753 33.423c3.836-4.174 9.41-6.8 15.615-6.8 9.698 0 17.857 6.417 20.243 15.13"
/>
</g>
<defs>
<clipPath id="a"><path fill="#fff" d="M68.5.62H.5v61h68z" /></clipPath>
</defs>
</svg>
`;

5
libs/angular/src/jslib.module.ts
View File

@@ -17,6 +17,7 @@ import {
DialogModule,
FormFieldModule,
IconButtonModule,
IconModule,
LinkModule,
MenuModule,
RadioButtonModule,
@@ -26,6 +27,7 @@ import {
TypographyModule,
} from "@bitwarden/components";
import { TwoFactorIconComponent } from "./auth/components/two-factor-icon.component";
import { CalloutComponent } from "./components/callout.component";
import { A11yInvalidDirective } from "./directives/a11y-invalid.directive";
import { A11yTitleDirective } from "./directives/a11y-title.directive";
@@ -74,6 +76,7 @@ import { IconComponent } from "./vault/components/icon.component";
TableModule,
MenuModule,
IconButtonModule,
IconModule,
LinkModule,
],
declarations: [
@@ -109,6 +112,7 @@ import { IconComponent } from "./vault/components/icon.component";
ManageTaxInformationComponent,
SelectPaymentMethodComponent,
VerifyBankAccountComponent,
TwoFactorIconComponent,
],
exports: [
A11yInvalidDirective,
@@ -144,6 +148,7 @@ import { IconComponent } from "./vault/components/icon.component";
ManageTaxInformationComponent,
SelectPaymentMethodComponent,
VerifyBankAccountComponent,
TwoFactorIconComponent,
],
providers: [
CreditCardNumberPipe,

20
libs/common/src/auth/services/two-factor.service.ts
View File

@@ -18,7 +18,7 @@ export const TwoFactorProviders: Partial<Record<TwoFactorProviderType, TwoFactor
name: null as string,
description: null as string,
priority: 1,
sort: 1,
sort: 2,
premium: false,
},
[TwoFactorProviderType.Yubikey]: {
@@ -26,7 +26,7 @@ export const TwoFactorProviders: Partial<Record<TwoFactorProviderType, TwoFactor
name: null as string,
description: null as string,
priority: 3,
sort: 2,
sort: 4,
premium: true,
},
[TwoFactorProviderType.Duo]: {
@@ -34,7 +34,7 @@ export const TwoFactorProviders: Partial<Record<TwoFactorProviderType, TwoFactor
name: "Duo",
description: null as string,
priority: 2,
sort: 3,
sort: 5,
premium: true,
},
[TwoFactorProviderType.OrganizationDuo]: {
@@ -42,7 +42,7 @@ export const TwoFactorProviders: Partial<Record<TwoFactorProviderType, TwoFactor
name: "Duo (Organization)",
description: null as string,
priority: 10,
sort: 4,
sort: 6,
premium: false,
},
[TwoFactorProviderType.Email]: {
@@ -50,7 +50,7 @@ export const TwoFactorProviders: Partial<Record<TwoFactorProviderType, TwoFactor
name: null as string,
description: null as string,
priority: 0,
sort: 6,
sort: 1,
premium: false,
},
[TwoFactorProviderType.WebAuthn]: {
@@ -58,7 +58,7 @@ export const TwoFactorProviders: Partial<Record<TwoFactorProviderType, TwoFactor
name: null as string,
description: null as string,
priority: 4,
sort: 5,
sort: 3,
premium: false,
},
};
@@ -97,14 +97,14 @@ export class TwoFactorService implements TwoFactorServiceAbstraction {
init() {
TwoFactorProviders[TwoFactorProviderType.Email].name = this.i18nService.t("emailTitle");
TwoFactorProviders[TwoFactorProviderType.Email].description = this.i18nService.t("emailDesc");
TwoFactorProviders[TwoFactorProviderType.Email].description = this.i18nService.t("emailDescV2");
TwoFactorProviders[TwoFactorProviderType.Authenticator].name =
this.i18nService.t("authenticatorAppTitle");
TwoFactorProviders[TwoFactorProviderType.Authenticator].description =
this.i18nService.t("authenticatorAppDesc");
this.i18nService.t("authenticatorAppDescV2");
TwoFactorProviders[TwoFactorProviderType.Duo].description = this.i18nService.t("duoDesc");
TwoFactorProviders[TwoFactorProviderType.Duo].description = this.i18nService.t("duoDescV2");
TwoFactorProviders[TwoFactorProviderType.OrganizationDuo].name =
"Duo (" + this.i18nService.t("organization") + ")";
@@ -115,7 +115,7 @@ export class TwoFactorService implements TwoFactorServiceAbstraction {
TwoFactorProviders[TwoFactorProviderType.WebAuthn].description =
this.i18nService.t("webAuthnDesc");
TwoFactorProviders[TwoFactorProviderType.Yubikey].name = this.i18nService.t("yubiKeyTitle");
TwoFactorProviders[TwoFactorProviderType.Yubikey].name = this.i18nService.t("yubiKeyTitleV2");
TwoFactorProviders[TwoFactorProviderType.Yubikey].description =
this.i18nService.t("yubiKeyDesc");
}