1- import { Component , ChangeDetectionStrategy , inject , signal } from '@angular/core' ;
1+ import { Component , ChangeDetectionStrategy , inject , signal , effect } from '@angular/core' ;
22import { CommonModule , DOCUMENT } from '@angular/common' ;
3- import { FormBuilder , ReactiveFormsModule , Validators } from '@angular/forms' ;
43import { Router } from '@angular/router' ;
4+ import { form , FormField , required , email , minLength } from '@angular/forms/signals' ;
55import { AuthService } from '@entities/user/auth.service' ;
66import { LanguageSwitcherComponent } from '../../features/language-selection/language-switcher.component' ;
77
88@Component ( {
99 selector : 'app-auth' ,
1010 standalone : true ,
11- imports : [ CommonModule , ReactiveFormsModule , LanguageSwitcherComponent ] ,
11+ imports : [ CommonModule , FormField , LanguageSwitcherComponent ] ,
1212 changeDetection : ChangeDetectionStrategy . OnPush ,
1313 templateUrl : './auth.component.html' ,
1414 styleUrls : [ './auth.component.scss' ]
1515} )
1616export class AuthComponent {
17- private fb : FormBuilder = inject ( FormBuilder ) ;
1817 private router : Router = inject ( Router ) ;
1918 public authService = inject ( AuthService ) ;
2019 private document : Document = inject ( DOCUMENT ) ;
@@ -27,46 +26,46 @@ export class AuthComponent {
2726 // 'signin' or 'signup' mode
2827 authMode = signal < 'signin' | 'signup' > ( 'signin' ) ;
2928
30- loginForm = this . fb . group ( {
31- firstName : [ '' ] ,
32- lastName : [ '' ] ,
33- email : [ 'admin@mavluda.beauty' , [ Validators . required , Validators . email ] ] ,
34- password : [ 'password123' , [ Validators . required , Validators . minLength ( 6 ) ] ]
29+ loginModel = signal ( {
30+ firstName : '' ,
31+ lastName : '' ,
32+ phone : '' ,
33+ email : 'admin@mavluda.beauty' ,
34+ password : 'password123' ,
35+ rememberMe : false
3536 } ) ;
3637
37- setAuthMode ( mode : 'signin' | 'signup' ) {
38- this . authMode . set ( mode ) ;
39- this . errorMessage . set ( null ) ; // Clear errors
40- const firstNameControl = this . loginForm . get ( 'firstName' ) ;
41- const lastNameControl = this . loginForm . get ( 'lastName' ) ;
42-
43- if ( mode === 'signup' ) {
44- firstNameControl ?. setValidators ( [ Validators . required ] ) ;
45- lastNameControl ?. setValidators ( [ Validators . required ] ) ;
38+ loginForm = form ( this . loginModel , ( schema ) => {
39+ required ( schema . email ) ;
40+ email ( schema . email ) ;
41+ required ( schema . password ) ;
42+ minLength ( schema . password , 6 ) ;
43+ } ) ;
4644
47- // Clear defaults for signup
48- if ( this . loginForm . get ( 'email' ) ?. value === 'admin@mavluda.beauty' ) {
49- this . loginForm . patchValue ( {
50- firstName : '' ,
51- lastName : '' ,
52- email : '' ,
53- password : ''
54- } ) ;
45+ constructor ( ) {
46+ // Effect to clear/restore defaults when switching modes
47+ effect ( ( ) => {
48+ const mode = this . authMode ( ) ;
49+ this . errorMessage . set ( null ) ;
50+
51+ const current = this . loginModel ( ) ;
52+
53+ if ( mode === 'signup' ) {
54+ // Clear defaults if switching to signup and generic admin email is present
55+ if ( current . email === 'admin@mavluda.beauty' ) {
56+ this . loginModel . update ( v => ( { ...v , firstName : '' , lastName : '' , email : '' , password : '' } ) ) ;
57+ }
58+ } else {
59+ // Restore default admin credentials for demo convenience if empty
60+ if ( ! current . email ) {
61+ this . loginModel . update ( v => ( { ...v , email : 'admin@mavluda.beauty' , password : 'password123' } ) ) ;
62+ }
5563 }
56- } else {
57- firstNameControl ?. clearValidators ( ) ;
58- lastNameControl ?. clearValidators ( ) ;
64+ } ) ;
65+ }
5966
60- // Restore default admin credentials for demo convenience if empty
61- if ( ! this . loginForm . get ( 'email' ) ?. value ) {
62- this . loginForm . patchValue ( {
63- email : 'admin@mavluda.beauty' ,
64- password : 'password123'
65- } ) ;
66- }
67- }
68- firstNameControl ?. updateValueAndValidity ( ) ;
69- lastNameControl ?. updateValueAndValidity ( ) ;
67+ setAuthMode ( mode : 'signin' | 'signup' ) {
68+ this . authMode . set ( mode ) ;
7069 }
7170
7271 togglePassword ( ) {
@@ -83,53 +82,70 @@ export class AuthComponent {
8382 }
8483
8584 onSubmit ( ) {
86- if ( this . loginForm . valid ) {
87- this . isLoading . set ( true ) ;
88- this . errorMessage . set ( null ) ;
85+ // Manual validation check
86+ const emailValid = this . loginForm . email ( ) . valid ( ) ;
87+ const passValid = this . loginForm . password ( ) . valid ( ) ;
88+
89+ if ( ! emailValid || ! passValid ) {
90+ // Since we don't have markAllAsTouched, we rely on user having interacted or just return
91+ // If fields are untouched, valid() might be false but errors not shown?
92+ // Usually required() makes it invalid immediately but touched is false.
93+ return ;
94+ }
95+
96+ // Manual validation for signup fields
97+ if ( this . authMode ( ) === 'signup' ) {
98+ const firstName = this . loginModel ( ) . firstName ;
99+ const lastName = this . loginModel ( ) . lastName ;
89100
90- const formValue = this . loginForm . value ;
91- const mode = this . authMode ( ) ;
101+ if ( ! firstName || ! lastName ) {
102+ return ;
103+ }
104+ }
92105
93- if ( mode === 'signin' ) {
94- this . authService . login ( {
95- email : formValue . email ! ,
96- password : formValue . password !
97- } ) . subscribe ( {
98- next : ( ) => {
99- this . isLoading . set ( false ) ;
100- // Navigation handled in guard or explicit check
101- if ( this . authService . isAdmin ( ) ) {
102- this . router . navigate ( [ '/admin/dashboard' ] ) ;
103- } else {
104- this . router . navigate ( [ '/user/home' ] ) ;
105- }
106- } ,
107- error : ( err ) => {
108- this . isLoading . set ( false ) ;
109- this . errorMessage . set ( 'Login failed. Please check credentials.' ) ;
110- console . error ( err ) ;
111- }
112- } ) ;
113- } else {
114- this . authService . register ( {
115- firstName : formValue . firstName ! ,
116- lastName : formValue . lastName || undefined ,
117- email : formValue . email ! ,
118- password : formValue . password !
119- } ) . subscribe ( {
120- next : ( ) => {
121- this . isLoading . set ( false ) ;
106+ this . isLoading . set ( true ) ;
107+ this . errorMessage . set ( null ) ;
108+
109+ // Get values directly from model signal
110+ const formValue = this . loginModel ( ) ;
111+ const mode = this . authMode ( ) ;
112+
113+ if ( mode === 'signin' ) {
114+ this . authService . login ( {
115+ email : formValue . email ,
116+ password : formValue . password
117+ } ) . subscribe ( {
118+ next : ( ) => {
119+ this . isLoading . set ( false ) ;
120+ if ( this . authService . isAdmin ( ) ) {
121+ this . router . navigate ( [ '/admin/dashboard' ] ) ;
122+ } else {
122123 this . router . navigate ( [ '/user/home' ] ) ;
123- } ,
124- error : ( err ) => {
125- this . isLoading . set ( false ) ;
126- this . errorMessage . set ( 'Registration failed. Email might be taken.' ) ;
127- console . error ( err ) ;
128- }
129- } ) ;
130- }
124+ }
125+ } ,
126+ error : ( err ) => {
127+ this . isLoading . set ( false ) ;
128+ this . errorMessage . set ( 'Login failed. Please check credentials.' ) ;
129+ console . error ( err ) ;
130+ }
131+ } ) ;
131132 } else {
132- this . loginForm . markAllAsTouched ( ) ;
133+ this . authService . register ( {
134+ firstName : formValue . firstName ,
135+ lastName : formValue . lastName || undefined ,
136+ email : formValue . email ,
137+ password : formValue . password
138+ } ) . subscribe ( {
139+ next : ( ) => {
140+ this . isLoading . set ( false ) ;
141+ this . router . navigate ( [ '/user/home' ] ) ;
142+ } ,
143+ error : ( err ) => {
144+ this . isLoading . set ( false ) ;
145+ this . errorMessage . set ( 'Registration failed. Email might be taken.' ) ;
146+ console . error ( err ) ;
147+ }
148+ } ) ;
133149 }
134150 }
135151}
0 commit comments