From 5da5af2812e9bdc13b985b98ea47e0fed993e2b3 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Thu, 3 Apr 2025 08:06:32 +0200
Subject: [PATCH] Improve links

---
 ui/src/pages/login.tsx          | 23 +++++++++++------------
 ui/src/pages/reset-password.tsx | 21 +++++++++++----------
 ui/src/pages/signup.tsx         | 13 ++++++-------
 3 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/ui/src/pages/login.tsx b/ui/src/pages/login.tsx
index cd3090a..6593a90 100644
--- a/ui/src/pages/login.tsx
+++ b/ui/src/pages/login.tsx
@@ -5,6 +5,7 @@ import { Label, Input, TextField, FieldError } from "../ui-library/field";
 import { useLoginEmail } from "../hooks/auth";
 import { Form } from "../ui-library/form";
 import { LoginWithGoogle } from "../components/BrandButtons/LoginWithGoogle";
+import { Link } from "react-router-dom";
 
 export function LoginPage() {
   const { mutate: login, isPending, errors } = useLoginEmail();
@@ -72,12 +73,11 @@ export function LoginPage() {
             </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>
+              <Link to="/reset-password">
+                <a className="text-sm text-emerald-600 hover:text-emerald-500">
+                  Mot de passe oublié ?
+                </a>
+              </Link>
             </div>
 
             <Button
@@ -117,12 +117,11 @@ export function LoginPage() {
 
           <p className="text-center text-sm text-slate-600 dark:text-slate-400">
             Pas encore de compte ?{" "}
-            <a
-              href="/signup"
-              className="text-emerald-600 hover:text-emerald-500 font-medium"
-            >
-              S&apos;inscrire
-            </a>
+            <Link to="/signup">
+              <a className="text-emerald-600 hover:text-emerald-500 font-medium">
+                S&apos;inscrire
+              </a>
+            </Link>
           </p>
         </div>
       </div>
diff --git a/ui/src/pages/reset-password.tsx b/ui/src/pages/reset-password.tsx
index f44e02c..4492720 100644
--- a/ui/src/pages/reset-password.tsx
+++ b/ui/src/pages/reset-password.tsx
@@ -1,6 +1,6 @@
 import { Button } from "../ui-library/button";
 import { twMerge } from "tailwind-merge";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useState } from "react";
 import { Label, Input, TextField, FieldError } from "../ui-library/field";
 import { Form } from "../ui-library/form";
@@ -45,15 +45,16 @@ export function ResetPasswordPage() {
               Si un compte existe avec l&apos;adresse {email}, vous recevrez un
               email avec les instructions pour réinitialiser votre mot de passe.
             </Text>
-            <Button
-              className={twMerge(
-                "mt-4 bg-emerald-700 text-white",
-                "hover:bg-emerald-600"
-              )}
-              onPress={() => navigate("/login")}
-            >
-              Retour à la connexion
-            </Button>
+            <Link to="/login">
+              <Button
+                className={twMerge(
+                  "mt-4 bg-emerald-700 text-white",
+                  "hover:bg-emerald-600"
+                )}
+              >
+                Retour à la connexion
+              </Button>
+            </Link>
           </div>
         </div>
       </div>
diff --git a/ui/src/pages/signup.tsx b/ui/src/pages/signup.tsx
index 9610f0c..12a4bc4 100644
--- a/ui/src/pages/signup.tsx
+++ b/ui/src/pages/signup.tsx
@@ -1,6 +1,6 @@
 import { Button } from "../ui-library/button";
 import { twMerge } from "tailwind-merge";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useState } from "react";
 import { Label, Input, TextField, FieldError } from "../ui-library/field";
 import { useSignUp } from "../hooks/auth";
@@ -250,12 +250,11 @@ export function SignUpPage() {
 
           <p className="text-center text-sm text-slate-600 dark:text-slate-400">
             Déjà un compte ?{" "}
-            <a
-              href="/login"
-              className="text-emerald-600 hover:text-emerald-500 font-medium"
-            >
-              Se connecter
-            </a>
+            <Link to="/login">
+              <a className="text-emerald-600 hover:text-emerald-500 font-medium">
+                Se connecter
+              </a>
+            </Link>
           </p>
         </div>
       </div>