145 lines
5.0 KiB
TypeScript
145 lines
5.0 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 { useRouter } from 'next/navigation';
|
|
import React, { useState } from 'react';
|
|
import axios from 'axios';
|
|
|
|
const ComponentsAuthRegisterForm = () => {
|
|
const router = useRouter();
|
|
|
|
const [form, setForm] = useState({
|
|
name: '',
|
|
email: '',
|
|
password: '',
|
|
subscribe: false,
|
|
});
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value, type, checked } = e.target;
|
|
setForm((prev) => ({
|
|
...prev,
|
|
[name]: type === 'checkbox' ? checked : value,
|
|
}));
|
|
};
|
|
|
|
const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
// ✅ Send POST request via Axios
|
|
const response = await axios.post('http://localhost:3010/api/auth/signup', {
|
|
name: form.name,
|
|
email: form.email,
|
|
password: form.password,
|
|
subscribe: form.subscribe,
|
|
});
|
|
|
|
alert('Signup successful!');
|
|
router.push('/login');
|
|
} catch (err: any) {
|
|
// ✅ Axios error handling
|
|
if (err.response) {
|
|
// Server responded with status code out of 2xx
|
|
setError(err.response.data.error || 'Signup failed');
|
|
} else if (err.request) {
|
|
// Request was made but no response
|
|
setError('No response from server');
|
|
} else {
|
|
setError(err.message);
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form className="space-y-5 dark:text-white" onSubmit={submitForm}>
|
|
{error && <p className="text-red-500">{error}</p>}
|
|
|
|
<div>
|
|
<label htmlFor="name">Name</label>
|
|
<div className="relative text-white-dark">
|
|
<input
|
|
id="name"
|
|
name="name"
|
|
type="text"
|
|
placeholder="Enter Name"
|
|
className="form-input ps-10 placeholder:text-white-dark"
|
|
value={form.name}
|
|
onChange={handleChange}
|
|
/>
|
|
<span className="absolute start-4 top-1/2 -translate-y-1/2">
|
|
<IconUser fill={true} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="email">Email</label>
|
|
<div className="relative text-white-dark">
|
|
<input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
placeholder="Enter Email"
|
|
className="form-input ps-10 placeholder:text-white-dark"
|
|
value={form.email}
|
|
onChange={handleChange}
|
|
/>
|
|
<span className="absolute start-4 top-1/2 -translate-y-1/2">
|
|
<IconMail fill={true} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="password">Password</label>
|
|
<div className="relative text-white-dark">
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
placeholder="Enter Password"
|
|
className="form-input ps-10 placeholder:text-white-dark"
|
|
value={form.password}
|
|
onChange={handleChange}
|
|
/>
|
|
<span className="absolute start-4 top-1/2 -translate-y-1/2">
|
|
<IconLockDots fill={true} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="flex cursor-pointer items-center">
|
|
<input
|
|
type="checkbox"
|
|
name="subscribe"
|
|
checked={form.subscribe}
|
|
className="form-checkbox bg-white dark:bg-black"
|
|
onChange={handleChange}
|
|
/>
|
|
<span className="text-white-dark">Subscribe to weekly newsletter</span>
|
|
</label>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]"
|
|
disabled={loading}
|
|
>
|
|
{loading ? 'Signing up...' : 'Sign Up'}
|
|
</button>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default ComponentsAuthRegisterForm;
|