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,78 +48,26 @@
       <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>
+        <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"
         (mousedown)="$event.preventDefault()"
       >
-        <span><i class="bwi bwi-passkey"></i> {{ "logInWithPasskey" | i18n }}</span>
+        <span><i class="bwi bwi-passkey"></i>{{ "logInWithPasskey" | i18n }}</span>
       </a>
-    </div>
-  </ng-container>
 
-  <!--
+      <!-- Link to Login with SSO page -->
-    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>
-        <input type="password" formControlName="masterPassword" bitInput #masterPasswordInput />
-        <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
-      </bit-form-field>
-
-      <!-- Link to Password Hint page -->
-      <a
-        class="tw-mt-2 tw-font-semibold"
-        routerLink="/hint"
-        (mousedown)="goToHint()"
-        (click)="saveEmailSettings()"
-        >{{ "getMasterPasswordHint" | i18n }}</a
-      >
-    </div>
-
-    <!-- TODO-rr-bw: will we still be handling captcha? -->
-    <!-- Captcha iframe -->
-    <div [hidden]="!showCaptcha()">
-      <iframe id="hcaptcha_iframe" height="80" sandbox="allow-scripts allow-same-origin"></iframe>
-    </div>
-
-    <!-- Button to Login with Master Password -->
-    <div class="tw-mb-3 tw-flex tw-space-x-4">
-      <button type="submit" bitButton bitFormButton block buttonType="primary">
-        <span> {{ "loginWithMasterPassword" | i18n }} </span>
-      </button>
-    </div>
-
-    <div class="tw-mb-3" *ngIf="showLoginWithDevice && showPasswordless">
-      <button
-        type="button"
-        bitButton
-        block
-        buttonType="secondary"
-        (click)="startAuthRequestLogin()"
-      >
-        <span><i class="bwi bwi-mobile"></i> {{ "loginWithDevice" | i18n }}</span>
-      </button>
-    </div>
-
-    <div class="tw-mb-3">
       <a
         bitButton
         block
@@ -135,17 +76,63 @@
         [queryParams]="{ email: formGroup.value.email }"
         (click)="saveEmailSettings()"
       >
-        <i class="bwi bwi-provider tw-mr-2"></i>
+        <i class="bwi bwi-provider"></i>
-        {{ "enterpriseSingleSignOn" | i18n }}
+        {{ "useSingleSignOn" | i18n }}
       </a>
     </div>
+  </ng-container>
 
-    <hr />
+  <!--
+    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 }">
+    <!-- Master Password input -->
+    <bit-form-field class="!tw-mb-1">
+      <bit-label>{{ "masterPass" | i18n }}</bit-label>
+      <input type="password" formControlName="masterPassword" bitInput #masterPasswordInput />
+      <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
+    </bit-form-field>
 
-    <div class="tw-m-0 tw-text-sm">
+    <!-- Link to Password Hint page -->
-      <p class="tw-mb-1">{{ "loggingInAs" | i18n }} {{ loggedEmail }}</p>
+    <a
-      <!-- TODO-rr-bw: check link -->
+      class="tw-inline-block tw-mb-4 tw-font-semibold"
-      <a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
+      routerLink="/hint"
+      (mousedown)="goToHint()"
+      (click)="saveEmailSettings()"
+    >
+      {{ "getMasterPasswordHint" | i18n }}
+    </a>
+
+    <!-- TODO-rr-bw: will we still be handling captcha? -->
+    <!-- Captcha iframe -->
+    <div [hidden]="!showCaptcha()">
+      <iframe id="hcaptcha_iframe" height="80" sandbox="allow-scripts allow-same-origin"></iframe>
+    </div>
+
+    <!-- Button to Login with Master Password -->
+    <div class="tw-grid tw-gap-3">
+      <button type="submit" bitButton bitFormButton block buttonType="primary">
+        <span>{{ "loginWithMasterPassword" | i18n }}</span>
+      </button>
+
+      <ng-container *ngIf="showLoginWithDevice && showPasswordless">
+        <div class="tw-text-center">{{ "or" | i18n }}</div>
+
+        <button
+          type="button"
+          bitButton
+          block
+          buttonType="secondary"
+          (click)="startAuthRequestLogin()"
+        >
+          <span><i class="bwi bwi-mobile"></i>{{ "loginWithDevice" | i18n }}</span>
+        </button>
+      </ng-container>
     </div>
   </div>
 </form>