75 lines
3.2 KiB
TypeScript
75 lines
3.2 KiB
TypeScript
'use client';
|
|
import IconLockDots from '@/components/icon/icon-lock-dots';
|
|
import IconMail from '@/components/icon/icon-mail';
|
|
import IconUser from '@/components/icon/icon-user';
|
|
import axios from 'axios';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useState } from "react";
|
|
import React from 'react';
|
|
import toast from 'react-hot-toast';
|
|
|
|
const ComponentsAuthRegisterForm = () => {
|
|
const [email, setEmail] = useState("")
|
|
const [password, setPassword] = useState("")
|
|
const [loading, setLoading] = useState(false)
|
|
const router = useRouter()
|
|
|
|
const submitForm = async(e: any) => {
|
|
e.preventDefault()
|
|
|
|
setLoading(true)
|
|
try {
|
|
const res = await axios.post(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/register`, {
|
|
email,
|
|
password,
|
|
})
|
|
|
|
localStorage.setItem("token", res.data.token)
|
|
|
|
toast.success("Register successful!")
|
|
router.push("/")
|
|
} catch (err: any) {
|
|
console.error("Register error:", err)
|
|
toast.error(err.response?.data?.error || "Something went wrong")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
};
|
|
return (
|
|
<form className="space-y-5 dark:text-white" onSubmit={submitForm}>
|
|
{/* <div>
|
|
<label htmlFor="Name">Name</label>
|
|
<div className="relative text-white-dark">
|
|
<input id="Name" type="text" placeholder="Enter Name" className="form-input ps-10 placeholder:text-white-dark" />
|
|
<span className="absolute start-4 top-1/2 -translate-y-1/2">
|
|
<IconUser fill={true} />
|
|
</span>
|
|
</div>
|
|
</div> */}
|
|
<div>
|
|
<label htmlFor="Email" className='text-yellow-400 text-left'>Email</label>
|
|
<div className="relative text-white-dark">
|
|
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
|
|
<span className="absolute start-4 top-1/2 -translate-y-1/2">
|
|
<IconMail fill={true} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className= "pb-2">
|
|
<label htmlFor="Password" className='text-yellow-400 text-left'>Password</label>
|
|
<div className="relative text-white-dark">
|
|
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
|
|
<span className="absolute start-4 top-1/2 -translate-y-1/2">
|
|
<IconLockDots fill={true} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<button type="submit" disabled={loading} className=" w-full uppercase border-0 rounded-md bg-[#fcd913] text-black font-semibold py-2 hover:bg-[#E6C812] transition disabled:opacity-70">
|
|
{loading ? "Creating account..." : "Register"}
|
|
</button>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default ComponentsAuthRegisterForm;
|