58 lines
2.6 KiB
TypeScript
58 lines
2.6 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 Login = () => {
|
|
|
|
const [inputData, setInputData] = useState({
|
|
"email": "",
|
|
"password": ""
|
|
});
|
|
|
|
const handleAction = (formData: FormData) => {
|
|
const email= formData.get("email")!.toString();
|
|
const password = formData.get("password")!.toString();
|
|
console.log({
|
|
"email": btoa(email),
|
|
"password": btoa(password),
|
|
});
|
|
|
|
|
|
}
|
|
|
|
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="Login"></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="email..." type="email" name="email" value={inputData.email} onChangeHandler={handleChange}>Test</FormTextInput>
|
|
</div>
|
|
<div className="mb-6">
|
|
<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}>Test</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={"Sign In"}></FormSubmitInput>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default Login; |