86 lines
3.3 KiB
JavaScript
86 lines
3.3 KiB
JavaScript
import React, {useContext, useEffect, useState} from 'react';
|
|
import Navbar from "./Navbar";
|
|
import {Input} from "../custom";
|
|
import {AuthContext} from "../App";
|
|
import {registration} from "../auth";
|
|
import {toast} from "react-toastify";
|
|
import {useForm} from "react-hook-form";
|
|
|
|
const background = require('../assets/background.png')
|
|
|
|
function Register(props) {
|
|
const {authState, authDispatch} = useContext(AuthContext)
|
|
const {register, handleSubmit, errors} = useForm();
|
|
const [error, setError] = useState("")
|
|
const [status, setStatus] = useState("Register")
|
|
const [canRegister, setRegister] = useState(true)
|
|
|
|
function submit(data) {
|
|
if (!canRegister) return;
|
|
setError("")
|
|
setStatus("Loading..");
|
|
setRegister(false);
|
|
|
|
(async () => {
|
|
let {json, status} = await registration(data.user.trim(), data.email.trim(), data.pass.trim())
|
|
setTimeout(() => setRegister(true), 1000);
|
|
if (status !== 200) {
|
|
setStatus("Register");
|
|
return setError(json.reason)
|
|
}
|
|
|
|
toast.success("Your account has been registered.")
|
|
window.localStorage.setItem("authtoken", json.token)
|
|
authDispatch({response: {token: json.token, loggedIn: true}})
|
|
})()
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
if (authState.loggedIn) props.history.push("/")
|
|
}, [authState.loggedIn, props.history])
|
|
|
|
return <div className="w-screen h-screen overflow-x-hidden bg-cover bg-center flex items-center flex-col"
|
|
style={{backgroundImage: `url(${background})`}}>
|
|
<Navbar history={props.history}/>
|
|
|
|
<form className="mt-24 sm:w-96 w-full" onSubmit={handleSubmit(submit)}>
|
|
<div className="text-2xl w-full font-semibold block ">
|
|
<div className="rounded-t-md inline bg-gray-100 text-gray-700 px-5 py-2">Create Account</div>
|
|
</div>
|
|
<div className="px-8 pt-6 pb-8 -mt-1 mb-4 px-12 rounded-md rounded-tl-none bg-gray-100">
|
|
{error &&
|
|
<div
|
|
className="px-2 py-2 mb-8 bg-red-300 text-red-900 text-xs font-semibold border border-red-600 rounded">{error}</div>
|
|
}
|
|
|
|
<Input name="user" type="text" placeholder="Username" errors={errors}
|
|
register={register({
|
|
required: {value: true, message: "You must provide a username."},
|
|
minLength: {value: 3, message: "Your username must be between 3 and 16 characters."},
|
|
maxLength: {value: 16, message: "Your username must be between 3 and 16 characters."},
|
|
})}>Username</Input>
|
|
|
|
<Input name="email" type="text" placeholder="Email" errors={errors}
|
|
register={register({
|
|
required: {value: true, message: "You must provide a password."},
|
|
pattern: {value: /\S+@\S+\.\S+/, message: "Invalid Email"}
|
|
})}>Email</Input>
|
|
|
|
<Input name="pass" type="password" placeholder="********" errors={errors}
|
|
register={register({
|
|
required: {value: true, message: "You must provide a password."},
|
|
minLength: {value: 8, message: "Your password must be at least 8 characters long."}
|
|
})}>Password</Input>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<input className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mr-2 rounded" type="submit"
|
|
value={status}/>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</div>;
|
|
}
|
|
|
|
export default Register; |