diff --git a/src/app/features/store/pages/account-page/components/profile-form/profile-form.html b/src/app/features/store/pages/account-page/components/profile-form/profile-form.html index 120a401..eff5908 100644 --- a/src/app/features/store/pages/account-page/components/profile-form/profile-form.html +++ b/src/app/features/store/pages/account-page/components/profile-form/profile-form.html @@ -1,56 +1,71 @@ -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- Cancelar - Guardar -
-
+
+
+ + + @if (getControlError('fullName'); as errorMessage) { + {{ errorMessage }} + } +
+ +
+ + + @if (getControlError('email'); as errorMessage) { + {{ errorMessage }} + } +
+ +
+ + + @if (getControlError('dni'); as errorMessage) { + {{ errorMessage }} + } +
+ +
+ + + @if (getControlError('phone'); as errorMessage) { + {{ errorMessage }} + } +
+ +
+ + + @if (getControlError('password'); as errorMessage) { + {{ errorMessage }} + } +
+ +
+ Cancelar + Guardar +
+
diff --git a/src/app/features/store/pages/account-page/components/profile-form/profile-form.ts b/src/app/features/store/pages/account-page/components/profile-form/profile-form.ts index 01e3bcf..011f755 100644 --- a/src/app/features/store/pages/account-page/components/profile-form/profile-form.ts +++ b/src/app/features/store/pages/account-page/components/profile-form/profile-form.ts @@ -1,8 +1,9 @@ -import { Component, inject, effect } from '@angular/core'; -import { ReactiveFormsModule, FormBuilder, FormGroup } from '@angular/forms'; +import { Component, inject, effect, signal } from '@angular/core'; +import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { InputComponent } from '../../../../../../shared/components/input/input.component'; import { ButtonComponent } from '../../../../../../shared/components/button/button.component'; import { AuthService } from '../../../../../../core/services/auth/auth.service'; +import { ToastService } from '../../../../../../core/services/toast.service'; @Component({ selector: 'app-profile-form', @@ -14,14 +15,16 @@ import { AuthService } from '../../../../../../core/services/auth/auth.service'; export class ProfileForm { profileForm: FormGroup; private authService = inject(AuthService); + private toastService = inject(ToastService); + isSubmitting = signal(false); constructor(private fb: FormBuilder) { this.profileForm = this.fb.group({ - fullName: [''], - email: [''], - dni: [''], - phone: [''], - password: [''] + fullName: ['', [Validators.required, Validators.maxLength(255)]], + email: ['', [Validators.required, Validators.email, Validators.maxLength(255)]], + dni: ['', [Validators.pattern(/^[0-9]{7,8}$/)]], + phone: ['', [Validators.pattern(/^\+?[0-9\s\-]{10,20}$/)]], + password: ['', [Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,}$/)]] }); effect(() => { @@ -37,4 +40,61 @@ export class ProfileForm { }); } + getControlError(controlName: string): string | null { + const control = this.profileForm.get(controlName); + if (!control || !control.errors || (!control.touched && !this.isSubmitting())) return null; + + if (control.errors['required']) return 'Este campo es obligatorio.'; + if (control.errors['email']) return 'Ingresa un email válido.'; + if (control.errors['maxlength']) return 'Excede el largo máximo.'; + if (controlName === 'dni' && control.errors['pattern']) return 'DNI inválido (7-8 números).'; + if (controlName === 'phone' && control.errors['pattern']) return 'Teléfono inválido.'; + if (controlName === 'password' && control.errors['pattern']) return 'Debe contener mayúscula, minúscula, carácter especial y mínimo 8 caracteres.'; + + return 'Valor inválido.'; + } + + onSubmit() { + if (this.profileForm.invalid) { + this.profileForm.markAllAsTouched(); + return; + } + + this.isSubmitting.set(true); + const formValue = this.profileForm.value; + const payload: any = { + nombre_apellido: formValue.fullName, + email: formValue.email, + }; + if (formValue.dni) payload.dni = formValue.dni; + if (formValue.phone) payload.telefono = formValue.phone; + if (formValue.password) payload.password = formValue.password; + + this.authService.updateProfile(payload).subscribe({ + next: () => { + this.isSubmitting.set(false); + this.toastService.success('Perfil actualizado correctamente.'); + }, + error: (error: any) => { + this.isSubmitting.set(false); + const errorMessage = error.error?.message || 'Error al actualizar el perfil.'; + this.toastService.danger(errorMessage); + } + }); + } + + onCancel() { + const user = this.authService.user(); + if (user) { + this.profileForm.reset({ + fullName: user.nombre_apellido, + email: user.email, + dni: user.dni || '', + phone: user.telefono || '', + password: '' + }); + } else { + this.profileForm.reset(); + } + } }