Spaces:
Sleeping
Sleeping
File size: 4,427 Bytes
1c8e50c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../../context/AuthContext';
const Register = () => {
const [formData, setFormData] = useState({
fullName: '',
email: '',
password: '',
mobile: '',
role: 'ROLE_CUSTOMER', // Default role
});
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const { register: registerUser } = useAuth();
const navigate = useNavigate();
const handleChange = (event) => {
const { name, value } = event.target;
setFormData((prev) => ({ ...prev, [name]: value }));
};
const handleSubmit = async (event) => {
event.preventDefault();
setLoading(true);
setError('');
try {
await registerUser(formData);
navigate('/login', { replace: true, state: { justRegistered: true } });
} catch (err) {
const message = err?.response?.data?.message ?? 'We could not complete your registration. Please try again.';
setError(message);
} finally {
setLoading(false);
}
};
return (
<div className="auth-card" role="main" aria-labelledby="register-heading">
<header className="auth-card__header">
<h1 id="register-heading" className="auth-card__title">
Join the workspace
</h1>
<p className="auth-card__subtitle">Create an account to collaborate and stay on top of your tasks.</p>
</header>
<form className="form" onSubmit={handleSubmit} noValidate>
<div className="form-field">
<label className="form-label" htmlFor="fullName">
Full name
</label>
<input
id="fullName"
className="form-input"
type="text"
name="fullName"
value={formData.fullName}
onChange={handleChange}
autoComplete="name"
required
/>
</div>
<div className="form-field">
<label className="form-label" htmlFor="email">
Email
</label>
<input
id="email"
className="form-input"
type="email"
name="email"
value={formData.email}
onChange={handleChange}
autoComplete="email"
required
/>
</div>
<div className="form-field">
<label className="form-label" htmlFor="password">
Password
</label>
<input
id="password"
className="form-input"
type="password"
name="password"
value={formData.password}
onChange={handleChange}
autoComplete="new-password"
minLength={6}
required
/>
<span className="form-helper">Use at least 6 characters. A mix of letters and numbers works best.</span>
</div>
<div className="form-field">
<label className="form-label" htmlFor="mobile">
Mobile number
</label>
<input
id="mobile"
className="form-input"
type="tel"
name="mobile"
value={formData.mobile}
onChange={handleChange}
autoComplete="tel"
required
/>
</div>
<div className="form-field">
<label className="form-label" htmlFor="role">
Role
</label>
<select
id="role"
className="form-input"
name="role"
value={formData.role}
onChange={handleChange}
required
>
<option value="ROLE_CUSTOMER">Team Member</option>
<option value="ROLE_ADMIN">Administrator</option>
</select>
<span className="form-helper">Select Administrator to create and manage tasks for the team.</span>
</div>
{error && (
<div className="alert alert--error" role="alert">
{error}
</div>
)}
<button className="button button--primary" type="submit" disabled={loading}>
{loading ? 'Creating account…' : 'Create account'}
</button>
</form>
<footer className="auth-footer">
Already have an account? <Link to="/login">Sign in</Link>
</footer>
</div>
);
};
export default Register;
|