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({
title = '',

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

@ -1,6 +1,5 @@
import { Link } from '@inertiajs/react';
import type { PropsWithChildren } from 'react';
import AppLogoIcon from '@/components/app-logo-icon';
import {
Card,
CardContent,
@ -26,8 +25,8 @@ export default function AuthCardLayout({
href={home()}
className="flex items-center gap-2 self-center font-medium"
>
<div className="flex h-9 w-9 items-center justify-center">
<AppLogoIcon className="size-9 fill-current text-black dark:text-white" />
<div className="flex items-center justify-center">
<img src="/assets/logo.png" alt="Logo" className="size-40" />
</div>
</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 PasskeyVerify from '@/components/passkey-verify';
import PasswordInput from '@/components/password-input';
import TextLink from '@/components/text-link';
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 { register } from '@/routes';
import { store } from '@/routes/login';
import { request } from '@/routes/password';
import { Form, Head } from '@inertiajs/react';
type Props = {
status?: string;
canResetPassword: boolean;
};
export default function Login({ status, canResetPassword }: Props) {
export default function Login() {
return (
<>
<Head title="Log in" />
<PasskeyVerify />
<Head title="Masuk Akun" />
<Form
{...store.form()}
@ -33,32 +22,29 @@ export default function Login({ status, canResetPassword }: Props) {
<>
<div className="grid gap-6">
<div className="grid gap-2">
<Label htmlFor="email">Email address</Label>
<Label htmlFor="login">
Email atau Username
<span className="text-destructive">*</span>
</Label>
<Input
id="email"
type="email"
name="email"
id="login"
type="text"
name="login"
required
autoFocus
tabIndex={1}
autoComplete="email"
placeholder="email@example.com"
autoComplete="username"
placeholder="email@example.com or username"
/>
<InputError message={errors.email} />
<InputError message={errors.login} />
</div>
<div className="grid gap-2">
<div className="flex items-center">
<Label htmlFor="password">Password</Label>
{canResetPassword && (
<TextLink
href={request()}
className="ml-auto text-sm"
tabIndex={5}
>
Forgot your password?
</TextLink>
)}
<Label htmlFor="password">
Kata Sandi
<span className="text-destructive">*</span>
</Label>
</div>
<PasswordInput
id="password"
@ -77,7 +63,7 @@ export default function Login({ status, canResetPassword }: Props) {
name="remember"
tabIndex={3}
/>
<Label htmlFor="remember">Remember me</Label>
<Label htmlFor="remember">Ingat saya</Label>
</div>
<Button
@ -88,30 +74,17 @@ export default function Login({ status, canResetPassword }: Props) {
data-test="login-button"
>
{processing && <Spinner />}
Log in
Masuk
</Button>
</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>
{status && (
<div className="mb-4 text-center text-sm font-medium text-green-600">
{status}
</div>
)}
</>
);
}
Login.layout = {
title: 'Log in to your account',
description: 'Enter your email and password below to log in',
title: 'Selamat Datang',
description: 'Silakan masukkan email dan username untuk akses dasbor.',
};