29106aa45e
SECURITY VULNERABILITY FIXED: Registration form was storing passwords in plain text in localStorage, creating a severe XSS vulnerability where attackers could steal credentials. Changes Made: 1. **RegisterForm.tsx:** - REMOVED localStorage persistence of registration_progress (lines 110-146) - Password, email, and all form data now kept in memory only - Added cleanup effect to remove any existing registration_progress data - Form data is submitted directly to backend via secure API calls 2. **WizardContext.tsx:** - REMOVED localStorage persistence of wizard state (lines 98-116) - All onboarding progress now tracked exclusively via backend API - Added cleanup effect to remove any existing wizardState data - Updated resetWizard to not reference localStorage 3. **Architecture Change:** - All user data and progress tracking now uses backend APIs exclusively - Backend APIs already exist: /api/v1/auth/register, onboarding_progress.py - No sensitive data stored in browser localStorage Impact: - Prevents credential theft via XSS attacks - Ensures data security and consistency across sessions - Aligns with security best practices (OWASP guidelines) Backend Support: - services/auth/app/api/auth_operations.py handles registration - services/auth/app/api/onboarding_progress.py tracks wizard progress - All data persisted securely in PostgreSQL database
716 lines
32 KiB
TypeScript
716 lines
32 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useSearchParams } from 'react-router-dom';
|
|
import { Button, Input, Card } from '../../ui';
|
|
import { PasswordCriteria, validatePassword, getPasswordErrors } from '../../ui/PasswordCriteria';
|
|
import { useAuthActions, useAuthLoading, useAuthError } from '../../../stores/auth.store';
|
|
import { showToast } from '../../../utils/toast';
|
|
import { SubscriptionPricingCards } from '../../subscription/SubscriptionPricingCards';
|
|
import PaymentForm from './PaymentForm';
|
|
import { loadStripe } from '@stripe/stripe-js';
|
|
import { Elements } from '@stripe/react-stripe-js';
|
|
import { CheckCircle, Clock } from 'lucide-react';
|
|
import { usePilotDetection } from '../../../hooks/usePilotDetection';
|
|
import { subscriptionService } from '../../../api';
|
|
|
|
// Helper to get Stripe key from runtime config or build-time env
|
|
const getStripeKey = (): string => {
|
|
// Try runtime config first (Kubernetes/Docker)
|
|
if (typeof window !== 'undefined' && window.__RUNTIME_CONFIG__?.VITE_STRIPE_PUBLISHABLE_KEY) {
|
|
return window.__RUNTIME_CONFIG__.VITE_STRIPE_PUBLISHABLE_KEY;
|
|
}
|
|
// Fallback to build-time env (local development)
|
|
return import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || 'pk_test_51234567890123456789012345678901234567890123456789012345678901234567890123456789012345';
|
|
};
|
|
|
|
// Initialize Stripe with runtime or build-time key
|
|
const stripePromise = loadStripe(getStripeKey());
|
|
|
|
interface RegisterFormProps {
|
|
onSuccess?: () => void;
|
|
onLoginClick?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
interface SimpleUserRegistration {
|
|
full_name: string;
|
|
email: string;
|
|
password: string;
|
|
confirmPassword: string;
|
|
acceptTerms: boolean;
|
|
marketingConsent: boolean;
|
|
analyticsConsent: boolean;
|
|
}
|
|
|
|
// Define the steps for the registration process
|
|
type RegistrationStep = 'basic_info' | 'subscription' | 'payment';
|
|
|
|
export const RegisterForm: React.FC<RegisterFormProps> = ({
|
|
onSuccess,
|
|
onLoginClick,
|
|
className
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const [formData, setFormData] = useState<SimpleUserRegistration>({
|
|
full_name: '',
|
|
email: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
acceptTerms: false,
|
|
marketingConsent: false,
|
|
analyticsConsent: false
|
|
});
|
|
|
|
const [errors, setErrors] = useState<Partial<SimpleUserRegistration>>({});
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|
|
|
const { register } = useAuthActions();
|
|
const isLoading = useAuthLoading();
|
|
const error = useAuthError();
|
|
|
|
|
|
// Detect pilot program participation
|
|
const { isPilot, couponCode, trialMonths } = usePilotDetection();
|
|
|
|
// Read URL parameters for plan persistence
|
|
const [searchParams] = useSearchParams();
|
|
const preSelectedPlan = searchParams.get('plan') as string | null; // starter | professional | enterprise
|
|
const urlPilotParam = searchParams.get('pilot') === 'true';
|
|
|
|
// Multi-step form state
|
|
const [currentStep, setCurrentStep] = useState<RegistrationStep>('basic_info');
|
|
const [selectedPlan, setSelectedPlan] = useState<string>(preSelectedPlan || 'starter');
|
|
const [useTrial, setUseTrial] = useState<boolean>(isPilot || urlPilotParam); // Auto-enable trial for pilot customers
|
|
const [bypassPayment, setBypassPayment] = useState<boolean>(false);
|
|
const [selectedPlanMetadata, setSelectedPlanMetadata] = useState<any>(null);
|
|
|
|
// 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();
|
|
|
|
// Load plan metadata when plan changes
|
|
useEffect(() => {
|
|
const loadPlanMetadata = async () => {
|
|
try {
|
|
const plans = await subscriptionService.fetchAvailablePlans();
|
|
const planData = plans.plans[selectedPlan as keyof typeof plans.plans];
|
|
setSelectedPlanMetadata(planData);
|
|
} catch (err) {
|
|
console.error('Failed to load plan metadata:', err);
|
|
}
|
|
};
|
|
loadPlanMetadata();
|
|
}, [selectedPlan]);
|
|
|
|
// SECURITY: Removed localStorage usage for registration progress
|
|
// Registration form data (including passwords) should NEVER be stored in localStorage
|
|
// due to XSS vulnerability risks. Form state is kept in memory only and submitted
|
|
// directly to backend via secure API calls.
|
|
|
|
// Clean up any old registration_progress data on mount (security fix)
|
|
useEffect(() => {
|
|
try {
|
|
localStorage.removeItem('registration_progress');
|
|
localStorage.removeItem('wizardState'); // Clean up wizard state too
|
|
} catch (err) {
|
|
console.error('Error cleaning up old localStorage data:', err);
|
|
}
|
|
}, []);
|
|
|
|
const validateForm = (): boolean => {
|
|
const newErrors: Partial<SimpleUserRegistration> = {};
|
|
|
|
if (!formData.full_name.trim()) {
|
|
newErrors.full_name = t('auth:validation.first_name_required', 'El nombre completo es requerido');
|
|
} else if (formData.full_name.trim().length < 2) {
|
|
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');
|
|
}
|
|
|
|
if (!formData.password) {
|
|
newErrors.password = t('auth:validation.password_required', 'La contraseña es requerida');
|
|
} else {
|
|
const passwordErrors = getPasswordErrors(formData.password);
|
|
if (passwordErrors.length > 0) {
|
|
newErrors.password = passwordErrors[0]; // Show first error
|
|
}
|
|
}
|
|
|
|
if (!formData.confirmPassword) {
|
|
newErrors.confirmPassword = t('auth:register.confirm_password', 'Confirma tu contraseña');
|
|
} else if (formData.password !== formData.confirmPassword) {
|
|
newErrors.confirmPassword = t('auth:validation.passwords_must_match', 'Las contraseñas no coinciden');
|
|
}
|
|
|
|
if (!formData.acceptTerms) {
|
|
newErrors.acceptTerms = t('auth:validation.terms_required', 'Debes aceptar los términos y condiciones');
|
|
}
|
|
|
|
setErrors(newErrors);
|
|
return Object.keys(newErrors).length === 0;
|
|
};
|
|
|
|
const handleNextStep = () => {
|
|
if (currentStep === 'basic_info') {
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
// OPTION A: Skip subscription step if plan was pre-selected from pricing page
|
|
if (preSelectedPlan) {
|
|
setCurrentStep('payment');
|
|
} else {
|
|
setCurrentStep('subscription');
|
|
}
|
|
} else if (currentStep === 'subscription') {
|
|
setCurrentStep('payment');
|
|
}
|
|
};
|
|
|
|
const handlePreviousStep = () => {
|
|
if (currentStep === 'payment' && preSelectedPlan) {
|
|
// Go back to basic_info (skip subscription step)
|
|
setCurrentStep('basic_info');
|
|
} else if (currentStep === 'payment') {
|
|
setCurrentStep('subscription');
|
|
} else if (currentStep === 'subscription') {
|
|
setCurrentStep('basic_info');
|
|
}
|
|
};
|
|
|
|
const handleRegistrationSubmit = async (paymentMethodId?: string) => {
|
|
try {
|
|
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
|
|
subscription_plan: selectedPlan,
|
|
use_trial: useTrial,
|
|
payment_method_id: paymentMethodId,
|
|
// Include coupon code if pilot customer
|
|
coupon_code: isPilot ? couponCode : undefined,
|
|
// Include consent data
|
|
terms_accepted: formData.acceptTerms,
|
|
privacy_accepted: formData.acceptTerms,
|
|
marketing_consent: formData.marketingConsent,
|
|
analytics_consent: formData.analyticsConsent,
|
|
};
|
|
|
|
await register(registrationData);
|
|
|
|
const successMessage = isPilot
|
|
? '¡Bienvenido al programa piloto! Tu cuenta ha sido creada con 3 meses gratis.'
|
|
: '¡Bienvenido! Tu cuenta ha sido creada correctamente.';
|
|
|
|
showToast.success(t('auth:register.registering', successMessage), {
|
|
title: t('auth:alerts.success_create', 'Cuenta creada exitosamente')
|
|
});
|
|
onSuccess?.();
|
|
} catch (err) {
|
|
showToast.error(error || t('auth:register.register_button', 'No se pudo crear la cuenta. Verifica que el email no esté en uso.'), {
|
|
title: t('auth:alerts.error_create', 'Error al crear la cuenta')
|
|
});
|
|
}
|
|
};
|
|
|
|
const handlePaymentSuccess = () => {
|
|
handleRegistrationSubmit(); // In a real app, you would pass the payment method ID
|
|
};
|
|
|
|
const handlePaymentError = (errorMessage: string) => {
|
|
showToast.error(errorMessage, {
|
|
title: 'Error en el pago'
|
|
});
|
|
};
|
|
|
|
const handleInputChange = (field: keyof SimpleUserRegistration) => (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
|
|
setFormData(prev => ({ ...prev, [field]: value }));
|
|
if (errors[field]) {
|
|
setErrors(prev => ({ ...prev, [field]: undefined }));
|
|
}
|
|
};
|
|
|
|
// Render step indicator
|
|
const renderStepIndicator = () => {
|
|
// Show 2 steps if plan is pre-selected, 3 steps otherwise
|
|
const steps = preSelectedPlan
|
|
? [
|
|
{ key: 'basic_info', label: 'Información', number: 1, time: '2 min' },
|
|
{ key: 'payment', label: 'Pago', number: 2, time: '2 min' }
|
|
]
|
|
: [
|
|
{ key: 'basic_info', label: 'Información', number: 1, time: '2 min' },
|
|
{ key: 'subscription', label: 'Plan', number: 2, time: '1 min' },
|
|
{ key: 'payment', label: 'Pago', number: 3, time: '2 min' }
|
|
];
|
|
|
|
const getStepIndex = (step: RegistrationStep) => {
|
|
return steps.findIndex(s => s.key === step);
|
|
};
|
|
|
|
const currentIndex = getStepIndex(currentStep);
|
|
|
|
return (
|
|
<div className="mb-6 sm:mb-8">
|
|
<div className="flex justify-center items-center">
|
|
{steps.map((step, index) => (
|
|
<React.Fragment key={step.key}>
|
|
<div className="flex flex-col items-center">
|
|
<div className={`flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full font-semibold text-sm transition-all duration-200 ${
|
|
index < currentIndex
|
|
? 'bg-color-success text-white'
|
|
: index === currentIndex
|
|
? 'bg-color-primary text-white ring-4 ring-color-primary/20'
|
|
: 'bg-bg-secondary text-text-secondary'
|
|
}`}>
|
|
{index < currentIndex ? (
|
|
<CheckCircle className="w-5 h-5" />
|
|
) : (
|
|
step.number
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col items-center mt-1 sm:mt-2">
|
|
<span className={`text-[10px] sm:text-xs font-medium block ${
|
|
index <= currentIndex ? 'text-text-primary' : 'text-text-secondary'
|
|
}`}>
|
|
{step.label}
|
|
</span>
|
|
<span className={`text-[8px] sm:text-[10px] flex items-center gap-0.5 ${
|
|
index === currentIndex ? 'text-text-tertiary' : 'hidden sm:flex text-text-tertiary'
|
|
}`}>
|
|
<Clock className="w-2 h-2 sm:w-3 sm:h-3" />
|
|
{step.time}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{index < steps.length - 1 && (
|
|
<div className={`h-0.5 w-8 sm:w-16 mx-2 sm:mx-4 transition-all duration-200 ${
|
|
index < currentIndex ? 'bg-color-success' : 'bg-border-primary'
|
|
}`} />
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Render current step
|
|
const renderCurrentStep = () => {
|
|
switch (currentStep) {
|
|
case 'basic_info':
|
|
return (
|
|
<div className="space-y-4 sm:space-y-6">
|
|
<div className="text-center mb-4 sm:mb-6">
|
|
<h1 className="text-2xl sm:text-3xl font-bold text-text-primary mb-2">
|
|
{t('auth:register.title', 'Crear Cuenta')}
|
|
</h1>
|
|
<p className="text-text-secondary text-sm sm:text-base">
|
|
{t('auth:register.subtitle', 'Únete y comienza hoy mismo')}
|
|
</p>
|
|
</div>
|
|
|
|
<form onSubmit={(e) => { e.preventDefault(); handleNextStep(); }} className="space-y-6">
|
|
<Input
|
|
label={t('auth:register.first_name', 'Nombre Completo')}
|
|
placeholder="Juan Pérez García"
|
|
value={formData.full_name}
|
|
onChange={handleInputChange('full_name')}
|
|
error={errors.full_name}
|
|
disabled={isLoading}
|
|
required
|
|
autoComplete="name"
|
|
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 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
}
|
|
/>
|
|
|
|
<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>
|
|
}
|
|
/>
|
|
|
|
<Input
|
|
type={showPassword ? 'text' : 'password'}
|
|
label="Contraseña"
|
|
placeholder="Contraseña segura"
|
|
value={formData.password}
|
|
onChange={handleInputChange('password')}
|
|
error={errors.password}
|
|
disabled={isLoading}
|
|
maxLength={128}
|
|
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="M12 15v2m-6 4h12a2 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"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="text-text-secondary hover:text-text-primary"
|
|
aria-label={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
|
|
>
|
|
{showPassword ? (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
|
|
</svg>
|
|
) : (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
}
|
|
/>
|
|
|
|
{/* 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"
|
|
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
|
className="text-text-secondary hover:text-text-primary"
|
|
aria-label={showConfirmPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
|
|
>
|
|
{showConfirmPassword ? (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
|
|
</svg>
|
|
) : (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
)}
|
|
</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">
|
|
<input
|
|
type="checkbox"
|
|
id="acceptTerms"
|
|
checked={formData.acceptTerms}
|
|
onChange={handleInputChange('acceptTerms')}
|
|
className="mt-1 h-4 w-4 rounded border-border-primary text-color-primary focus:ring-color-primary focus:ring-offset-0"
|
|
disabled={isLoading}
|
|
/>
|
|
<label htmlFor="acceptTerms" className="text-sm text-text-secondary cursor-pointer">
|
|
Acepto los{' '}
|
|
<a href="/terms" target="_blank" rel="noopener noreferrer" className="text-color-primary hover:text-color-primary-dark underline">
|
|
términos y condiciones
|
|
</a>{' '}
|
|
y la{' '}
|
|
<a href="/privacy" target="_blank" rel="noopener noreferrer" className="text-color-primary hover:text-color-primary-dark underline">
|
|
política de privacidad
|
|
</a>{' '}
|
|
<span className="text-color-error">*</span>
|
|
</label>
|
|
</div>
|
|
{errors.acceptTerms && (
|
|
<p className="text-color-error text-sm ml-7">{errors.acceptTerms}</p>
|
|
)}
|
|
|
|
<div className="flex items-start space-x-3">
|
|
<input
|
|
type="checkbox"
|
|
id="marketingConsent"
|
|
checked={formData.marketingConsent}
|
|
onChange={handleInputChange('marketingConsent')}
|
|
className="mt-1 h-4 w-4 rounded border-border-primary text-color-primary focus:ring-color-primary focus:ring-offset-0"
|
|
disabled={isLoading}
|
|
/>
|
|
<label htmlFor="marketingConsent" className="text-sm text-text-secondary cursor-pointer">
|
|
Deseo recibir comunicaciones de marketing y promociones
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-3">
|
|
<input
|
|
type="checkbox"
|
|
id="analyticsConsent"
|
|
checked={formData.analyticsConsent}
|
|
onChange={handleInputChange('analyticsConsent')}
|
|
className="mt-1 h-4 w-4 rounded border-border-primary text-color-primary focus:ring-color-primary focus:ring-offset-0"
|
|
disabled={isLoading}
|
|
/>
|
|
<label htmlFor="analyticsConsent" className="text-sm text-text-secondary cursor-pointer">
|
|
Acepto el uso de cookies analíticas para mejorar la experiencia
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end pt-4">
|
|
<Button
|
|
type="submit"
|
|
variant="primary"
|
|
size="lg"
|
|
disabled={isLoading || !validatePassword(formData.password) || !formData.acceptTerms || passwordMatchStatus !== 'match'}
|
|
className="w-full sm:w-48"
|
|
>
|
|
Siguiente
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
|
|
case 'subscription':
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="text-center">
|
|
<h1 className="text-2xl sm:text-3xl font-bold text-text-primary mb-2">
|
|
{t('auth:subscription.select_plan', 'Selecciona tu plan')}
|
|
</h1>
|
|
<p className="text-text-secondary text-sm sm:text-base">
|
|
{t('auth:subscription.choose_plan', 'Elige el plan que mejor se adapte a tu negocio')}
|
|
</p>
|
|
</div>
|
|
|
|
<SubscriptionPricingCards
|
|
mode="selection"
|
|
selectedPlan={selectedPlan}
|
|
onPlanSelect={setSelectedPlan}
|
|
showPilotBanner={isPilot}
|
|
pilotCouponCode={couponCode}
|
|
pilotTrialMonths={trialMonths}
|
|
/>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-between gap-3 sm:gap-4 pt-2 border-t border-border-primary">
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
onClick={handlePreviousStep}
|
|
disabled={isLoading}
|
|
className="w-full sm:w-48 order-2 sm:order-1"
|
|
>
|
|
Anterior
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
size="lg"
|
|
onClick={handleNextStep}
|
|
disabled={isLoading}
|
|
className="w-full sm:w-48 order-1 sm:order-2"
|
|
>
|
|
Siguiente
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
case 'payment':
|
|
return (
|
|
<div className="space-y-4 sm:space-y-6">
|
|
<div className="text-center mb-4 sm:mb-6">
|
|
<h1 className="text-2xl sm:text-3xl font-bold text-text-primary mb-2">
|
|
{t('auth:payment.payment_info', 'Información de Pago')}
|
|
</h1>
|
|
<p className="text-text-secondary text-xs sm:text-sm">
|
|
{t('auth:payment.secure_payment', 'Tu información de pago está protegida con encriptación de extremo a extremo')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Plan Summary Card */}
|
|
{selectedPlanMetadata && (
|
|
<Card className="p-6 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-2 border-blue-200 dark:border-blue-800">
|
|
<h3 className="text-lg font-bold text-text-primary mb-4 flex items-center gap-2">
|
|
<CheckCircle className="w-5 h-5 text-color-primary" />
|
|
Resumen de tu Plan
|
|
</h3>
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-text-secondary">Plan seleccionado:</span>
|
|
<span className="font-bold text-color-primary text-lg">{selectedPlanMetadata.name}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-text-secondary">Precio mensual:</span>
|
|
<span className="font-semibold text-text-primary">
|
|
{subscriptionService.formatPrice(selectedPlanMetadata.monthly_price)}/mes
|
|
</span>
|
|
</div>
|
|
{useTrial && (
|
|
<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">Período de prueba:</span>
|
|
<span className="font-bold text-green-700 dark:text-green-400">
|
|
{isPilot ? `${trialMonths} meses GRATIS` : '14 días gratis'}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div className="pt-3 border-t border-blue-200 dark:border-blue-800">
|
|
<div className="flex justify-between items-center text-sm">
|
|
<span className="text-text-tertiary">Total hoy:</span>
|
|
<span className="font-bold text-xl text-color-success">€0.00</span>
|
|
</div>
|
|
<p className="text-xs text-text-tertiary mt-2 text-center">
|
|
{useTrial
|
|
? `Se te cobrará ${subscriptionService.formatPrice(selectedPlanMetadata.monthly_price)} después del período de prueba`
|
|
: 'Tarjeta requerida para validación'
|
|
}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
<Elements stripe={stripePromise}>
|
|
<PaymentForm
|
|
userName={formData.full_name}
|
|
userEmail={formData.email}
|
|
onPaymentSuccess={handlePaymentSuccess}
|
|
onPaymentError={handlePaymentError}
|
|
bypassPayment={bypassPayment}
|
|
onBypassToggle={() => setBypassPayment(!bypassPayment)}
|
|
/>
|
|
</Elements>
|
|
|
|
<div className="flex justify-start pt-4">
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
onClick={handlePreviousStep}
|
|
disabled={isLoading}
|
|
className="w-full sm:w-48"
|
|
>
|
|
Anterior
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card className={`p-4 sm:p-6 lg:p-8 w-full max-w-6xl ${className || ''}`} role="main">
|
|
{renderStepIndicator()}
|
|
{renderCurrentStep()}
|
|
|
|
{error && currentStep !== 'payment' && (
|
|
<div className="bg-color-error/10 border border-color-error/20 text-color-error px-4 py-3 rounded-lg text-sm flex items-start space-x-3 mt-4" role="alert">
|
|
<svg className="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
|
|
</svg>
|
|
<span>{error}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Login Link - only show on first step */}
|
|
{onLoginClick && currentStep === 'basic_info' && (
|
|
<div className="mt-8 text-center border-t border-border-primary pt-6">
|
|
<p className="text-text-secondary mb-4">
|
|
¿Ya tienes una cuenta?
|
|
</p>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={onLoginClick}
|
|
disabled={isLoading}
|
|
className="text-color-primary hover:text-color-primary-dark"
|
|
>
|
|
Iniciar Sesión
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default RegisterForm;
|