Start integrating the onboarding flow with backend 1

2025-09-03 18:29:56 +02:00
parent a55d48e635
commit a11fdfba24
31 changed files with 1202 additions and 1142 deletions
--- a/frontend/src/components/domain/auth/LoginForm.tsx
+++ b/frontend/src/components/domain/auth/LoginForm.tsx
@@ -56,8 +56,6 @@ export const LoginForm: React.FC<LoginFormProps> = ({
    
    if (!credentials.password) {
      newErrors.password = 'La contraseña es requerida';
-    } else if (credentials.password.length < 6) {
-      newErrors.password = 'La contraseña debe tener al menos 6 caracteres';
    }
    
    setErrors(newErrors);
--- a/frontend/src/components/domain/auth/PasswordResetForm.tsx
+++ b/frontend/src/components/domain/auth/PasswordResetForm.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Button, Input, Card } from '../../ui';
-import { useAuth } from '../../../hooks/api/useAuth';
+import { PasswordCriteria, validatePassword, getPasswordErrors } from '../../ui/PasswordCriteria';
+import { useAuthActions } from '../../../stores/auth.store';
 import { useToast } from '../../../hooks/ui/useToast';

 interface PasswordResetFormProps {
@@ -33,7 +34,10 @@ export const PasswordResetForm: React.FC<PasswordResetFormProps> = ({
  const emailInputRef = useRef<HTMLInputElement>(null);
  const passwordInputRef = useRef<HTMLInputElement>(null);
  
-  const { requestPasswordReset, resetPassword, isLoading, error } = useAuth();
+  // TODO: Implement password reset in Zustand auth store
+  // const { requestPasswordReset, resetPassword, isLoading, error } = useAuth();
+  const isLoading = false;
+  const error = null;
  const { showToast } = useToast();

  const isResetMode = Boolean(token) || mode === 'reset';
@@ -109,12 +113,11 @@ export const PasswordResetForm: React.FC<PasswordResetFormProps> = ({
    
    if (!password) {
      newErrors.password = 'La contraseña es requerida';
-    } else if (password.length < 8) {
-      newErrors.password = 'La contraseña debe tener al menos 8 caracteres';
-    } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password)) {
-      newErrors.password = 'La contraseña debe contener mayúsculas, minúsculas y números';
-    } else if (passwordStrength < 50) {
-      newErrors.password = 'La contraseña es demasiado débil. Intenta con una más segura';
+    } else {
+      const passwordErrors = getPasswordErrors(password);
+      if (passwordErrors.length > 0) {
+        newErrors.password = passwordErrors[0]; // Show first error
+      }
    }
    
    if (!confirmPassword) {
@@ -147,7 +150,9 @@ export const PasswordResetForm: React.FC<PasswordResetFormProps> = ({
    }

    try {
-      const success = await requestPasswordReset(email);
+      // TODO: Implement password reset request
+      // const success = await requestPasswordReset(email);
+      const success = false; // Placeholder
      if (success) {
        setIsEmailSent(true);
        showToast({
@@ -192,7 +197,9 @@ export const PasswordResetForm: React.FC<PasswordResetFormProps> = ({
    }

    try {
-      const success = await resetPassword(token, password);
+      // TODO: Implement password reset
+      // const success = await resetPassword(token, password);
+      const success = false; // Placeholder
      if (success) {
        showToast({
          type: 'success',
--- a/frontend/src/components/domain/auth/ProfileSettings.tsx
+++ b/frontend/src/components/domain/auth/ProfileSettings.tsx
@@ -231,10 +231,19 @@ export const ProfileSettings: React.FC<ProfileSettingsProps> = ({
    
    if (!passwordData.newPassword) {
      newErrors.newPassword = 'La nueva contraseña es requerida';
-    } else if (passwordData.newPassword.length < 8) {
-      newErrors.newPassword = 'La contraseña debe tener al menos 8 caracteres';
-    } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(passwordData.newPassword)) {
-      newErrors.newPassword = 'La contraseña debe contener mayúsculas, minúsculas y números';
+    } else {
+      // Use simpler validation for now to match backend exactly
+      if (passwordData.newPassword.length < 8) {
+        newErrors.newPassword = 'La contraseña debe tener al menos 8 caracteres';
+      } else if (passwordData.newPassword.length > 128) {
+        newErrors.newPassword = 'La contraseña no puede exceder 128 caracteres';
+      } else if (!/[A-Z]/.test(passwordData.newPassword)) {
+        newErrors.newPassword = 'La contraseña debe contener al menos una letra mayúscula';
+      } else if (!/[a-z]/.test(passwordData.newPassword)) {
+        newErrors.newPassword = 'La contraseña debe contener al menos una letra minúscula';
+      } else if (!/\d/.test(passwordData.newPassword)) {
+        newErrors.newPassword = 'La contraseña debe contener al menos un número';
+      }
    }
    
    if (!passwordData.confirmNewPassword) {
--- a/frontend/src/components/domain/auth/RegisterForm.tsx
+++ b/frontend/src/components/domain/auth/RegisterForm.tsx
@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import { Button, Input, Card } from '../../ui';
-import { useAuth } from '../../../hooks/api/useAuth';
-import { UserRegistration } from '../../../types/auth.types';
+import { PasswordCriteria, validatePassword, getPasswordErrors } from '../../ui/PasswordCriteria';
+import { useAuthActions, useAuthLoading, useAuthError } from '../../../stores/auth.store';
 import { useToast } from '../../../hooks/ui/useToast';
-import { isMockRegistration } from '../../../config/mock.config';

 interface RegisterFormProps {
  onSuccess?: () => void;
@@ -36,9 +35,20 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  
-  const { register, isLoading, error } = useAuth();
+  const { register } = useAuthActions();
+  const isLoading = useAuthLoading();
+  const error = useAuthError();
  const { success: showSuccessToast, error: showErrorToast } = useToast();

+  // Helper function to determine password match status
+  const getPasswordMatchStatus = () => {
+    if (!formData.confirmPassword) return 'empty';
+    if (formData.password === formData.confirmPassword) return 'match';
+    return 'mismatch';
+  };
+
+  const passwordMatchStatus = getPasswordMatchStatus();
+
  const validateForm = (): boolean => {
    const newErrors: Partial<SimpleUserRegistration> = {};
    
@@ -56,8 +66,11 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
    
    if (!formData.password) {
      newErrors.password = 'La contraseña es requerida';
-    } else if (formData.password.length < 8) {
-      newErrors.password = 'La contraseña debe tener al menos 8 caracteres';
+    } else {
+      const passwordErrors = getPasswordErrors(formData.password);
+      if (passwordErrors.length > 0) {
+        newErrors.password = passwordErrors[0]; // Show first error
+      }
    }
    
    if (!formData.confirmPassword) {
@@ -76,64 +89,28 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
-    console.log('Form submitted, mock mode:', isMockRegistration());
-    
-    // FORCED MOCK MODE FOR TESTING - Always bypass for now
-    const FORCE_MOCK = true;
-    if (FORCE_MOCK || isMockRegistration()) {
-      console.log('Mock registration triggered, showing toast and calling onSuccess');
-      // Show immediate success notification
-      try {
-        showSuccessToast('¡Bienvenido! Tu cuenta ha sido creada correctamente.', {
-          title: 'Cuenta creada exitosamente'
-        });
-        console.log('Toast shown, calling onSuccess callback');
-      } catch (error) {
-        console.error('Error showing toast:', error);
-        // Fallback: show browser alert if toast fails
-        alert('¡Cuenta creada exitosamente! Redirigiendo al onboarding...');
-      }
-      
-      // Call success immediately (removing delay for easier testing)
-      try {
-        onSuccess?.();
-        console.log('onSuccess called');
-      } catch (error) {
-        console.error('Error calling onSuccess:', error);
-        // Fallback: direct redirect if callback fails
-        window.location.href = '/app/onboarding';
-      }
-      return;
-    }
    
    if (!validateForm()) {
      return;
    }
    
    try {
-      const registrationData: UserRegistration = {
+      const registrationData = {
        full_name: formData.full_name,
        email: formData.email,
        password: formData.password,
        tenant_name: 'Default Bakery', // Default value since we're not collecting it
-        phone: '' // Optional field
      };
      
-      const success = await register(registrationData);
+      await register(registrationData);
      
-      if (success) {
-        showSuccessToast('¡Bienvenido! Tu cuenta ha sido creada correctamente.', {
-          title: 'Cuenta creada exitosamente'
-        });
-        onSuccess?.();
-      } else {
-        showErrorToast(error || 'No se pudo crear la cuenta. Verifica que el email no esté en uso.', {
-          title: 'Error al crear la cuenta'
-        });
-      }
+      showSuccessToast('¡Bienvenido! Tu cuenta ha sido creada correctamente.', {
+        title: 'Cuenta creada exitosamente'
+      });
+      onSuccess?.();
    } catch (err) {
-      showErrorToast('No se pudo conectar con el servidor. Verifica tu conexión a internet.', {
-        title: 'Error de conexión'
+      showErrorToast(error || 'No se pudo crear la cuenta. Verifica que el email no esté en uso.', {
+        title: 'Error al crear la cuenta'
      });
    }
  };
@@ -199,6 +176,7 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
          onChange={handleInputChange('password')}
          error={errors.password}
          disabled={isLoading}
+          maxLength={128}
          autoComplete="new-password"
          required
          leftIcon={
@@ -227,21 +205,49 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
          }
        />
        
-        <Input
-          type={showConfirmPassword ? 'text' : 'password'}
-          label="Confirmar Contraseña"
-          placeholder="Repite tu contraseña"
-          value={formData.confirmPassword}
-          onChange={handleInputChange('confirmPassword')}
-          error={errors.confirmPassword}
-          disabled={isLoading}
-          autoComplete="new-password"
-          required
-          leftIcon={
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          }
+        {/* Password Criteria - Show when user is typing */}
+        {formData.password && (
+          <PasswordCriteria 
+            password={formData.password}
+            className="mt-2"
+            showOnlyFailed={false}
+          />
+        )}
+        
+        <div className="relative">
+          <Input
+            type={showConfirmPassword ? 'text' : 'password'}
+            label="Confirmar Contraseña"
+            placeholder="Repite tu contraseña"
+            value={formData.confirmPassword}
+            onChange={handleInputChange('confirmPassword')}
+            error={errors.confirmPassword}
+            disabled={isLoading}
+            maxLength={128}
+            autoComplete="new-password"
+            required
+            className={
+              passwordMatchStatus === 'match' && formData.confirmPassword
+                ? 'border-color-success focus:border-color-success ring-color-success' 
+                : passwordMatchStatus === 'mismatch' && formData.confirmPassword
+                ? 'border-color-error focus:border-color-error ring-color-error'
+                : ''
+            }
+            leftIcon={
+              passwordMatchStatus === 'match' && formData.confirmPassword ? (
+                <svg className="w-5 h-5 text-color-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              ) : passwordMatchStatus === 'mismatch' && formData.confirmPassword ? (
+                <svg className="w-5 h-5 text-color-error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              ) : (
+                <svg className="w-5 h-5 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 0h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                </svg>
+              )
+            }
          rightIcon={
            <button
              type="button"
@@ -262,6 +268,32 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
            </button>
          }
        />
+          
+          {/* Password Match Status Message */}
+          {formData.confirmPassword && (
+            <div className="mt-2 transition-all duration-300 ease-in-out">
+              {passwordMatchStatus === 'match' ? (
+                <div className="flex items-center space-x-2 text-color-success animate-fade-in">
+                  <div className="flex-shrink-0 w-5 h-5 rounded-full bg-color-success/10 flex items-center justify-center">
+                    <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <span className="text-sm font-medium">¡Las contraseñas coinciden!</span>
+                </div>
+              ) : (
+                <div className="flex items-center space-x-2 text-color-error animate-fade-in">
+                  <div className="flex-shrink-0 w-5 h-5 rounded-full bg-color-error/10 flex items-center justify-center">
+                    <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <span className="text-sm font-medium">Las contraseñas no coinciden</span>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
        
        <div className="space-y-4 pt-4 border-t border-border-primary">
          <div className="flex items-start space-x-3">
@@ -292,7 +324,7 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
          size="lg"
          isLoading={isLoading}
          loadingText="Creando cuenta..."
-          disabled={isLoading}
+          disabled={isLoading || !validatePassword(formData.password) || !formData.acceptTerms || passwordMatchStatus !== 'match'}
          className="w-full"
          onClick={(e) => {
            console.log('Button clicked!');