feat(sso): [PM-8114] implement SSO component UI refresh

Consolidates existing SSO components into a single unified component in
libs/auth, matching the new design system. This implementation:

- Creates a new shared SsoComponent with extracted business logic
- Adds feature flag support for unauth-ui-refresh
- Updates page styling including new icons and typography
- Preserves web client claimed domain logic
- Maintains backwards compatibility with legacy views

PM-8114

---------

Co-authored-by: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Co-authored-by: Jared Snider <jsnider@bitwarden.com>

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

@@ -4,6 +4,7 @@
   [icon]="pageIcon"
   [showReadonlyHostname]="showReadonlyHostname"
   [maxWidth]="maxWidth"
+  [titleAreaMaxWidth]="titleAreaMaxWidth"
 >
   <router-outlet></router-outlet>
   <router-outlet slot="secondary" name="secondary"></router-outlet>

libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.ts

@@ -35,6 +35,10 @@ export interface AnonLayoutWrapperData {
    * Optional flag to set the max-width of the page. Defaults to 'md' if not provided.
    */
   maxWidth?: "md" | "3xl";
+  /**
+   * Optional flag to set the max-width of the title area. Defaults to null if not provided.
+   */
+  titleAreaMaxWidth?: "md";
 }
 
 @Component({
@@ -50,6 +54,7 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
   protected pageIcon: Icon;
   protected showReadonlyHostname: boolean;
   protected maxWidth: "md" | "3xl";
+  protected titleAreaMaxWidth: "md";
 
   constructor(
     private router: Router,
@@ -100,6 +105,7 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
 
     this.showReadonlyHostname = Boolean(firstChildRouteData["showReadonlyHostname"]);
     this.maxWidth = firstChildRouteData["maxWidth"];
+    this.titleAreaMaxWidth = firstChildRouteData["titleAreaMaxWidth"];
   }
 
   private listenForServiceDataChanges() {
@@ -157,6 +163,7 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
     this.pageIcon = null;
     this.showReadonlyHostname = null;
     this.maxWidth = null;
+    this.titleAreaMaxWidth = null;
   }
 
   ngOnDestroy() {

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

@@ -13,7 +13,10 @@
     <bit-icon [icon]="logo"></bit-icon>
   </a>
 
-  <div class="tw-text-center tw-mb-6">
+  <div
+    class="tw-text-center tw-mb-6"
+    [ngClass]="{ 'tw-max-w-md tw-mx-auto': titleAreaMaxWidth === 'md' }"
+  >
     <div class="tw-mx-auto tw-max-w-28 sm:tw-max-w-32">
       <bit-icon [icon]="icon"></bit-icon>
     </div>

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

@@ -34,6 +34,13 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
   @Input() hideLogo: boolean = false;
   @Input() hideFooter: boolean = false;
 
+  /**
+   * Max width of the title area content
+   *
+   * @default null
+   */
+  @Input() titleAreaMaxWidth?: "md";
+
   /**
    * Max width of the layout content
    *
@@ -60,6 +67,7 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
 
   async ngOnInit() {
     this.maxWidth = this.maxWidth ?? "md";
+    this.titleAreaMaxWidth = this.titleAreaMaxWidth ?? null;
     this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname();
     this.version = await this.platformUtilsService.getApplicationVersion();
 

libs/auth/src/angular/anon-layout/anon-layout.stories.ts

@@ -190,3 +190,22 @@ export const HideFooter: Story = {
     `,
   }),
 };
+
+export const WithTitleAreaMaxWidth: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+      title: "This is a very long long title to demonstrate titleAreaMaxWidth set to 'md'",
+      subtitle:
+        "This is a very long subtitle that demonstrates how the max width container handles longer text content with the titleAreaMaxWidth input set to 'md'. Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, quod est?",
+    },
+    template: `
+      <auth-anon-layout [title]="title" [subtitle]="subtitle" [showReadonlyHostname]="showReadonlyHostname" [hideLogo]="hideLogo" [titleAreaMaxWidth]="'md'">
+        <div>
+          <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
+          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
+        </div>
+      </auth-anon-layout>
+    `,
+  }),
+};