87 lines
4.2 KiB
TypeScript
87 lines
4.2 KiB
TypeScript
"use client"
|
|
|
|
import Form from "@/components/ui/form";
|
|
import { FormLabel, FormSubmitInput, FormTextInput } from "@/components/ui/form-input";
|
|
import PageTitle from "@/components/ui/page-title";
|
|
import { ChangeEvent, useState } from "react";
|
|
|
|
const Register = () => {
|
|
|
|
const [inputData, setInputData] = useState({
|
|
"email": "",
|
|
"username": "",
|
|
"password": "",
|
|
"confirmPassword": ""
|
|
});
|
|
|
|
const [error, setError] = useState("");
|
|
|
|
const handleAction = async (formData: FormData) => {
|
|
const email= formData.get("email")!.toString();
|
|
const password = formData.get("password")!.toString();
|
|
const username = formData.get("username")!.toString();
|
|
|
|
const res = await fetch("http://127.0.0.1/", {
|
|
method: "POST",
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
"email": btoa(email),
|
|
"username": btoa(username),
|
|
"password": btoa(password),
|
|
})
|
|
});
|
|
if(!res.ok)
|
|
{
|
|
setError(`${res.statusText}`);
|
|
}
|
|
return await res.json();
|
|
|
|
|
|
|
|
}
|
|
|
|
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
e.preventDefault();
|
|
setInputData({
|
|
...inputData,
|
|
[e.target.name]: e.target.value
|
|
});
|
|
}
|
|
|
|
return (
|
|
<main className="flex min-h-screen flex-col items-center justify-stretch p-24">
|
|
<PageTitle title="Register"></PageTitle>
|
|
<div className="w-full max-w-xs">
|
|
<Form className="shadow-md rounded px-8 pt-6 pb-8 mb-4" formAction={handleAction}>
|
|
<div className="mb-4">
|
|
<FormLabel className="block text-eth text-sm font-bold mb-2" name={"email"}></FormLabel>
|
|
<FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-eth leading-tight focus:outline-none focus:shadow-outline" placeholder="E-Mail..." type="email" name="email" value={inputData.email} onChangeHandler={handleChange}></FormTextInput>
|
|
</div>
|
|
<div className="mb-4">
|
|
<FormLabel className="block text-eth text-sm font-bold mb-2" name={"username"}></FormLabel>
|
|
<FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-eth leading-tight focus:outline-none focus:shadow-outline" placeholder="Username..." type="text" name="username" value={inputData.username} onChangeHandler={handleChange}></FormTextInput>
|
|
</div>
|
|
<div className="mb-4">
|
|
<FormLabel className="block text-eth text-sm font-bold mb-2" name={"password"}></FormLabel>
|
|
<FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-eth leading-tight focus:outline-none focus:shadow-outline" placeholder="Password..." type="password" name="password" value={inputData.password} onChangeHandler={handleChange}></FormTextInput>
|
|
|
|
</div>
|
|
<div className="mb-6">
|
|
<FormLabel className="block text-eth text-sm font-bold mb-2" name={"confirmPassword"} title={"Confirm Password"}></FormLabel>
|
|
<FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-eth leading-tight focus:outline-none focus:shadow-outline" placeholder="Confirm Password..." type="password" name="confirmPassword" value={inputData.confirmPassword} onChangeHandler={handleChange}></FormTextInput>
|
|
<p className="text-red-500 text-xs italic">Please choose a password.</p>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<FormSubmitInput className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" name="submit" onSubmitHandler={undefined} value={"Register"}></FormSubmitInput>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default Register;
|