107 lines
4.3 KiB
TypeScript
107 lines
4.3 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
|
import { register } from "@/utils/api/auth";
|
||
|
|
import useRoutes from "@/hooks/useRoutes";
|
||
|
|
import SectionTitle from "@/components/ui/SectionTitle";
|
||
|
|
import SolidButton from "@/components/ui/Buttons/SolidButton";
|
||
|
|
import { Link, useNavigate } from "react-router"
|
||
|
|
|
||
|
|
const RegisterForm = () => {
|
||
|
|
const routes = useRoutes();
|
||
|
|
const [name, setName] = useState('');
|
||
|
|
const [email, setEmail] = useState('');
|
||
|
|
const [password, setPassword] = useState('');
|
||
|
|
const [passwordAgain, setPasswordAgain] = useState('');
|
||
|
|
const [error, setError] = useState('');
|
||
|
|
const [isLoading, setIsLoading] = useState(false);
|
||
|
|
const [isRegistered, setIsRegistered] = useState(false);
|
||
|
|
const navigate = useNavigate();
|
||
|
|
|
||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
if (password !== passwordAgain) {
|
||
|
|
setError("Passwords do not match.");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
setIsLoading(true);
|
||
|
|
|
||
|
|
await register(name, email, password, passwordAgain);
|
||
|
|
// navigate('/login?registered=true', { replace: true });
|
||
|
|
} catch (err) {
|
||
|
|
const errorMessage =
|
||
|
|
err instanceof Error
|
||
|
|
? err.message
|
||
|
|
: 'Registration\n failed';
|
||
|
|
setError(errorMessage);
|
||
|
|
} finally {
|
||
|
|
setIsRegistered(true);
|
||
|
|
setIsLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (isRegistered) {
|
||
|
|
return <div className="border-2 border-secondary rounded-lg p-5 mt-0">
|
||
|
|
<SectionTitle>Registration successful!</SectionTitle>
|
||
|
|
Please continue to the <Link to={ routes.auth.login() }>login page</Link>.
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{ marginTop: '15vh' }} className="lg:w-1/3 lg:mx-auto">
|
||
|
|
<div className="pt-2 text-2xl font-syncopate text-primary">
|
||
|
|
DISH PLANNER
|
||
|
|
</div>
|
||
|
|
<div className="border-2 border-secondary rounded-lg p-5 mt-0 lg:pt-10 lg:pb-7">
|
||
|
|
<form onSubmit={ handleSubmit } className="max-w-sm mx-auto space-y-4 flex flex-col">
|
||
|
|
<h2 className="text-xl font-bold text-secondary text-right">Register</h2>
|
||
|
|
{ error && <p className="text-red-600">{ error }</p> }
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="Name"
|
||
|
|
value={ name }
|
||
|
|
onChange={ e => setName(e.target.value) }
|
||
|
|
required
|
||
|
|
className="w-full p-2 border rounded border-secondary bg-gray-600 text-secondary"
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
type="email"
|
||
|
|
placeholder="Email"
|
||
|
|
value={ email }
|
||
|
|
onChange={ e => setEmail(e.target.value) }
|
||
|
|
required
|
||
|
|
className="w-full p-2 border rounded border-secondary bg-gray-600 text-secondary"
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
type="password"
|
||
|
|
placeholder="Password"
|
||
|
|
value={ password }
|
||
|
|
onChange={ e => setPassword(e.target.value) }
|
||
|
|
required
|
||
|
|
className="w-full p-2 border rounded border-secondary bg-gray-600 text-secondary"
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
type="password"
|
||
|
|
placeholder="Password Again"
|
||
|
|
value={ passwordAgain }
|
||
|
|
onChange={ e => setPasswordAgain(e.target.value) }
|
||
|
|
required
|
||
|
|
className="w-full p-2 border rounded border-secondary bg-gray-600 text-secondary"
|
||
|
|
/>
|
||
|
|
<SolidButton
|
||
|
|
type="submit"
|
||
|
|
className={ isLoading ? "opacity-50 cursor-not-allowed" : "background-red" }
|
||
|
|
>
|
||
|
|
Create Account
|
||
|
|
</SolidButton>
|
||
|
|
<Link to={routes.auth.login()} className="lowercase mt-2 hover:underline text-center text-secondary underline">
|
||
|
|
Back to Login
|
||
|
|
</Link>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default RegisterForm
|