soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

change role to "user" for new registrations, fixed some registration form errors and implemented a reg-test

Browse Source
This commit is contained in:
Codex Agent
2025-10-02 15:06:50 +02:00
parent 7475210893
commit 1845d83583
13 changed files with 416 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,5 @@
import { useForm, router } from '@inertiajs/react';
import { FormEvent, useEffect, useState } from 'react';
import { Head, useForm } from '@inertiajs/react';
import InputError from '@/components/input-error';
import TextLink from '@/components/text-link';
import { Button } from '@/components/ui/button';
@@ -8,7 +9,6 @@ import { Label } from '@/components/ui/label';
import AuthLayout from '@/layouts/auth-layout';
import { register } from '@/routes';
import { request } from '@/routes/password';
import { Head } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react';
interface LoginProps {
@@ -17,36 +17,45 @@ interface LoginProps {
}
export default function Login({ status, canResetPassword }: LoginProps) {
const { data, setData, post, processing, errors } = useForm({
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
const { data, setData, post, processing, errors, clearErrors } = useForm({
email: '',
password: '',
remember: false,
});
const submit = (e: React.FormEvent) => {
const submit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
setHasTriedSubmit(true);
post('/login', {
preserveState: true,
onSuccess: () => {
console.log('Login successful');
},
onError: (errors: Record<string, string>) => {
console.log('Login errors:', errors);
},
preserveScroll: true,
});
};
React.useEffect(() => {
if (Object.keys(errors).length > 0) {
window.scrollTo({ top: 0, behavior: 'smooth' });
useEffect(() => {
if (!hasTriedSubmit) {
return;
}
}, [errors]);
const errorKeys = Object.keys(errors);
if (errorKeys.length === 0) {
return;
}
const field = document.querySelector<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(`[name="${errorKeys[0]}"]`);
if (field) {
field.scrollIntoView({ behavior: 'smooth', block: 'center' });
field.focus();
}
}, [errors, hasTriedSubmit]);
return (
<AuthLayout title="Log in to your account" description="Enter your email and password below to log in">
<Head title="Log in" />
<form key={`login-form-${Object.keys(errors).length}`} onSubmit={submit} className="flex flex-col gap-6">
<form onSubmit={submit} className="flex flex-col gap-6">
<div className="grid gap-6">
<div className="grid gap-2">
<Label htmlFor="email">Email address</Label>
@@ -60,7 +69,12 @@ export default function Login({ status, canResetPassword }: LoginProps) {
autoComplete="email"
placeholder="email@example.com"
value={data.email}
onChange={(e) => setData('email', e.target.value)}
onChange={(e) => {
setData('email', e.target.value);
if (errors.email) {
clearErrors('email');
}
}}
/>
<InputError key={`error-email`} message={errors.email} />
</div>
@@ -83,7 +97,12 @@ export default function Login({ status, canResetPassword }: LoginProps) {
autoComplete="current-password"
placeholder="Password"
value={data.password}
onChange={(e) => setData('password', e.target.value)}
onChange={(e) => {
setData('password', e.target.value);
if (errors.password) {
clearErrors('password');
}
}}
/>
<InputError key={`error-password`} message={errors.password} />
</div>