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 {