Merge branch 'main' of github.com:bitwarden/clients

apps/browser/src/_locales/en/messages.json

@@ -3035,6 +3035,9 @@
   "accountSecurity": {
     "message": "Account security"
   },
+  "notifications": {
+    "message": "Notifications"
+  }, 
   "appearance": {
     "message": "Appearance"
   },

apps/browser/src/auth/guards/fido2-auth.guard.ts

@@ -26,7 +26,9 @@ export const fido2AuthGuard: CanActivateFn = async (
   const authStatus = await authService.getAuthStatus();
 
   if (authStatus === AuthenticationStatus.Locked) {
-    routerService.setPreviousUrl(state.url);
+    // Appending fromLock=true to the query params to indicate that the user is being redirected from the lock screen, this is used for user verification.
+    const previousUrl = `${state.url}&fromLock=true`;
+    routerService.setPreviousUrl(previousUrl);
     return router.createUrlTree(["/lock"], { queryParams: route.queryParams });
   }
 

apps/browser/src/autofill/popup/settings/excluded-domains.component.html

@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="submit()">
   <header>
     <div class="left">
-      <button type="button" routerLink="/tabs/settings">
+      <button type="button" routerLink="/notifications">
         <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
         <span>{{ "back" | i18n }}</span>
       </button>

apps/browser/src/autofill/popup/settings/excluded-domains.component.ts

@@ -8,8 +8,8 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 
-import { BrowserApi } from "../../platform/browser/browser-api";
-import { enableAccountSwitching } from "../../platform/flags";
+import { BrowserApi } from "../../../platform/browser/browser-api";
+import { enableAccountSwitching } from "../../../platform/flags";
 
 interface ExcludedDomain {
   uri: string;

apps/browser/src/autofill/popup/settings/notifications.component.html

@@ -0,0 +1,89 @@
+<header>
+  <div class="left">
+    <button type="button" routerLink="/tabs/settings">
+      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
+      <span>{{ "back" | i18n }}</span>
+    </button>
+  </div>
+  <h1 class="center">
+    <span class="title">{{ "notifications" | i18n }}</span>
+  </h1>
+  <div class="right">
+    <app-pop-out></app-pop-out>
+  </div>
+</header>
+<main tabindex="-1">
+  <div class="box">
+    <div class="box-content">
+      <div class="box-content-row box-content-row-checkbox" appBoxRow>
+        <label for="use-passkeys">{{ "enableUsePasskeys" | i18n }}</label>
+        <input
+          id="use-passkeys"
+          type="checkbox"
+          aria-describedby="use-passkeysHelp"
+          (change)="updateEnablePasskeys()"
+          [(ngModel)]="enablePasskeys"
+        />
+      </div>
+    </div>
+    <div id="use-passkeysHelp" class="box-footer">
+      {{ "usePasskeysDesc" | i18n }}
+    </div>
+  </div>
+  <div class="box">
+    <div class="box-content">
+      <div class="box-content-row box-content-row-checkbox" appBoxRow>
+        <label for="addlogin-notification-bar">{{ "enableAddLoginNotification" | i18n }}</label>
+        <input
+          id="addlogin-notification-bar"
+          type="checkbox"
+          aria-describedby="addlogin-notification-barHelp"
+          (change)="updateAddLoginNotification()"
+          [(ngModel)]="enableAddLoginNotification"
+        />
+      </div>
+    </div>
+    <div id="addlogin-notification-barHelp" class="box-footer">
+      {{
+        accountSwitcherEnabled
+          ? ("addLoginNotificationDescAlt" | i18n)
+          : ("addLoginNotificationDesc" | i18n)
+      }}
+    </div>
+  </div>
+  <div class="box">
+    <div class="box-content">
+      <div class="box-content-row box-content-row-checkbox" appBoxRow>
+        <label for="changedpass-notification-bar">{{
+          "enableChangedPasswordNotification" | i18n
+        }}</label>
+        <input
+          id="changedpass-notification-bar"
+          type="checkbox"
+          aria-describedby="changedpass-notification-barHelp"
+          (change)="updateChangedPasswordNotification()"
+          [(ngModel)]="enableChangedPasswordNotification"
+        />
+      </div>
+    </div>
+    <div id="changedpass-notification-barHelp" class="box-footer">
+      {{
+        accountSwitcherEnabled
+          ? ("changedPasswordNotificationDescAlt" | i18n)
+          : ("changedPasswordNotificationDesc" | i18n)
+      }}
+    </div>
+  </div>
+  <div class="box list">
+    <div class="box-content single-line">
+      <button
+        type="button"
+        class="box-content-row box-content-row-flex text-default"
+        routerLink="/excluded-domains"
+      >
+        <div class="row-main">{{ "excludedDomains" | i18n }}</div>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+</main>

apps/browser/src/autofill/popup/settings/notifications.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit } from "@angular/core";
+import { firstValueFrom } from "rxjs";
+
+import { UserNotificationSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/user-notification-settings.service";
+import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
+
+import { enableAccountSwitching } from "../../../platform/flags";
+
+@Component({
+  selector: "autofill-notification-settings",
+  templateUrl: "notifications.component.html",
+})
+export class NotifcationsSettingsComponent implements OnInit {
+  enableAddLoginNotification = false;
+  enableChangedPasswordNotification = false;
+  enablePasskeys = true;
+  accountSwitcherEnabled = false;
+
+  constructor(
+    private userNotificationSettingsService: UserNotificationSettingsServiceAbstraction,
+    private vaultSettingsService: VaultSettingsService,
+  ) {
+    this.accountSwitcherEnabled = enableAccountSwitching();
+  }
+
+  async ngOnInit() {
+    this.enableAddLoginNotification = await firstValueFrom(
+      this.userNotificationSettingsService.enableAddedLoginPrompt$,
+    );
+
+    this.enableChangedPasswordNotification = await firstValueFrom(
+      this.userNotificationSettingsService.enableChangedPasswordPrompt$,
+    );
+
+    this.enablePasskeys = await firstValueFrom(this.vaultSettingsService.enablePasskeys$);
+  }
+
+  async updateAddLoginNotification() {
+    await this.userNotificationSettingsService.setEnableAddedLoginPrompt(
+      this.enableAddLoginNotification,
+    );
+  }
+
+  async updateChangedPasswordNotification() {
+    await this.userNotificationSettingsService.setEnableChangedPasswordPrompt(
+      this.enableChangedPasswordNotification,
+    );
+  }
+
+  async updateEnablePasskeys() {
+    await this.vaultSettingsService.setEnablePasskeys(this.enablePasskeys);
+  }
+}

apps/browser/src/platform/popup/components/pop-out.component.ts

@@ -1,12 +1,16 @@
+import { CommonModule } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
 
+import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
-import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
+import BrowserPopupUtils from "../browser-popup-utils";
 
 @Component({
   selector: "app-pop-out",
   templateUrl: "pop-out.component.html",
+  standalone: true,
+  imports: [CommonModule, JslibModule],
 })
 export class PopOutComponent implements OnInit {
   @Input() show = true;
@@ -24,9 +28,7 @@ export class PopOutComponent implements OnInit {
     }
   }
 
-  expand() {
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    BrowserPopupUtils.openCurrentPagePopout(window);
+  async expand() {
+    await BrowserPopupUtils.openCurrentPagePopout(window);
   }
 }

apps/browser/src/platform/services/platform-utils/browser-platform-utils.service.ts

@@ -163,6 +163,10 @@ export abstract class BrowserPlatformUtilsService implements PlatformUtilsServic
    * the view is open.
    */
   async isViewOpen(): Promise<boolean> {
+    if (this.isSafari()) {
+      // Query views on safari since chrome.runtime.sendMessage does not timeout and will hang.
+      return BrowserApi.isPopupOpen();
+    }
     return Boolean(await BrowserApi.sendMessageWithResponse("checkVaultPopupHeartbeat"));
   }
 

apps/browser/src/popup/app-routing.animations.ts

@@ -196,9 +196,6 @@ export const routerTransition = trigger("routerTransition", [
   transition("vault-settings => sync", inSlideLeft),
   transition("sync => vault-settings", outSlideRight),
 
-  transition("tabs => excluded-domains", inSlideLeft),
-  transition("excluded-domains => tabs", outSlideRight),
-
   transition("tabs => options", inSlideLeft),
   transition("options => tabs", outSlideRight),
 
@@ -223,6 +220,13 @@ export const routerTransition = trigger("routerTransition", [
   transition("tabs => edit-send, send-type => edit-send", inSlideUp),
   transition("edit-send => tabs, edit-send => send-type", outSlideDown),
 
+  // Notification settings
+  transition("tabs => notifications", inSlideLeft),
+  transition("notifications => tabs", outSlideRight),
+
+  transition("notifications => excluded-domains", inSlideLeft),
+  transition("excluded-domains => notifications", outSlideRight),
+
   transition("tabs => autofill", inSlideLeft),
   transition("autofill => tabs", outSlideRight),
 

apps/browser/src/popup/app-routing.module.ts

@@ -27,6 +27,8 @@ import { TwoFactorOptionsComponent } from "../auth/popup/two-factor-options.comp
 import { TwoFactorComponent } from "../auth/popup/two-factor.component";
 import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component";
 import { AutofillComponent } from "../autofill/popup/settings/autofill.component";
+import { ExcludedDomainsComponent } from "../autofill/popup/settings/excluded-domains.component";
+import { NotifcationsSettingsComponent } from "../autofill/popup/settings/notifications.component";
 import { PremiumComponent } from "../billing/popup/settings/premium.component";
 import BrowserPopupUtils from "../platform/popup/browser-popup-utils";
 import { GeneratorComponent } from "../tools/popup/generator/generator.component";
@@ -56,7 +58,6 @@ import { VaultSettingsComponent } from "../vault/popup/settings/vault-settings.c
 
 import { extensionRefreshRedirect, extensionRefreshSwap } from "./extension-refresh-route-utils";
 import { debounceNavigationGuard } from "./services/debounce-navigation.service";
-import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
 import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component";
 import { OptionsComponent } from "./settings/options.component";
 import { TabsV2Component } from "./tabs-v2.component";
@@ -256,6 +257,12 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     data: { state: "account-security" },
   },
+  {
+    path: "notifications",
+    component: NotifcationsSettingsComponent,
+    canActivate: [AuthGuard],
+    data: { state: "notifications" },
+  },
   {
     path: "vault-settings",
     component: VaultSettingsComponent,

apps/browser/src/popup/app.module.ts

@@ -14,6 +14,7 @@ import { EnvironmentSelectorComponent } from "@bitwarden/angular/auth/components
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe";
 import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe";
+import { UserVerificationDialogComponent } from "@bitwarden/auth/angular";
 import { AvatarModule, ButtonModule, ToastModule } from "@bitwarden/components";
 import { ExportScopeCalloutComponent } from "@bitwarden/vault-export-ui";
 
@@ -37,7 +38,10 @@ import { TwoFactorOptionsComponent } from "../auth/popup/two-factor-options.comp
 import { TwoFactorComponent } from "../auth/popup/two-factor.component";
 import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component";
 import { AutofillComponent } from "../autofill/popup/settings/autofill.component";
+import { ExcludedDomainsComponent } from "../autofill/popup/settings/excluded-domains.component";
+import { NotifcationsSettingsComponent } from "../autofill/popup/settings/notifications.component";
 import { PremiumComponent } from "../billing/popup/settings/premium.component";
+import { PopOutComponent } from "../platform/popup/components/pop-out.component";
 import { HeaderComponent } from "../platform/popup/header.component";
 import { PopupFooterComponent } from "../platform/popup/layout/popup-footer.component";
 import { PopupHeaderComponent } from "../platform/popup/layout/popup-header.component";
@@ -78,10 +82,8 @@ import { VaultSettingsComponent } from "../vault/popup/settings/vault-settings.c
 
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
-import { PopOutComponent } from "./components/pop-out.component";
 import { UserVerificationComponent } from "./components/user-verification.component";
 import { ServicesModule } from "./services/services.module";
-import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
 import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component";
 import { OptionsComponent } from "./settings/options.component";
 import { TabsV2Component } from "./tabs-v2.component";
@@ -116,10 +118,12 @@ import "../platform/popup/locales";
     AccountComponent,
     ButtonModule,
     ExportScopeCalloutComponent,
+    PopOutComponent,
     PopupPageComponent,
     PopupTabNavigationComponent,
     PopupFooterComponent,
     PopupHeaderComponent,
+    UserVerificationDialogComponent,
   ],
   declarations: [
     ActionButtonsComponent,
@@ -149,11 +153,11 @@ import "../platform/popup/locales";
     LoginViaAuthRequestComponent,
     LoginDecryptionOptionsComponent,
     OptionsComponent,
+    NotifcationsSettingsComponent,
     AppearanceComponent,
     GeneratorComponent,
     PasswordGeneratorHistoryComponent,
     PasswordHistoryComponent,
-    PopOutComponent,
     PremiumComponent,
     RegisterComponent,
     SendAddEditComponent,

apps/browser/src/popup/services/services.module.ts

@@ -87,6 +87,7 @@ import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.serv
 import { TotpService as TotpServiceAbstraction } from "@bitwarden/common/vault/abstractions/totp.service";
 import { TotpService } from "@bitwarden/common/vault/services/totp.service";
 import { DialogService, ToastService } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { UnauthGuardService } from "../../auth/popup/services";
 import { AutofillService as AutofillServiceAbstraction } from "../../autofill/services/abstractions/autofill.service";
@@ -117,6 +118,7 @@ import { ForegroundMemoryStorageService } from "../../platform/storage/foregroun
 import { fromChromeRuntimeMessaging } from "../../platform/utils/from-chrome-runtime-messaging";
 import { BrowserSendStateService } from "../../tools/popup/services/browser-send-state.service";
 import { FilePopoutUtilsService } from "../../tools/popup/services/file-popout-utils.service";
+import { Fido2UserVerificationService } from "../../vault/services/fido2-user-verification.service";
 import { VaultBrowserStateService } from "../../vault/services/vault-browser-state.service";
 import { VaultFilterService } from "../../vault/services/vault-filter.service";
 
@@ -600,6 +602,11 @@ const safeProviders: SafeProvider[] = [
     provide: CLIENT_TYPE,
     useValue: ClientType.Browser,
   }),
+  safeProvider({
+    provide: Fido2UserVerificationService,
+    useClass: Fido2UserVerificationService,
+    deps: [PasswordRepromptService, UserVerificationService, DialogService],
+  }),
 ];
 
 @NgModule({

apps/browser/src/popup/settings/options.component.html

@@ -60,67 +60,6 @@
       </div>
       <div id="totpHelp" class="box-footer">{{ "disableAutoTotpCopyDesc" | i18n }}</div>
     </div>
-    <div class="box">
-      <div class="box-content">
-        <div class="box-content-row box-content-row-checkbox" appBoxRow>
-          <label for="addlogin-notification-bar">{{ "enableAddLoginNotification" | i18n }}</label>
-          <input
-            id="addlogin-notification-bar"
-            type="checkbox"
-            aria-describedby="addlogin-notification-barHelp"
-            (change)="updateAddLoginNotification()"
-            [(ngModel)]="enableAddLoginNotification"
-          />
-        </div>
-      </div>
-      <div id="addlogin-notification-barHelp" class="box-footer">
-        {{
-          accountSwitcherEnabled
-            ? ("addLoginNotificationDescAlt" | i18n)
-            : ("addLoginNotificationDesc" | i18n)
-        }}
-      </div>
-    </div>
-    <div class="box">
-      <div class="box-content">
-        <div class="box-content-row box-content-row-checkbox" appBoxRow>
-          <label for="changedpass-notification-bar">{{
-            "enableChangedPasswordNotification" | i18n
-          }}</label>
-          <input
-            id="changedpass-notification-bar"
-            type="checkbox"
-            aria-describedby="changedpass-notification-barHelp"
-            (change)="updateChangedPasswordNotification()"
-            [(ngModel)]="enableChangedPasswordNotification"
-          />
-        </div>
-      </div>
-      <div id="changedpass-notification-barHelp" class="box-footer">
-        {{
-          accountSwitcherEnabled
-            ? ("changedPasswordNotificationDescAlt" | i18n)
-            : ("changedPasswordNotificationDesc" | i18n)
-        }}
-      </div>
-    </div>
-    <div class="box">
-      <div class="box-content">
-        <div class="box-content-row box-content-row-checkbox" appBoxRow>
-          <label for="use-passkeys">{{ "enableUsePasskeys" | i18n }}</label>
-          <input
-            id="use-passkeys"
-            type="checkbox"
-            aria-describedby="use-passkeysHelp"
-            (change)="updateEnablePasskeys()"
-            [(ngModel)]="enablePasskeys"
-          />
-        </div>
-      </div>
-      <div id="use-passkeysHelp" class="box-footer">
-        {{ "usePasskeysDesc" | i18n }}
-      </div>
-    </div>
     <div class="box">
       <div class="box-content">
         <div class="box-content-row box-content-row-checkbox" appBoxRow>

apps/browser/src/popup/settings/options.component.ts

@@ -3,7 +3,6 @@ import { firstValueFrom } from "rxjs";
 
 import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
-import { UserNotificationSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/user-notification-settings.service";
 import { ClearClipboardDelaySetting } from "@bitwarden/common/autofill/types";
 import {
   UriMatchStrategy,
@@ -25,9 +24,6 @@ export class OptionsComponent implements OnInit {
   autoFillOnPageLoadOptions: any[];
   enableAutoTotpCopy = false; // TODO: Does it matter if this is set to false or true?
   enableContextMenuItem = false;
-  enableAddLoginNotification = false;
-  enableChangedPasswordNotification = false;
-  enablePasskeys = true;
   showCardsCurrentTab = false;
   showIdentitiesCurrentTab = false;
   showClearClipboard = true;
@@ -36,13 +32,11 @@ export class OptionsComponent implements OnInit {
   clearClipboard: ClearClipboardDelaySetting;
   clearClipboardOptions: any[];
   showGeneral = true;
-  showAutofill = true;
   showDisplay = true;
   accountSwitcherEnabled = false;
 
   constructor(
     private messagingService: MessagingService,
-    private userNotificationSettingsService: UserNotificationSettingsServiceAbstraction,
     private autofillSettingsService: AutofillSettingsServiceAbstraction,
     private domainSettingsService: DomainSettingsService,
     i18nService: I18nService,
@@ -82,14 +76,6 @@ export class OptionsComponent implements OnInit {
       this.autofillSettingsService.autofillOnPageLoadDefault$,
     );
 
-    this.enableAddLoginNotification = await firstValueFrom(
-      this.userNotificationSettingsService.enableAddedLoginPrompt$,
-    );
-
-    this.enableChangedPasswordNotification = await firstValueFrom(
-      this.userNotificationSettingsService.enableChangedPasswordPrompt$,
-    );
-
     this.enableContextMenuItem = await firstValueFrom(
       this.autofillSettingsService.enableContextMenu$,
     );
@@ -101,8 +87,6 @@ export class OptionsComponent implements OnInit {
 
     this.enableAutoTotpCopy = await firstValueFrom(this.autofillSettingsService.autoCopyTotp$);
 
-    this.enablePasskeys = await firstValueFrom(this.vaultSettingsService.enablePasskeys$);
-
     const defaultUriMatch = await firstValueFrom(
       this.domainSettingsService.defaultUriMatchStrategy$,
     );
@@ -111,22 +95,6 @@ export class OptionsComponent implements OnInit {
     this.clearClipboard = await firstValueFrom(this.autofillSettingsService.clearClipboardDelay$);
   }
 
-  async updateAddLoginNotification() {
-    await this.userNotificationSettingsService.setEnableAddedLoginPrompt(
-      this.enableAddLoginNotification,
-    );
-  }
-
-  async updateChangedPasswordNotification() {
-    await this.userNotificationSettingsService.setEnableChangedPasswordPrompt(
-      this.enableChangedPasswordNotification,
-    );
-  }
-
-  async updateEnablePasskeys() {
-    await this.vaultSettingsService.setEnablePasskeys(this.enablePasskeys);
-  }
-
   async updateContextMenuItem() {
     await this.autofillSettingsService.setEnableContextMenu(this.enableContextMenuItem);
     this.messagingService.send("bgUpdateContextMenu");

apps/browser/src/tools/popup/settings/about-dialog/about-dialog.component.ts

@@ -9,11 +9,11 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { ButtonModule, DialogModule } from "@bitwarden/components";
 
 @Component({
-  templateUrl: "about.component.html",
+  templateUrl: "about-dialog.component.html",
   standalone: true,
   imports: [CommonModule, JslibModule, DialogModule, ButtonModule],
 })
-export class AboutComponent {
+export class AboutDialogComponent {
   protected year = new Date().getFullYear();
   protected version$: Observable<string>;
 

apps/browser/src/tools/popup/settings/settings.component.html

@@ -30,17 +30,17 @@
       <button
         type="button"
         class="box-content-row box-content-row-flex text-default"
-        routerLink="/vault-settings"
+        routerLink="/notifications"
       >
-        <div class="row-main">{{ "vault" | i18n }}</div>
+        <div class="row-main">{{ "notifications" | i18n }}</div>
         <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
       <button
         type="button"
         class="box-content-row box-content-row-flex text-default"
-        routerLink="/excluded-domains"
+        routerLink="/vault-settings"
       >
-        <div class="row-main">{{ "excludedDomains" | i18n }}</div>
+        <div class="row-main">{{ "vault" | i18n }}</div>
         <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
     </div>

apps/browser/src/tools/popup/settings/settings.component.ts

@@ -13,7 +13,7 @@ import { DialogService } from "@bitwarden/components";
 import { BrowserApi } from "../../../platform/browser/browser-api";
 import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";
 
-import { AboutComponent } from "./about/about.component";
+import { AboutDialogComponent } from "./about-dialog/about-dialog.component";
 
 const RateUrls = {
   [DeviceType.ChromeExtension]:
@@ -84,7 +84,7 @@ export class SettingsComponent implements OnInit {
   }
 
   about() {
-    this.dialogService.open(AboutComponent);
+    this.dialogService.open(AboutDialogComponent);
   }
 
   rate() {

apps/browser/src/vault/popup/components/fido2/fido2.component.ts

@@ -27,13 +27,13 @@ import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
 import { SecureNoteView } from "@bitwarden/common/vault/models/view/secure-note.view";
 import { DialogService } from "@bitwarden/components";
-import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { ZonedMessageListenerService } from "../../../../platform/browser/zoned-message-listener.service";
 import {
   BrowserFido2Message,
   BrowserFido2UserInterfaceSession,
 } from "../../../fido2/browser-fido2-user-interface.service";
+import { Fido2UserVerificationService } from "../../../services/fido2-user-verification.service";
 import { VaultPopoutType } from "../../utils/vault-popout-window";
 
 interface ViewData {
@@ -59,6 +59,7 @@ export class Fido2Component implements OnInit, OnDestroy {
   protected data$: Observable<ViewData>;
   protected sessionId?: string;
   protected senderTabId?: string;
+  protected fromLock?: boolean;
   protected ciphers?: CipherView[] = [];
   protected displayedCiphers?: CipherView[] = [];
   protected loading = false;
@@ -71,13 +72,13 @@ export class Fido2Component implements OnInit, OnDestroy {
     private router: Router,
     private activatedRoute: ActivatedRoute,
     private cipherService: CipherService,
-    private passwordRepromptService: PasswordRepromptService,
     private platformUtilsService: PlatformUtilsService,
     private domainSettingsService: DomainSettingsService,
     private searchService: SearchService,
     private logService: LogService,
     private dialogService: DialogService,
     private browserMessagingApi: ZonedMessageListenerService,
+    private fido2UserVerificationService: Fido2UserVerificationService,
   ) {}
 
   ngOnInit() {
@@ -89,6 +90,7 @@ export class Fido2Component implements OnInit, OnDestroy {
         sessionId: queryParamMap.get("sessionId"),
         senderTabId: queryParamMap.get("senderTabId"),
         senderUrl: queryParamMap.get("senderUrl"),
+        fromLock: queryParamMap.get("fromLock"),
       })),
     );
 
@@ -101,6 +103,7 @@ export class Fido2Component implements OnInit, OnDestroy {
           this.sessionId = queryParams.sessionId;
           this.senderTabId = queryParams.senderTabId;
           this.url = queryParams.senderUrl;
+          this.fromLock = queryParams.fromLock === "true";
           // For a 'NewSessionCreatedRequest', abort if it doesn't belong to the current session.
           if (
             message.type === "NewSessionCreatedRequest" &&
@@ -210,7 +213,11 @@ export class Fido2Component implements OnInit, OnDestroy {
   protected async submit() {
     const data = this.message$.value;
     if (data?.type === "PickCredentialRequest") {
-      const userVerified = await this.handleUserVerification(data.userVerification, this.cipher);
+      const userVerified = await this.fido2UserVerificationService.handleUserVerification(
+        data.userVerification,
+        this.cipher,
+        this.fromLock,
+      );
 
       this.send({
         sessionId: this.sessionId,
@@ -231,7 +238,11 @@ export class Fido2Component implements OnInit, OnDestroy {
         }
       }
 
-      const userVerified = await this.handleUserVerification(data.userVerification, this.cipher);
+      const userVerified = await this.fido2UserVerificationService.handleUserVerification(
+        data.userVerification,
+        this.cipher,
+        this.fromLock,
+      );
 
       this.send({
         sessionId: this.sessionId,
@@ -248,14 +259,21 @@ export class Fido2Component implements OnInit, OnDestroy {
     const data = this.message$.value;
     if (data?.type === "ConfirmNewCredentialRequest") {
       const name = data.credentialName || data.rpId;
-      await this.createNewCipher(name);
+      const userVerified = await this.fido2UserVerificationService.handleUserVerification(
+        data.userVerification,
+        this.cipher,
+        this.fromLock,
+      );
+
+      if (!data.userVerification || userVerified) {
+        await this.createNewCipher(name);
+      }
 
-      // We are bypassing user verification pending implementation of PIN and biometric support.
       this.send({
         sessionId: this.sessionId,
         cipherId: this.cipher?.id,
         type: "ConfirmNewCredentialResponse",
-        userVerified: data.userVerification,
+        userVerified,
       });
     }
 
@@ -304,6 +322,7 @@ export class Fido2Component implements OnInit, OnDestroy {
         uilocation: "popout",
         senderTabId: this.senderTabId,
         sessionId: this.sessionId,
+        fromLock: this.fromLock,
         userVerification: data.userVerification,
         singleActionPopout: `${VaultPopoutType.fido2Popout}_${this.sessionId}`,
       },
@@ -374,20 +393,6 @@ export class Fido2Component implements OnInit, OnDestroy {
     }
   }
 
-  private async handleUserVerification(
-    userVerificationRequested: boolean,
-    cipher: CipherView,
-  ): Promise<boolean> {
-    const masterPasswordRepromptRequired = cipher && cipher.reprompt !== 0;
-
-    if (masterPasswordRepromptRequired) {
-      return await this.passwordRepromptService.showPasswordPrompt();
-    }
-
-    // We are bypassing user verification pending implementation of PIN and biometric support.
-    return userVerificationRequested;
-  }
-
   private send(msg: BrowserFido2Message) {
     BrowserFido2UserInterfaceSession.sendMessage({
       sessionId: this.sessionId,

apps/browser/src/vault/popup/components/vault/add-edit.component.ts

@@ -30,6 +30,7 @@ import { BrowserApi } from "../../../../platform/browser/browser-api";
 import BrowserPopupUtils from "../../../../platform/popup/browser-popup-utils";
 import { PopupCloseWarningService } from "../../../../popup/services/popup-close-warning.service";
 import { BrowserFido2UserInterfaceSession } from "../../../fido2/browser-fido2-user-interface.service";
+import { Fido2UserVerificationService } from "../../../services/fido2-user-verification.service";
 import { fido2PopoutSessionData$ } from "../../utils/fido2-popout-session-data";
 import { closeAddEditVaultItemPopout, VaultPopoutType } from "../../utils/vault-popout-window";
 
@@ -69,6 +70,7 @@ export class AddEditComponent extends BaseAddEditComponent {
     dialogService: DialogService,
     datePipe: DatePipe,
     configService: ConfigService,
+    private fido2UserVerificationService: Fido2UserVerificationService,
   ) {
     super(
       cipherService,
@@ -168,11 +170,17 @@ export class AddEditComponent extends BaseAddEditComponent {
 
   async submit(): Promise<boolean> {
     const fido2SessionData = await firstValueFrom(this.fido2PopoutSessionData$);
-    const { isFido2Session, sessionId, userVerification } = fido2SessionData;
+    const { isFido2Session, sessionId, userVerification, fromLock } = fido2SessionData;
     const inFido2PopoutWindow = BrowserPopupUtils.inPopout(window) && isFido2Session;
+
     if (
       inFido2PopoutWindow &&
-      !(await this.handleFido2UserVerification(sessionId, userVerification))
+      userVerification &&
+      !(await this.fido2UserVerificationService.handleUserVerification(
+        userVerification,
+        this.cipher,
+        fromLock,
+      ))
     ) {
       return false;
     }
@@ -327,14 +335,6 @@ export class AddEditComponent extends BaseAddEditComponent {
     }, 200);
   }
 
-  private async handleFido2UserVerification(
-    sessionId: string,
-    userVerification: boolean,
-  ): Promise<boolean> {
-    // We are bypassing user verification pending implementation of PIN and biometric support.
-    return true;
-  }
-
   repromptChanged() {
     super.repromptChanged();
 

apps/browser/src/vault/popup/utils/fido2-popout-session-data.ts

@@ -16,6 +16,7 @@ export function fido2PopoutSessionData$() {
       fallbackSupported: queryParams.fallbackSupported === "true",
       userVerification: queryParams.userVerification === "true",
       senderUrl: queryParams.senderUrl as string,
+      fromLock: queryParams.fromLock === "true",
     })),
   );
 }

apps/browser/src/vault/services/fido2-user-verification.service.spec.ts

@@ -0,0 +1,248 @@
+import { MockProxy, mock } from "jest-mock-extended";
+
+import { UserVerificationDialogComponent } from "@bitwarden/auth/angular";
+import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { CipherRepromptType, CipherType } from "@bitwarden/common/vault/enums";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { DialogService } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
+
+import { SetPinComponent } from "./../../auth/popup/components/set-pin.component";
+import { Fido2UserVerificationService } from "./fido2-user-verification.service";
+
+jest.mock("@bitwarden/auth/angular", () => ({
+  UserVerificationDialogComponent: {
+    open: jest.fn().mockResolvedValue({ userAction: "confirm", verificationSuccess: true }),
+  },
+}));
+
+jest.mock("../../auth/popup/components/set-pin.component", () => {
+  return {
+    SetPinComponent: {
+      open: jest.fn(),
+    },
+  };
+});
+
+describe("Fido2UserVerificationService", () => {
+  let fido2UserVerificationService: Fido2UserVerificationService;
+
+  let passwordRepromptService: MockProxy<PasswordRepromptService>;
+  let userVerificationService: MockProxy<UserVerificationService>;
+  let dialogService: MockProxy<DialogService>;
+  let cipher: CipherView;
+
+  beforeEach(() => {
+    passwordRepromptService = mock<PasswordRepromptService>();
+    userVerificationService = mock<UserVerificationService>();
+    dialogService = mock<DialogService>();
+
+    cipher = createCipherView();
+
+    fido2UserVerificationService = new Fido2UserVerificationService(
+      passwordRepromptService,
+      userVerificationService,
+      dialogService,
+    );
+
+    (UserVerificationDialogComponent.open as jest.Mock).mockResolvedValue({
+      userAction: "confirm",
+      verificationSuccess: true,
+    });
+  });
+
+  describe("handleUserVerification", () => {
+    describe("user verification requested is true", () => {
+      it("should return true if user is redirected from lock screen and master password reprompt is not required", async () => {
+        const result = await fido2UserVerificationService.handleUserVerification(
+          true,
+          cipher,
+          true,
+        );
+        expect(result).toBe(true);
+      });
+
+      it("should call master password reprompt dialog if user is redirected from lock screen, has master password and master password reprompt is required", async () => {
+        cipher.reprompt = CipherRepromptType.Password;
+        userVerificationService.hasMasterPassword.mockResolvedValue(true);
+        passwordRepromptService.showPasswordPrompt.mockResolvedValue(true);
+
+        const result = await fido2UserVerificationService.handleUserVerification(
+          true,
+          cipher,
+          true,
+        );
+
+        expect(passwordRepromptService.showPasswordPrompt).toHaveBeenCalled();
+        expect(result).toBe(true);
+      });
+
+      it("should call user verification dialog if user is redirected from lock screen, does not have a master password and master password reprompt is required", async () => {
+        cipher.reprompt = CipherRepromptType.Password;
+        userVerificationService.hasMasterPassword.mockResolvedValue(false);
+
+        const result = await fido2UserVerificationService.handleUserVerification(
+          true,
+          cipher,
+          true,
+        );
+
+        expect(UserVerificationDialogComponent.open).toHaveBeenCalledWith(dialogService, {
+          clientSideOnlyVerification: true,
+        });
+        expect(result).toBe(true);
+      });
+
+      it("should call user verification dialog if user is not redirected from lock screen, does not have a master password and master password reprompt is required", async () => {
+        cipher.reprompt = CipherRepromptType.Password;
+        userVerificationService.hasMasterPassword.mockResolvedValue(false);
+
+        const result = await fido2UserVerificationService.handleUserVerification(
+          true,
+          cipher,
+          false,
+        );
+
+        expect(UserVerificationDialogComponent.open).toHaveBeenCalledWith(dialogService, {
+          clientSideOnlyVerification: true,
+        });
+        expect(result).toBe(true);
+      });
+
+      it("should call master password reprompt dialog if user is not redirected from lock screen, has a master password and master password reprompt is required", async () => {
+        cipher.reprompt = CipherRepromptType.Password;
+        userVerificationService.hasMasterPassword.mockResolvedValue(false);
+        passwordRepromptService.showPasswordPrompt.mockResolvedValue(true);
+
+        const result = await fido2UserVerificationService.handleUserVerification(
+          true,
+          cipher,
+          false,
+        );
+
+        expect(UserVerificationDialogComponent.open).toHaveBeenCalledWith(dialogService, {
+          clientSideOnlyVerification: true,
+        });
+        expect(result).toBe(true);
+      });
+
+      it("should call user verification dialog if user is not redirected from lock screen and no master password reprompt is required", async () => {
+        const result = await fido2UserVerificationService.handleUserVerification(
+          true,
+          cipher,
+          false,
+        );
+
+        expect(UserVerificationDialogComponent.open).toHaveBeenCalledWith(dialogService, {
+          clientSideOnlyVerification: true,
+        });
+        expect(result).toBe(true);
+      });
+
+      it("should prompt user to set pin if user has no verification method", async () => {
+        (UserVerificationDialogComponent.open as jest.Mock).mockResolvedValue({
+          userAction: "confirm",
+          verificationSuccess: false,
+          noAvailableClientVerificationMethods: true,
+        });
+
+        await fido2UserVerificationService.handleUserVerification(true, cipher, false);
+
+        expect(SetPinComponent.open).toHaveBeenCalledWith(dialogService);
+      });
+    });
+
+    describe("user verification requested is false", () => {
+      it("should return false if user is redirected from lock screen and master password reprompt is not required", async () => {
+        const result = await fido2UserVerificationService.handleUserVerification(
+          false,
+          cipher,
+          true,
+        );
+        expect(result).toBe(false);
+      });
+
+      it("should return false if user is not redirected from lock screen and master password reprompt is not required", async () => {
+        const result = await fido2UserVerificationService.handleUserVerification(
+          false,
+          cipher,
+          false,
+        );
+        expect(result).toBe(false);
+      });
+
+      it("should call master password reprompt dialog if user is redirected from lock screen, has master password and master password reprompt is required", async () => {
+        cipher.reprompt = CipherRepromptType.Password;
+        userVerificationService.hasMasterPassword.mockResolvedValue(true);
+        passwordRepromptService.showPasswordPrompt.mockResolvedValue(true);
+
+        const result = await fido2UserVerificationService.handleUserVerification(
+          false,
+          cipher,
+          true,
+        );
+
+        expect(result).toBe(true);
+        expect(passwordRepromptService.showPasswordPrompt).toHaveBeenCalled();
+      });
+
+      it("should call user verification dialog if user is redirected from lock screen, does not have a master password and master password reprompt is required", async () => {
+        cipher.reprompt = CipherRepromptType.Password;
+        userVerificationService.hasMasterPassword.mockResolvedValue(false);
+
+        const result = await fido2UserVerificationService.handleUserVerification(
+          false,
+          cipher,
+          true,
+        );
+
+        expect(UserVerificationDialogComponent.open).toHaveBeenCalledWith(dialogService, {
+          clientSideOnlyVerification: true,
+        });
+        expect(result).toBe(true);
+      });
+
+      it("should call user verification dialog if user is not redirected from lock screen, does not have a master password and master password reprompt is required", async () => {
+        cipher.reprompt = CipherRepromptType.Password;
+        userVerificationService.hasMasterPassword.mockResolvedValue(false);
+
+        const result = await fido2UserVerificationService.handleUserVerification(
+          false,
+          cipher,
+          false,
+        );
+
+        expect(UserVerificationDialogComponent.open).toHaveBeenCalledWith(dialogService, {
+          clientSideOnlyVerification: true,
+        });
+        expect(result).toBe(true);
+      });
+
+      it("should call master password reprompt dialog if user is not redirected from lock screen, has a master password and master password reprompt is required", async () => {
+        cipher.reprompt = CipherRepromptType.Password;
+        userVerificationService.hasMasterPassword.mockResolvedValue(false);
+        passwordRepromptService.showPasswordPrompt.mockResolvedValue(true);
+
+        const result = await fido2UserVerificationService.handleUserVerification(
+          false,
+          cipher,
+          false,
+        );
+
+        expect(UserVerificationDialogComponent.open).toHaveBeenCalledWith(dialogService, {
+          clientSideOnlyVerification: true,
+        });
+        expect(result).toBe(true);
+      });
+    });
+  });
+});
+
+function createCipherView() {
+  const cipher = new CipherView();
+  cipher.id = Utils.newGuid();
+  cipher.type = CipherType.Login;
+  cipher.reprompt = CipherRepromptType.None;
+  return cipher;
+}

apps/browser/src/vault/services/fido2-user-verification.service.ts

@@ -0,0 +1,101 @@
+import { firstValueFrom } from "rxjs";
+
+import { UserVerificationDialogComponent } from "@bitwarden/auth/angular";
+import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { DialogService } from "@bitwarden/components";
+import { PasswordRepromptService } from "@bitwarden/vault";
+
+import { SetPinComponent } from "../../auth/popup/components/set-pin.component";
+
+export class Fido2UserVerificationService {
+  constructor(
+    private passwordRepromptService: PasswordRepromptService,
+    private userVerificationService: UserVerificationService,
+    private dialogService: DialogService,
+  ) {}
+
+  /**
+   * Handles user verification for a user based on the cipher and user verification requested.
+   * @param userVerificationRequested Indicates if user verification is required or not.
+   * @param cipher Contains details about the cipher including master password reprompt.
+   * @param fromLock Indicates if the request is from the lock screen.
+   * @returns
+   */
+  async handleUserVerification(
+    userVerificationRequested: boolean,
+    cipher: CipherView,
+    fromLock: boolean,
+  ): Promise<boolean> {
+    const masterPasswordRepromptRequired = cipher && cipher.reprompt !== 0;
+
+    // If the request is from the lock screen, treat unlocking the vault as user verification,
+    // unless a master password reprompt is required.
+    if (fromLock) {
+      return masterPasswordRepromptRequired
+        ? await this.handleMasterPasswordReprompt()
+        : userVerificationRequested;
+    }
+
+    if (masterPasswordRepromptRequired) {
+      return await this.handleMasterPasswordReprompt();
+    }
+
+    if (userVerificationRequested) {
+      return await this.showUserVerificationDialog();
+    }
+
+    return userVerificationRequested;
+  }
+
+  private async showMasterPasswordReprompt(): Promise<boolean> {
+    return await this.passwordRepromptService.showPasswordPrompt();
+  }
+
+  private async showUserVerificationDialog(): Promise<boolean> {
+    const result = await UserVerificationDialogComponent.open(this.dialogService, {
+      clientSideOnlyVerification: true,
+    });
+
+    if (result.userAction === "cancel") {
+      return;
+    }
+
+    // Handle unsuccessful verification attempts.
+    if (!result.verificationSuccess) {
+      // Check if no client-side verification methods are available.
+      if (result.noAvailableClientVerificationMethods) {
+        return await this.promptUserToSetPin();
+      }
+      return;
+    }
+
+    return result.verificationSuccess;
+  }
+
+  private async handleMasterPasswordReprompt(): Promise<boolean> {
+    const hasMasterPassword = await this.userVerificationService.hasMasterPassword();
+
+    // TDE users have no master password, so we need to use the UserVerification prompt
+    return hasMasterPassword
+      ? await this.showMasterPasswordReprompt()
+      : await this.showUserVerificationDialog();
+  }
+
+  private async promptUserToSetPin() {
+    const dialogRef = SetPinComponent.open(this.dialogService);
+
+    if (!dialogRef) {
+      return;
+    }
+
+    const userHasPinSet = await firstValueFrom(dialogRef.closed);
+
+    if (!userHasPinSet) {
+      return;
+    }
+
+    // If the user has set a PIN, re-invoke the user verification dialog to complete the verification process.
+    return await this.showUserVerificationDialog();
+  }
+}

apps/web/src/app/admin-console/organizations/members/services/organization-user-reset-password/organization-user-reset-password.service.ts

@@ -165,23 +165,4 @@ export class OrganizationUserResetPasswordService {
     }
     return requests;
   }
-
-  /**
-   * @deprecated Nov 6, 2023: Use new Key Rotation Service for posting rotated data.
-   */
-  async postLegacyRotation(
-    userId: string,
-    requests: OrganizationUserResetPasswordWithIdRequest[],
-  ): Promise<void> {
-    if (requests == null) {
-      return;
-    }
-    for (const request of requests) {
-      await this.organizationUserService.putOrganizationUserResetPasswordEnrollment(
-        request.organizationId,
-        userId,
-        request,
-      );
-    }
-  }
 }

apps/web/src/app/admin-console/organizations/settings/two-factor-setup.component.ts

@@ -1,6 +1,6 @@
 import { Component } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-import { concatMap, takeUntil, map, lastValueFrom } from "rxjs";
+import { concatMap, takeUntil, map } from "rxjs";
 import { tap } from "rxjs/operators";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
@@ -16,7 +16,6 @@ import { DialogService } from "@bitwarden/components";
 
 import { TwoFactorDuoComponent } from "../../../auth/settings/two-factor-duo.component";
 import { TwoFactorSetupComponent as BaseTwoFactorSetupComponent } from "../../../auth/settings/two-factor-setup.component";
-import { TwoFactorVerifyComponent } from "../../../auth/settings/two-factor-verify.component";
 
 @Component({
   selector: "app-two-factor-setup",
@@ -66,17 +65,17 @@ export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
   async manage(type: TwoFactorProviderType) {
     switch (type) {
       case TwoFactorProviderType.OrganizationDuo: {
-        const twoFactorVerifyDialogRef = TwoFactorVerifyComponent.open(this.dialogService, {
-          data: { type: type, organizationId: this.organizationId },
-        });
-        const result: AuthResponse<TwoFactorDuoResponse> = await lastValueFrom(
-          twoFactorVerifyDialogRef.closed,
+        const result: AuthResponse<TwoFactorDuoResponse> = await this.callTwoFactorVerifyDialog(
+          TwoFactorProviderType.OrganizationDuo,
         );
+
         if (!result) {
           return;
         }
 
         const duoComp = await this.openModal(this.duoModalRef, TwoFactorDuoComponent);
+        duoComp.type = TwoFactorProviderType.OrganizationDuo;
+        duoComp.organizationId = this.organizationId;
         duoComp.auth(result);
         duoComp.onUpdated.pipe(takeUntil(this.destroy$)).subscribe((enabled: boolean) => {
           this.updateStatus(enabled, TwoFactorProviderType.OrganizationDuo);

apps/web/src/app/app.component.ts

@@ -2,7 +2,17 @@ import { DOCUMENT } from "@angular/common";
 import { Component, Inject, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { NavigationEnd, Router } from "@angular/router";
 import * as jq from "jquery";
-import { Subject, filter, firstValueFrom, map, switchMap, takeUntil, timeout, timer } from "rxjs";
+import {
+  Subject,
+  combineLatest,
+  filter,
+  firstValueFrom,
+  map,
+  switchMap,
+  takeUntil,
+  timeout,
+  timer,
+} from "rxjs";
 
 import { EventUploadService } from "@bitwarden/common/abstractions/event/event-upload.service";
 import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
@@ -15,6 +25,7 @@ import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { KeyConnectorService } from "@bitwarden/common/auth/abstractions/key-connector.service";
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
 import { PaymentMethodWarningsServiceAbstraction as PaymentMethodWarningService } from "@bitwarden/common/billing/abstractions/payment-method-warnings-service.abstraction";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
@@ -241,8 +252,12 @@ export class AppComponent implements OnDestroy, OnInit {
       new SendOptionsPolicy(),
     ]);
 
-    this.paymentMethodWarningsRefresh$
+    combineLatest([
+      this.configService.getFeatureFlag$(FeatureFlag.ShowPaymentMethodWarningBanners),
+      this.paymentMethodWarningsRefresh$,
+    ])
       .pipe(
+        filter(([showPaymentMethodWarningBanners]) => showPaymentMethodWarningBanners),
         switchMap(() => this.organizationService.memberOrganizations$),
         switchMap(
           async (organizations) =>

apps/web/src/app/auth/emergency-access/services/emergency-access.service.ts

@@ -328,16 +328,4 @@ export class EmergencyAccessService {
   private async encryptKey(userKey: UserKey, publicKey: Uint8Array): Promise<EncryptedString> {
     return (await this.cryptoService.rsaEncrypt(userKey.key, publicKey)).encryptedString;
   }
-
-  /**
-   * @deprecated Nov 6, 2023: Use new Key Rotation Service for posting rotated data.
-   */
-  async postLegacyRotation(requests: EmergencyAccessWithIdRequest[]): Promise<void> {
-    if (requests == null) {
-      return;
-    }
-    for (const request of requests) {
-      await this.emergencyAccessApiService.putEmergencyAccess(request.id, request);
-    }
-  }
 }

apps/web/src/app/auth/key-rotation/user-key-rotation.service.spec.ts

@@ -82,7 +82,6 @@ describe("KeyRotationService", () => {
       mockEncryptService,
       mockStateService,
       mockAccountService,
-      mockConfigService,
       mockKdfConfigService,
     );
   });
@@ -191,16 +190,6 @@ describe("KeyRotationService", () => {
       );
     });
 
-    it("uses legacy rotation if feature flag is off", async () => {
-      mockConfigService.getFeatureFlag.mockResolvedValueOnce(false);
-
-      await keyRotationService.rotateUserKeyAndEncryptedData("mockMasterPassword");
-
-      expect(mockApiService.postUserKeyUpdate).toHaveBeenCalled();
-      expect(mockEmergencyAccessService.postLegacyRotation).toHaveBeenCalled();
-      expect(mockResetPasswordService.postLegacyRotation).toHaveBeenCalled();
-    });
-
     it("throws if server rotation fails", async () => {
       mockApiService.postUserKeyUpdate.mockRejectedValueOnce(new Error("mockError"));
 

apps/web/src/app/auth/key-rotation/user-key-rotation.service.ts

@@ -5,8 +5,6 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
 import { DeviceTrustServiceAbstraction } from "@bitwarden/common/auth/abstractions/device-trust.service.abstraction";
 import { KdfConfigService } from "@bitwarden/common/auth/abstractions/kdf-config.service";
 import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/auth/abstractions/master-password.service.abstraction";
-import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
-import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { EncryptService } from "@bitwarden/common/platform/abstractions/encrypt.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
@@ -39,7 +37,6 @@ export class UserKeyRotationService {
     private encryptService: EncryptService,
     private stateService: StateService,
     private accountService: AccountService,
-    private configService: ConfigService,
     private kdfConfigService: KdfConfigService,
   ) {}
 
@@ -90,11 +87,7 @@ export class UserKeyRotationService {
     request.emergencyAccessKeys = await this.emergencyAccessService.getRotatedKeys(newUserKey);
     request.resetPasswordKeys = await this.resetPasswordService.getRotatedKeys(newUserKey);
 
-    if (await this.configService.getFeatureFlag(FeatureFlag.KeyRotationImprovements)) {
-      await this.apiService.postUserKeyUpdate(request);
-    } else {
-      await this.rotateUserKeyAndEncryptedDataLegacy(request);
-    }
+    await this.apiService.postUserKeyUpdate(request);
 
     const activeAccount = await firstValueFrom(this.accountService.activeAccount$);
     await this.deviceTrustService.rotateDevicesTrust(
@@ -139,16 +132,4 @@ export class UserKeyRotationService {
       }),
     );
   }
-
-  private async rotateUserKeyAndEncryptedDataLegacy(request: UpdateKeyRequest): Promise<void> {
-    // Update keys, ciphers, folders, and sends
-    await this.apiService.postUserKeyUpdate(request);
-
-    // Update emergency access keys
-    await this.emergencyAccessService.postLegacyRotation(request.emergencyAccessKeys);
-
-    // Update account recovery keys
-    const userId = await this.stateService.getUserId();
-    await this.resetPasswordService.postLegacyRotation(userId, request.resetPasswordKeys);
-  }
 }

apps/web/src/app/billing/individual/premium.component.html

@@ -1,129 +1,143 @@
-<div *ngIf="selfHosted" class="page-header">
-  <h1>{{ "subscription" | i18n }}</h1>
-</div>
-<div *ngIf="!selfHosted" class="tabbed-header">
-  <h1>{{ "goPremium" | i18n }}</h1>
-</div>
-<bit-callout
-  type="info"
-  *ngIf="canAccessPremium$ | async"
-  title="{{ 'youHavePremiumAccess' | i18n }}"
-  icon="bwi bwi-star-f"
->
-  {{ "alreadyPremiumFromOrg" | i18n }}
-</bit-callout>
-<bit-callout type="success">
-  <p>{{ "premiumUpgradeUnlockFeatures" | i18n }}</p>
-  <ul class="bwi-ul">
-    <li>
-      <i class="bwi bwi-check text-success bwi-li" aria-hidden="true"></i>
-      {{ "premiumSignUpStorage" | i18n }}
-    </li>
-    <li>
-      <i class="bwi bwi-check text-success bwi-li" aria-hidden="true"></i>
-      {{ "premiumSignUpTwoStepOptions" | i18n }}
-    </li>
-    <li>
-      <i class="bwi bwi-check text-success bwi-li" aria-hidden="true"></i>
-      {{ "premiumSignUpEmergency" | i18n }}
-    </li>
-    <li>
-      <i class="bwi bwi-check text-success bwi-li" aria-hidden="true"></i>
-      {{ "premiumSignUpReports" | i18n }}
-    </li>
-    <li>
-      <i class="bwi bwi-check text-success bwi-li" aria-hidden="true"></i>
-      {{ "premiumSignUpTotp" | i18n }}
-    </li>
-    <li>
-      <i class="bwi bwi-check text-success bwi-li" aria-hidden="true"></i>
-      {{ "premiumSignUpSupport" | i18n }}
-    </li>
-    <li>
-      <i class="bwi bwi-check text-success bwi-li" aria-hidden="true"></i>
-      {{ "premiumSignUpFuture" | i18n }}
-    </li>
-  </ul>
-  <p class="text-lg" [ngClass]="{ 'mb-0': !selfHosted }">
-    {{
-      "premiumPriceWithFamilyPlan" | i18n: (premiumPrice | currency: "$") : familyPlanMaxUserCount
-    }}
-    <a routerLink="/create-organization" [queryParams]="{ plan: 'families' }">{{
-      "bitwardenFamiliesPlan" | i18n
-    }}</a>
-  </p>
-  <a
-    bitButton
-    href="{{ this.cloudWebVaultUrl }}/#/settings/subscription/premium"
-    target="_blank"
-    rel="noreferrer"
-    buttonType="secondary"
-    *ngIf="selfHosted"
+<bit-section>
+  <h2 *ngIf="!selfHosted" bitTypography="h2">{{ "goPremium" | i18n }}</h2>
+  <bit-callout
+    type="info"
+    *ngIf="canAccessPremium$ | async"
+    title="{{ 'youHavePremiumAccess' | i18n }}"
+    icon="bwi bwi-star-f"
   >
-    {{ "purchasePremium" | i18n }}
-  </a>
-</bit-callout>
-<ng-container *ngIf="selfHosted">
-  <p>{{ "uploadLicenseFilePremium" | i18n }}</p>
-  <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
-    <div class="form-group">
-      <label for="file">{{ "licenseFile" | i18n }}</label>
-      <input type="file" id="file" class="form-control-file" name="file" required />
-      <small class="form-text text-muted">{{
-        "licenseFileDesc" | i18n: "bitwarden_premium_license.json"
-      }}</small>
-    </div>
-    <button type="submit" buttonType="primary" bitButton [loading]="form.loading">
+    {{ "alreadyPremiumFromOrg" | i18n }}
+  </bit-callout>
+  <bit-callout type="success">
+    <p>{{ "premiumUpgradeUnlockFeatures" | i18n }}</p>
+    <ul class="bwi-ul">
+      <li>
+        <i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
+        {{ "premiumSignUpStorage" | i18n }}
+      </li>
+      <li>
+        <i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
+        {{ "premiumSignUpTwoStepOptions" | i18n }}
+      </li>
+      <li>
+        <i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
+        {{ "premiumSignUpEmergency" | i18n }}
+      </li>
+      <li>
+        <i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
+        {{ "premiumSignUpReports" | i18n }}
+      </li>
+      <li>
+        <i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
+        {{ "premiumSignUpTotp" | i18n }}
+      </li>
+      <li>
+        <i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
+        {{ "premiumSignUpSupport" | i18n }}
+      </li>
+      <li>
+        <i class="bwi bwi-check tw-text-success bwi-li" aria-hidden="true"></i>
+        {{ "premiumSignUpFuture" | i18n }}
+      </li>
+    </ul>
+    <p bitTypography="body1" [ngClass]="{ 'tw-mb-0': !selfHosted }">
+      {{
+        "premiumPriceWithFamilyPlan" | i18n: (premiumPrice | currency: "$") : familyPlanMaxUserCount
+      }}
+      <a
+        bitLink
+        linkType="primary"
+        routerLink="/create-organization"
+        [queryParams]="{ plan: 'families' }"
+        >{{ "bitwardenFamiliesPlan" | i18n }}</a
+      >
+    </p>
+    <a
+      bitButton
+      href="{{ this.cloudWebVaultUrl }}/#/settings/subscription/premium"
+      target="_blank"
+      rel="noreferrer"
+      buttonType="secondary"
+      *ngIf="selfHosted"
+    >
+      {{ "purchasePremium" | i18n }}
+    </a>
+  </bit-callout>
+</bit-section>
+<bit-section *ngIf="selfHosted">
+  <p bitTypography="body1">{{ "uploadLicenseFilePremium" | i18n }}</p>
+  <form [formGroup]="licenseForm" [bitSubmit]="submit">
+    <bit-form-field>
+      <bit-label>{{ "licenseFile" | i18n }}</bit-label>
+      <div>
+        <button bitButton type="button" buttonType="secondary" (click)="fileSelector.click()">
+          {{ "chooseFile" | i18n }}
+        </button>
+        {{ this.licenseFile ? this.licenseFile.name : ("noFileChosen" | i18n) }}
+      </div>
+      <input
+        bitInput
+        #fileSelector
+        type="file"
+        formControlName="file"
+        (change)="setSelectedFile($event)"
+        hidden
+      />
+      <bit-hint>{{ "licenseFileDesc" | i18n: "bitwarden_premium_license.json" }}</bit-hint>
+    </bit-form-field>
+    <button type="submit" buttonType="primary" bitButton bitFormButton>
       {{ "submit" | i18n }}
     </button>
   </form>
-</ng-container>
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="!selfHosted">
-  <h2 class="mt-5">{{ "addons" | i18n }}</h2>
-  <div class="row">
-    <div class="form-group col-6">
-      <label for="additionalStorage">{{ "additionalStorageGb" | i18n }}</label>
-      <input
-        id="additionalStorage"
-        class="form-control"
-        type="number"
-        name="AdditionalStorageGb"
-        [(ngModel)]="additionalStorage"
-        min="0"
-        max="99"
-        step="1"
-        placeholder="{{ 'additionalStorageGbDesc' | i18n }}"
-      />
-      <small class="text-muted form-text">{{
-        "additionalStorageIntervalDesc"
-          | i18n: "1 GB" : (storageGbPrice | currency: "$") : ("year" | i18n)
-      }}</small>
+</bit-section>
+<form [formGroup]="addonForm" [bitSubmit]="submit" *ngIf="!selfHosted">
+  <bit-section>
+    <h2 bitTypography="h2">{{ "addons" | i18n }}</h2>
+    <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+      <bit-form-field class="tw-col-span-6">
+        <bit-label>{{ "additionalStorageGb" | i18n }}</bit-label>
+        <input
+          bitInput
+          formControlName="additionalStorage"
+          type="number"
+          step="1"
+          placeholder="{{ 'additionalStorageGbDesc' | i18n }}"
+        />
+        <bit-hint>{{
+          "additionalStorageIntervalDesc"
+            | i18n: "1 GB" : (storageGbPrice | currency: "$") : ("year" | i18n)
+        }}</bit-hint>
+      </bit-form-field>
     </div>
-  </div>
-  <h2 class="spaced-header">{{ "summary" | i18n }}</h2>
-  {{ "premiumMembership" | i18n }}: {{ premiumPrice | currency: "$" }} <br />
-  {{ "additionalStorageGb" | i18n }}: {{ additionalStorage || 0 }} GB &times;
-  {{ storageGbPrice | currency: "$" }} =
-  {{ additionalStorageTotal | currency: "$" }}
-  <hr class="my-3" />
-  <h2 class="spaced-header mb-4">{{ "paymentInformation" | i18n }}</h2>
-  <app-payment [hideBank]="true"></app-payment>
-  <app-tax-info></app-tax-info>
-  <div id="price" class="my-4">
-    <div class="text-muted text-sm">
-      {{ "planPrice" | i18n }}: {{ subtotal | currency: "USD $" }}
-      <br />
-      <ng-container>
-        {{ "estimatedTax" | i18n }}: {{ taxCharges | currency: "USD $" }}
-      </ng-container>
+  </bit-section>
+  <bit-section>
+    <h2 bitTypography="h2">{{ "summary" | i18n }}</h2>
+    {{ "premiumMembership" | i18n }}: {{ premiumPrice | currency: "$" }} <br />
+    {{ "additionalStorageGb" | i18n }}: {{ additionalStorage || 0 }} GB &times;
+    {{ storageGbPrice | currency: "$" }} =
+    {{ additionalStorageTotal | currency: "$" }}
+    <hr class="tw-my-3" />
+  </bit-section>
+  <bit-section>
+    <h3 bitTypography="h2">{{ "paymentInformation" | i18n }}</h3>
+    <app-payment [hideBank]="true"></app-payment>
+    <app-tax-info></app-tax-info>
+    <div id="price" class="tw-my-4">
+      <div class="tw-text-muted tw-text-sm">
+        {{ "planPrice" | i18n }}: {{ subtotal | currency: "USD $" }}
+        <br />
+        <ng-container>
+          {{ "estimatedTax" | i18n }}: {{ taxCharges | currency: "USD $" }}
+        </ng-container>
+      </div>
+      <hr class="tw-my-1 tw-w-1/4 tw-ml-0" />
+      <p bitTypography="body1">
+        <strong>{{ "total" | i18n }}:</strong> {{ total | currency: "USD $" }}/{{ "year" | i18n }}
+      </p>
     </div>
-    <hr class="my-1 col-3 ml-0" />
-    <p class="text-lg">
-      <strong>{{ "total" | i18n }}:</strong> {{ total | currency: "USD $" }}/{{ "year" | i18n }}
-    </p>
-  </div>
-  <small class="text-muted font-italic">{{ "paymentChargedAnnually" | i18n }}</small>
-  <button type="submit" bitButton [loading]="form.loading">
-    {{ "submit" | i18n }}
-  </button>
+    <p bitTypography="body2">{{ "paymentChargedAnnually" | i18n }}</p>
+    <button type="submit" bitButton bitFormButton>
+      {{ "submit" | i18n }}
+    </button>
+  </bit-section>
 </form>

apps/web/src/app/billing/individual/premium.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 import { firstValueFrom, Observable } from "rxjs";
 
@@ -7,7 +8,6 @@ import { TokenService } from "@bitwarden/common/auth/abstractions/token.service"
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
@@ -26,11 +26,16 @@ export class PremiumComponent implements OnInit {
   premiumPrice = 10;
   familyPlanMaxUserCount = 6;
   storageGbPrice = 4;
-  additionalStorage = 0;
   cloudWebVaultUrl: string;
+  licenseFile: File = null;
 
   formPromise: Promise<any>;
-
+  protected licenseForm = new FormGroup({
+    file: new FormControl(null, [Validators.required]),
+  });
+  protected addonForm = new FormGroup({
+    additionalStorage: new FormControl(0, [Validators.max(99), Validators.min(0)]),
+  });
   constructor(
     private apiService: ApiService,
     private i18nService: I18nService,
@@ -39,14 +44,17 @@ export class PremiumComponent implements OnInit {
     private router: Router,
     private messagingService: MessagingService,
     private syncService: SyncService,
-    private logService: LogService,
     private environmentService: EnvironmentService,
     private billingAccountProfileStateService: BillingAccountProfileStateService,
   ) {
     this.selfHosted = platformUtilsService.isSelfHost();
     this.canAccessPremium$ = billingAccountProfileStateService.hasPremiumFromAnySource$;
   }
-
+  protected setSelectedFile(event: Event) {
+    const fileInputEl = <HTMLInputElement>event.target;
+    const file: File = fileInputEl.files.length > 0 ? fileInputEl.files[0] : null;
+    this.licenseFile = file;
+  }
   async ngOnInit() {
     this.cloudWebVaultUrl = await firstValueFrom(this.environmentService.cloudWebVaultUrl$);
     if (await firstValueFrom(this.billingAccountProfileStateService.hasPremiumPersonally$)) {
@@ -56,13 +64,11 @@ export class PremiumComponent implements OnInit {
       return;
     }
   }
-
-  async submit() {
-    let files: FileList = null;
+  submit = async () => {
+    this.licenseForm.markAllAsTouched();
+    this.addonForm.markAllAsTouched();
     if (this.selfHosted) {
-      const fileEl = document.getElementById("file") as HTMLInputElement;
-      files = fileEl.files;
-      if (files == null || files.length === 0) {
+      if (this.licenseFile == null) {
         this.platformUtilsService.showToast(
           "error",
           this.i18nService.t("errorOccurred"),
@@ -72,53 +78,48 @@ export class PremiumComponent implements OnInit {
       }
     }
 
-    try {
-      if (this.selfHosted) {
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        if (!this.tokenService.getEmailVerified()) {
-          this.platformUtilsService.showToast(
-            "error",
-            this.i18nService.t("errorOccurred"),
-            this.i18nService.t("verifyEmailFirst"),
-          );
-          return;
-        }
-
-        const fd = new FormData();
-        fd.append("license", files[0]);
-        this.formPromise = this.apiService.postAccountLicense(fd).then(() => {
-          return this.finalizePremium();
-        });
-      } else {
-        this.formPromise = this.paymentComponent
-          .createPaymentToken()
-          .then((result) => {
-            const fd = new FormData();
-            fd.append("paymentMethodType", result[1].toString());
-            if (result[0] != null) {
-              fd.append("paymentToken", result[0]);
-            }
-            fd.append("additionalStorageGb", (this.additionalStorage || 0).toString());
-            fd.append("country", this.taxInfoComponent.taxInfo.country);
-            fd.append("postalCode", this.taxInfoComponent.taxInfo.postalCode);
-            return this.apiService.postPremium(fd);
-          })
-          .then((paymentResponse) => {
-            if (!paymentResponse.success && paymentResponse.paymentIntentClientSecret != null) {
-              return this.paymentComponent.handleStripeCardPayment(
-                paymentResponse.paymentIntentClientSecret,
-                () => this.finalizePremium(),
-              );
-            } else {
-              return this.finalizePremium();
-            }
-          });
+    if (this.selfHosted) {
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      if (!this.tokenService.getEmailVerified()) {
+        this.platformUtilsService.showToast(
+          "error",
+          this.i18nService.t("errorOccurred"),
+          this.i18nService.t("verifyEmailFirst"),
+        );
+        return;
       }
-      await this.formPromise;
-    } catch (e) {
-      this.logService.error(e);
+
+      const fd = new FormData();
+      fd.append("license", this.licenseFile);
+      await this.apiService.postAccountLicense(fd).then(() => {
+        return this.finalizePremium();
+      });
+    } else {
+      await this.paymentComponent
+        .createPaymentToken()
+        .then((result) => {
+          const fd = new FormData();
+          fd.append("paymentMethodType", result[1].toString());
+          if (result[0] != null) {
+            fd.append("paymentToken", result[0]);
+          }
+          fd.append("additionalStorageGb", (this.additionalStorage || 0).toString());
+          fd.append("country", this.taxInfoComponent.taxInfo.country);
+          fd.append("postalCode", this.taxInfoComponent.taxInfo.postalCode);
+          return this.apiService.postPremium(fd);
+        })
+        .then((paymentResponse) => {
+          if (!paymentResponse.success && paymentResponse.paymentIntentClientSecret != null) {
+            return this.paymentComponent.handleStripeCardPayment(
+              paymentResponse.paymentIntentClientSecret,
+              () => this.finalizePremium(),
+            );
+          } else {
+            return this.finalizePremium();
+          }
+        });
     }
-  }
+  };
 
   async finalizePremium() {
     await this.apiService.refreshIdentityToken();
@@ -127,6 +128,9 @@ export class PremiumComponent implements OnInit {
     await this.router.navigate(["/settings/subscription/user-subscription"]);
   }
 
+  get additionalStorage(): number {
+    return this.addonForm.get("additionalStorage").value;
+  }
   get additionalStorageTotal(): number {
     return this.storageGbPrice * Math.abs(this.additionalStorage || 0);
   }

apps/web/src/app/billing/organizations/adjust-subscription.component.html

@@ -1,65 +1,57 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
-  <div>
-    <div class="row">
-      <div class="form-group col-8">
-        <label for="newSeatCount">{{ "subscriptionSeats" | i18n }}</label>
-        <input
-          id="newSeatCount"
-          class="form-control"
-          type="number"
-          name="NewSeatCount"
-          [(ngModel)]="newSeatCount"
-          min="0"
-          step="1"
-          required
-        />
-        <small class="d-block text-muted mb-4">
+<form [formGroup]="adjustSubscriptionForm" [bitSubmit]="submit">
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+    <div class="tw-col-span-8">
+      <bit-form-field>
+        <bit-label>{{ "subscriptionSeats" | i18n }}</bit-label>
+        <input bitInput formControlName="newSeatCount" type="number" min="0" step="1" />
+        <bit-hint>
           <strong>{{ "total" | i18n }}:</strong> {{ additionalSeatCount || 0 }} &times;
           {{ seatPrice | currency: "$" }} = {{ adjustedSeatTotal | currency: "$" }} /
-          {{ interval | i18n }}
-        </small>
-      </div>
+          {{ interval | i18n }}</bit-hint
+        >
+      </bit-form-field>
     </div>
-    <div class="row mb-4">
-      <div class="form-group col-sm">
-        <div class="form-check">
-          <input
-            id="limitSubscription"
-            class="form-check-input"
-            type="checkbox"
-            name="LimitSubscription"
-            [(ngModel)]="limitSubscription"
-            (change)="limitSubscriptionChanged()"
-          />
-          <label for="limitSubscription">{{ "limitSubscription" | i18n }}</label>
-        </div>
-        <small class="d-block text-muted">{{ "limitSubscriptionDesc" | i18n }}</small>
-      </div>
-    </div>
-    <div class="row mb-4" [hidden]="!limitSubscription">
-      <div class="form-group col-sm">
-        <label for="maxAutoscaleSeats">{{ "maxSeatLimit" | i18n }}</label>
+  </div>
+  <div>
+    <bit-form-control>
+      <input
+        bitCheckbox
+        formControlName="limitSubscription"
+        type="checkbox"
+        (change)="limitSubscriptionChanged()"
+      />
+      <bit-label>{{ "limitSubscription" | i18n }}</bit-label>
+      <bit-hint> {{ "limitSubscriptionDesc" | i18n }}</bit-hint>
+    </bit-form-control>
+  </div>
+  <div
+    class="tw-grid tw-grid-cols-12 tw-gap-4 tw-mb-4"
+    [hidden]="!adjustSubscriptionForm.value.limitSubscription"
+  >
+    <div class="tw-col-span-8">
+      <bit-form-field>
+        <bit-label>{{ "maxSeatLimit" | i18n }}</bit-label>
         <input
-          id="maxAutoscaleSeats"
-          class="form-control col-8"
+          bitInput
+          formControlName="newMaxSeats"
           type="number"
-          name="MaxAutoscaleSeats"
-          [(ngModel)]="newMaxSeats"
-          [min]="newSeatCount == null ? 1 : newSeatCount"
+          [min]="
+            adjustSubscriptionForm.value.newSeatCount == null
+              ? 1
+              : adjustSubscriptionForm.value.newSeatCount
+          "
           step="1"
-          [required]="limitSubscription"
         />
-        <small class="d-block text-muted">
+        <bit-hint>
           <strong>{{ "maxSeatCost" | i18n }}:</strong> {{ additionalMaxSeatCount || 0 }} &times;
           {{ seatPrice | currency: "$" }} = {{ maxSeatTotal | currency: "$" }} /
-          {{ interval | i18n }}
-        </small>
-      </div>
+          {{ interval | i18n }}</bit-hint
+        >
+      </bit-form-field>
     </div>
-    <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-      <span>{{ "save" | i18n }}</span>
-    </button>
   </div>
+  <button bitButton buttonType="primary" bitFormButton type="submit">
+    {{ "save" | i18n }}
+  </button>
 </form>
 <app-payment [showMethods]="false"></app-payment>

apps/web/src/app/billing/organizations/adjust-subscription.component.ts

@@ -1,77 +1,102 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
+import { Subject, takeUntil } from "rxjs";
 
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
 import { OrganizationSubscriptionUpdateRequest } from "@bitwarden/common/billing/models/request/organization-subscription-update.request";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
 @Component({
   selector: "app-adjust-subscription",
   templateUrl: "adjust-subscription.component.html",
 })
-export class AdjustSubscription {
+export class AdjustSubscription implements OnInit, OnDestroy {
   @Input() organizationId: string;
   @Input() maxAutoscaleSeats: number;
   @Input() currentSeatCount: number;
   @Input() seatPrice = 0;
   @Input() interval = "year";
   @Output() onAdjusted = new EventEmitter();
+  private destroy$ = new Subject<void>();
 
-  formPromise: Promise<void>;
-  limitSubscription: boolean;
-  newSeatCount: number;
-  newMaxSeats: number;
-
+  adjustSubscriptionForm = this.formBuilder.group({
+    newSeatCount: [0, [Validators.min(0)]],
+    limitSubscription: [false],
+    newMaxSeats: [0, [Validators.min(0)]],
+  });
+  get limitSubscription(): boolean {
+    return this.adjustSubscriptionForm.value.limitSubscription;
+  }
   constructor(
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
-    private logService: LogService,
     private organizationApiService: OrganizationApiServiceAbstraction,
+    private formBuilder: FormBuilder,
   ) {}
 
   ngOnInit() {
-    this.limitSubscription = this.maxAutoscaleSeats != null;
-    this.newSeatCount = this.currentSeatCount;
-    this.newMaxSeats = this.maxAutoscaleSeats;
+    this.adjustSubscriptionForm.patchValue({
+      newSeatCount: this.currentSeatCount,
+      limitSubscription: this.maxAutoscaleSeats != null,
+      newMaxSeats: this.maxAutoscaleSeats,
+    });
+    this.adjustSubscriptionForm
+      .get("limitSubscription")
+      .valueChanges.pipe(takeUntil(this.destroy$))
+      .subscribe((value: boolean) => {
+        if (value) {
+          this.adjustSubscriptionForm
+            .get("newMaxSeats")
+            .addValidators([
+              Validators.min(
+                this.adjustSubscriptionForm.value.newSeatCount == null
+                  ? 1
+                  : this.adjustSubscriptionForm.value.newSeatCount,
+              ),
+              Validators.required,
+            ]);
+        }
+        this.adjustSubscriptionForm.get("newMaxSeats").updateValueAndValidity();
+      });
   }
 
-  async submit() {
-    try {
-      const request = new OrganizationSubscriptionUpdateRequest(
-        this.additionalSeatCount,
-        this.newMaxSeats,
-      );
-      this.formPromise = this.organizationApiService.updatePasswordManagerSeats(
-        this.organizationId,
-        request,
-      );
-
-      await this.formPromise;
-
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("subscriptionUpdated"),
-      );
-    } catch (e) {
-      this.logService.error(e);
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+  submit = async () => {
+    this.adjustSubscriptionForm.markAllAsTouched();
+    if (this.adjustSubscriptionForm.invalid) {
+      return;
     }
+    const request = new OrganizationSubscriptionUpdateRequest(
+      this.additionalSeatCount,
+      this.adjustSubscriptionForm.value.newMaxSeats,
+    );
+    await this.organizationApiService.updatePasswordManagerSeats(this.organizationId, request);
+
+    this.platformUtilsService.showToast("success", null, this.i18nService.t("subscriptionUpdated"));
+
     this.onAdjusted.emit();
-  }
+  };
 
   limitSubscriptionChanged() {
-    if (!this.limitSubscription) {
-      this.newMaxSeats = null;
+    if (!this.adjustSubscriptionForm.value.limitSubscription) {
+      this.adjustSubscriptionForm.value.newMaxSeats = null;
     }
   }
 
   get additionalSeatCount(): number {
-    return this.newSeatCount ? this.newSeatCount - this.currentSeatCount : 0;
+    return this.adjustSubscriptionForm.value.newSeatCount
+      ? this.adjustSubscriptionForm.value.newSeatCount - this.currentSeatCount
+      : 0;
   }
 
   get additionalMaxSeatCount(): number {
-    return this.newMaxSeats ? this.newMaxSeats - this.currentSeatCount : 0;
+    return this.adjustSubscriptionForm.value.newMaxSeats
+      ? this.adjustSubscriptionForm.value.newMaxSeats - this.currentSeatCount
+      : 0;
   }
 
   get adjustedSeatTotal(): number {

apps/web/src/app/billing/organizations/organization-plans.component.html

@@ -1,400 +1,428 @@
 <ng-container *ngIf="loading">
   <i
-    class="bwi bwi-spinner bwi-spin text-muted"
+    class="bwi bwi-spinner bwi-spin tw-text-muted"
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="createOrganization && selfHosted">
-  <p>{{ "uploadLicenseFileOrg" | i18n }}</p>
-  <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
-    <div class="form-group">
-      <label for="file">{{ "licenseFile" | i18n }}</label>
-      <input type="file" id="file" class="form-control-file" name="file" required />
-      <small class="form-text text-muted">{{
-        "licenseFileDesc" | i18n: "bitwarden_organization_license.json"
-      }}</small>
-    </div>
-    <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-      <span>{{ "submit" | i18n }}</span>
+  <p bitTypography="body1">{{ "uploadLicenseFileOrg" | i18n }}</p>
+  <form [formGroup]="selfHostedForm" [bitSubmit]="submit">
+    <bit-form-field>
+      <bit-label>{{ "licenseFile" | i18n }}</bit-label>
+      <div>
+        <button bitButton type="button" buttonType="secondary" (click)="fileSelector.click()">
+          {{ "chooseFile" | i18n }}
+        </button>
+        {{ selectedFile?.name ?? ("noFileChosen" | i18n) }}
+      </div>
+      <input
+        #fileSelector
+        hidden
+        bitInput
+        type="file"
+        formControlName="file"
+        (change)="setSelectedFile($event)"
+        accept="application/JSON"
+      />
+      <bit-hint>{{ "licenseFileDesc" | i18n: "bitwarden_organization_license.json" }}</bit-hint>
+    </bit-form-field>
+    <button type="submit" bitButton bitFormButton buttonType="primary">
+      {{ "submit" | i18n }}
     </button>
   </form>
 </ng-container>
 <form
-  #form
   [formGroup]="formGroup"
-  (ngSubmit)="submit()"
-  [appApiAction]="formPromise"
-  ngNativeValidate
+  [bitSubmit]="submit"
   *ngIf="!loading && !selfHosted && this.passwordManagerPlans && this.secretsManagerPlans"
   class="tw-pt-6"
 >
-  <app-org-info
-    (changedBusinessOwned)="changedOwnedBusiness()"
-    [formGroup]="formGroup"
-    [createOrganization]="createOrganization"
-    [isProvider]="!!providerId"
-    [acceptingSponsorship]="acceptingSponsorship"
-  ></app-org-info>
-  <h2 class="mt-5">{{ "chooseYourPlan" | i18n }}</h2>
-  <div *ngFor="let selectableProduct of selectableProducts" class="form-check form-check-block">
-    <input
-      class="form-check-input"
-      type="radio"
-      name="product"
-      id="product{{ selectableProduct.product }}"
-      [value]="selectableProduct.product"
-      formControlName="product"
-      (change)="changedProduct()"
-    />
-    <label class="form-check-label" for="product{{ selectableProduct.product }}">
-      {{ selectableProduct.nameLocalizationKey | i18n }}
-      <small class="mb-1">{{ selectableProduct.descriptionLocalizationKey | i18n: "1" }}</small>
-      <ng-container
-        *ngIf="selectableProduct.product === productTypes.Enterprise; else nonEnterprisePlans"
-      >
-        <small>• {{ "includeAllTeamsFeatures" | i18n }}</small>
-        <small *ngIf="selectableProduct.hasSelfHost">• {{ "onPremHostingOptional" | i18n }}</small>
-        <small *ngIf="selectableProduct.hasSso">• {{ "includeSsoAuthentication" | i18n }}</small>
-        <small *ngIf="selectableProduct.hasPolicies"
-          >• {{ "includeEnterprisePolicies" | i18n }}</small
-        >
-        <small *ngIf="selectableProduct.trialPeriodDays && createOrganization"
-          >•
-          {{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }}
-        </small>
-      </ng-container>
-      <ng-template #nonEnterprisePlans>
-        <ng-container
-          *ngIf="selectableProduct.product === productTypes.Teams; else fullFeatureList"
-        >
-          <small>• {{ "includeAllTeamsStarterFeatures" | i18n }}</small>
-          <small>• {{ "chooseMonthlyOrAnnualBilling" | i18n }}</small>
-          <small>• {{ "abilityToAddMoreThanNMembers" | i18n: 10 }}</small>
-          <small *ngIf="selectableProduct.trialPeriodDays && createOrganization">
-            • {{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }}
-          </small>
-        </ng-container>
-        <ng-template #fullFeatureList>
-          <small *ngIf="selectableProduct.product == productTypes.Free"
-            >• {{ "limitedUsers" | i18n: selectableProduct.PasswordManager.maxSeats }}</small
+  <bit-section>
+    <app-org-info
+      (changedBusinessOwned)="changedOwnedBusiness()"
+      [formGroup]="formGroup"
+      [createOrganization]="createOrganization"
+      [isProvider]="!!providerId"
+      [acceptingSponsorship]="acceptingSponsorship"
+    >
+    </app-org-info>
+  </bit-section>
+  <bit-section>
+    <h2 bitTypography="h2">{{ "chooseYourPlan" | i18n }}</h2>
+    <div *ngFor="let selectableProduct of selectableProducts">
+      <bit-radio-group formControlName="product" [block]="true">
+        <bit-radio-button [value]="selectableProduct.product" (change)="changedProduct()">
+          <bit-label>{{ selectableProduct.nameLocalizationKey | i18n }}</bit-label>
+          <bit-hint class="tw-text-sm"
+            >{{ selectableProduct.descriptionLocalizationKey | i18n: "1" }}
+            <ng-container
+              *ngIf="selectableProduct.product === productTypes.Enterprise; else nonEnterprisePlans"
+            >
+              <ul class="tw-pl-0 tw-list-inside tw-mb-0">
+                <li>{{ "includeAllTeamsFeatures" | i18n }}</li>
+                <li *ngIf="selectableProduct.hasSelfHost">{{ "onPremHostingOptional" | i18n }}</li>
+                <li *ngIf="selectableProduct.hasSso">{{ "includeSsoAuthentication" | i18n }}</li>
+                <li *ngIf="selectableProduct.hasPolicies">
+                  {{ "includeEnterprisePolicies" | i18n }}
+                </li>
+                <li *ngIf="selectableProduct.trialPeriodDays && createOrganization">
+                  {{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }}
+                </li>
+              </ul>
+            </ng-container>
+            <ng-template #nonEnterprisePlans>
+              <ng-container
+                *ngIf="selectableProduct.product === productTypes.Teams; else fullFeatureList"
+              >
+                <ul class="tw-pl-0 tw-list-inside tw-mb-0">
+                  <li>{{ "includeAllTeamsStarterFeatures" | i18n }}</li>
+                  <li>{{ "chooseMonthlyOrAnnualBilling" | i18n }}</li>
+                  <li>{{ "abilityToAddMoreThanNMembers" | i18n: 10 }}</li>
+                  <li *ngIf="selectableProduct.trialPeriodDays && createOrganization">
+                    {{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }}
+                  </li>
+                </ul>
+              </ng-container>
+              <ng-template #fullFeatureList>
+                <ul class="tw-pl-0 tw-list-inside tw-mb-0">
+                  <li *ngIf="selectableProduct.product == productTypes.Free">
+                    {{ "limitedUsers" | i18n: selectableProduct.PasswordManager.maxSeats }}
+                  </li>
+                  <li
+                    *ngIf="
+                      selectableProduct.product != productTypes.Free &&
+                      selectableProduct.product != productTypes.TeamsStarter &&
+                      selectableProduct.PasswordManager.maxSeats
+                    "
+                  >
+                    {{ "addShareLimitedUsers" | i18n: selectableProduct.PasswordManager.maxSeats }}
+                  </li>
+                  <li *ngIf="!selectableProduct.PasswordManager.maxSeats">
+                    {{ "addShareUnlimitedUsers" | i18n }}
+                  </li>
+                  <li *ngIf="selectableProduct.PasswordManager.maxCollections">
+                    {{
+                      "limitedCollections" | i18n: selectableProduct.PasswordManager.maxCollections
+                    }}
+                  </li>
+                  <li *ngIf="selectableProduct.PasswordManager.maxAdditionalSeats">
+                    {{
+                      "addShareLimitedUsers"
+                        | i18n: selectableProduct.PasswordManager.maxAdditionalSeats
+                    }}
+                  </li>
+                  <li *ngIf="!selectableProduct.PasswordManager.maxCollections">
+                    {{ "createUnlimitedCollections" | i18n }}
+                  </li>
+                  <li *ngIf="selectableProduct.PasswordManager.baseStorageGb">
+                    {{
+                      "gbEncryptedFileStorage"
+                        | i18n: selectableProduct.PasswordManager.baseStorageGb + "GB"
+                    }}
+                  </li>
+                  <li *ngIf="selectableProduct.hasGroups">
+                    {{ "controlAccessWithGroups" | i18n }}
+                  </li>
+                  <li *ngIf="selectableProduct.hasApi">{{ "trackAuditLogs" | i18n }}</li>
+                  <li *ngIf="selectableProduct.hasDirectory">
+                    {{ "syncUsersFromDirectory" | i18n }}
+                  </li>
+                  <li *ngIf="selectableProduct.hasSelfHost">
+                    {{ "onPremHostingOptional" | i18n }}
+                  </li>
+                  <li *ngIf="selectableProduct.usersGetPremium">{{ "usersGetPremium" | i18n }}</li>
+                  <li *ngIf="selectableProduct.product != productTypes.Free">
+                    {{ "priorityCustomerSupport" | i18n }}
+                  </li>
+                  <li *ngIf="selectableProduct.trialPeriodDays && createOrganization">
+                    {{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }}
+                  </li>
+                </ul>
+              </ng-template>
+            </ng-template>
+          </bit-hint>
+        </bit-radio-button>
+        <span *ngIf="selectableProduct.product != productTypes.Free">
+          <ng-container
+            *ngIf="selectableProduct.PasswordManager.basePrice && !acceptingSponsorship"
           >
-          <small
-            *ngIf="
-              selectableProduct.product != productTypes.Free &&
-              selectableProduct.product != productTypes.TeamsStarter &&
-              selectableProduct.PasswordManager.maxSeats
-            "
-            >•
-            {{ "addShareLimitedUsers" | i18n: selectableProduct.PasswordManager.maxSeats }}</small
-          >
-          <small *ngIf="!selectableProduct.PasswordManager.maxSeats"
-            >• {{ "addShareUnlimitedUsers" | i18n }}</small
-          >
-          <small *ngIf="selectableProduct.PasswordManager.maxCollections"
-            >•
-            {{
-              "limitedCollections" | i18n: selectableProduct.PasswordManager.maxCollections
-            }}</small
-          >
-          <small *ngIf="selectableProduct.PasswordManager.maxAdditionalSeats"
-            >•
-            {{
-              "addShareLimitedUsers" | i18n: selectableProduct.PasswordManager.maxAdditionalSeats
-            }}</small
-          >
-          <small *ngIf="!selectableProduct.PasswordManager.maxCollections"
-            >• {{ "createUnlimitedCollections" | i18n }}</small
-          >
-          <small *ngIf="selectableProduct.PasswordManager.baseStorageGb"
-            >•
-            {{
-              "gbEncryptedFileStorage"
-                | i18n: selectableProduct.PasswordManager.baseStorageGb + "GB"
-            }}</small
-          >
-          <small *ngIf="selectableProduct.hasGroups"
-            >• {{ "controlAccessWithGroups" | i18n }}</small
-          >
-          <small *ngIf="selectableProduct.hasApi">• {{ "trackAuditLogs" | i18n }}</small>
-          <small *ngIf="selectableProduct.hasDirectory"
-            >• {{ "syncUsersFromDirectory" | i18n }}</small
-          >
-          <small *ngIf="selectableProduct.hasSelfHost"
-            >• {{ "onPremHostingOptional" | i18n }}</small
-          >
-          <small *ngIf="selectableProduct.usersGetPremium">• {{ "usersGetPremium" | i18n }}</small>
-          <small *ngIf="selectableProduct.product != productTypes.Free"
-            >• {{ "priorityCustomerSupport" | i18n }}</small
-          >
-          <small *ngIf="selectableProduct.trialPeriodDays && createOrganization"
-            >•
-            {{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }}
-          </small>
-        </ng-template>
-      </ng-template>
-      <span *ngIf="selectableProduct.product != productTypes.Free">
-        <ng-container *ngIf="selectableProduct.PasswordManager.basePrice && !acceptingSponsorship">
-          {{
-            (selectableProduct.isAnnual
-              ? selectableProduct.PasswordManager.basePrice / 12
-              : selectableProduct.PasswordManager.basePrice
-            ) | currency: "$"
-          }}
-          /{{ "month" | i18n }},
-          {{ "includesXUsers" | i18n: selectableProduct.PasswordManager.baseSeats }}
-          <ng-container *ngIf="selectableProduct.PasswordManager.hasAdditionalSeatsOption">
-            {{ ("additionalUsers" | i18n).toLowerCase() }}
             {{
               (selectableProduct.isAnnual
-                ? selectableProduct.PasswordManager.seatPrice / 12
-                : selectableProduct.PasswordManager.seatPrice
+                ? selectableProduct.PasswordManager.basePrice / 12
+                : selectableProduct.PasswordManager.basePrice
               ) | currency: "$"
             }}
-            /{{ "month" | i18n }}
-          </ng-container>
-        </ng-container>
-      </span>
-      <span
-        *ngIf="
-          !selectableProduct.PasswordManager.basePrice &&
-          selectableProduct.PasswordManager.hasAdditionalSeatsOption
-        "
-      >
-        {{
-          "costPerUser"
-            | i18n
-              : ((selectableProduct.isAnnual
+            /{{ "month" | i18n }},
+            {{ "includesXUsers" | i18n: selectableProduct.PasswordManager.baseSeats }}
+            <ng-container *ngIf="selectableProduct.PasswordManager.hasAdditionalSeatsOption">
+              {{ ("additionalUsers" | i18n).toLowerCase() }}
+              {{
+                (selectableProduct.isAnnual
                   ? selectableProduct.PasswordManager.seatPrice / 12
                   : selectableProduct.PasswordManager.seatPrice
-                )
-                  | currency: "$")
-        }}
-        /{{ "month" | i18n }}
-      </span>
-      <span *ngIf="selectableProduct.product == productTypes.Free">{{ "freeForever" | i18n }}</span>
-    </label>
-  </div>
-  <div *ngIf="formGroup.value.product !== productTypes.Free">
-    <ng-container
+                ) | currency: "$"
+              }}
+              /{{ "month" | i18n }}
+            </ng-container>
+          </ng-container>
+        </span>
+        <span
+          *ngIf="
+            !selectableProduct.PasswordManager.basePrice &&
+            selectableProduct.PasswordManager.hasAdditionalSeatsOption
+          "
+        >
+          {{
+            "costPerUser"
+              | i18n
+                : ((selectableProduct.isAnnual
+                    ? selectableProduct.PasswordManager.seatPrice / 12
+                    : selectableProduct.PasswordManager.seatPrice
+                  )
+                    | currency: "$")
+          }}
+          /{{ "month" | i18n }}
+        </span>
+        <span *ngIf="selectableProduct.product == productTypes.Free">{{
+          "freeForever" | i18n
+        }}</span>
+      </bit-radio-group>
+    </div>
+  </bit-section>
+  <bit-section *ngIf="formGroup.value.product !== productTypes.Free">
+    <bit-section
       *ngIf="
         selectedPlan.PasswordManager.hasAdditionalSeatsOption &&
         !selectedPlan.PasswordManager.baseSeats
       "
     >
-      <h2 class="mt-5">{{ "users" | i18n }}</h2>
-      <div class="row">
-        <div class="col-6">
-          <label for="additionalSeats">{{ "userSeats" | i18n }}</label>
+      <h2 bitTypography="h2">{{ "users" | i18n }}</h2>
+      <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+        <bit-form-field class="tw-col-span-6">
+          <bit-label>{{ "userSeats" | i18n }}</bit-label>
           <input
-            id="additionalSeats"
-            class="form-control"
+            bitInput
             type="number"
-            name="additionalSeats"
             formControlName="additionalSeats"
             placeholder="{{ 'userSeatsDesc' | i18n }}"
             required
           />
-          <small class="text-muted form-text">{{ "userSeatsHowManyDesc" | i18n }}</small>
-        </div>
+          <bit-hint class="tw-text-sm">{{ "userSeatsHowManyDesc" | i18n }}</bit-hint>
+        </bit-form-field>
       </div>
-    </ng-container>
-    <h2 class="mt-5">{{ "addons" | i18n }}</h2>
-    <div
-      class="row"
-      *ngIf="
-        selectedPlan.PasswordManager.hasAdditionalSeatsOption &&
-        selectedPlan.PasswordManager.baseSeats
-      "
-    >
-      <div class="form-group col-6">
-        <label for="additionalSeats">{{ "additionalUserSeats" | i18n }}</label>
-        <input
-          id="additionalSeats"
-          class="form-control"
-          type="number"
-          name="additionalSeats"
-          formControlName="additionalSeats"
-          placeholder="{{ 'userSeatsDesc' | i18n }}"
-        />
-        <small class="text-muted form-text">{{
-          "userSeatsAdditionalDesc"
-            | i18n
-              : selectedPlan.PasswordManager.baseSeats
-              : (seatPriceMonthly(selectedPlan) | currency: "$")
-        }}</small>
-      </div>
-    </div>
-    <div class="row">
-      <div class="form-group col-6">
-        <label for="additionalStorage">{{ "additionalStorageGb" | i18n }}</label>
-        <input
-          id="additionalStorage"
-          class="form-control"
-          type="number"
-          name="additionalStorageGb"
-          formControlName="additionalStorage"
-          step="1"
-          placeholder="{{ 'additionalStorageGbDesc' | i18n }}"
-        />
-        <small class="text-muted form-text">{{
-          "additionalStorageIntervalDesc"
-            | i18n
-              : "1 GB"
-              : (additionalStoragePriceMonthly(selectedPlan) | currency: "$")
-              : ("month" | i18n)
-        }}</small>
-      </div>
-    </div>
-    <div class="row">
-      <div class="form-group col-6" *ngIf="selectedPlan.PasswordManager.hasPremiumAccessOption">
-        <div class="form-check">
+    </bit-section>
+    <bit-section>
+      <h2 bitTypography="h2">{{ "addons" | i18n }}</h2>
+      <div
+        class="tw-grid tw-grid-cols-12 tw-gap-4"
+        *ngIf="
+          selectedPlan.PasswordManager.hasAdditionalSeatsOption &&
+          selectedPlan.PasswordManager.baseSeats
+        "
+      >
+        <bit-form-field class="tw-col-span-6">
+          <bit-label>{{ "additionalUserSeats" | i18n }}</bit-label>
           <input
-            id="premiumAccess"
-            class="form-check-input"
-            type="checkbox"
-            name="premiumAccessAddon"
-            formControlName="premiumAccessAddon"
+            bitInput
+            type="number"
+            formControlName="additionalSeats"
+            placeholder="{{ 'userSeatsDesc' | i18n }}"
           />
-          <label for="premiumAccess" class="form-check-label bold">{{
-            "premiumAccess" | i18n
-          }}</label>
-        </div>
-        <small class="text-muted form-text">{{
-          "premiumAccessDesc" | i18n: (3.33 | currency: "$") : ("month" | i18n)
-        }}</small>
+          <bit-hint class="tx-text-sm"
+            >{{
+              "userSeatsAdditionalDesc"
+                | i18n
+                  : selectedPlan.PasswordManager.baseSeats
+                  : (seatPriceMonthly(selectedPlan) | currency: "$")
+            }}
+          </bit-hint>
+        </bit-form-field>
       </div>
-    </div>
-    <h2 class="spaced-header">{{ "summary" | i18n }}</h2>
-    <div class="form-check form-check-block" *ngFor="let selectablePlan of selectablePlans">
-      <input
-        class="form-check-input"
-        type="radio"
-        name="plan"
-        id="interval{{ selectablePlan.type }}"
-        [value]="selectablePlan.type"
-        formControlName="plan"
-      />
-      <label class="form-check-label" for="interval{{ selectablePlan.type }}">
-        <ng-container *ngIf="selectablePlan.isAnnual">
-          {{ "annually" | i18n }}
-          <small *ngIf="selectablePlan.PasswordManager.basePrice">
-            {{ "basePrice" | i18n }}:
-            {{
-              (selectablePlan.isAnnual
-                ? selectablePlan.PasswordManager.basePrice / 12
-                : selectablePlan.PasswordManager.basePrice
-              ) | currency: "$"
-            }}
-            &times; 12
-            {{ "monthAbbr" | i18n }}
-            =
-            <ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
-              <span style="text-decoration: line-through">{{
-                selectablePlan.PasswordManager.basePrice | currency: "$"
-              }}</span>
-              {{ "freeWithSponsorship" | i18n }}
-            </ng-container>
-            <ng-template #notAcceptingSponsorship>
-              {{ selectablePlan.PasswordManager.basePrice | currency: "$" }}
+      <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+        <bit-form-field class="tw-col-span-6">
+          <bit-label>{{ "additionalStorageGb" | i18n }}</bit-label>
+          <input
+            bitInput
+            type="number"
+            formControlName="additionalStorage"
+            step="1"
+            placeholder="{{ 'additionalStorageGbDesc' | i18n }}"
+          />
+          <bit-hint class="tw-text-sm">{{
+            "additionalStorageIntervalDesc"
+              | i18n
+                : "1 GB"
+                : (additionalStoragePriceMonthly(selectedPlan) | currency: "$")
+                : ("month" | i18n)
+          }}</bit-hint>
+        </bit-form-field>
+      </div>
+    </bit-section>
+    <bit-section>
+      <div
+        class="tw-grid tw-grid-cols-12 tw-gap-4"
+        *ngIf="selectedPlan.PasswordManager.hasPremiumAccessOption"
+      >
+        <bit-form-control class="tw-col-span-6">
+          <bit-label>{{ "premiumAccess" | i18n }}</bit-label>
+          <input type="checkbox" bitCheckbox formControlName="premiumAccessAddon" />
+          <bit-hint class="tw-text-sm">{{
+            "premiumAccessDesc" | i18n: (3.33 | currency: "$") : ("month" | i18n)
+          }}</bit-hint>
+        </bit-form-control>
+      </div>
+    </bit-section>
+    <bit-section *ngFor="let selectablePlan of selectablePlans">
+      <h2 bitTypography="h2">{{ "summary" | i18n }}</h2>
+      <bit-radio-group formControlName="plan">
+        <bit-radio-button
+          type="radio"
+          id="interval{{ selectablePlan.type }}"
+          [value]="selectablePlan.type"
+        >
+          <bit-label>{{ (selectablePlan.isAnnual ? "annually" : "monthly") | i18n }}</bit-label>
+          <bit-hint *ngIf="selectablePlan.isAnnual">
+            <p
+              class="tw-mb-0"
+              bitTypography="body2"
+              *ngIf="selectablePlan.PasswordManager.basePrice"
+            >
+              {{ "basePrice" | i18n }}:
+              {{
+                (selectablePlan.isAnnual
+                  ? selectablePlan.PasswordManager.basePrice / 12
+                  : selectablePlan.PasswordManager.basePrice
+                ) | currency: "$"
+              }}
+              &times; 12
+              {{ "monthAbbr" | i18n }}
+              =
+              <ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
+                <span class="tw-line-through">{{
+                  selectablePlan.PasswordManager.basePrice | currency: "$"
+                }}</span>
+                {{ "freeWithSponsorship" | i18n }}
+              </ng-container>
+              <ng-template #notAcceptingSponsorship>
+                {{ selectablePlan.PasswordManager.basePrice | currency: "$" }}
+                /{{ "year" | i18n }}
+              </ng-template>
+            </p>
+            <p
+              class="tw-mb-0"
+              bitTypography="body2"
+              *ngIf="selectablePlan.PasswordManager.hasAdditionalSeatsOption"
+            >
+              <span *ngIf="selectablePlan.PasswordManager.baseSeats"
+                >{{ "additionalUsers" | i18n }}:</span
+              >
+              <span *ngIf="!selectablePlan.PasswordManager.baseSeats">{{ "users" | i18n }}:</span>
+              {{ formGroup.controls["additionalSeats"].value || 0 }} &times;
+              {{
+                (selectablePlan.isAnnual
+                  ? selectablePlan.PasswordManager.seatPrice / 12
+                  : selectablePlan.PasswordManager.seatPrice
+                ) | currency: "$"
+              }}
+              &times; 12 {{ "monthAbbr" | i18n }} =
+              {{
+                passwordManagerSeatTotal(selectablePlan, formGroup.value.additionalSeats)
+                  | currency: "$"
+              }}
               /{{ "year" | i18n }}
-            </ng-template>
-          </small>
-          <small *ngIf="selectablePlan.PasswordManager.hasAdditionalSeatsOption">
-            <span *ngIf="selectablePlan.PasswordManager.baseSeats"
-              >{{ "additionalUsers" | i18n }}:</span
+            </p>
+            <p
+              class="tw-mb-0"
+              bitTypography="body2"
+              *ngIf="selectablePlan.PasswordManager.hasAdditionalStorageOption"
             >
-            <span *ngIf="!selectablePlan.PasswordManager.baseSeats">{{ "users" | i18n }}:</span>
-            {{ formGroup.controls["additionalSeats"].value || 0 }} &times;
-            {{
-              (selectablePlan.isAnnual
-                ? selectablePlan.PasswordManager.seatPrice / 12
-                : selectablePlan.PasswordManager.seatPrice
-              ) | currency: "$"
-            }}
-            &times; 12 {{ "monthAbbr" | i18n }} =
-            {{
-              passwordManagerSeatTotal(selectablePlan, formGroup.value.additionalSeats)
-                | currency: "$"
-            }}
-            /{{ "year" | i18n }}
-          </small>
-          <small *ngIf="selectablePlan.PasswordManager.hasAdditionalStorageOption">
-            {{ "additionalStorageGb" | i18n }}:
-            {{ formGroup.controls["additionalStorage"].value || 0 }} &times;
-            {{
-              (selectablePlan.isAnnual
-                ? selectablePlan.PasswordManager.additionalStoragePricePerGb / 12
-                : selectablePlan.PasswordManager.additionalStoragePricePerGb
-              ) | currency: "$"
-            }}
-            &times; 12 {{ "monthAbbr" | i18n }} =
-            {{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "year" | i18n }}
-          </small>
-        </ng-container>
-        <ng-container *ngIf="!selectablePlan.isAnnual">
-          {{ "monthly" | i18n }}
-          <small *ngIf="selectablePlan.PasswordManager.basePrice">
-            {{ "basePrice" | i18n }}:
-            {{ selectablePlan.PasswordManager.basePrice | currency: "$" }}
-            {{ "monthAbbr" | i18n }}
-            =
-            {{ selectablePlan.PasswordManager.basePrice | currency: "$" }}
-            /{{ "month" | i18n }}
-          </small>
-          <small *ngIf="selectablePlan.PasswordManager.hasAdditionalSeatsOption">
-            <span *ngIf="selectablePlan.PasswordManager.baseSeats"
-              >{{ "additionalUsers" | i18n }}:</span
+              {{ "additionalStorageGb" | i18n }}:
+              {{ formGroup.controls["additionalStorage"].value || 0 }} &times;
+              {{
+                (selectablePlan.isAnnual
+                  ? selectablePlan.PasswordManager.additionalStoragePricePerGb / 12
+                  : selectablePlan.PasswordManager.additionalStoragePricePerGb
+                ) | currency: "$"
+              }}
+              &times; 12 {{ "monthAbbr" | i18n }} =
+              {{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "year" | i18n }}
+            </p>
+          </bit-hint>
+          <bit-hint *ngIf="!selectablePlan.isAnnual">
+            <p
+              class="tw-mb-0"
+              bitTypography="body2"
+              *ngIf="selectablePlan.PasswordManager.basePrice"
             >
-            <span *ngIf="!selectablePlan.PasswordManager.baseSeats">{{ "users" | i18n }}:</span>
-            {{ formGroup.controls["additionalSeats"].value || 0 }} &times;
-            {{ selectablePlan.PasswordManager.seatPrice | currency: "$" }}
-            {{ "monthAbbr" | i18n }} =
-            {{
-              passwordManagerSeatTotal(selectablePlan, formGroup.value.additionalSeats)
-                | currency: "$"
-            }}
-            /{{ "month" | i18n }}
-          </small>
-          <small *ngIf="selectablePlan.PasswordManager.hasAdditionalStorageOption">
-            {{ "additionalStorageGb" | i18n }}:
-            {{ formGroup.controls["additionalStorage"].value || 0 }} &times;
-            {{ selectablePlan.PasswordManager.additionalStoragePricePerGb | currency: "$" }}
-            {{ "monthAbbr" | i18n }} =
-            {{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "month" | i18n }}
-          </small>
-        </ng-container>
-      </label>
-    </div>
-  </div>
+              {{ "basePrice" | i18n }}:
+              {{ selectablePlan.PasswordManager.basePrice | currency: "$" }}
+              {{ "monthAbbr" | i18n }}
+              =
+              {{ selectablePlan.PasswordManager.basePrice | currency: "$" }}
+              /{{ "month" | i18n }}
+            </p>
+            <p
+              class="tw-mb-0"
+              bitTypography="body2"
+              *ngIf="selectablePlan.PasswordManager.hasAdditionalSeatsOption"
+            >
+              <span *ngIf="selectablePlan.PasswordManager.baseSeats"
+                >{{ "additionalUsers" | i18n }}:</span
+              >
+              <span *ngIf="!selectablePlan.PasswordManager.baseSeats">{{ "users" | i18n }}:</span>
+              {{ formGroup.controls["additionalSeats"].value || 0 }} &times;
+              {{ selectablePlan.PasswordManager.seatPrice | currency: "$" }}
+              {{ "monthAbbr" | i18n }} =
+              {{
+                passwordManagerSeatTotal(selectablePlan, formGroup.value.additionalSeats)
+                  | currency: "$"
+              }}
+              /{{ "month" | i18n }}
+            </p>
+            <p
+              class="tw-mb-0"
+              bitTypography="body2"
+              *ngIf="selectablePlan.PasswordManager.hasAdditionalStorageOption"
+            >
+              {{ "additionalStorageGb" | i18n }}:
+              {{ formGroup.controls["additionalStorage"].value || 0 }} &times;
+              {{ selectablePlan.PasswordManager.additionalStoragePricePerGb | currency: "$" }}
+              {{ "monthAbbr" | i18n }} =
+              {{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "month" | i18n }}
+            </p>
+          </bit-hint>
+        </bit-radio-button>
+      </bit-radio-group>
+    </bit-section>
+  </bit-section>
 
   <!-- Secrets Manager -->
-  <div class="tw-my-10">
+  <bit-section>
     <sm-subscribe
       *ngIf="planOffersSecretsManager && !hasProvider"
       [formGroup]="formGroup.controls.secretsManager"
       [selectedPlan]="selectedSecretsManagerPlan"
       [upgradeOrganization]="!createOrganization"
     ></sm-subscribe>
-  </div>
+  </bit-section>
 
   <!-- Payment info -->
-  <div *ngIf="formGroup.value.product !== productTypes.Free">
-    <h2 class="mb-4">
+  <bit-section *ngIf="formGroup.value.product !== productTypes.Free">
+    <h2 bitTypography="h2">
       {{ (createOrganization ? "paymentInformation" : "billingInformation") | i18n }}
     </h2>
-    <small class="text-muted font-italic mb-3 d-block">
+    <p class="tw-text-muted tw-italic tw-mb-3 tw-block" bitTypography="body2">
       {{ paymentDesc }}
-    </small>
+    </p>
     <app-payment
       *ngIf="createOrganization || upgradeRequiresPaymentMethod"
       [hideCredit]="true"
     ></app-payment>
     <app-tax-info (onCountryChanged)="changedCountry()"></app-tax-info>
-    <div id="price" class="my-4">
-      <div class="text-muted text-sm">
+    <div id="price" class="tw-my-4">
+      <div class="tw-text-muted tw-text-base">
         {{ "passwordManagerPlanPrice" | i18n }}: {{ passwordManagerSubtotal | currency: "USD $" }}
         <br />
         <span *ngIf="planOffersSecretsManager && formGroup.value.secretsManager.enabled">
@@ -405,8 +433,8 @@
           {{ "estimatedTax" | i18n }}: {{ taxCharges | currency: "USD $" }}
         </ng-container>
       </div>
-      <hr class="my-1 col-3 ml-0" />
-      <p class="text-lg">
+      <hr class="tw-my-1 tw-grid tw-grid-cols-3 tw-ml-0" />
+      <p class="tw-text-lg">
         <strong>{{ "total" | i18n }}:</strong> {{ total | currency: "USD $" }}/{{
           selectedPlanInterval | i18n
         }}
@@ -415,22 +443,29 @@
     <ng-container *ngIf="!createOrganization">
       <app-payment [showMethods]="false"></app-payment>
     </ng-container>
-  </div>
-  <div *ngIf="singleOrgPolicyBlock" class="mt-4">
+  </bit-section>
+  <bit-section *ngIf="singleOrgPolicyBlock">
     <app-callout [type]="'error'">{{ "singleOrgBlockCreateMessage" | i18n }}</app-callout>
-  </div>
-  <div class="mt-4">
+  </bit-section>
+  <bit-section>
     <button
       type="submit"
       buttonType="primary"
       bitButton
-      [loading]="form.loading"
+      bitFormButton
       [disabled]="!formGroup.valid"
     >
       {{ "submit" | i18n }}
     </button>
-    <button type="button" buttonType="secondary" bitButton (click)="cancel()" *ngIf="showCancel">
+    <button
+      type="button"
+      buttonType="secondary"
+      bitButton
+      bitFormButton
+      (click)="cancel()"
+      *ngIf="showCancel"
+    >
       {{ "cancel" | i18n }}
     </button>
-  </div>
+  </bit-section>
 </form>

apps/web/src/app/billing/organizations/organization-plans.component.ts

@@ -70,6 +70,7 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
   @Input() showCancel = false;
   @Input() acceptingSponsorship = false;
   @Input() currentPlan: PlanResponse;
+  selectedFile: File;
 
   @Input()
   get product(): ProductType {
@@ -109,6 +110,10 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
 
   secretsManagerSubscription = secretsManagerSubscribeFormFactory(this.formBuilder);
 
+  selfHostedForm = this.formBuilder.group({
+    file: [null, [Validators.required]],
+  });
+
   formGroup = this.formBuilder.group({
     name: [""],
     billingEmail: ["", [Validators.email]],
@@ -527,72 +532,72 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
     this.onCanceled.emit();
   }
 
-  async submit() {
+  setSelectedFile(event: Event) {
+    const fileInputEl = <HTMLInputElement>event.target;
+    this.selectedFile = fileInputEl.files.length > 0 ? fileInputEl.files[0] : null;
+  }
+
+  submit = async () => {
     if (this.singleOrgPolicyBlock) {
       return;
     }
+    const doSubmit = async (): Promise<string> => {
+      let orgId: string = null;
+      if (this.createOrganization) {
+        const orgKey = await this.cryptoService.makeOrgKey<OrgKey>();
+        const key = orgKey[0].encryptedString;
+        const collection = await this.cryptoService.encrypt(
+          this.i18nService.t("defaultCollection"),
+          orgKey[1],
+        );
+        const collectionCt = collection.encryptedString;
+        const orgKeys = await this.cryptoService.makeKeyPair(orgKey[1]);
 
-    try {
-      const doSubmit = async (): Promise<string> => {
-        let orgId: string = null;
-        if (this.createOrganization) {
-          const orgKey = await this.cryptoService.makeOrgKey<OrgKey>();
-          const key = orgKey[0].encryptedString;
-          const collection = await this.cryptoService.encrypt(
-            this.i18nService.t("defaultCollection"),
-            orgKey[1],
-          );
-          const collectionCt = collection.encryptedString;
-          const orgKeys = await this.cryptoService.makeKeyPair(orgKey[1]);
-
-          if (this.selfHosted) {
-            orgId = await this.createSelfHosted(key, collectionCt, orgKeys);
-          } else {
-            orgId = await this.createCloudHosted(key, collectionCt, orgKeys, orgKey[1]);
-          }
-
-          this.platformUtilsService.showToast(
-            "success",
-            this.i18nService.t("organizationCreated"),
-            this.i18nService.t("organizationReadyToGo"),
-          );
+        if (this.selfHosted) {
+          orgId = await this.createSelfHosted(key, collectionCt, orgKeys);
         } else {
-          orgId = await this.updateOrganization(orgId);
-          this.platformUtilsService.showToast(
-            "success",
-            null,
-            this.i18nService.t("organizationUpgraded"),
-          );
+          orgId = await this.createCloudHosted(key, collectionCt, orgKeys, orgKey[1]);
         }
 
-        await this.apiService.refreshIdentityToken();
-        await this.syncService.fullSync(true);
+        this.platformUtilsService.showToast(
+          "success",
+          this.i18nService.t("organizationCreated"),
+          this.i18nService.t("organizationReadyToGo"),
+        );
+      } else {
+        orgId = await this.updateOrganization(orgId);
+        this.platformUtilsService.showToast(
+          "success",
+          null,
+          this.i18nService.t("organizationUpgraded"),
+        );
+      }
 
-        if (!this.acceptingSponsorship && !this.isInTrialFlow) {
-          // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          this.router.navigate(["/organizations/" + orgId]);
-        }
+      await this.apiService.refreshIdentityToken();
+      await this.syncService.fullSync(true);
 
-        if (this.isInTrialFlow) {
-          this.onTrialBillingSuccess.emit({
-            orgId: orgId,
-            subLabelText: this.billingSubLabelText(),
-          });
-        }
+      if (!this.acceptingSponsorship && !this.isInTrialFlow) {
+        // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        this.router.navigate(["/organizations/" + orgId]);
+      }
 
-        return orgId;
-      };
+      if (this.isInTrialFlow) {
+        this.onTrialBillingSuccess.emit({
+          orgId: orgId,
+          subLabelText: this.billingSubLabelText(),
+        });
+      }
 
-      this.formPromise = doSubmit();
-      const organizationId = await this.formPromise;
-      this.onSuccess.emit({ organizationId: organizationId });
-      // TODO: No one actually listening to this message?
-      this.messagingService.send("organizationCreated", { organizationId });
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
+      return orgId;
+    };
+
+    this.formPromise = doSubmit();
+    const organizationId = await this.formPromise;
+    this.onSuccess.emit({ organizationId: organizationId });
+    // TODO: No one actually listening to this message?
+    this.messagingService.send("organizationCreated", { organizationId });
+  };
 
   private async updateOrganization(orgId: string) {
     const request = new OrganizationUpgradeRequest();
@@ -693,14 +698,12 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
   }
 
   private async createSelfHosted(key: string, collectionCt: string, orgKeys: [string, EncString]) {
-    const fileEl = document.getElementById("file") as HTMLInputElement;
-    const files = fileEl.files;
-    if (files == null || files.length === 0) {
+    if (!this.selectedFile) {
       throw new Error(this.i18nService.t("selectFile"));
     }
 
     const fd = new FormData();
-    fd.append("license", files[0]);
+    fd.append("license", this.selectedFile);
     fd.append("key", key);
     fd.append("collectionName", collectionCt);
     const response = await this.organizationApiService.createLicense(fd);

apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.ts

@@ -58,7 +58,7 @@ export class VaultCipherRowComponent {
   }
 
   protected editCollections() {
-    this.onEvent.emit({ type: "viewCollections", item: this.cipher });
+    this.onEvent.emit({ type: "viewCipherCollections", item: this.cipher });
   }
 
   protected events() {

apps/web/src/app/vault/components/vault-items/vault-collection-row.component.html

@@ -63,7 +63,7 @@
 </td>
 <td bitCell [ngClass]="RowHeightClass" class="tw-text-right">
   <button
-    *ngIf="canEditCollection || canDeleteCollection"
+    *ngIf="canEditCollection || canDeleteCollection || canViewCollectionInfo"
     [disabled]="disabled"
     [bitMenuTriggerFor]="collectionOptions"
     size="small"
@@ -73,14 +73,28 @@
     appStopProp
   ></button>
   <bit-menu #collectionOptions>
-    <button *ngIf="canEditCollection" type="button" bitMenuItem (click)="edit()">
-      <i class="bwi bwi-fw bwi-pencil-square" aria-hidden="true"></i>
-      {{ "editInfo" | i18n }}
-    </button>
-    <button *ngIf="canEditCollection" type="button" bitMenuItem (click)="access()">
-      <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
-      {{ "access" | i18n }}
-    </button>
+    <ng-container *ngIf="canEditCollection">
+      <button type="button" bitMenuItem (click)="edit(false)">
+        <i class="bwi bwi-fw bwi-pencil-square" aria-hidden="true"></i>
+        {{ "editInfo" | i18n }}
+      </button>
+      <button type="button" bitMenuItem (click)="access(false)">
+        <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
+        {{ "access" | i18n }}
+      </button>
+    </ng-container>
+    <ng-container
+      *ngIf="flexibleCollectionsV1Enabled && !canEditCollection && canViewCollectionInfo"
+    >
+      <button type="button" bitMenuItem (click)="edit(true)">
+        <i class="bwi bwi-fw bwi-pencil-square" aria-hidden="true"></i>
+        {{ "viewInfo" | i18n }}
+      </button>
+      <button type="button" bitMenuItem (click)="access(true)">
+        <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
+        {{ "viewAccess" | i18n }}
+      </button>
+    </ng-container>
     <button *ngIf="canDeleteCollection" type="button" bitMenuItem (click)="deleteCollection()">
       <span class="tw-text-danger">
         <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>

apps/web/src/app/vault/components/vault-items/vault-collection-row.component.ts

@@ -30,9 +30,11 @@ export class VaultCollectionRowComponent {
   @Input() showGroups: boolean;
   @Input() canEditCollection: boolean;
   @Input() canDeleteCollection: boolean;
+  @Input() canViewCollectionInfo: boolean;
   @Input() organizations: Organization[];
   @Input() groups: GroupView[];
   @Input() showPermissionsColumn: boolean;
+  @Input() flexibleCollectionsV1Enabled: boolean;
 
   @Output() onEvent = new EventEmitter<VaultItemEvent>();
 
@@ -71,12 +73,12 @@ export class VaultCollectionRowComponent {
     return "";
   }
 
-  protected edit() {
-    this.onEvent.next({ type: "editCollection", item: this.collection });
+  protected edit(readonly: boolean) {
+    this.onEvent.next({ type: "editCollection", item: this.collection, readonly: readonly });
   }
 
-  protected access() {
-    this.onEvent.next({ type: "viewCollectionAccess", item: this.collection });
+  protected access(readonly: boolean) {
+    this.onEvent.next({ type: "viewCollectionAccess", item: this.collection, readonly: readonly });
   }
 
   protected deleteCollection() {

apps/web/src/app/vault/components/vault-items/vault-item-event.ts

@@ -5,11 +5,11 @@ import { VaultItem } from "./vault-item";
 
 export type VaultItemEvent =
   | { type: "viewAttachments"; item: CipherView }
-  | { type: "viewCollections"; item: CipherView }
+  | { type: "viewCipherCollections"; item: CipherView }
   | { type: "bulkEditCollectionAccess"; items: CollectionView[] }
-  | { type: "viewCollectionAccess"; item: CollectionView }
+  | { type: "viewCollectionAccess"; item: CollectionView; readonly: boolean }
   | { type: "viewEvents"; item: CipherView }
-  | { type: "editCollection"; item: CollectionView }
+  | { type: "editCollection"; item: CollectionView; readonly: boolean }
   | { type: "clone"; item: CipherView }
   | { type: "restore"; items: CipherView[] }
   | { type: "delete"; items: VaultItem[] }

apps/web/src/app/vault/components/vault-items/vault-items.component.html

@@ -95,6 +95,8 @@
           [groups]="allGroups"
           [canDeleteCollection]="canDeleteCollection(item.collection)"
           [canEditCollection]="canEditCollection(item.collection)"
+          [canViewCollectionInfo]="canViewCollectionInfo(item.collection)"
+          [flexibleCollectionsV1Enabled]="flexibleCollectionsV1Enabled"
           [checked]="selection.isSelected(item)"
           (checkedToggled)="selection.toggle(item)"
           (onEvent)="event($event)"

apps/web/src/app/vault/components/vault-items/vault-items.component.ts

@@ -165,6 +165,11 @@ export class VaultItemsComponent {
     return collection.canDelete(organization);
   }
 
+  protected canViewCollectionInfo(collection: CollectionView) {
+    const organization = this.allOrganizations.find((o) => o.id === collection.organizationId);
+    return collection.canViewCollectionInfo(organization);
+  }
+
   protected toggleAll() {
     this.isAllSelected
       ? this.selection.clear()

apps/web/src/app/vault/core/views/collection-admin.view.ts

@@ -4,6 +4,7 @@ import { CollectionAccessDetailsResponse } from "@bitwarden/common/src/vault/mod
 import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
 
 import { CollectionAccessSelectionView } from "../../../admin-console/organizations/core/views/collection-access-selection.view";
+import { Unassigned } from "../../individual-vault/vault-filter/shared/models/routed-vault-filter.model";
 
 export class CollectionAdminView extends CollectionView {
   groups: CollectionAccessSelectionView[] = [];
@@ -89,4 +90,19 @@ export class CollectionAdminView extends CollectionView {
   canEditGroupAccess(org: Organization, flexibleCollectionsV1Enabled: boolean): boolean {
     return this.canEdit(org, flexibleCollectionsV1Enabled) || org.permissions.manageGroups;
   }
+
+  /**
+   * Returns true if the user can view collection info and access in a read-only state from the Admin Console
+   */
+  override canViewCollectionInfo(org: Organization | undefined): boolean {
+    if (this.isUnassignedCollection) {
+      return false;
+    }
+
+    return this.manage || org?.isAdmin || org?.permissions.editAnyCollection;
+  }
+
+  get isUnassignedCollection() {
+    return this.id === Unassigned;
+  }
 }

apps/web/src/app/vault/individual-vault/vault.component.ts

@@ -434,7 +434,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     try {
       if (event.type === "viewAttachments") {
         await this.editCipherAttachments(event.item);
-      } else if (event.type === "viewCollections") {
+      } else if (event.type === "viewCipherCollections") {
         await this.editCipherCollections(event.item);
       } else if (event.type === "clone") {
         await this.cloneCipher(event.item);

apps/web/src/app/vault/org-vault/vault-header/vault-header.component.html

@@ -37,24 +37,44 @@
         aria-haspopup="true"
       ></button>
       <bit-menu #editCollectionMenu>
-        <button
-          type="button"
-          *ngIf="canEditCollection"
-          bitMenuItem
-          (click)="editCollection(CollectionDialogTabType.Info)"
+        <ng-container *ngIf="canEditCollection">
+          <button
+            type="button"
+            bitMenuItem
+            (click)="editCollection(CollectionDialogTabType.Info, false)"
+          >
+            <i class="bwi bwi-fw bwi-pencil-square" aria-hidden="true"></i>
+            {{ "editInfo" | i18n }}
+          </button>
+          <button
+            type="button"
+            bitMenuItem
+            (click)="editCollection(CollectionDialogTabType.Access, false)"
+          >
+            <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
+            {{ "access" | i18n }}
+          </button>
+        </ng-container>
+        <ng-container
+          *ngIf="flexibleCollectionsV1Enabled && !canEditCollection && canViewCollectionInfo"
         >
-          <i class="bwi bwi-fw bwi-pencil-square" aria-hidden="true"></i>
-          {{ "editInfo" | i18n }}
-        </button>
-        <button
-          type="button"
-          *ngIf="canEditCollection"
-          bitMenuItem
-          (click)="editCollection(CollectionDialogTabType.Access)"
-        >
-          <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
-          {{ "access" | i18n }}
-        </button>
+          <button
+            type="button"
+            bitMenuItem
+            (click)="editCollection(CollectionDialogTabType.Info, true)"
+          >
+            <i class="bwi bwi-fw bwi-pencil-square" aria-hidden="true"></i>
+            {{ "viewInfo" | i18n }}
+          </button>
+          <button
+            type="button"
+            bitMenuItem
+            (click)="editCollection(CollectionDialogTabType.Access, true)"
+          >
+            <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
+            {{ "viewAccess" | i18n }}
+          </button>
+        </ng-container>
         <button type="button" *ngIf="canDeleteCollection" bitMenuItem (click)="deleteCollection()">
           <span class="tw-text-danger">
             <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>

apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts

@@ -53,7 +53,10 @@ export class VaultHeaderComponent implements OnInit {
   @Output() onAddCollection = new EventEmitter<void>();
 
   /** Emits an event when the edit collection button is clicked in the header */
-  @Output() onEditCollection = new EventEmitter<{ tab: CollectionDialogTabType }>();
+  @Output() onEditCollection = new EventEmitter<{
+    tab: CollectionDialogTabType;
+    readonly: boolean;
+  }>();
 
   /** Emits an event when the delete collection button is clicked in the header */
   @Output() onDeleteCollection = new EventEmitter<void>();
@@ -64,7 +67,7 @@ export class VaultHeaderComponent implements OnInit {
   protected CollectionDialogTabType = CollectionDialogTabType;
   protected organizations$ = this.organizationService.organizations$;
 
-  private flexibleCollectionsV1Enabled = false;
+  protected flexibleCollectionsV1Enabled = false;
   private restrictProviderAccessFlag = false;
 
   constructor(
@@ -193,8 +196,8 @@ export class VaultHeaderComponent implements OnInit {
     this.onAddCollection.emit();
   }
 
-  async editCollection(tab: CollectionDialogTabType): Promise<void> {
-    this.onEditCollection.emit({ tab });
+  async editCollection(tab: CollectionDialogTabType, readonly: boolean): Promise<void> {
+    this.onEditCollection.emit({ tab, readonly });
   }
 
   get canDeleteCollection(): boolean {
@@ -207,6 +210,10 @@ export class VaultHeaderComponent implements OnInit {
     return this.collection.node.canDelete(this.organization);
   }
 
+  get canViewCollectionInfo(): boolean {
+    return this.collection.node.canViewCollectionInfo(this.organization);
+  }
+
   get canCreateCollection(): boolean {
     return this.organization?.canCreateNewCollections;
   }

apps/web/src/app/vault/org-vault/vault.component.html

@@ -6,7 +6,7 @@
   [searchText]="currentSearchText$ | async"
   (onAddCipher)="addCipher()"
   (onAddCollection)="addCollection()"
-  (onEditCollection)="editCollection(selectedCollection.node, $event.tab)"
+  (onEditCollection)="editCollection(selectedCollection.node, $event.tab, $event.readonly)"
   (onDeleteCollection)="deleteCollection(selectedCollection.node)"
   (searchTextChanged)="filterSearchText($event)"
 ></app-org-vault-header>

apps/web/src/app/vault/org-vault/vault.component.ts

@@ -736,7 +736,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     try {
       if (event.type === "viewAttachments") {
         await this.editCipherAttachments(event.item);
-      } else if (event.type === "viewCollections") {
+      } else if (event.type === "viewCipherCollections") {
         await this.editCipherCollections(event.item);
       } else if (event.type === "clone") {
         await this.cloneCipher(event.item);
@@ -761,9 +761,9 @@ export class VaultComponent implements OnInit, OnDestroy {
       } else if (event.type === "copyField") {
         await this.copy(event.item, event.field);
       } else if (event.type === "editCollection") {
-        await this.editCollection(event.item, CollectionDialogTabType.Info);
+        await this.editCollection(event.item, CollectionDialogTabType.Info, event.readonly);
       } else if (event.type === "viewCollectionAccess") {
-        await this.editCollection(event.item, CollectionDialogTabType.Access);
+        await this.editCollection(event.item, CollectionDialogTabType.Access, event.readonly);
       } else if (event.type === "bulkEditCollectionAccess") {
         await this.bulkEditCollectionAccess(event.items);
       } else if (event.type === "assignToCollections") {
@@ -1190,7 +1190,7 @@ export class VaultComponent implements OnInit, OnDestroy {
   async editCollection(
     c: CollectionView,
     tab: CollectionDialogTabType,
-    readonly: boolean = false,
+    readonly: boolean,
   ): Promise<void> {
     const dialog = openCollectionDialog(this.dialogService, {
       data: {

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

@@ -8081,5 +8081,11 @@
   },
   "manageBillingFromProviderPortalMessage": {
     "message": "Manage billing from the Provider Portal"
+  },
+  "viewInfo": {
+    "message": "View info"
+  },
+  "viewAccess": {
+    "message": "View access"
   }
 }

libs/auth/src/angular/anon-layout/anon-layout.component.html

@@ -13,7 +13,7 @@
     </h1>
     <p *ngIf="subtitle" bitTypography="body1">{{ subtitle }}</p>
   </div>
-  <div class="tw-mb-auto tw-mx-auto tw-grid">
+  <div class="tw-mb-auto tw-mx-auto tw-flex tw-flex-col tw-items-center">
     <div
       class="tw-rounded-xl tw-mb-9 tw-mx-auto sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"
     >

libs/common/src/enums/feature-flag.enum.ts

@@ -9,7 +9,6 @@ export enum FeatureFlag {
   FlexibleCollectionsV1 = "flexible-collections-v-1", // v-1 is intentional
   VaultOnboarding = "vault-onboarding",
   GeneratorToolsModernization = "generator-tools-modernization",
-  KeyRotationImprovements = "key-rotation-improvements",
   FlexibleCollectionsMigration = "flexible-collections-migration",
   ShowPaymentMethodWarningBanners = "show-payment-method-warning-banners",
   EnableConsolidatedBilling = "enable-consolidated-billing",
@@ -37,7 +36,6 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.FlexibleCollectionsV1]: FALSE,
   [FeatureFlag.VaultOnboarding]: FALSE,
   [FeatureFlag.GeneratorToolsModernization]: FALSE,
-  [FeatureFlag.KeyRotationImprovements]: FALSE,
   [FeatureFlag.FlexibleCollectionsMigration]: FALSE,
   [FeatureFlag.ShowPaymentMethodWarningBanners]: FALSE,
   [FeatureFlag.EnableConsolidatedBilling]: FALSE,

libs/common/src/vault/models/view/collection.view.ts

@@ -87,6 +87,13 @@ export class CollectionView implements View, ITreeNodeObject {
       : org?.canDeleteAnyCollection || org?.canDeleteAssignedCollections;
   }
 
+  /**
+   * Returns true if the user can view collection info and access in a read-only state from the individual vault
+   */
+  canViewCollectionInfo(org: Organization | undefined): boolean {
+    return false;
+  }
+
   static fromJSON(obj: Jsonify<CollectionView>) {
     return Object.assign(new CollectionView(new Collection()), obj);
   }