dst/dstpabuaran.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update login form to accept username or email and improve layout with new logo

Browse Source
This commit is contained in:
Yoga Pangestu 2026-07-28 23:33:53 +07:00
parent dcd6e34828
commit d81ea791b4
4 changed files with 24 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

2
resources/js/layouts/auth-layout.tsx
View File

@ -1,4 +1,4 @@
import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout'; import AuthLayoutTemplate from '@/layouts/auth/auth-card-layout';
export default function AuthLayout({ export default function AuthLayout({
title = '', title = '',

5
resources/js/layouts/auth/auth-card-layout.tsx
View File

@ -1,6 +1,5 @@
import { Link } from '@inertiajs/react'; import { Link } from '@inertiajs/react';
import type { PropsWithChildren } from 'react'; import type { PropsWithChildren } from 'react';
import AppLogoIcon from '@/components/app-logo-icon';
import { import {
Card, Card,
CardContent, CardContent,
@ -26,8 +25,8 @@ export default function AuthCardLayout({
href={home()} href={home()}
className="flex items-center gap-2 self-center font-medium" className="flex items-center gap-2 self-center font-medium"
> >
<div className="flex h-9 w-9 items-center justify-center"> <div className="flex items-center justify-center">
<AppLogoIcon className="size-9 fill-current text-black dark:text-white" /> <img src="/assets/logo.png" alt="Logo" className="size-40" />
</div> </div>
</Link> </Link>

69
resources/js/pages/auth/login.tsx
View File

@ -1,28 +1,17 @@
import { Form, Head } from '@inertiajs/react';
import InputError from '@/components/input-error'; import InputError from '@/components/input-error';
import PasskeyVerify from '@/components/passkey-verify';
import PasswordInput from '@/components/password-input'; import PasswordInput from '@/components/password-input';
import TextLink from '@/components/text-link';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox'; import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner'; import { Spinner } from '@/components/ui/spinner';
import { register } from '@/routes';
import { store } from '@/routes/login'; import { store } from '@/routes/login';
import { request } from '@/routes/password'; import { Form, Head } from '@inertiajs/react';
type Props = { export default function Login() {
status?: string;
canResetPassword: boolean;
};
export default function Login({ status, canResetPassword }: Props) {
return ( return (
<> <>
<Head title="Log in" /> <Head title="Masuk Akun" />
<PasskeyVerify />
<Form <Form
{...store.form()} {...store.form()}
@ -33,32 +22,29 @@ export default function Login({ status, canResetPassword }: Props) {
<> <>
<div className="grid gap-6"> <div className="grid gap-6">
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="email">Email address</Label> <Label htmlFor="login">
Email atau Username
<span className="text-destructive">*</span>
</Label>
<Input <Input
id="email" id="login"
type="email" type="text"
name="email" name="login"
required required
autoFocus autoFocus
tabIndex={1} tabIndex={1}
autoComplete="email" autoComplete="username"
placeholder="email@example.com" placeholder="email@example.com or username"
/> />
<InputError message={errors.email} /> <InputError message={errors.login} />
</div> </div>
<div className="grid gap-2"> <div className="grid gap-2">
<div className="flex items-center"> <div className="flex items-center">
<Label htmlFor="password">Password</Label> <Label htmlFor="password">
{canResetPassword && ( Kata Sandi
<TextLink <span className="text-destructive">*</span>
href={request()} </Label>
className="ml-auto text-sm"
tabIndex={5}
>
Forgot your password?
</TextLink>
)}
</div> </div>
<PasswordInput <PasswordInput
id="password" id="password"
@ -77,7 +63,7 @@ export default function Login({ status, canResetPassword }: Props) {
name="remember" name="remember"
tabIndex={3} tabIndex={3}
/> />
<Label htmlFor="remember">Remember me</Label> <Label htmlFor="remember">Ingat saya</Label>
</div> </div>
<Button <Button
@ -88,30 +74,17 @@ export default function Login({ status, canResetPassword }: Props) {
data-test="login-button" data-test="login-button"
> >
{processing && <Spinner />} {processing && <Spinner />}
Log in Masuk
</Button> </Button>
</div> </div>
<div className="text-center text-sm text-muted-foreground">
Don't have an account?{' '}
<TextLink href={register()} tabIndex={5}>
Sign up
</TextLink>
</div>
</> </>
)} )}
</Form> </Form>
{status && (
<div className="mb-4 text-center text-sm font-medium text-green-600">
{status}
</div>
)}
</> </>
); );
} }
Login.layout = { Login.layout = {
title: 'Log in to your account', title: 'Selamat Datang',
description: 'Enter your email and password below to log in', description: 'Silakan masukkan email dan username untuk akses dasbor.',
}; };