[SG-416] Updates to Bitwarden Authenticator (#3045)

* [SG-416] Changed UI for TOTP codes on free plan and added link to get Premium. On browser, changed back action of premium.component in order to reuse on cipher details.

* [SSG-416] PR Fix

* [SSG-416] fix formatting

* [SSG-416] Updated desktop free plan OTP UI

* [SSG-416] noticed a bad div tag making file changes erratic

* [SG-416] fixed label

* [SSG-416] Fix formatting

* [SSG-416] Changed bootstrap classes to tailwind

* [SSG-416] Added premium and upgrade badge back. Muted placeholder totp code colors and button.

* [SSG-416] Change learn more to upgrade label on get premium modal. Fixed navigation for premium.

* [SSG-416] Removed unused image file.

* [SG-416] Changed browser "Premium subscription required" text to be all hyperlink.

* [SG-416] Fixed missing resource on browser

* [SG-416] Code format with lint

apps/desktop/src/app/vault/view.component.html

@@ -100,7 +100,7 @@
           <div
             class="box-content-row box-content-row-flex totp"
             [ngClass]="{ low: totpLow }"
-            *ngIf="cipher.login.totp && totpCode"
+            *ngIf="cipher.login.totp && totpCode && canAccessPremium"
           >
             <div class="row-main">
               <span
@@ -138,6 +138,19 @@
               </button>
             </div>
           </div>
+          <div
+            class="box-content-row box-content-row-flex totp"
+            *ngIf="cipher.login.totp && !canAccessPremium"
+          >
+            <div class="row-main">
+              <span class="row-label">{{ "verificationCodeTotp" | i18n }}</span>
+              <span class="row-label">
+                <a [routerLink]="" (click)="showGetPremium()"
+                  >{{ "premiumSubcriptionRequired" | i18n }}
+                </a>
+              </span>
+            </div>
+          </div>
         </div>
         <!-- Card -->
         <div *ngIf="cipher.card">

apps/desktop/src/app/vault/view.component.ts

@@ -115,4 +115,10 @@ export class ViewComponent extends BaseViewComponent implements OnChanges {
       });
     }
   }
+
+  showGetPremium() {
+    if (!this.canAccessPremium) {
+      this.messagingService.send("premiumRequired");
+    }
+  }
 }

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

@@ -1979,6 +1979,9 @@
   "apiKey": {
     "message": "API Key"
   },
+  "premiumSubcriptionRequired": {
+    "message": "Premium subscription required"
+  },
   "organizationIsDisabled": {
     "message": "Organization is disabled."
   },