mirror of
http://88.130.71.182:3000/BlitTech/Projet1-RealEstate.git
synced 2026-06-12 23:33:21 +00:00
Update Register.tsx
This commit is contained in:
Dosseh91
@@ -1,7 +1,8 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate, Link } from 'react-router-dom';
|
||||||
|
import { User, Mail, Lock } from 'lucide-react'; // Import icons
|
||||||
|
|
||||||
const Register = () => {
|
const Register: React.FC = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
username: '',
|
username: '',
|
||||||
@@ -9,73 +10,181 @@ const Register = () => {
|
|||||||
password: '',
|
password: '',
|
||||||
confirmPassword: ''
|
confirmPassword: ''
|
||||||
});
|
});
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
const handleChange = (e) => {
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
setFormData({
|
setFormData({
|
||||||
...formData,
|
...formData,
|
||||||
[e.target.name]: e.target.value
|
[e.target.name]: e.target.value
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmit = (e) => {
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
setError(''); // Clear previous errors
|
||||||
|
|
||||||
// Simple validation
|
// Simple validation
|
||||||
if (formData.password !== formData.confirmPassword) {
|
if (formData.password !== formData.confirmPassword) {
|
||||||
alert("Passwords do not match!");
|
setError("Passwords do not match!");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// You can replace this with API call
|
if (formData.password.length < 6) {
|
||||||
console.log("Registering user:", formData);
|
setError("Password must be at least 6 characters long.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Simulate success
|
// You can replace this with your API call for registration
|
||||||
alert("Registration successful!");
|
console.log("Registering user:", {
|
||||||
|
username: formData.username,
|
||||||
|
email: formData.email
|
||||||
|
// Do not log the password
|
||||||
|
});
|
||||||
|
|
||||||
|
// On successful registration:
|
||||||
|
// For now, we'll simulate success and navigate to the login page.
|
||||||
|
console.log("Registration successful!");
|
||||||
navigate('/login'); // redirect to login page
|
navigate('/login'); // redirect to login page
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="register-container" style={{ padding: '2rem', maxWidth: '500px', margin: 'auto' }}>
|
<div className="min-h-screen bg-gray-50 flex flex-col justify-center items-center py-12 sm:px-6 lg:px-8">
|
||||||
<h2>Create Account</h2>
|
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
||||||
<form onSubmit={handleSubmit}>
|
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
||||||
<input
|
Create a new account
|
||||||
type="text"
|
</h2>
|
||||||
name="username"
|
<p className="mt-2 text-center text-sm text-gray-600">
|
||||||
placeholder="Username"
|
Or{' '}
|
||||||
onChange={handleChange}
|
<Link to="/login" className="font-medium text-accent-600 hover:text-accent-500">
|
||||||
value={formData.username}
|
sign in to your existing account
|
||||||
required
|
</Link>
|
||||||
/>
|
</p>
|
||||||
<br />
|
</div>
|
||||||
<input
|
|
||||||
type="email"
|
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
||||||
name="email"
|
<div className="bg-white py-8 px-4 shadow-lg sm:rounded-lg sm:px-10">
|
||||||
placeholder="Email"
|
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||||
onChange={handleChange}
|
<div>
|
||||||
value={formData.email}
|
<label
|
||||||
required
|
htmlFor="username"
|
||||||
/>
|
className="block text-sm font-medium text-gray-700"
|
||||||
<br />
|
>
|
||||||
<input
|
Username
|
||||||
type="password"
|
</label>
|
||||||
name="password"
|
<div className="mt-1 relative rounded-md shadow-sm">
|
||||||
placeholder="Password"
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
onChange={handleChange}
|
<User className="h-5 w-5 text-gray-400" />
|
||||||
value={formData.password}
|
</div>
|
||||||
required
|
<input
|
||||||
/>
|
id="username"
|
||||||
<br />
|
name="username"
|
||||||
<input
|
type="text"
|
||||||
type="password"
|
autoComplete="username"
|
||||||
name="confirmPassword"
|
required
|
||||||
placeholder="Confirm Password"
|
onChange={handleChange}
|
||||||
onChange={handleChange}
|
value={formData.username}
|
||||||
value={formData.confirmPassword}
|
className="appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-accent-500 focus:border-accent-500 sm:text-sm"
|
||||||
required
|
placeholder="yourusername"
|
||||||
/>
|
/>
|
||||||
<br />
|
</div>
|
||||||
<button type="submit">Register</button>
|
</div>
|
||||||
</form>
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="email"
|
||||||
|
className="block text-sm font-medium text-gray-700"
|
||||||
|
>
|
||||||
|
Email address
|
||||||
|
</label>
|
||||||
|
<div className="mt-1 relative rounded-md shadow-sm">
|
||||||
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
|
<Mail className="h-5 w-5 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
autoComplete="email"
|
||||||
|
required
|
||||||
|
onChange={handleChange}
|
||||||
|
value={formData.email}
|
||||||
|
className="appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-accent-500 focus:border-accent-500 sm:text-sm"
|
||||||
|
placeholder="you@example.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="password"
|
||||||
|
className="block text-sm font-medium text-gray-700"
|
||||||
|
>
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<div className="mt-1 relative rounded-md shadow-sm">
|
||||||
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
|
<Lock className="h-5 w-5 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
type="password"
|
||||||
|
autoComplete="new-password"
|
||||||
|
required
|
||||||
|
onChange={handleChange}
|
||||||
|
value={formData.password}
|
||||||
|
className="appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-accent-500 focus:border-accent-500 sm:text-sm"
|
||||||
|
placeholder="••••••••"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="confirmPassword"
|
||||||
|
className="block text-sm font-medium text-gray-700"
|
||||||
|
>
|
||||||
|
Confirm Password
|
||||||
|
</label>
|
||||||
|
<div className="mt-1 relative rounded-md shadow-sm">
|
||||||
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
|
<Lock className="h-5 w-5 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
id="confirmPassword"
|
||||||
|
name="confirmPassword"
|
||||||
|
type="password"
|
||||||
|
autoComplete="new-password"
|
||||||
|
required
|
||||||
|
onChange={handleChange}
|
||||||
|
value={formData.confirmPassword}
|
||||||
|
className="appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-accent-500 focus:border-accent-500 sm:text-sm"
|
||||||
|
placeholder="••••••••"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="rounded-md bg-red-50 p-4">
|
||||||
|
<div className="flex">
|
||||||
|
<div className="ml-3">
|
||||||
|
<h3 className="text-sm font-medium text-red-800">{error}</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-accent-600 hover:bg-accent-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-500"
|
||||||
|
>
|
||||||
|
Create account
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user