From 4c7b636f2767af81e26366c84995670df13db81e Mon Sep 17 00:00:00 2001
From: p2405951 <malo.leblond@etu.univ-lyon1.fr>
Date: Thu, 12 Mar 2026 11:13:39 +0100
Subject: [PATCH] convert loginComponent to TS

---
 src/contexts/auth/AuthContext.ts              |  2 +
 .../Login/components/loginform/loginForm.jsx  | 54 ---------------
 .../Login/components/loginform/loginForm.tsx  | 65 +++++++++++++++++++
 src/utils/date/formatDateLetter.ts            |  4 +-
 4 files changed, 69 insertions(+), 56 deletions(-)
 delete mode 100644 src/pages/Login/components/loginform/loginForm.jsx
 create mode 100644 src/pages/Login/components/loginform/loginForm.tsx

diff --git a/src/contexts/auth/AuthContext.ts b/src/contexts/auth/AuthContext.ts
index e4f5d00..ed005d1 100644
--- a/src/contexts/auth/AuthContext.ts
+++ b/src/contexts/auth/AuthContext.ts
@@ -22,7 +22,9 @@ export interface User {
 export interface AuthContextType {
   user: User | null;
   update: () => void;
+  login: (email: string, password: string) => Promise<{ status: number }>;
 }
 
+
 export const AuthContext = createContext<AuthContextType | null>(null);
 
diff --git a/src/pages/Login/components/loginform/loginForm.jsx b/src/pages/Login/components/loginform/loginForm.jsx
deleted file mode 100644
index b4b3338..0000000
--- a/src/pages/Login/components/loginform/loginForm.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useState, useContext } from "react";
-import styles from "./loginForm.module.css";
-import Button from "../../../../components/ui/button/button.tsx";
-import Input from "../../../../components/ui/input/input.tsx";
-import Modal from "../../../../components/ui/modal/modal.tsx";
-import { useNavigate } from "react-router";
-import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
-
-
-function LoginForm({ className }) {
-
-
-    const navigate = useNavigate();
-    const { login } = useContext(AuthContext);
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
-    const [open , setOpen] = useState(false);
-
-    async function handleSubmit() {
-        const res = await login(email, password);
-        if (res.status === 401 || res.status === 422) setOpen(true);
-        else navigate("/");
-
-    }
-
-    return (
-        <div className={`${className} glassCard ${styles.inputContainer}`}>
-            <div className={styles.formgroup}>
-                <Input
-                    type="email"
-                    value={email}
-                    placeholder="Adresse mail"
-                    onChange={e => setEmail(e.target.value)}
-                    style={{ width: '100%' }}
-                />
-            </div>
-            <div className={styles.formgroup}>
-                <Input password={true} onChange={e => setPassword(e.target.value)} value={password} placeholder={"Mot de passe"} />
-            </div>
-
-            <div className={styles.logButton}>
-                <Button variant={"transparent"} onClick={() => navigate("/register")}>Vous n'avez pas de compte ?</Button>
-                <Button onClick={handleSubmit} variant={"default"}> Se connecter </Button>
-            </div>
-
-            <Modal title={"Impossible de se connecter"} open={open} onClose={() => setOpen(false)}>
-                <p>L'Email ou le mot de passe est incorrect</p>
-            </Modal>
-        </div>
-    );
-}
-
-export default LoginForm;
-
diff --git a/src/pages/Login/components/loginform/loginForm.tsx b/src/pages/Login/components/loginform/loginForm.tsx
new file mode 100644
index 0000000..32aebb0
--- /dev/null
+++ b/src/pages/Login/components/loginform/loginForm.tsx
@@ -0,0 +1,65 @@
+import { useState, useContext, FormEvent } from "react";
+import styles from "./loginForm.module.css";
+import Button from "../../../../components/ui/button/button";
+import Input from "../../../../components/ui/input/input";
+import Modal from "../../../../components/ui/modal/modal";
+import { useNavigate } from "react-router-dom";
+import { AuthContext, AuthContextType } from "../../../../contexts/auth/AuthContext";
+
+interface LoginFormProps {
+    className?: string;
+}
+
+function LoginForm({ className }: LoginFormProps) {
+    const navigate = useNavigate();
+    const authContext = useContext(AuthContext) as AuthContextType;
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [open, setOpen] = useState(false);
+
+    const { login } = authContext;
+
+    async function handleSubmit(e?: FormEvent) {
+        if (e) e.preventDefault();
+        const res = await login(email, password);
+        if (res.status === 401 || res.status === 422) setOpen(true);
+        else navigate("/");
+    }
+
+   
+
+    return (
+        <div className={`${className} glassCard ${styles.inputContainer}`} >
+            <form onSubmit={handleSubmit}>
+                <div className={styles.formgroup}>
+                    <Input
+                        type="email"
+                        value={email}
+                        placeholder="Adresse mail"
+                        onChange={e => setEmail(e.target.value)}
+                        style={{ width: '100%' }}
+                    />
+                </div>
+                <div className={styles.formgroup}>
+                    <Input
+                        password={true}
+                        value={password}
+                        placeholder="Mot de passe"
+                        onChange={e => setPassword(e.target.value)}
+                    />
+                </div>
+
+                <div className={styles.logButton}>
+                    <Button variant={"transparent"} onClick={() => navigate("/register")}>Vous n'avez pas de compte ?</Button>
+                    <Button onClick={handleSubmit} variant={"default"}>Se connecter</Button>
+                </div>
+            </form>
+
+            <Modal title={"Impossible de se connecter"} open={open} onClose={() => setOpen(false)}>
+                <p>L'Email ou le mot de passe est incorrect</p>
+            </Modal>
+        </div>
+    );
+}
+
+export default LoginForm;
diff --git a/src/utils/date/formatDateLetter.ts b/src/utils/date/formatDateLetter.ts
index c0ee46f..f4c3f91 100644
--- a/src/utils/date/formatDateLetter.ts
+++ b/src/utils/date/formatDateLetter.ts
@@ -51,7 +51,7 @@ export function formatDateLetter(d: string | Date | null | undefined): string {
 }
 
 
-/*export function formatDateLetterJS(d: string): string {
+export function formatDateLetterJS(d: string): string {
   const monthNames = [
     "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
     "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
@@ -61,5 +61,5 @@ export function formatDateLetter(d: string | Date | null | undefined): string {
   if (!year || !month || !day) return "Date invalide";
 
   return `${day} ${monthNames[parseInt(month, 10) - 1]} ${year}`;
-}*/
+}