131 lines
5.0 KiB
JavaScript
131 lines
5.0 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import { Head, Link, useForm } from '@inertiajs/react';
|
|
import { usePage } from '@inertiajs/react';
|
|
import Swal from "sweetalert2"
|
|
import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
|
|
|
|
function Login({ status }) {
|
|
const { data, setData, post, processing, errors, reset } = useForm({
|
|
nis: '',
|
|
password: '',
|
|
remember: false,
|
|
});
|
|
const { flash } = usePage().props;
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (flash.success) {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Success',
|
|
text: flash.success
|
|
});
|
|
} else if (flash.error) {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Success',
|
|
text: flash.success
|
|
});
|
|
}
|
|
}, [flash]);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
reset('password');
|
|
};
|
|
}, []);
|
|
|
|
const submit = (e) => {
|
|
e.preventDefault();
|
|
post(route('login'));
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<div className="w-full max-w-md p-8 rounded-lg bg-gray-800">
|
|
<Head title="Log in" />
|
|
|
|
<h1 className="text-3xl font-bold mb-8 text-white">Masuk Untuk Melanjutkan</h1>
|
|
|
|
{status && <div className="mb-4 font-medium text-sm text-green-500">{status}</div>}
|
|
|
|
<form onSubmit={submit}>
|
|
<div className="mb-6">
|
|
<label htmlFor="nis" className="block text-xl mb-2 text-white">
|
|
Masukkan NIS
|
|
</label>
|
|
<input
|
|
id="nis"
|
|
type="text"
|
|
name="nis"
|
|
value={data.nis}
|
|
className="w-full p-3 border border-gray-700 rounded-lg text-gray-700"
|
|
placeholder="Masukkan Nis Anda"
|
|
autoComplete="username"
|
|
onChange={(e) => setData('nis', e.target.value)}
|
|
/>
|
|
{errors.nis && <p className="mt-1 text-sm text-red-500">{errors.nis}</p>}
|
|
</div>
|
|
|
|
<div className="mb-6 relative">
|
|
<label htmlFor="password" className="block text-xl mb-2 text-white">
|
|
Password
|
|
</label>
|
|
<input
|
|
id="password"
|
|
type={showPassword ? 'text' : 'password'}
|
|
name="password"
|
|
value={data.password}
|
|
className="w-full p-3 border border-gray-700 rounded-lg pr-12"
|
|
placeholder="••••••••"
|
|
autoComplete="current-password"
|
|
onChange={(e) => setData('password', e.target.value)}
|
|
/>
|
|
<div
|
|
className="absolute top-[50px] right-4 cursor-pointer text-gray-400 hover:text-black"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
>
|
|
{showPassword ? (
|
|
<EyeSlashIcon className="h-5 w-5" />
|
|
) : (
|
|
<EyeIcon className="h-5 w-5" />
|
|
)}
|
|
</div>
|
|
{errors.password && <p className="mt-1 text-sm text-red-500">{errors.password}</p>}
|
|
</div>
|
|
|
|
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex items-center">
|
|
<input
|
|
id="remember"
|
|
type="checkbox"
|
|
className="w-4 h-4 border border-gray-700 rounded"
|
|
name="remember"
|
|
checked={data.remember}
|
|
onChange={(e) => setData('remember', e.target.checked)}
|
|
/>
|
|
<label htmlFor="remember" className="ml-2 text-sm text-white">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={processing}
|
|
className="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg text-center"
|
|
>
|
|
Sign in
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Login.layout = (page) => page;
|
|
|
|
export default Login;
|
|
|