78 lines
2.6 KiB
JavaScript
78 lines
2.6 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-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Account Credentials
|
|
</h2>
|
|
|
|
<p className="text-[#664fa3]" 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 approved.
|
|
</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-[#ddd8eb] focus:border-[#664fa3]"
|
|
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-[#ddd8eb] focus:border-[#664fa3]"
|
|
data-testid="password-input"
|
|
/>
|
|
<p className="text-sm text-[#664fa3] 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-[#ddd8eb] focus:border-[#664fa3]"
|
|
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>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RegistrationStep4;
|