From be0f986765ba25c044ede268ecf13cc55ae7ff1e Mon Sep 17 00:00:00 2001
From: SmithThe4th <gsmith@bitwarden.com>
Date: Fri, 20 Jan 2023 09:05:07 +0100
Subject: [PATCH] [SG-658] Refactor reactive form logic (#4375)

* Refactored login component to not show validation error when create account is clicked and refactored input directive to handle validation errors differenly

* Added comments to explain why mousedown event is used over click

* Removed unrelated logic from hasError fucnction and replace onFocus with onInpu to retain error message when focused

* Reverted to use touched on input directive hasError and renamed variable to isActive

* Added register to routerlink
---
 .../app/accounts/login/login.component.html   |  3 ++-
 .../src/app/accounts/login/login.component.ts | 11 +++++++++
 libs/components/src/input/input.directive.ts  | 24 +++++++++++++++++--
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/accounts/login/login.component.html b/apps/web/src/app/accounts/login/login.component.html
index f12595ae41..00f5432459 100644
--- a/apps/web/src/app/accounts/login/login.component.html
+++ b/apps/web/src/app/accounts/login/login.component.html
@@ -55,7 +55,8 @@
 
           <p class="tw-m-0 tw-text-sm">
             {{ "newAroundHere" | i18n }}
-            <a routerLink="/register">{{ "createAccount" | i18n }}</a>
+            <!--mousedown event is used over click because it prevents the validation from firing  -->
+            <a routerLink="/register" (mousedown)="goToRegister()">{{ "createAccount" | i18n }}</a>
           </p>
         </ng-container>
       </div>
diff --git a/apps/web/src/app/accounts/login/login.component.ts b/apps/web/src/app/accounts/login/login.component.ts
index dab88d203d..a431d47ac9 100644
--- a/apps/web/src/app/accounts/login/login.component.ts
+++ b/apps/web/src/app/accounts/login/login.component.ts
@@ -189,6 +189,17 @@ export class LoginComponent extends BaseLoginComponent implements OnInit, OnDest
     this.router.navigateByUrl("/hint");
   }
 
+  goToRegister() {
+    const email = this.formGroup.value.email;
+
+    if (email) {
+      this.router.navigate(["/register"], { queryParams: { email: email } });
+      return;
+    }
+
+    this.router.navigate(["/register"]);
+  }
+
   async submit() {
     const rememberEmail = this.formGroup.value.rememberEmail;
 
diff --git a/libs/components/src/input/input.directive.ts b/libs/components/src/input/input.directive.ts
index c72c6e8960..ed7faeac82 100644
--- a/libs/components/src/input/input.directive.ts
+++ b/libs/components/src/input/input.directive.ts
@@ -1,4 +1,13 @@
-import { Directive, ElementRef, HostBinding, Input, NgZone, Optional, Self } from "@angular/core";
+import {
+  Directive,
+  ElementRef,
+  HostBinding,
+  HostListener,
+  Input,
+  NgZone,
+  Optional,
+  Self,
+} from "@angular/core";
 import { NgControl, Validators } from "@angular/forms";
 
 import { BitFormFieldControl, InputTypes } from "../form-field/form-field-control";
@@ -67,8 +76,19 @@ export class BitInputDirective implements BitFormFieldControl {
     return this.id;
   }
 
+  private isActive = true;
+  @HostListener("blur")
+  onBlur() {
+    this.isActive = true;
+  }
+
+  @HostListener("input")
+  onInput() {
+    this.isActive = false;
+  }
+
   get hasError() {
-    return this.ngControl?.status === "INVALID" && this.ngControl?.touched;
+    return this.ngControl?.status === "INVALID" && this.ngControl?.touched && this.isActive;
   }
 
   get error(): [string, any] {