115 lines
4.1 KiB
JavaScript
115 lines
4.1 KiB
JavaScript
import React from 'react';
|
|
import { Label } from '../ui/label';
|
|
import { Input } from '../ui/input';
|
|
import { PasswordInput } from '../ui/password-input';
|
|
|
|
const RegistrationStep4 = ({ formData, handleInputChange }) => {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="space-y-4">
|
|
<h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Account Credentials
|
|
</h2>
|
|
|
|
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Your email is also your username that you can use to login.
|
|
Please note you can only login after your application is validated.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="email">Email *</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
required
|
|
value={formData.email}
|
|
onChange={handleInputChange}
|
|
placeholder="your.email@example.com"
|
|
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
|
|
data-testid="email-input"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="password">Password *</Label>
|
|
<PasswordInput
|
|
id="password"
|
|
name="password"
|
|
required
|
|
minLength={6}
|
|
value={formData.password}
|
|
onChange={handleInputChange}
|
|
placeholder="At least 6 characters"
|
|
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
|
|
data-testid="password-input"
|
|
/>
|
|
<p className="text-sm text-brand-purple mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Must be at least 6 characters long
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="confirmPassword">Repeat Password *</Label>
|
|
<PasswordInput
|
|
id="confirmPassword"
|
|
name="confirmPassword"
|
|
required
|
|
value={formData.confirmPassword}
|
|
onChange={handleInputChange}
|
|
placeholder="Re-enter your password"
|
|
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
|
|
data-testid="confirm-password-input"
|
|
/>
|
|
{formData.confirmPassword && formData.password !== formData.confirmPassword && (
|
|
<p className="text-sm text-red-500 mt-2">
|
|
Passwords do not match
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Terms of Service Acceptance */}
|
|
<div className="p-4 bg-[var(--lavender-500)] rounded-lg border border-[var(--neutral-800)]">
|
|
<div className="flex items-start gap-3">
|
|
<input
|
|
type="checkbox"
|
|
id="accepts_tos"
|
|
name="accepts_tos"
|
|
checked={formData.accepts_tos || false}
|
|
onChange={handleInputChange}
|
|
className="mt-1 w-4 h-4 text-brand-purple border-gray-300 rounded focus:ring-brand-purple "
|
|
required
|
|
data-testid="tos-checkbox"
|
|
/>
|
|
<label htmlFor="accepts_tos" className="text-sm text-gray-700" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
I agree to the{' '}
|
|
<a
|
|
href="/become-a-member/terms-of-service"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-brand-purple hover:text-[var(--purple-ink)] font-semibold underline"
|
|
>
|
|
Terms of Service
|
|
</a>
|
|
{' '}and{' '}
|
|
<a
|
|
href="become-a-member/privacy-policy"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-brand-purple hover:text-[var(--purple-ink)] font-semibold underline"
|
|
>
|
|
Privacy Policy
|
|
</a>
|
|
<span className="text-red-500 ml-1">*</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RegistrationStep4;
|