arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Improve login page

Browse source
This commit is contained in:
Arthur Belleville 2025-04-03 07:57:29 +02:00
parent 7ccf0e5b29
commit 3bc8030add
No known key found for this signature in database
1 changed files with 57 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
ui/src/pages/login.tsx
View file

@ -11,7 +11,6 @@ export function LoginPage() {
const [formData, setFormData] = useState({
email: "",
password: "",
remember: false,
});
const onSubmit = (e: React.FormEvent) => {
@ -37,7 +36,62 @@ export function LoginPage() {
</h1>
<div className="space-y-4 flex flex-col items-center">
<LoginWithGoogle />
<Form
className="space-y-4 w-95 max-w-md mx-auto"
onSubmit={onSubmit}
validationErrors={errors}
>
<TextField isRequired name="email">
<Label>
Email <span className="text-red-500">*</span>
</Label>
<Input
type="email"
value={formData.email}
onChange={(e) =>
setFormData({ ...formData, email: e.target.value })
}
required
/>
<FieldError />
</TextField>
<TextField isRequired name="password">
<Label>
Mot de passe <span className="text-red-500">*</span>
</Label>
<Input
type="password"
value={formData.password}
onChange={(e) =>
setFormData({ ...formData, password: e.target.value })
}
required
/>
<FieldError />
</TextField>
<div className="flex items-center justify-between">
<a
href="/reset-password"
className="text-sm text-emerald-600 hover:text-emerald-500"
>
Mot de passe oublié ?
</a>
</div>
<Button
className={twMerge(
"w-full bg-emerald-700 text-white",
"hover:bg-emerald-600"
)}
type="submit"
pendingLabel="Connexion..."
>
{isPending ? "Connexion..." : "Se connecter"}
</Button>
</Form>
<div className="relative my-6">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-slate-200 dark:border-slate-700"></div>
@ -59,74 +113,7 @@ export function LoginPage() {
</div>
</div>
<Form
className="space-y-4 w-95 max-w-md mx-auto"
onSubmit={onSubmit}
validationErrors={errors}
>
<TextField isRequired name="email">
<Label>Email</Label>
<Input
type="email"
value={formData.email}
onChange={(e) =>
setFormData({ ...formData, email: e.target.value })
}
required
/>
<FieldError />
</TextField>
<TextField isRequired name="password">
<Label>Mot de passe</Label>
<Input
type="password"
value={formData.password}
onChange={(e) =>
setFormData({ ...formData, password: e.target.value })
}
required
/>
<FieldError />
</TextField>
<div className="flex items-center justify-between">
<TextField className="flex items-center">
<Input
type="checkbox"
id="remember"
checked={formData.remember}
onChange={(e) =>
setFormData({ ...formData, remember: e.target.checked })
}
className="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-slate-300 rounded"
/>
<Label
htmlFor="remember"
className="ml-2 text-sm text-slate-700 dark:text-slate-300"
>
Se souvenir de moi
</Label>
</TextField>
<a
href="/reset-password"
className="text-sm text-emerald-600 hover:text-emerald-500"
>
Mot de passe oublié ?
</a>
</div>
<Button
className={twMerge(
"w-full bg-emerald-700 text-white",
"hover:bg-emerald-600"
)}
type="submit"
pendingLabel="Connexion..."
>
{isPending ? "Connexion..." : "Se connecter"}
</Button>
</Form>
<LoginWithGoogle />
<p className="text-center text-sm text-slate-600 dark:text-slate-400">
Pas encore de compte ?{" "}