create confirmEmailChange Page

src/pages/ConfirmEmailChange/ConfirmEmailChangePage.module.css

@@ -0,0 +1,26 @@
+.title {
+    color: white;
+    font-size: xx-large;
+    margin-bottom: 20px;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    padding: 10px;
+}
+
+.container {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+
+    p {
+        font-size: large;
+        white-space: pre-line;
+    }
+}

src/pages/ConfirmEmailChange/ConfirmEmailChangePage.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { useSearchParams, useNavigate } from "react-router";
+import confirmEmailChange from "../../utils/users/confirmEmailChange";
+import styles from "./ConfirmEmailChangePage.module.css";
+import Background from "../../components/Background/Background";
+
+export default function ConfirmEmailChange() {
+    const [searchParams] = useSearchParams();
+    const navigate = useNavigate();
+    const [message, setMessage] = useState<string>('Validation en cours...');
+    const [success, setSuccess] = useState<boolean | null>(null);
+
+    useEffect(() => {
+        const token = searchParams.get('token');
+        if (!token) {
+            setMessage('Token manquant.');
+            setSuccess(false);
+            return;
+        }
+
+        confirmEmailChange(token)
+            .then(() => {
+                setMessage('Votre adresse email a bien été mise à jour.\nVous allez être redirigé vers la page de connexion...');
+                setSuccess(true);
+                setTimeout(() => navigate('/login'), 3000);
+            })
+            .catch(() => {
+                setMessage('Token invalide ou expiré.');
+                setSuccess(false);
+            });
+    }, []);
+
+    return <Background>
+        <div className={styles.content}>
+            <h1 className={styles.title}> Validation de votre adresse email </h1>
+            <div className={`${styles.container} glassCard`}>
+                <p>{message}</p>
+            </div>
+        </div>
+    </Background>
+}