import React, { useState } from 'react';
function RegistrationForm() {
const [formData, setFormData] = useState({
title: '',
firstName: '',
lastName: '',
email: '',
password: '',
specialty: '',
ehr_system_type: '',
ehr_system_name: ''
});
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const handleSubmit = async (e) => {
e.preventDefault();
setIsSubmitting(true);
setErrors({});
try {
const response = await fetch('https://app.medisync.me/api/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
const data = await response.json();
if (response.ok) {
alert('Registration successful! Please check your email for verification.');
// Redirect to login or verification page
} else {
if (data.details) {
setErrors(data.details);
} else {
setErrors({ general: data.error });
}
}
} catch (error) {
setErrors({ general: 'Network error occurred' });
} finally {
setIsSubmitting(false);
}
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Title:</label>
<select
value={formData.title}
onChange={(e) => setFormData({...formData, title: e.target.value})}
required
>
<option value="">Select Title</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
<option value="Nurse">Nurse</option>
<option value="PA">PA</option>
</select>
{errors.title && <span className="error">{errors.title}</span>}
</div>
<div>
<label>First Name:</label>
<input
type="text"
value={formData.firstName}
onChange={(e) => setFormData({...formData, firstName: e.target.value})}
required
/>
{errors.firstName && <span className="error">{errors.firstName}</span>}
</div>
<div>
<label>Last Name:</label>
<input
type="text"
value={formData.lastName}
onChange={(e) => setFormData({...formData, lastName: e.target.value})}
required
/>
{errors.lastName && <span className="error">{errors.lastName}</span>}
</div>
<div>
<label>Email:</label>
<input
type="email"
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
required
/>
{errors.email && <span className="error">{errors.email}</span>}
</div>
<div>
<label>Password:</label>
<input
type="password"
value={formData.password}
onChange={(e) => setFormData({...formData, password: e.target.value})}
minLength="8"
required
/>
{errors.password && <span className="error">{errors.password}</span>}
</div>
<div>
<label>Medical Specialty:</label>
<input
type="text"
value={formData.specialty}
onChange={(e) => setFormData({...formData, specialty: e.target.value})}
placeholder="e.g., Cardiology, Pediatrics"
required
/>
{errors.specialty && <span className="error">{errors.specialty}</span>}
</div>
<div>
<label>EHR System Type:</label>
<select
value={formData.ehr_system_type}
onChange={(e) => setFormData({...formData, ehr_system_type: e.target.value})}
required
>
<option value="">Select EHR System</option>
<option value="Epic">Epic</option>
<option value="Cerner">Cerner</option>
<option value="Allscripts">Allscripts</option>
<option value="NextGen">NextGen</option>
<option value="Other">Other</option>
</select>
{errors.ehr_system_type && <span className="error">{errors.ehr_system_type}</span>}
</div>
<div>
<label>EHR System Name:</label>
<input
type="text"
value={formData.ehr_system_name}
onChange={(e) => setFormData({...formData, ehr_system_name: e.target.value})}
placeholder="e.g., Epic MyChart"
required
/>
{errors.ehr_system_name && <span className="error">{errors.ehr_system_name}</span>}
</div>
{errors.general && <div className="error">{errors.general}</div>}
<button type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Registering...' : 'Register'}
</button>
</form>
);
}