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

* 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

apps/web/src/app/auth/settings/two-factor-authenticator.component.html

@@ -5,13 +5,6 @@
       <span bitTypography="body1">{{ "authenticatorAppTitle" | i18n }}</span>
     </span>
     <ng-container bitDialogContent>
-      <ng-container *ngIf="!enabled">
-        <img class="float-right mfaType0" alt="Authenticator app logo" />
-        <p bitTypography="body1">{{ "twoStepAuthenticatorDesc" | i18n }}</p>
-        <p bitTypography="body1" class="tw-font-bold">
-          1. {{ "twoStepAuthenticatorDownloadApp" | i18n }}
-        </p>
-      </ng-container>
       <ng-container *ngIf="enabled">
         <bit-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi-check-circle">
           <p bitTypography="body1">{{ "twoStepLoginProviderEnabled" | i18n }}</p>
@@ -20,42 +13,64 @@
         <img class="float-right mfaType0" alt="Authenticator app logo" />
         <p bitTypography="body1">{{ "twoStepAuthenticatorNeedApp" | i18n }}</p>
       </ng-container>
-      <ul class="bwi-ul">
-        <li>
-          <i class="bwi bwi-li bwi-apple"></i>{{ "iosDevices" | i18n }}:
+      <ng-container *ngIf="!enabled">
+        <p>
+          {{ "twoStepAuthenticatorInstructionPrefix" | i18n }}
           <a
             bitLink
-            href="https://itunes.apple.com/us/app/authy/id494168017?mt=8"
             target="_blank"
             rel="noreferrer"
-            >Authy</a
+            (click)="launchExternalUrl('https://getaegis.app')"
+            >Aegis</a
           >
-        </li>
-        <li>
-          <i class="bwi bwi-li bwi-android"></i>{{ "androidDevices" | i18n }}:
+          {{ "twoStepAuthenticatorInstructionInfix1" | i18n }}
           <a
             bitLink
-            href="https://play.google.com/store/apps/details?id=com.authy.authy"
             target="_blank"
             rel="noreferrer"
-            >Authy</a
+            (click)="launchExternalUrl('https://2fas.com')"
+            >2FAS</a
           >
-        </li>
-        <li>
-          <i class="bwi bwi-li bwi-windows"></i>{{ "windowsDevices" | i18n }}:
+          {{ "twoStepAuthenticatorInstructionInfix2" | i18n }}
           <a
             bitLink
-            href="https://www.microsoft.com/p/authenticator/9wzdncrfj3rj"
             target="_blank"
             rel="noreferrer"
-            >Microsoft Authenticator</a
+            (click)="launchBitwardenUrl('https://bitwarden.com/products/authenticator/')"
+            >Bitwarden Authenticator</a
           >
-        </li>
-      </ul>
-      <p bitTypography="body1">{{ "twoStepAuthenticatorAppsRecommended" | i18n }}</p>
-      <p *ngIf="!enabled" bitTypography="body1" class="tw-font-bold">
-        2. {{ "twoStepAuthenticatorScanCode" | i18n }}
-      </p>
+          {{ "twoStepAuthenticatorInstructionSuffix" | i18n }}
+        </p>
+
+        <p class="text-center">
+          <a
+            href="https://apps.apple.com/ca/app/bitwarden-authenticator/id6497335175"
+            target="_blank"
+          >
+            <img
+              src="../../../images/download_apple_appstore.svg"
+              alt="Download on App Store"
+              max-width="120"
+              height="40"
+            />
+          </a>
+
+          <!--Margin to ensure compliance with google play badge usage guidelines (https://partnermarketinghub.withgoogle.com/brands/google-play/visual-identity/badge-guidelines/#:~:text=The%20clear%20space%20surrounding%20the%20badge%20must%20be%20equal%20to%20one%2Dquarter%20of%20the%20height%20of%20the%20badge.)-->
+          <a
+            href="https://play.google.com/store/apps/details?id=com.bitwarden.authenticator"
+            target="_blank"
+          >
+            <img
+              src="../../../images/download_google_playstore.svg"
+              alt="Get it on Google Play"
+              max-width="120"
+              height="40"
+              style="margin-left: 10px"
+            />
+          </a>
+        </p>
+        {{ "twoStepAuthenticatorScanCodeV2" | i18n }}
+      </ng-container>
       <hr *ngIf="enabled" />
       <p class="text-center" [ngClass]="{ 'mb-0': enabled }">
         <canvas id="qr"></canvas><br />
@@ -63,7 +78,7 @@
       </p>
       <ng-container *ngIf="!enabled">
         <bit-form-field>
-          <bit-label>3. {{ "twoStepAuthenticatorEnterCode" | i18n }}</bit-label>
+          <bit-label>{{ "twoStepAuthenticatorEnterCodeV2" | i18n }}</bit-label>
           <input bitInput type="text" formControlName="token" appInputVerbatim />
         </bit-form-field>
       </ng-container>

apps/web/src/app/auth/settings/two-factor-authenticator.component.ts

@@ -148,4 +148,29 @@ export class TwoFactorAuthenticatorComponent
   ) {
     return dialogService.open<boolean>(TwoFactorAuthenticatorComponent, config);
   }
+
+  async launchExternalUrl(url: string) {
+    const hostname = new URL(url).hostname;
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: this.i18nService.t("continueToExternalUrlTitle", hostname),
+      content: this.i18nService.t("continueToExternalUrlDesc"),
+      type: "info",
+      acceptButtonText: { key: "continue" },
+    });
+    if (confirmed) {
+      this.platformUtilsService.launchUri(url);
+    }
+  }
+
+  async launchBitwardenUrl(url: string) {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: this.i18nService.t("twoStepContinueToBitwardenUrlTitle"),
+      content: this.i18nService.t("twoStepContinueToBitwardenUrlDesc"),
+      type: "info",
+      acceptButtonText: { key: "continue" },
+    });
+    if (confirmed) {
+      this.platformUtilsService.launchUri(url);
+    }
+  }
 }

apps/web/src/app/auth/settings/two-factor-setup.component.html

@@ -48,11 +48,16 @@
   <ul class="list-group list-group-2fa">
     <li *ngFor="let p of providers" class="list-group-item d-flex align-items-center">
       <div class="logo-2fa d-flex justify-content-center">
-        <img [class]="'mfaType' + p.type" [alt]="p.name + ' logo'" />
+        <auth-two-factor-icon [provider]="p.type" [name]="p.name" />
       </div>
       <div class="mx-4">
         <h3 class="mb-0">
-          {{ p.name }}
+          <div
+            class="font-weight-semibold tw-text-base"
+            [style]="p.enabled || p.premium ? 'display:inline-block' : ''"
+          >
+            {{ p.name }}
+          </div>
           <ng-container *ngIf="p.enabled">
             <i
               class="bwi bwi-check text-success bwi-fw"

apps/web/src/app/auth/settings/two-factor-yubikey.component.html

@@ -39,7 +39,7 @@
               <li>{{ "twoFactorYubikeySupportMobile" | i18n }}</li>
             </ul>
           </app-callout>
-          <img class="float-right mfaType3" alt="YubiKey OTP security key logo" />
+          <img class="float-right mfaType3" alt="Yubico OTP security key logo" />
           <p>{{ "twoFactorYubikeyAdd" | i18n }}:</p>
           <ol>
             <li>{{ "twoFactorYubikeyPlugIn" | i18n }}</li>

apps/web/src/app/auth/two-factor-options.component.html

@@ -5,8 +5,8 @@
   <ng-container bitDialogContent>
     <div *ngFor="let p of providers" class="tw-m-2">
       <div class="tw-flex tw-items-center tw-justify-center tw-gap-4">
-        <div class="tw-flex tw-items-center tw-justify-center tw-min-w-[100px]">
-          <img [class]="'mfaType' + p.type" [alt]="p.name + ' logo'" />
+        <div class="tw-flex tw-items-center tw-justify-center tw-min-w-[120px]">
+          <auth-two-factor-icon [provider]="p.type" />
         </div>
         <div class="tw-flex-1">
           <h3 bitTypography="h3">{{ p.name }}</h3>
@@ -22,8 +22,8 @@
     </div>
     <div class="tw-m-2" (click)="recover()">
       <div class="tw-flex tw-items-center tw-justify-center tw-gap-4">
-        <div class="tw-flex tw-items-center tw-justify-center tw-min-w-[100px]">
-          <img class="recovery-code-img" alt="rc logo" />
+        <div class="tw-flex tw-items-center tw-justify-center tw-min-w-[120px]">
+          <auth-two-factor-icon provider="rc" />
         </div>
         <div class="tw-flex-1">
           <h3 bitTypography="h3">{{ "recoveryCodeTitle" | i18n }}</h3>