92 lines
3.9 KiB
TypeScript
92 lines
3.9 KiB
TypeScript
import { useState } from "react";
|
|
import { useNavigate } from "react-router";
|
|
|
|
export default function LoginPage() {
|
|
const [loginRegisterSelection, setLoginRegisterSelection] = useState("option1");
|
|
const [userEmail, setUserEmail] = useState("");
|
|
const [userPassword, setUserPassword] = useState("");
|
|
const [userName, setUserName] = useState("");
|
|
const [userDisplayName, setUserDisplayName] = useState("");
|
|
const navigate = useNavigate();
|
|
|
|
async function loginOrRegister() {
|
|
if (loginRegisterSelection === "login") {
|
|
const response = await fetch("http://localhost:8787/users/login", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
email: userEmail,
|
|
password: userPassword // god bless HTTPS
|
|
}),
|
|
credentials: 'include'
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error(`Got ${response.status} when trying to log in.`)
|
|
}
|
|
navigate("/");
|
|
} else {
|
|
const response = await fetch("http://localhost:8787/users/create", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
email: userEmail,
|
|
password: userPassword,
|
|
name: userName,
|
|
display_name: userDisplayName
|
|
}),
|
|
credentials: 'include'
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error(`Got ${response.status} when trying to register.`)
|
|
}
|
|
|
|
navigate("/");
|
|
}
|
|
|
|
}
|
|
|
|
return (
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-5 shadow-none shadow-black/0 hover:shadow-black/40 hover:shadow-2xl rounded-2xl bg-[#151515] text-center transition ease-in-out duration-300 hover:ring-2 hover:ring-[#cccccc]">
|
|
<h1 className="text-2xl font-black">Login/Register</h1>
|
|
<form action={loginOrRegister}>
|
|
<div className="flex gap-4 justify-center">
|
|
<div>
|
|
<input type="radio" id="loginOption" name="loginRegisterSelection" value="Login" checked={loginRegisterSelection === 'login'} onChange={() => setLoginRegisterSelection('login')} />
|
|
<label htmlFor="loginOption">Login</label>
|
|
</div>
|
|
<div>
|
|
<input type="radio" id="registerOption" name="loginRegisterSelection" value="Register" checked={loginRegisterSelection === 'register'} onChange={() => setLoginRegisterSelection('register')} />
|
|
<label htmlFor="registerOption">Register</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex m-2 my-3">
|
|
<label htmlFor="email" className="mx-4">Email</label>
|
|
<input type="text" id="email" className="border-[1px] border-white rounded-xl text-center" onChange={(e) => setUserEmail(e.target.value)} />
|
|
</div>
|
|
<div className="flex m-2 my-3">
|
|
<label htmlFor="password" className="mx-4">Password</label>
|
|
<input type="text" id="password" className="border-[1px] border-white rounded-xl text-center" onChange={(e) => setUserPassword(e.target.value)} />
|
|
</div>
|
|
{loginRegisterSelection === 'register' &&
|
|
<>
|
|
<div className="flex m-2 my-3">
|
|
<label htmlFor="username" className="mx-4">Username</label>
|
|
<input type="text" id="username" className="border-[1px] border-white rounded-xl text-center" onChange={(e) => setUserName(e.target.value)} />
|
|
</div>
|
|
<div className="flex m-2 my-3">
|
|
<label htmlFor="displayName" className="mx-4">Display name</label>
|
|
<input type="text" id="displayName" className="border-[1px] border-white rounded-xl text-center" onChange={(e) => setUserDisplayName(e.target.value)} />
|
|
</div>
|
|
</>
|
|
}
|
|
|
|
<button className="bg-white text-black font-bold rounded-xl p-2" role="submit">login/register</button>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|