mirror of
https://github.com/bitwarden/browser.git
synced 2025-03-11 13:30:39 +01:00
[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
This commit is contained in:
parent
fd346ba65a
commit
be0f986765
@ -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>
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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] {
|
||||
|
Loading…
Reference in New Issue
Block a user