web template modifications

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

@@ -800,6 +800,9 @@
   "logInWithPasskey": {
     "message": "Log in with passkey"
   },
+  "useSingleSignOn": {
+    "message": "Use single sign-on"
+  },
   "invalidPasskeyPleaseTryAgain": {
     "message": "Invalid Passkey. Please try again."
   },

libs/auth/src/angular/login/login-secondary-content.component.ts

@@ -27,4 +27,8 @@ export class LoginSecondaryContentComponent {
   // also passes the email address to the registration page. We need to find a way to
   // do this now that the "Create account" link is in a separate component as
   // secondary content.
+
+  // TODO-rr-bw: Also need to make sure clicking the "Create account" link doesn't
+  // trigger form validation, causing the link to jump down on the page. See comment
+  // on this in the original web login.component.html (lines 51-57).
 }

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

@@ -12,23 +12,16 @@
 
   # UI States
 
-    Each client template is split into two UI states:
+    Each client template has two UI states, defined by `LoginUiState` enum:
       State 1: displays the email input field + continue button
       State 2: displays the master password input field + login button
-    
-    These are defined by the `LoginUiState` enum:
-
-      enum LoginUiState {
-        EMAIL_ENTRY = "EmailEntry",
-        MASTER_PASSWORD_ENTRY = "MasterPasswordEntry",
-      }
 -->
 
 <!--------------------------------->
 <!--        Web Template         -->
 <!--------------------------------->
 <!--
-    TODO-rr-bw: Clarify this comment if necessary.
+    TODO-rr-bw: Clarify this comment if necessary. Also check if there's a better way to handle this.
 
     Why not use <form *ngIf="clientType === ClientType.Web"> to display this section?
     Because this file contains 3 separate templates for Web, Browser, and Desktop. For Web,
@@ -55,17 +48,17 @@
       <bit-label>{{ "rememberEmail" | i18n }}</bit-label>
     </bit-form-control>
 
-    <div class="tw-grid tw-gap-3 tw-text-center">
+    <div class="tw-grid tw-gap-3">
       <!-- Continue button -->
       <button type="submit" bitButton block buttonType="primary" (click)="validateEmail()">
         <span>{{ "continue" | i18n }}</span>
       </button>
 
-      <div>{{ "or" | i18n }}</div>
+      <div class="tw-text-center">{{ "or" | i18n }}</div>
 
       <!-- Link to Login with Passkey page -->
       <a
-        bitLink
+        bitButton
         block
         linkType="primary"
         routerLink="/login-with-passkey"
@@ -73,17 +66,31 @@
       >
         <span><i class="bwi bwi-passkey"></i>{{ "logInWithPasskey" | i18n }}</span>
       </a>
+
+      <!-- Link to Login with SSO page -->
+      <a
+        bitButton
+        block
+        buttonType="secondary"
+        routerLink="/sso"
+        [queryParams]="{ email: formGroup.value.email }"
+        (click)="saveEmailSettings()"
+      >
+        <i class="bwi bwi-provider"></i>
+        {{ "useSingleSignOn" | i18n }}
+      </a>
     </div>
   </ng-container>
 
   <!--
+    TODO-rr-bw: Clarify this comment if necessary. Also check if there's a better way to handle this.
+    
     Why not use <ng-container *ngIf="validatedEmail"> to display this section?
     Because we want access to the masterPasswordInput reference in the class file.
     - Using a hidden div allows us to access the reference without rendering the div initially.
     - Using *ngIf would not allow us to access the reference without rendering the ng-container initially.
   -->
   <div [ngClass]="{ 'tw-hidden': uiState !== LoginUiState.MASTER_PASSWORD_ENTRY }">
-    <div class="tw-mb-6 tw-h-28">
     <!-- Master Password input -->
     <bit-form-field class="!tw-mb-1">
       <bit-label>{{ "masterPass" | i18n }}</bit-label>
@@ -93,13 +100,13 @@
 
     <!-- Link to Password Hint page -->
     <a
-        class="tw-mt-2 tw-font-semibold"
+      class="tw-inline-block tw-mb-4 tw-font-semibold"
       routerLink="/hint"
       (mousedown)="goToHint()"
       (click)="saveEmailSettings()"
-        >{{ "getMasterPasswordHint" | i18n }}</a
     >
-    </div>
+      {{ "getMasterPasswordHint" | i18n }}
+    </a>
 
     <!-- TODO-rr-bw: will we still be handling captcha? -->
     <!-- Captcha iframe -->
@@ -108,13 +115,14 @@
     </div>
 
     <!-- Button to Login with Master Password -->
-    <div class="tw-mb-3 tw-flex tw-space-x-4">
+    <div class="tw-grid tw-gap-3">
       <button type="submit" bitButton bitFormButton block buttonType="primary">
         <span>{{ "loginWithMasterPassword" | i18n }}</span>
       </button>
-    </div>
 
-    <div class="tw-mb-3" *ngIf="showLoginWithDevice && showPasswordless">
+      <ng-container *ngIf="showLoginWithDevice && showPasswordless">
+        <div class="tw-text-center">{{ "or" | i18n }}</div>
+
         <button
           type="button"
           bitButton
@@ -124,28 +132,7 @@
         >
           <span><i class="bwi bwi-mobile"></i>{{ "loginWithDevice" | i18n }}</span>
         </button>
-    </div>
+      </ng-container>
-
-    <div class="tw-mb-3">
-      <a
-        bitButton
-        block
-        buttonType="secondary"
-        routerLink="/sso"
-        [queryParams]="{ email: formGroup.value.email }"
-        (click)="saveEmailSettings()"
-      >
-        <i class="bwi bwi-provider tw-mr-2"></i>
-        {{ "enterpriseSingleSignOn" | i18n }}
-      </a>
-    </div>
-
-    <hr />
-
-    <div class="tw-m-0 tw-text-sm">
-      <p class="tw-mb-1">{{ "loggingInAs" | i18n }} {{ loggedEmail }}</p>
-      <!-- TODO-rr-bw: check link -->
-      <a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
     </div>
   </div>
 </form>