You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
233 lines
12 KiB
233 lines
12 KiB
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';
|
|
import ModalButton from '@/Components/ModalButton';
|
|
|
|
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="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 className='stroke-neutral-10' />
|
|
</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)}
|
|
/>
|
|
<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] ml-1 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 className='stroke-neutral-10' />
|
|
</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 className='stroke-neutral-10' />
|
|
</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 className='stroke-neutral-10' />
|
|
</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 className='stroke-neutral-10' />
|
|
</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 className='stroke-secondary-main swap-off px-1' />
|
|
<EyeOff className='stroke-secondary-main swap-on px-1' />
|
|
</label>
|
|
<InputError message={errors.password} className="mt-2" />
|
|
</FormGroup>
|
|
|
|
<FormGroup>
|
|
<InputLabel htmlFor='password_confirmation'>
|
|
<Unlock className='stroke-neutral-10' />
|
|
</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? Login instead.
|
|
</Link>
|
|
|
|
<PrimaryButton type='submit' disabled={processing}>
|
|
Sign Up
|
|
<LogIn className='stroke-neutral-10' />
|
|
</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 className='stroke-success-main' size={80} />
|
|
<h2 className="text-xl font-bold mt-2">{ status }</h2>
|
|
<p className="mt-4">{ feedback }</p>
|
|
<ModalButton onClick={handleCloseSuccessModal} className="bg-success-main text-white hover:bg-success-hover active:bg-success-pressed">
|
|
Login Now
|
|
</ModalButton>
|
|
</div>
|
|
</Modal>
|
|
|
|
<Modal show={isErrorModalOpen} onClose={() => setIsErrorModalOpen(false)} maxWidth="lg" styling='error'>
|
|
<div className="p-4 flex flex-col items-center">
|
|
<XOctagon className='stroke-error-main' size={80} />
|
|
<h2 className="text-xl font-bold mt-2">{ status }</h2>
|
|
<p className="mt-4">{ feedback }</p>
|
|
<ModalButton onClick={() => setIsErrorModalOpen(false)} className="bg-error-main text-white hover:bg-error-hover active:bg-error-pressed">
|
|
Close
|
|
</ModalButton>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
</GuestLayout>
|
|
);
|
|
}
|