From 655d856e29576f9b858b331b9679e75e498807f6 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Thu, 3 Apr 2025 08:01:18 +0200
Subject: [PATCH] Improve signup page

---
 ui/src/pages/signup.tsx | 70 ++++++++++++++++++++++++-----------------
 1 file changed, 42 insertions(+), 28 deletions(-)

diff --git a/ui/src/pages/signup.tsx b/ui/src/pages/signup.tsx
index 6161743..9610f0c 100644
--- a/ui/src/pages/signup.tsx
+++ b/ui/src/pages/signup.tsx
@@ -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