81 lines
2.4 KiB
JavaScript
81 lines
2.4 KiB
JavaScript
// components/SignUp.js
|
|
import React, { useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import './SignUp.css';
|
|
|
|
function SignUp() {
|
|
const navigate = useNavigate();
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [success, setSuccess] = useState(false);
|
|
|
|
const handleSignUp = async (event) => {
|
|
event.preventDefault();
|
|
|
|
if (!username || !password) {
|
|
setError('Please enter a username and password');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Call the /api/register endpoint
|
|
const response = await fetch('/api/register', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
userId: Math.floor(Math.random() * 10000000), // Generate a temporary user ID (replace with actual logic)
|
|
username,
|
|
password,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
setSuccess(true);
|
|
console.log('User registered successfully');
|
|
// Redirect to GettingStarted after successful sign-up
|
|
navigate('/getting-started');
|
|
} else {
|
|
const data = await response.json();
|
|
setError(data.error || 'Failed to register user');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error during registration:', err.message);
|
|
setError('An error occurred while registering. Please try again.');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="signup-container">
|
|
<div className="signup-form">
|
|
<h1>Sign Up</h1>
|
|
{error && <p className="error-message">{error}</p>}
|
|
{success && <p className="success-message">Registration successful!</p>}
|
|
<form onSubmit={handleSignUp}>
|
|
<input
|
|
type="text"
|
|
placeholder="Username"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
className="signup-input"
|
|
/>
|
|
<input
|
|
type="password"
|
|
placeholder="Password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="signup-input"
|
|
/>
|
|
<button type="submit" className="signup-button">
|
|
Sign Up
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SignUp;
|