Improve UI

2025-12-30 14:40:20 +01:00
parent e494ea8635
commit c07df124fb
71 changed files with 647 additions and 265 deletions
--- a/frontend/src/components/domain/auth/LoginForm.tsx
+++ b/frontend/src/components/domain/auth/LoginForm.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Input, Card } from '../../ui';
 import { useAuthActions, useAuthLoading, useAuthError } from '../../../stores/auth.store';
 import { showToast } from '../../../utils/toast';
+import { validateEmail } from '../../../utils/validation';

 interface LoginFormProps {
  onSuccess?: () => void;
@@ -50,10 +51,9 @@ export const LoginForm: React.FC<LoginFormProps> = ({
  const validateForm = (): boolean => {
    const newErrors: Partial<LoginCredentials> = {};
    
-    if (!credentials.email.trim()) {
-      newErrors.email = t('auth:validation.email_required', 'El email es requerido');
-    } else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(credentials.email)) {
-      newErrors.email = t('auth:validation.email_invalid', 'Por favor, ingrese un email válido');
+    const emailValidation = validateEmail(credentials.email);
+    if (!emailValidation.isValid) {
+      newErrors.email = t('auth:validation.email_invalid', emailValidation.error || 'Por favor, ingrese un email válido');
    }
    
    if (!credentials.password) {
--- a/frontend/src/components/domain/auth/RegisterForm.tsx
+++ b/frontend/src/components/domain/auth/RegisterForm.tsx
@@ -12,6 +12,7 @@ import { Elements } from '@stripe/react-stripe-js';
 import { CheckCircle, Clock } from 'lucide-react';
 import { usePilotDetection } from '../../../hooks/usePilotDetection';
 import { subscriptionService } from '../../../api';
+import { validateEmail } from '../../../utils/validation';

 // Helper to get Stripe key from runtime config or build-time env
 const getStripeKey = (): string => {
@@ -94,6 +95,15 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({

  const passwordMatchStatus = getPasswordMatchStatus();

+  // Helper function to determine email validation status (real-time)
+  const getEmailValidationStatus = () => {
+    if (!formData.email) return 'empty';
+    const result = validateEmail(formData.email);
+    return result.isValid ? 'valid' : 'invalid';
+  };
+
+  const emailValidationStatus = getEmailValidationStatus();
+
  // Load plan metadata when plan changes
  useEffect(() => {
    const loadPlanMetadata = async () => {
@@ -132,10 +142,9 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
      newErrors.full_name = t('auth:validation.field_required', 'El nombre debe tener al menos 2 caracteres');
    }
    
-    if (!formData.email.trim()) {
-      newErrors.email = t('auth:validation.email_required', 'El email es requerido');
-    } else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(formData.email)) {
-      newErrors.email = t('auth:validation.email_invalid', 'Por favor, ingrese un email válido');
+    const emailValidation = validateEmail(formData.email);
+    if (!emailValidation.isValid) {
+      newErrors.email = t('auth:validation.email_invalid', emailValidation.error || 'Por favor, ingrese un email válido');
    }
    
    if (!formData.password) {
@@ -344,22 +353,66 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
                }
              />
              
-              <Input
-                type="email"
-                label={t('auth:register.email', 'Correo Electrónico')}
-                placeholder="tu.email@ejemplo.com"
-                value={formData.email}
-                onChange={handleInputChange('email')}
-                error={errors.email}
-                disabled={isLoading}
-                required
-                autoComplete="email"
-                leftIcon={
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
-                  </svg>
-                }
-              />
+              <div className="relative">
+                <Input
+                  type="email"
+                  label={t('auth:register.email', 'Correo Electrónico')}
+                  placeholder="tu.email@ejemplo.com"
+                  value={formData.email}
+                  onChange={handleInputChange('email')}
+                  error={errors.email}
+                  disabled={isLoading}
+                  required
+                  autoComplete="email"
+                  className={
+                    emailValidationStatus === 'valid' && formData.email
+                      ? 'border-color-success focus:border-color-success ring-color-success'
+                      : emailValidationStatus === 'invalid' && formData.email
+                      ? 'border-color-error focus:border-color-error ring-color-error'
+                      : ''
+                  }
+                  leftIcon={
+                    emailValidationStatus === 'valid' && formData.email ? (
+                      <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>
+                    ) : emailValidationStatus === 'invalid' && formData.email ? (
+                      <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" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
+                      </svg>
+                    )
+                  }
+                />
+
+                {/* Email Validation Status Message */}
+                {formData.email && (
+                  <div className="mt-2 transition-all duration-300 ease-in-out">
+                    {emailValidationStatus === 'valid' ? (
+                      <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">{t('auth:validation.email_valid', 'Email válido')}</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">{t('auth:validation.email_invalid', 'Por favor, ingrese un email válido')}</span>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
              
              <Input
                type={showPassword ? 'text' : 'password'}
@@ -630,7 +683,7 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
                    <div className="flex justify-between items-center pt-3 border-t border-blue-200 dark:border-blue-800">
                      <span className="text-green-700 dark:text-green-400 font-medium">{t('auth:payment.trial_period', 'Período de prueba:')}</span>
                      <span className="font-bold text-green-700 dark:text-green-400">
-                        {isPilot ? t('auth:payment.free_months', {count: trialMonths}) : t('auth:payment.free_days', '14 días gratis')}
+                        {isPilot ? t('auth:payment.free_months', {count: trialMonths}) : t('auth:payment.free_days')}
                      </span>
                    </div>
                  )}
@@ -642,7 +695,7 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
                    <p className="text-xs text-text-tertiary mt-2 text-center">
                      {useTrial
                        ? t('auth:payment.billing_message', {price: subscriptionService.formatPrice(selectedPlanMetadata.monthly_price)})
-                        : t('auth:payment.payment_required', 'Tarjeta requerida para validación')
+                        : t('auth:payment.payment_required')
                      }
                    </p>
                  </div>