From 3bc8030add0af2e80229b4bcb443d9ca33310260 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Thu, 3 Apr 2025 07:57:29 +0200
Subject: [PATCH] Improve login page

---
 ui/src/pages/login.tsx | 127 ++++++++++++++++++-----------------------
 1 file changed, 57 insertions(+), 70 deletions(-)

diff --git a/ui/src/pages/login.tsx b/ui/src/pages/login.tsx
index 36d7fc5..cd3090a 100644
--- a/ui/src/pages/login.tsx
+++ b/ui/src/pages/login.tsx
@@ -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 ?{" "}