50b2be68ac
- Integrated toast notifications to display error messages when form submissions fail across various components, enhancing user feedback and experience. - Updated components including DeleteUser, FormDialog, ManageTwoFactor, TwoFactorRecoveryCodes, TwoFactorSetupModal, PayrollPeriodShow, EmployeeCreate, EmployeeEdit, CuttingCreate, CuttingEdit, PurchaseCreate, PurchaseEdit, RestockCreate, RestockEdit, TransactionCreate, TransactionEdit, Category management, Product management, Raw Material management, Role management, Settings, and Authentication pages.
97 lines
3.9 KiB
TypeScript
97 lines
3.9 KiB
TypeScript
import { Form, Head } from '@inertiajs/react';
|
|
import { toast } from 'sonner';
|
|
import InputError from '@/components/input-error';
|
|
import PasswordInput from '@/components/password-input';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Spinner } from '@/components/ui/spinner';
|
|
import { store } from '@/routes/login';
|
|
|
|
export default function Login() {
|
|
return (
|
|
<>
|
|
<Head title="Masuk Akun" />
|
|
|
|
<Form
|
|
action={store()}
|
|
resetOnSuccess={['password']}
|
|
className="flex flex-col gap-6"
|
|
onError={() => {
|
|
toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
|
|
}}
|
|
>
|
|
{({ processing, errors }) => (
|
|
<>
|
|
<div className="grid gap-6">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="login">
|
|
Email atau Username
|
|
<span className="text-destructive">*</span>
|
|
</Label>
|
|
<Input
|
|
id="login"
|
|
type="text"
|
|
name="login"
|
|
required
|
|
autoFocus
|
|
tabIndex={1}
|
|
autoComplete="username"
|
|
placeholder="email@example.com or username"
|
|
/>
|
|
<InputError message={errors.login} />
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<div className="flex items-center">
|
|
<Label htmlFor="password">
|
|
Kata Sandi
|
|
<span className="text-destructive">
|
|
*
|
|
</span>
|
|
</Label>
|
|
</div>
|
|
<PasswordInput
|
|
id="password"
|
|
name="password"
|
|
required
|
|
tabIndex={2}
|
|
autoComplete="current-password"
|
|
placeholder="********"
|
|
/>
|
|
<InputError message={errors.password} />
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3">
|
|
<Checkbox
|
|
id="remember"
|
|
name="remember"
|
|
tabIndex={3}
|
|
/>
|
|
<Label htmlFor="remember">Ingat saya</Label>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
className="mt-4 w-full"
|
|
tabIndex={4}
|
|
disabled={processing}
|
|
data-test="login-button"
|
|
>
|
|
{processing && <Spinner />}
|
|
Masuk
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</Form>
|
|
</>
|
|
);
|
|
}
|
|
|
|
Login.layout = {
|
|
title: 'Selamat Datang',
|
|
description: 'Silakan masukkan email dan username untuk akses dasbor.',
|
|
};
|