From ea72552599cdff303209f47bdbfba82729176eb5 Mon Sep 17 00:00:00 2001 From: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com> Date: Mon, 29 Jul 2024 12:57:54 -0400 Subject: [PATCH] Auth/PM-7077 - Browser Extension - UI Refresh - Account Switcher Component (#10268) * PM-7077 - (1) Convert app-header to standalone (2) Convert account-switcher to standalone (3) Start wiring up extension refresh feature flag and fixing deps. * PM-7077 WIP * PM-7077 - Mostly get account switcher and account component converted to CL components. * PM-7077 - Apply semibold classes to section headers to match storybook * PM-7077 - AccountSwitcher - (1) Fix margin per design call (2) Add missing lockAll call * PM-7077 - Remove test code. --- .../account-switcher.component.html | 237 +++++++++++++----- .../account-switcher.component.ts | 45 +++- .../account-switching/account.component.html | 161 ++++++++---- .../account-switching/account.component.ts | 5 +- .../src/platform/popup/header.component.ts | 4 + apps/browser/src/popup/app.module.ts | 5 +- 6 files changed, 326 insertions(+), 131 deletions(-) diff --git a/apps/browser/src/auth/popup/account-switching/account-switcher.component.html b/apps/browser/src/auth/popup/account-switching/account-switcher.component.html index 806dae084d..8c1c40a1b5 100644 --- a/apps/browser/src/auth/popup/account-switching/account-switcher.component.html +++ b/apps/browser/src/auth/popup/account-switching/account-switcher.component.html @@ -1,78 +1,177 @@ - -
- -
-
{{ "switchAccounts" | i18n }}
- + + + + + + + + -
- -
-
-
-
-
    + + -
  • - -
    • -
    - {{ "availableAccounts" | i18n }} +
    + +
    + + +

    {{ "availableAccounts" | i18n }}

    +     + +
    +
    -
  • - -
    • -
- -

- {{ "accountLimitReached" | i18n }} -

-
+ + +

+ {{ "accountLimitReached" | i18n }} +

+ +
-
{{ "options" | i18n }}
-
- + + + + + + + + +
+ + + + + +
+ +
+
{{ "switchAccounts" | i18n }}
+ + +
+ +
+
+
+
+
    + +
  • + +
    • +
    + {{ "availableAccounts" | i18n }} +
    +
  • + +
    • +     +
+ +

- - {{ "lockNow" | i18n }} - - - + {{ "accountLimitReached" | i18n }} +

+
+ +
+
{{ "options" | i18n }}
+
+ + + +
-
-
+ + diff --git a/apps/browser/src/auth/popup/account-switching/account-switcher.component.ts b/apps/browser/src/auth/popup/account-switching/account-switcher.component.ts index fbb9075156..72b939acf7 100644 --- a/apps/browser/src/auth/popup/account-switching/account-switcher.component.ts +++ b/apps/browser/src/auth/popup/account-switching/account-switcher.component.ts @@ -1,22 +1,54 @@ -import { Location } from "@angular/common"; +import { CommonModule, Location } from "@angular/common"; import { Component, OnDestroy, OnInit } from "@angular/core"; import { Router } from "@angular/router"; import { Subject, firstValueFrom, map, of, switchMap, takeUntil } from "rxjs"; +import { JslibModule } from "@bitwarden/angular/jslib.module"; import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service"; import { VaultTimeoutService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout.service"; import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service"; import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status"; +import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum"; -import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service"; +import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; import { UserId } from "@bitwarden/common/types/guid"; -import { DialogService } from "@bitwarden/components"; +import { + AvatarModule, + ButtonModule, + DialogService, + ItemModule, + SectionComponent, + SectionHeaderComponent, +} from "@bitwarden/components"; +import { PopOutComponent } from "../../../platform/popup/components/pop-out.component"; +import { HeaderComponent } from "../../../platform/popup/header.component"; +import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component"; +import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component"; + +import { AccountComponent } from "./account.component"; +import { CurrentAccountComponent } from "./current-account.component"; import { AccountSwitcherService } from "./services/account-switcher.service"; @Component({ + standalone: true, templateUrl: "account-switcher.component.html", + imports: [ + CommonModule, + JslibModule, + ButtonModule, + ItemModule, + AvatarModule, + PopupPageComponent, + PopupHeaderComponent, + HeaderComponent, + PopOutComponent, + CurrentAccountComponent, + AccountComponent, + SectionComponent, + SectionHeaderComponent, + ], }) export class AccountSwitcherComponent implements OnInit, OnDestroy { readonly lockedStatus = AuthenticationStatus.Locked; @@ -24,17 +56,18 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy { loading = false; activeUserCanLock = false; + extensionRefreshFlag = false; constructor( private accountSwitcherService: AccountSwitcherService, private accountService: AccountService, private vaultTimeoutService: VaultTimeoutService, - private messagingService: MessagingService, private dialogService: DialogService, private location: Location, private router: Router, private vaultTimeoutSettingsService: VaultTimeoutSettingsService, private authService: AuthService, + private configService: ConfigService, ) {} get accountLimit() { @@ -55,6 +88,10 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy { ); async ngOnInit() { + this.extensionRefreshFlag = await this.configService.getFeatureFlag( + FeatureFlag.ExtensionRefresh, + ); + const availableVaultTimeoutActions = await firstValueFrom( this.vaultTimeoutSettingsService.availableVaultTimeoutActions$(), ); diff --git a/apps/browser/src/auth/popup/account-switching/account.component.html b/apps/browser/src/auth/popup/account-switching/account.component.html index f1657ff3c2..d062c67a2e 100644 --- a/apps/browser/src/auth/popup/account-switching/account.component.html +++ b/apps/browser/src/auth/popup/account-switching/account.component.html @@ -1,54 +1,109 @@ - + + + + + {{ "activeAccount" | i18n }}: + + + {{ "switchToAccount" | i18n }} + +
+ {{ account.email }} +
+ + +
+ {{ "hostedAt" | i18n }} + {{ account.server }} +
+ +
+ ( + {{ + status.text + }} + ) +
+ + + + + + + + + + + + + + + + diff --git a/apps/browser/src/auth/popup/account-switching/account.component.ts b/apps/browser/src/auth/popup/account-switching/account.component.ts index 3f152d61b9..d54d6fe0e2 100644 --- a/apps/browser/src/auth/popup/account-switching/account.component.ts +++ b/apps/browser/src/auth/popup/account-switching/account.component.ts @@ -5,7 +5,7 @@ import { JslibModule } from "@bitwarden/angular/jslib.module"; import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { LogService } from "@bitwarden/common/platform/abstractions/log.service"; -import { AvatarModule } from "@bitwarden/components"; +import { AvatarModule, ItemModule } from "@bitwarden/components"; import { AccountSwitcherService, AvailableAccount } from "./services/account-switcher.service"; @@ -13,10 +13,11 @@ import { AccountSwitcherService, AvailableAccount } from "./services/account-swi standalone: true, selector: "auth-account", templateUrl: "account.component.html", - imports: [CommonModule, JslibModule, AvatarModule], + imports: [CommonModule, JslibModule, AvatarModule, ItemModule], }) export class AccountComponent { @Input() account: AvailableAccount; + @Input() extensionRefreshFlag: boolean = false; @Output() loading = new EventEmitter(); constructor( diff --git a/apps/browser/src/platform/popup/header.component.ts b/apps/browser/src/platform/popup/header.component.ts index 1373837866..cba9f20b62 100644 --- a/apps/browser/src/platform/popup/header.component.ts +++ b/apps/browser/src/platform/popup/header.component.ts @@ -1,14 +1,18 @@ +import { CommonModule } from "@angular/common"; import { Component, Input } from "@angular/core"; import { Observable, map, of, switchMap } from "rxjs"; import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service"; import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status"; +import { CurrentAccountComponent } from "../../auth/popup/account-switching/current-account.component"; import { enableAccountSwitching } from "../flags"; @Component({ selector: "app-header", templateUrl: "header.component.html", + standalone: true, + imports: [CommonModule, CurrentAccountComponent], }) export class HeaderComponent { @Input() noTheme = false; diff --git a/apps/browser/src/popup/app.module.ts b/apps/browser/src/popup/app.module.ts index d3caef579c..2165cf6fce 100644 --- a/apps/browser/src/popup/app.module.ts +++ b/apps/browser/src/popup/app.module.ts @@ -17,7 +17,6 @@ import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe" import { UserVerificationDialogComponent } from "@bitwarden/auth/angular"; import { AvatarModule, ButtonModule, ToastModule } from "@bitwarden/components"; -import { AccountSwitcherComponent } from "../auth/popup/account-switching/account-switcher.component"; import { AccountComponent } from "../auth/popup/account-switching/account.component"; import { CurrentAccountComponent } from "../auth/popup/account-switching/current-account.component"; import { EnvironmentComponent } from "../auth/popup/environment.component"; @@ -123,6 +122,7 @@ import "../platform/popup/locales"; PopupTabNavigationComponent, PopupFooterComponent, PopupHeaderComponent, + HeaderComponent, UserVerificationDialogComponent, CurrentAccountComponent, ], @@ -145,7 +145,6 @@ import "../platform/popup/locales"; FolderAddEditComponent, FoldersComponent, VaultFilterComponent, - HeaderComponent, HintComponent, HomeComponent, LockComponent, @@ -184,8 +183,8 @@ import "../platform/popup/locales"; Fido2Component, AutofillV1Component, EnvironmentSelectorComponent, - AccountSwitcherComponent, ], + exports: [], providers: [CurrencyPipe, DatePipe], bootstrap: [AppComponent], })