|
|
import { useEffect, FormEventHandler, useState } from 'react';import Checkbox from '@/Components/Checkbox';import GuestLayout from '@/Layouts/GuestLayout';import InputError from '@/Components/InputError';import InputLabel from '@/Components/InputLabel';import PrimaryButton from '@/Components/PrimaryButton';import TextInput from '@/Components/TextInput';import { Head, Link, useForm } from '@inertiajs/react';import { AtSign, Lock, Eye, EyeOff, LogIn, CheckCircle, XOctagon } from 'react-feather';import FormGroup from '@/Components/FormGroup';import ProjectBanner from '@/Components/ProjectBanner';import Modal from '@/Components/Modal';import axios from 'axios';import ModalButton from '@/Components/ModalButton';
export default function Login({ status, canResetPassword }: { status?: string, canResetPassword: boolean }) { const { data, setData, processing, errors, reset } = useForm({ username: '', password: '', remember: false, });
useEffect(() => { return () => { reset('password'); }; }, []);
const [showPassword, setShowPassword] = useState(false); const toggleShowPassword = () => { setShowPassword((prevShowPassword) => !prevShowPassword); };
const [statusTitle, setStatusTitle] = 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('login'), data); setStatusTitle('Success') setFeedback(response.data.message); setIsSuccessModalOpen(true); } catch (error) { setStatusTitle('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="Log in" />
{status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
<div id="Login" className="hero min-h-screen bg-secondary-main"> <div className="hero-content flex-row"> <ProjectBanner />
<div className="card w-104 shrink-0 bg-primary-background"> <div className="card-body justify-center items-center"> <img src="assets/images/img-login.png" alt="An image that represents a login form from StorySet" width="250" height="250" /> <form id="SignInForm" onSubmit={ submit }> <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='swap-off px-1 stroke-secondary-main' /> <EyeOff className='swap-on px-1 stroke-secondary-main' /> </label> <InputError message={errors.password} className="mt-2" /> </FormGroup> <div className="flex items-center justify-between"> <label className="flex items-center"> <Checkbox name="remember" checked={data.remember} onChange={(e) => setData('remember', e.target.checked)} /> <span className="ml-1 text-secondary-main">Remember me</span> </label>
{canResetPassword && ( <Link href={route('password.request')} className="btn btn-link text-secondary-main m-0 p-0" > Forgot password... </Link> )} </div>
<div className="flex items-center justify-end mt-4"> <p className="invisible">No account yet? Register instead.</p> <PrimaryButton type='submit' disabled={processing}> Log In <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">{ statusTitle }</h2> <p className="mt-4">{ feedback }</p> <ModalButton onClick={handleCloseSuccessModal} className="bg-success-main text-white hover:bg-success-hover active:bg-success-pressed"> Go to Dashboard </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">{ statusTitle }</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> );}
|
