forked from tpd94/CDRM-Project
122 lines
4.6 KiB
JavaScript
122 lines
4.6 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
|
|
function Register() {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [status, setStatus] = useState("");
|
|
|
|
// Validation functions
|
|
const validateUsername = (name) => /^[A-Za-z0-9_-]+$/.test(name);
|
|
const validatePassword = (pass) => /^\S+$/.test(pass); // No spaces
|
|
|
|
useEffect(() => {
|
|
document.title = "Register | CDRM-Project";
|
|
}, []);
|
|
|
|
const handleRegister = async () => {
|
|
if (!validateUsername(username)) {
|
|
setStatus("Invalid username. Use only letters, numbers, hyphens, or underscores.");
|
|
return;
|
|
}
|
|
if (!validatePassword(password)) {
|
|
setStatus("Invalid password. Spaces are not allowed.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch("/register", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ username, password }),
|
|
});
|
|
const data = await response.json();
|
|
if (data.message) {
|
|
setStatus(data.message);
|
|
} else if (data.error) {
|
|
setStatus(data.error);
|
|
}
|
|
} catch (err) {
|
|
setStatus("An error occurred while registering.");
|
|
}
|
|
};
|
|
|
|
const handleLogin = async () => {
|
|
if (!validateUsername(username)) {
|
|
setStatus("Invalid username. Use only letters, numbers, hyphens, or underscores.");
|
|
return;
|
|
}
|
|
if (!validatePassword(password)) {
|
|
setStatus("Invalid password. Spaces are not allowed.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch("/login", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
credentials: "include", // Important to send cookies
|
|
body: JSON.stringify({ username, password }),
|
|
});
|
|
const data = await response.json();
|
|
if (data.message) {
|
|
// Successful login - reload the page to trigger Account check
|
|
window.location.reload();
|
|
} else if (data.error) {
|
|
setStatus(data.error);
|
|
}
|
|
} catch (err) {
|
|
setStatus("An error occurred while logging in.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col w-full h-full items-center justify-center p-4">
|
|
<div className="flex flex-col w-full h-full lg:w-1/2 lg:h-96 border-2 border-yellow-500/50 rounded-2xl p-4 overflow-x-auto justify-center items-center">
|
|
<div className="flex flex-col w-full">
|
|
<label htmlFor="username" className="text-lg font-bold mb-2 text-white">
|
|
Username:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
placeholder="Username"
|
|
className="mb-4 p-2 border border-gray-300 rounded text-white bg-transparent"
|
|
/>
|
|
<label htmlFor="password" className="text-lg font-bold mb-2 text-white">
|
|
Password:
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="Password"
|
|
className="mb-4 p-2 border border-gray-300 rounded text-white bg-transparent"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col lg:flex-row w-8/10 items-center lg:justify-between mt-4">
|
|
<button
|
|
onClick={handleLogin}
|
|
className="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded mt-4 w-1/3"
|
|
>
|
|
Login
|
|
</button>
|
|
<button
|
|
onClick={handleRegister}
|
|
className="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded mt-4 w-1/3"
|
|
>
|
|
Register
|
|
</button>
|
|
</div>
|
|
{status && <p className="text-sm text-white mt-4 p-4">{status}</p>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Register;
|