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.
125 lines
5.2 KiB
TypeScript
125 lines
5.2 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 TextLink from '@/components/text-link';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Spinner } from '@/components/ui/spinner';
|
|
import { login } from '@/routes';
|
|
import { store } from '@/routes/register';
|
|
|
|
type Props = {
|
|
passwordRules: string;
|
|
};
|
|
|
|
export default function Register({ passwordRules }: Props) {
|
|
return (
|
|
<>
|
|
<Head title="Register" />
|
|
<Form
|
|
{...store.form()}
|
|
resetOnSuccess={['password', 'password_confirmation']}
|
|
disableWhileProcessing
|
|
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="name">Name</Label>
|
|
<Input
|
|
id="name"
|
|
type="text"
|
|
required
|
|
autoFocus
|
|
tabIndex={1}
|
|
autoComplete="name"
|
|
name="name"
|
|
placeholder="Full name"
|
|
/>
|
|
<InputError
|
|
message={errors.name}
|
|
className="mt-2"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="email">Email address</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
required
|
|
tabIndex={2}
|
|
autoComplete="email"
|
|
name="email"
|
|
placeholder="email@example.com"
|
|
/>
|
|
<InputError message={errors.email} />
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="password">Password</Label>
|
|
<PasswordInput
|
|
id="password"
|
|
required
|
|
tabIndex={3}
|
|
autoComplete="new-password"
|
|
name="password"
|
|
placeholder="Password"
|
|
passwordrules={passwordRules}
|
|
/>
|
|
<InputError message={errors.password} />
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="password_confirmation">
|
|
Confirm password
|
|
</Label>
|
|
<PasswordInput
|
|
id="password_confirmation"
|
|
required
|
|
tabIndex={4}
|
|
autoComplete="new-password"
|
|
name="password_confirmation"
|
|
placeholder="Confirm password"
|
|
passwordrules={passwordRules}
|
|
/>
|
|
<InputError
|
|
message={errors.password_confirmation}
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
className="mt-2 w-full"
|
|
tabIndex={5}
|
|
data-test="register-user-button"
|
|
>
|
|
{processing && <Spinner />}
|
|
Create account
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="text-center text-sm text-muted-foreground">
|
|
Already have an account?{' '}
|
|
<TextLink href={login()} tabIndex={6}>
|
|
Log in
|
|
</TextLink>
|
|
</div>
|
|
</>
|
|
)}
|
|
</Form>
|
|
</>
|
|
);
|
|
}
|
|
|
|
Register.layout = {
|
|
title: 'Create an account',
|
|
description: 'Enter your details below to create your account',
|
|
};
|