[PM-8924] Login component tab and keyboard navigation fixes (#9707)

* tab and keyboard navigation fixes * PM-8924 - Improve login component keyboard and mouse navigation scenarios Co-authored-by: Ike Kottlowski <[email protected]> --------- Co-authored-by: Jared Snider <[email protected]>
bitwarden · Jun 20, 2024 · d74435d · d74435d
1 parent 82f8641
commit d74435d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 17 deletions.
diff --git a/apps/web/src/app/auth/login/login.component.html b/apps/web/src/app/auth/login/login.component.html
@@ -7,13 +7,7 @@
     <div class="tw-mb-3">
       <bit-form-field>
         <bit-label>{{ "emailAddress" | i18n }}</bit-label>
-        <input
-          bitInput
-          type="email"
-          formControlName="email"
-          appAutofocus
-          (keyup.enter)="validateEmail()"
-        />
+        <input bitInput type="email" formControlName="email" appAutofocus />
       </bit-form-field>
     </div>
 
@@ -27,7 +21,7 @@
     <div class="tw-mb-3">
       <button
         bitButton
-        type="button"
+        type="submit"
         buttonType="primary"
         class="tw-w-full"
         (click)="validateEmail()"
@@ -54,8 +48,19 @@
 
     <p class="tw-m-0 tw-text-sm">
       {{ "newAroundHere" | i18n }}
-      <!--mousedown event is used over click because it prevents the validation from firing  -->
-      <a bitLink href="#" (mousedown)="goToRegister()">{{ "createAccount" | i18n }}</a>
+      <!-- Two notes:  
+           (1) We check the value and validity of email so we don't send an invalid email to autofill 
+           on load of register for both enter and mouse based navigation
+           (2) We use mousedown to trigger navigation so that the onBlur form validation does not fire 
+           and move the create account link down the page on click which causes the user to miss actually 
+           clicking on the link. Mousedown fires before onBlur. 
+      -->
+      <a
+        [routerLink]="registerRoute"
+        [queryParams]="emailFormControl.valid ? { email: emailFormControl.value } : {}"
+        (mousedown)="goToRegister()"
+        >{{ "createAccount" | i18n }}</a
+      >
     </p>
   </ng-container>
 
@@ -67,7 +72,7 @@
         <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
       </bit-form-field>
       <a
-        class="-tw-mt-2"
+        class="tw-mt-2"
         routerLink="/hint"
         (mousedown)="goToHint()"
         (click)="setLoginEmailValues()"

diff --git a/apps/web/src/app/auth/login/login.component.ts b/apps/web/src/app/auth/login/login.component.ts
@@ -165,10 +165,10 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
   }
 
   async goToRegister() {
-    const email = this.formGroup.value.email;
-
-    if (email) {
-      await this.router.navigate([this.registerRoute], { queryParams: { email: email } });
+    if (this.emailFormControl.valid) {
+      await this.router.navigate([this.registerRoute], {
+        queryParams: { email: this.emailFormControl.value },
+      });
       return;
     }
 

diff --git a/libs/angular/src/auth/components/login.component.ts b/libs/angular/src/auth/components/login.component.ts
@@ -47,6 +47,10 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
   validatedEmail = false;
   paramEmailSet = false;
 
+  get emailFormControl() {
+    return this.formGroup.controls.email;
+  }
+
   formGroup = this.formBuilder.group({
     email: ["", [Validators.required, Validators.email]],
     masterPassword: [
@@ -277,8 +281,8 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
 
   async validateEmail() {
     this.formGroup.controls.email.markAsTouched();
-    const emailInvalid = this.formGroup.get("email").invalid;
-    if (!emailInvalid) {
+    const emailValid = this.formGroup.get("email").valid;
+    if (emailValid) {
       this.toggleValidateEmail(true);
       await this.getLoginWithDevice(this.loggedEmail);
     }