|
|
import { useEffect, FormEventHandler, useState } from 'react';import { Head, Link, useForm } from '@inertiajs/react';import GuestLayout from '@/Layouts/GuestLayout';import ProjectBanner from '@/Components/ProjectBanner';import FormGroup from '@/Components/FormGroup';import InputError from '@/Components/InputError';import InputLabel from '@/Components/InputLabel';import TextInput from '@/Components/TextInput';import PrimaryButton from '@/Components/PrimaryButton';import { Grid, User, Mail, AtSign, Lock, Eye, EyeOff, LogIn, Unlock, CheckCircle, XOctagon } from 'react-feather';import axios from 'axios';import Modal from '@/Components/Modal';
export default function Register() { const { data, setData, post, processing, errors, reset } = useForm({ emp_id: '', name: '', email: '', username: '', password: '', password_confirmation: '', role_id: '' });
useEffect(() => { return () => { reset('password', 'password_confirmation'); }; }, []);
const [showPassword, setShowPassword] = useState(false); const toggleShowPassword = () => { setShowPassword((prevShowPassword) => !prevShowPassword); }; const [status, setStatus] = useState(''); const [feedback, setFeedback] = useState(''); const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false); const [isErrorModalOpen, setIsErrorModalOpen] = useState(false);
const handleCloseSuccessModal = () => { setIsSuccessModalOpen(false); window.location.href = '/login'; };
const submit: FormEventHandler = async (e) => { e.preventDefault();
try { const response = await axios.post(route('register'), data); setStatus('Success') setFeedback(response.data.message); setIsSuccessModalOpen(true); } catch (error) { setStatus('Error') if (axios.isAxiosError(error)) { setFeedback(error.response?.data.message || 'An error occurred'); } else { setFeedback('An unexpected error occurred'); } setIsErrorModalOpen(true); } };
return ( <GuestLayout> <Head title="Register" />
<div id="Register" className="hero min-h-screen bg-secondary-main"> <div className="hero-content flex-row-reverse"> <ProjectBanner />
<div className="custom-font card w-104 shrink-0 bg-primary-background"> <div className="card-body justify-center items-center"> <img src="assets/images/img-signup.png" alt="An image that represents a sign up form from StorySet" width="250" height="250" />
<form id="SignUpForm" onSubmit={submit}> <FormGroup> <InputLabel htmlFor='emp_id'> <Grid stroke="#FFFFFF" /> </InputLabel> <TextInput id='emp_id' name='emp_id' value={data.emp_id} autoComplete='off' placeholder='Employee ID' required onChange={(e) => setData('emp_id', e.target.value)} className='border-r-0' /> <InputError message={errors.emp_id} className="mt-2" />
<select name="role_id" id="role_id" value={data.role_id} onChange={(e) => setData('role_id', e.target.value)} className='px-2 py-0 flex-grow w-full h-[30px] box-border bg-primary-background border border-primary-hover focus:outline-none focus:bg-neutral-10 focus:border focus:border-primary-hover'> <option value="" selected disabled>Select your role</option> <option value="1">Admin</option> <option value="2">Team Leader</option> <option value="3">Team Member</option> </select> </FormGroup>
<FormGroup> <InputLabel htmlFor='name'> <User stroke="#FFFFFF" /> </InputLabel> <TextInput id='name' name='name' value={data.name} autoComplete='off' placeholder='Full Name' required onChange={(e) => setData('name', e.target.value)} /> <InputError message={errors.name} className="mt-2" /> </FormGroup>
<FormGroup> <InputLabel htmlFor='email'> <Mail stroke="#FFFFFF" /> </InputLabel> <TextInput type='email' id='email' name='email' value={data.email} autoComplete='off' placeholder='Email Address' required onChange={(e) => setData('email', e.target.value)} /> <InputError message={errors.email} className="mt-2" /> </FormGroup>
<FormGroup> <InputLabel htmlFor='username'> <AtSign stroke="#FFFFFF" /> </InputLabel> <TextInput id='username' name='username' value={data.username} autoComplete='off' placeholder='Username' required onChange={(e) => setData('username', e.target.value)} /> <InputError message={errors.username} className="mt-2" /> </FormGroup>
<FormGroup> <InputLabel htmlFor='password'> <Lock stroke="#FFFFFF" /> </InputLabel> <TextInput type={showPassword ? "text" : "password"} id='password' name='password' value={data.password} autoComplete='off' placeholder='Password' required onChange={(e) => setData('password', e.target.value)} className='border-r-0' /> <label htmlFor="showPassword" className="swap items-center border border-primary-hover border-l-0"> <input type="checkbox" name="showPassword" id="showPassword" onChange={toggleShowPassword} checked={showPassword} className='hidden' /> <Eye stroke='#002F42' className='swap-off px-1' /> <EyeOff stroke='#002F42' className='swap-on px-1' /> </label> <InputError message={errors.password} className="mt-2" /> </FormGroup>
<FormGroup> <InputLabel htmlFor='password_confirmation'> <Unlock stroke="#FFFFFF" /> </InputLabel> <TextInput type={"password"} id='password_confirmation' name='password_confirmation' value={data.password_confirmation} autoComplete='off' placeholder='Confirm Password' required onChange={(e) => setData('password_confirmation', e.target.value)} /> </FormGroup>
<div className="flex items-center justify-end mt-4"> <Link href={route('login')} className="btn btn-link text-secondary-main" > Already registered? </Link>
<PrimaryButton type='submit' disabled={processing}> Sign Up <LogIn stroke='#FFFFFF' /> </PrimaryButton> </div> </form> </div> </div> </div>
<Modal show={isSuccessModalOpen} onClose={() => setIsSuccessModalOpen(false)} maxWidth="lg" styling='success'> <div className="p-4 flex flex-col items-center"> <CheckCircle stroke='#007505' size={80} /> <h2 className="text-xl font-bold mt-2">{ status }</h2> <p className="mt-4">{ feedback }</p> <button onClick={handleCloseSuccessModal} className="mt-4 w-full btn bg-success-main text-lg text-white hover:bg-success-hover active:bg-success-pressed"> Login Now </button> </div> </Modal>
<Modal show={isErrorModalOpen} onClose={() => setIsErrorModalOpen(false)} maxWidth="lg" styling='error'> <div className="p-4 flex flex-col items-center"> <XOctagon stroke='#B20000' size={80} /> <h2 className="text-xl font-bold mt-2">{ status }</h2> <p className="mt-4">{ feedback }</p> <button onClick={() => setIsErrorModalOpen(false)} className="mt-4 w-full btn bg-error-main text-lg text-white hover:bg-error-hover active:bg-error-pressed"> Close </button> </div> </Modal> </div> </GuestLayout> );}
|
