diff --git a/frontend/src/app/pages/register-root/register-root.component.html b/frontend/src/app/pages/register-root/register-root.component.html index 53c9acf..e4ea6de 100644 --- a/frontend/src/app/pages/register-root/register-root.component.html +++ b/frontend/src/app/pages/register-root/register-root.component.html @@ -41,20 +41,18 @@ pInputText id="email" formControlName="email" - [ngClass]="{ 'ng-invalid ng-dirty': emailInvalid() }" aria-describedby="e-mail" />
- + [toggleMask]="true">
@@ -74,27 +72,24 @@ pInputText id="email" formControlName="email" - [ngClass]="{ 'ng-invalid ng-dirty': emailInvalid() }" aria-describedby="e-mail" />
- + [toggleMask]="true">
diff --git a/frontend/src/app/pages/register-root/register-root.component.scss b/frontend/src/app/pages/register-root/register-root.component.scss index b306dfb..b7130a4 100644 --- a/frontend/src/app/pages/register-root/register-root.component.scss +++ b/frontend/src/app/pages/register-root/register-root.component.scss @@ -62,6 +62,9 @@ input { min-width: 500px; } + ::ng-deep p-password.custom-p-password div input { + min-width: 500px; + } } .terms { @@ -81,12 +84,3 @@ } } } - -// .ng-invalid.ng-dirty { -// border: 1px solid red; -// } - -// .error { -// color: red; -// font-size: 12px; -// } diff --git a/frontend/src/app/pages/register-root/register-root.component.ts b/frontend/src/app/pages/register-root/register-root.component.ts index 81bac24..2d43af1 100644 --- a/frontend/src/app/pages/register-root/register-root.component.ts +++ b/frontend/src/app/pages/register-root/register-root.component.ts @@ -6,7 +6,6 @@ import { WritableSignal, signal, effect, - DestroyRef, } from '@angular/core'; import { InputTextModule } from 'primeng/inputtext'; import { @@ -19,6 +18,7 @@ import { } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { CheckboxModule } from 'primeng/checkbox'; +import { PasswordModule } from 'primeng/password'; type AuthAction = 'register' | 'signup'; @@ -32,6 +32,7 @@ type AuthAction = 'register' | 'signup'; ReactiveFormsModule, ButtonModule, CheckboxModule, + PasswordModule, ], templateUrl: './register-root.component.html', styleUrl: './register-root.component.scss', @@ -44,14 +45,11 @@ export class RegisterRootComponent implements OnInit { public isSignupSignal: WritableSignal = signal(false); public isDisplayButtons: WritableSignal = signal(true); - public emailInvalid: WritableSignal = signal(null); - public passwordInvalid: WritableSignal = signal(null); - public termsInvalid: WritableSignal = signal(null); + public emailInvalid: WritableSignal = signal(null); + public passwordInvalid: WritableSignal = signal(null); + public termsInvalid: WritableSignal = signal(null); - constructor( - private readonly formBuilder: FormBuilder, - private readonly destroyRef: DestroyRef - ) { + constructor(private readonly formBuilder: FormBuilder) { effect(() => { if (this.form) { if (this.isRegisterSignal()) { @@ -68,8 +66,8 @@ export class RegisterRootComponent implements OnInit { public ngOnInit(): void { this.form = this.formBuilder.group({ - email: ['', [Validators.required, Validators.email]], - password: ['', [Validators.required, Validators.minLength(6)]], + email: ['', [Validators.required]], + password: ['', [Validators.required, Validators.minLength(8)]], terms: [false, [Validators.requiredTrue]], }); } @@ -86,12 +84,9 @@ export class RegisterRootComponent implements OnInit { } public onSubmit(): void { - this.form?.markAllAsTouched(); - this.updateFieldInvalidity(); - - if (this.isSignupSignal() && this.form?.valid) { + if (this.form && this.isSignupSignal() && this.form.valid) { this.signin(); - } else if (this.isRegisterSignal() && this.form?.valid) { + } else if (this.form && this.isRegisterSignal() && this.form.valid) { this.register(); } } @@ -101,20 +96,9 @@ export class RegisterRootComponent implements OnInit { this.isSignupSignal.set(false); this.isDisplayButtons.set(true); - this.emailInvalid.set(false); - this.passwordInvalid.set(false); - this.termsInvalid.set(false); - } - - private updateFieldInvalidity(): void { - this.emailInvalid.set(this.isFieldInvalid('email')); - this.passwordInvalid.set(this.isFieldInvalid('password')); - this.termsInvalid.set(this.isFieldInvalid('terms')); - } - - private isFieldInvalid(field: string): boolean { - const formField = this.form?.get(field); - return !!formField && !formField.valid && formField.touched; + this.emailInvalid.set(null); + this.passwordInvalid.set(null); + this.termsInvalid.set(null); } private signin(): void {