From c4f9c2cca6dab48acecf0afe72377920b40c5e3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Filipe=20da=20Silva=20Bispo?= Date: Tue, 9 Aug 2022 19:03:02 +0100 Subject: [PATCH] [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/browser/src/_locales/en/messages.json | 3 + .../src/popup/settings/premium.component.html | 2 +- .../src/popup/settings/premium.component.ts | 7 +- .../src/popup/vault/view.component.html | 16 ++++- .../desktop/src/app/vault/view.component.html | 15 +++- apps/desktop/src/app/vault/view.component.ts | 6 ++ apps/desktop/src/locales/en/messages.json | 3 + apps/web/src/app/app.component.ts | 2 +- .../web/src/app/vault/add-edit.component.html | 64 +++++++++++++----- apps/web/src/app/vault/add-edit.component.ts | 11 +++ apps/web/src/images/totp-countdown.png | Bin 950 -> 0 bytes apps/web/src/locales/en/messages.json | 3 + apps/web/src/scss/modals.scss | 19 ++++++ 13 files changed, 130 insertions(+), 21 deletions(-) delete mode 100644 apps/web/src/images/totp-countdown.png diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index b38a984dd9..ac25f4cf29 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -1967,6 +1967,9 @@ }, "ssoKeyConnectorError": { "message": "Key Connector error: make sure Key Connector is available and working correctly." + }, + "premiumSubcriptionRequired": { + "message": "Premium subscription required" }, "organizationIsDisabled": { "message": "Organization is disabled." diff --git a/apps/browser/src/popup/settings/premium.component.html b/apps/browser/src/popup/settings/premium.component.html index fad784da6b..01ac925813 100644 --- a/apps/browser/src/popup/settings/premium.component.html +++ b/apps/browser/src/popup/settings/premium.component.html @@ -1,6 +1,6 @@
- diff --git a/apps/browser/src/popup/settings/premium.component.ts b/apps/browser/src/popup/settings/premium.component.ts index b821391924..d44fdb09a7 100644 --- a/apps/browser/src/popup/settings/premium.component.ts +++ b/apps/browser/src/popup/settings/premium.component.ts @@ -1,4 +1,4 @@ -import { CurrencyPipe } from "@angular/common"; +import { CurrencyPipe, Location } from "@angular/common"; import { Component } from "@angular/core"; import { PremiumComponent as BasePremiumComponent } from "@bitwarden/angular/components/premium.component"; @@ -21,6 +21,7 @@ export class PremiumComponent extends BasePremiumComponent { apiService: ApiService, stateService: StateService, logService: LogService, + private location: Location, private currencyPipe: CurrencyPipe ) { super(i18nService, platformUtilsService, apiService, logService, stateService); @@ -32,4 +33,8 @@ export class PremiumComponent extends BasePremiumComponent { this.priceString = this.priceString.replace("%price%", thePrice); } } + + goBack() { + this.location.back(); + } } diff --git a/apps/browser/src/popup/vault/view.component.html b/apps/browser/src/popup/vault/view.component.html index feb1760666..e168879dd0 100644 --- a/apps/browser/src/popup/vault/view.component.html +++ b/apps/browser/src/popup/vault/view.component.html @@ -139,7 +139,7 @@
+ +
+
+ {{ "verificationCodeTotp" | i18n }} + + + {{ "premiumSubcriptionRequired" | i18n }} + + +
+
diff --git a/apps/desktop/src/app/vault/view.component.html b/apps/desktop/src/app/vault/view.component.html index a033cdd827..5038e4b984 100644 --- a/apps/desktop/src/app/vault/view.component.html +++ b/apps/desktop/src/app/vault/view.component.html @@ -100,7 +100,7 @@
+
+
+ {{ "verificationCodeTotp" | i18n }} + + {{ "premiumSubcriptionRequired" | i18n }} + + +
+
diff --git a/apps/desktop/src/app/vault/view.component.ts b/apps/desktop/src/app/vault/view.component.ts index eb58df0d1e..a3125c02e7 100644 --- a/apps/desktop/src/app/vault/view.component.ts +++ b/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"); + } + } } diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json index 170ddb7214..e399281c06 100644 --- a/apps/desktop/src/locales/en/messages.json +++ b/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." }, diff --git a/apps/web/src/app/app.component.ts b/apps/web/src/app/app.component.ts index 381fd55112..ef80dc5e73 100644 --- a/apps/web/src/app/app.component.ts +++ b/apps/web/src/app/app.component.ts @@ -147,7 +147,7 @@ export class AppComponent implements OnDestroy, OnInit { const premiumConfirmed = await this.platformUtilsService.showDialog( this.i18nService.t("premiumRequiredDesc"), this.i18nService.t("premiumRequired"), - this.i18nService.t("learnMore"), + this.i18nService.t("upgrade"), this.i18nService.t("cancel") ); if (premiumConfirmed) { diff --git a/apps/web/src/app/vault/add-edit.component.html b/apps/web/src/app/vault/add-edit.component.html index 54b707c9f6..d7aa44f877 100644 --- a/apps/web/src/app/vault/add-edit.component.html +++ b/apps/web/src/app/vault/add-edit.component.html @@ -166,8 +166,8 @@
-
-
+
+
-
-
- +
+ + 15 + + + + + + + + + >--- --- + +
+
-
- +
+ {{ totpSec }} @@ -225,16 +255,18 @@ - {{ - totpCodeFormatted - }} + {{ totpCodeFormatted }}
diff --git a/apps/web/src/app/vault/add-edit.component.ts b/apps/web/src/app/vault/add-edit.component.ts index 4b89162803..0b7642eb97 100644 --- a/apps/web/src/app/vault/add-edit.component.ts +++ b/apps/web/src/app/vault/add-edit.component.ts @@ -152,6 +152,17 @@ export class AddEditComponent extends BaseAddEditComponent { }); } + showGetPremium() { + if (this.canAccessPremium) { + return; + } + if (this.cipher.organizationUseTotp) { + this.upgradeOrganization(); + } else { + this.premiumRequired(); + } + } + viewHistory() { this.viewingPasswordHistory = !this.viewingPasswordHistory; } diff --git a/apps/web/src/images/totp-countdown.png b/apps/web/src/images/totp-countdown.png deleted file mode 100644 index ef07c49b98b91be2047b4f52dd308c520253d477..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 950 zcmeAS@N?(olHy`uVBq!ia0vp^Z9pu?!3-qtO`6sVq;>`Pgt-3y|DPdkCXiqNVqY*L zVLg=lzwiGP2Hq(Q43WziLRT>)EoX>W{(mn6!`}Z4QA-&@7c<1JUTJH*$fN| z|1-?~4^jz|TB^h_L5ZRGP9+0FC6KTH(hO2fKn??g1w+JQkebLv3=vB}>LV93go7Bz z3m6!RkIeUAU?@1w5Vf5lY6VDH_)-Rs`2`FGKuHe<51=Ga8pLE^U|d!(0Z7@E1o;Is zuySy4@d*eC2?+~}h)PMx%gd{1YU+W2v9YPCH3Zn&IXQcHc=`sR0oHX^4h#%Txt=bL zAr-fdPQP0<%R$7IKkMQ)MJ-V&&nVA&k?eM_&08~--v5s(z0>+LVaeIv4S5bm4|Tp- zHgr9-ic)jf)U$4>@tm1XowF=2aqeTf)@UxkaDy>RM^=DQ+uwviL&)>>9j1LEJKmdJ zxZ`!&C1BmvMX|Rle=z9sG@CMPv6Am=%9p<)cWUA{jtxSy8xQd{ZfS42enCqkv)Axi z(KOz&tuJ5Xezxg%RrBBZ%s`a0|Mv5V5@J6)Yv-?iZX;DR@!?hXhCff_7a9Hfu*Kx+ z)EhbqtD;h(6!o~|rng6_rgr{1Wg;9Yv+Pe!_KQzx+S(OP-G{GF^qArK{_@NE*acRm zlkW$ISs2#zM0V+kR#B>zbnc79mT#-ONj_VK-G&yyP$-~6m`=5dw8QI8F+QP-{|2vt3Q z*3;&f@@Z*)_J==}VQ;3zZjU(=5BD;&)_qj)BGew&wO*zEk9u9X`IO=Gf}9 zDUMscKA-yWEasPf??vgi2L+e9rJC)z)nU|duk8MFyVM)Z);v*1Vs5QDI9I;*-Uc`2 zJKw8sTfR>zK0Iq-ir}e&xU*MhS3dY zGtn;0ZF;6jwu#-DSk@I)mw$?+N~}3~ddr~;o>Tj8iD$AzoU)wrUc6@OO{toTw||J& zUEI9qW*=j?j*YS8^xl@0H{zKx7YcZuzQb6zS9! .align-items-center {