[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

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>

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;
 

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] {