[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;