81 lines
4.5 KiB
JavaScript
81 lines
4.5 KiB
JavaScript
import {Link, redirect, useNavigate} from "react-router-dom";
|
||
import {post} from "../../modules/fetcher";
|
||
import {useState} from "react";
|
||
|
||
|
||
function Register() {
|
||
const navigate = useNavigate();
|
||
const registerUser = async (e) => {
|
||
e.preventDefault()
|
||
if(password === confirmPassword) {
|
||
post('https://saucisson.justw.tf/api/users/register', {username, password}, '')
|
||
.then(async res => {
|
||
if (res.status === 200) {
|
||
localStorage.setItem('username', username)
|
||
localStorage.setItem('token', res.JSON.token)
|
||
navigate('/')
|
||
} else {
|
||
setError(res.message)
|
||
}
|
||
})
|
||
} else {
|
||
setError("Password doesn't match")
|
||
}
|
||
|
||
}
|
||
const [error, setError] = useState(null)
|
||
const [username, setUsername] = useState(null)
|
||
const [password, setPassword] = useState(null)
|
||
const [confirmPassword, setconfirmPassword] = useState(null)
|
||
return (
|
||
<section className="bg-gradient-to-r from-mainBlue to-darkGreen">
|
||
<div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
|
||
<div
|
||
className="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0">
|
||
<div className="p-6 space-y-4 md:space-y-6 sm:p-8">
|
||
<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl">
|
||
Create an account
|
||
</h1>
|
||
<form className="space-y-4 md:space-y-6" onSubmit={registerUser}>
|
||
{error && (
|
||
<div>
|
||
<p className="text-red-500 text-md">{error}</p>
|
||
</div>
|
||
)}
|
||
<div>
|
||
<label htmlFor="email"
|
||
className="block mb-2 text-sm font-medium text-gray-900">Your
|
||
username</label>
|
||
<input type="text" name="email" id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5" placeholder="John Doe" required="" onChange={e => {setUsername(e.target.value)}}/>
|
||
</div>
|
||
<div>
|
||
<label htmlFor="password"
|
||
className="block mb-2 text-sm font-medium text-gray-900">Password</label>
|
||
<input type="password" name="password" id="password" placeholder="••••••••"
|
||
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
|
||
required="" onChange={e => {setPassword(e.target.value)}}/>
|
||
</div>
|
||
<div>
|
||
<label htmlFor="password"
|
||
className="block mb-2 text-sm font-medium text-gray-900">Password confirmation</label>
|
||
<input type="password" name="confirm_password" id="confirm_password" placeholder="••••••••"
|
||
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
|
||
required="" onChange={e => {setconfirmPassword(e.target.value)}}/>
|
||
</div>
|
||
<button type="submit"
|
||
className="w-full text-white bg-darkGreen focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center">Register
|
||
</button>
|
||
<p className="text-sm font-light text-gray-500">
|
||
Don’t have an account yet? <Link to={'/login'}
|
||
className="font-medium text-darkGreen hover:underline">Sign
|
||
up</Link>
|
||
</p>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|
||
|
||
export default Register |