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

Improve signup page

Browse source
This commit is contained in:
Arthur Belleville 2025-04-03 08:01:18 +02:00
parent 3bc8030add
commit 655d856e29
No known key found for this signature in database
1 changed files with 42 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
ui/src/pages/signup.tsx
View file

@ -88,28 +88,6 @@ export function SignUpPage() {
</h1>
<div className="space-y-4 flex flex-col items-center">
<LoginWithGoogle />
<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>
</div>
<div className="relative flex justify-center text-sm">
<span
className={twMerge(
"px-4 py-1 bg-white dark:bg-slate-800",
"text-slate-500 dark:text-slate-400",
"text-sm font-medium",
"rounded-full",
"relative z-10",
"before:absolute before:w-[100px] before:h-[1px] before:bg-slate-300 dark:before:bg-slate-600 before:left-[-110px] before:top-1/2",
"after:absolute after:w-[100px] after:h-[1px] after:bg-slate-300 dark:after:bg-slate-600 after:right-[-110px] after:top-1/2"
)}
>
Ou continuer avec
</span>
</div>
</div>
<Form
className="space-y-4 w-full"
onSubmit={onSubmit}
@ -117,7 +95,9 @@ export function SignUpPage() {
>
<div className="grid grid-cols-2 gap-4">
<TextField isRequired name="first_name">
<Label>Prénom</Label>
<Label>
Prénom <span className="text-red-500">*</span>
</Label>
<Input
type="text"
value={formData.first_name}
@ -129,7 +109,9 @@ export function SignUpPage() {
<FieldError />
</TextField>
<TextField isRequired name="last_name">
<Label>Nom</Label>
<Label>
Nom <span className="text-red-500">*</span>
</Label>
<Input
type="text"
value={formData.last_name}
@ -143,7 +125,9 @@ export function SignUpPage() {
</div>
<TextField isRequired name="business_name">
<Label>Nom de l&apos;entreprise</Label>
<Label>
Nom de l&apos;entreprise <span className="text-red-500">*</span>
</Label>
<Input
type="text"
value={formData.business_name}
@ -156,7 +140,9 @@ export function SignUpPage() {
</TextField>
<TextField isRequired name="email">
<Label>Email professionnel</Label>
<Label>
Email professionnel <span className="text-red-500">*</span>
</Label>
<Input
type="email"
value={formData.email}
@ -169,7 +155,9 @@ export function SignUpPage() {
</TextField>
<TextField isRequired name="password">
<Label>Mot de passe</Label>
<Label>
Mot de passe <span className="text-red-500">*</span>
</Label>
<Input
type="password"
value={formData.password}
@ -187,7 +175,10 @@ export function SignUpPage() {
</TextField>
<TextField isRequired name="confirmPassword">
<Label>Confirmer le mot de passe</Label>
<Label>
Confirmer le mot de passe{" "}
<span className="text-red-500">*</span>
</Label>
<Input
type="password"
value={formData.confirmPassword}
@ -234,6 +225,29 @@ export function SignUpPage() {
</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>
</div>
<div className="relative flex justify-center text-sm">
<span
className={twMerge(
"px-4 py-1 bg-white dark:bg-slate-800",
"text-slate-500 dark:text-slate-400",
"text-sm font-medium",
"rounded-full",
"relative z-10",
"before:absolute before:w-[100px] before:h-[1px] before:bg-slate-300 dark:before:bg-slate-600 before:left-[-110px] before:top-1/2",
"after:absolute after:w-[100px] after:h-[1px] after:bg-slate-300 dark:after:bg-slate-600 after:right-[-110px] after:top-1/2"
)}
>
Ou continuer avec
</span>
</div>
</div>
<LoginWithGoogle />
<p className="text-center text-sm text-slate-600 dark:text-slate-400">
Déjà un compte ?{" "}
<a