style(sso-login): (Auth) [PM-26535] Make SSO Button Primary if ssoRequired (#16757)

When SSO is required:
- Make the SSO button primary
- Add a tooltip to the disabled buttons

When SSO is not required:
- SSO button remains secondary
- No tooltip on the buttons

Feature Flags enabled: pm-22110-disable-alternate-login-methods

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

@@ -31,6 +31,9 @@
   "useSingleSignOn": {
     "message": "Use single sign-on"
   },
+  "yourOrganizationRequiresSingleSignOn": {
+    "message": "Your organization requires single sign-on."
+  },
   "welcomeBack": {
     "message": "Welcome back"
   },

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

@@ -771,6 +771,9 @@
   "useSingleSignOn": {
     "message": "Use single sign-on"
   },
+  "yourOrganizationRequiresSingleSignOn": {
+    "message": "Your organization requires single sign-on."
+  },
   "submit": {
     "message": "Submit"
   },

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

@@ -1314,6 +1314,9 @@
   "useSingleSignOn": {
     "message": "Use single sign-on"
   },
+  "yourOrganizationRequiresSingleSignOn": {
+    "message": "Your organization requires single sign-on."
+  },
   "welcomeBack": {
     "message": "Welcome back"
   },

libs/auth/src/angular/login/login.component.html

@@ -44,6 +44,8 @@
         block
         buttonType="primary"
         (click)="continuePressed()"
+        [bitTooltip]="ssoRequired ? ('yourOrganizationRequiresSingleSignOn' | i18n) : ''"
+        [addTooltipToDescribedby]="ssoRequired"
         [disabled]="ssoRequired"
       >
         {{ "continue" | i18n }}
@@ -59,6 +61,8 @@
           block
           buttonType="secondary"
           (click)="handleLoginWithPasskeyClick()"
+          [bitTooltip]="ssoRequired ? ('yourOrganizationRequiresSingleSignOn' | i18n) : ''"
+          [addTooltipToDescribedby]="ssoRequired"
           [disabled]="ssoRequired"
         >
           <i class="bwi bwi-passkey tw-mr-1" aria-hidden="true"></i>
@@ -67,7 +71,13 @@
       </ng-container>
 
       <!-- Button to Login with SSO -->
-      <button type="button" bitButton block buttonType="secondary" (click)="handleSsoClick()">
+      <button
+        type="button"
+        bitButton
+        block
+        [buttonType]="ssoRequired ? 'primary' : 'secondary'"
+        (click)="handleSsoClick()"
+      >
         <i class="bwi bwi-provider tw-mr-1" aria-hidden="true"></i>
         {{ "useSingleSignOn" | i18n }}
       </button>

libs/auth/src/angular/login/login.component.ts

@@ -54,6 +54,7 @@ import {
   IconButtonModule,
   LinkModule,
   ToastService,
+  TooltipDirective,
 } from "@bitwarden/components";
 
 import { LoginComponentService, PasswordPolicies } from "./login-component.service";
@@ -82,6 +83,7 @@ export enum LoginUiState {
     JslibModule,
     ReactiveFormsModule,
     RouterModule,
+    TooltipDirective,
   ],
 })
 export class LoginComponent implements OnInit, OnDestroy {

libs/components/src/index.ts

@@ -42,6 +42,7 @@ export * from "./table";
 export * from "./tabs";
 export * from "./toast";
 export * from "./toggle-group";
+export * from "./tooltip";
 export * from "./typography";
 export * from "./utils";
 export * from "./stepper";