Add basic index, complete login route with validation

This commit is contained in:
Xevion
2023-02-27 18:11:58 -06:00
parent 0ec3dee644
commit e07bd4c1f7
4 changed files with 92 additions and 0 deletions

55
src/pages/login.tsx Normal file
View File

@@ -0,0 +1,55 @@
import {NextPage} from "next";
import {useForm} from "react-hook-form";
import {useState} from "react";
import {useRouter} from "next/router";
const LoginPage: NextPage = () => {
type FormProps = { token: string; }
const {handleSubmit, register} = useForm<FormProps>();
const [error, setError] = useState<boolean | null>(null);
const router = useRouter();
async function onSubmit(data: FormProps) {
const response = await fetch(`/api/check?key=${data.token}`)
if (response.status === 200) {
setError(false);
router.push({pathname: "/", query: {"key": data.token}}).then();
} else
setError(true);
console.log(response);
}
return <div className="flex bg-zinc-900 min-h-screen h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="bg-black/ py-8 px-4 shadow sm:rounded-lg sm:px-10">
<form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
<div>
<label htmlFor="password" className="block text-sm font-medium text-gray-400">
Token
</label>
<div className="mt-1">
<input
{...register("token", {required: true})}
className="bg-zinc-800/80 text-zinc-300 block w-full appearance-none rounded-md border border-zinc-700/80 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-800/50 focus:outline-none focus:ring-indigo-500 sm:text-sm"
/>
</div>
{error ? <p className="mt-2 text-sm text-red-600" id="email-error">
The token given was not valid.
</p> : null}
</div>
<div>
<button
type="submit"
className="flex w-full justify-center rounded-md border border-transparent bg-indigo-900/80 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
Sign in
</button>
</div>
</form>
</div>
</div>
</div>
}
export default LoginPage;