Gestion et affichage des erreurs + redirection apr connexion réussi

cryptide_project/src/Pages/LoginForm.tsx

@@ -1,31 +1,54 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
+import { useNavigate } from 'react-router-dom'; 
 import AuthService from '../services/AuthService';
 import '../Style/Global.css';
 
-export default class Login extends Component {
-    handleSubmit = async (event: any) => {
+const SignIn = () => {
+    const navigate = useNavigate(); 
+
+    const [error, setError] = useState<string | null>(null);
+    const [showConfirmation, setShowConfirmation] = useState(false);
+
+    const handleSubmit = async (event: React.FormEvent) => {
         event.preventDefault();
-        try{
+    
+        try {
             const data = {
-                pseudo: event.target.pseudo.value,
-                password: event.target.password.value,
-                remember: event.target.remember.value
+                pseudo: (event.target as any).pseudo.value,
+                password: (event.target as any).password.value,
+                remember: (event.target as any).remember.checked
             };
 
+            const validation = await AuthService.validateSignIn(data);
+
+            if (!validation.valid) {
+                setError(validation.error);
+            } else {
+                setError(null);
+
                 const result = await AuthService.signIn(data);
-            console.log(result);
-            alert('Connexion réussie !');
+                // console.log(result);
+
+                setShowConfirmation(true);
+                setTimeout(() => {
+                    navigate('/play');         // 3 secondes avant de rediriger vers la page de connexion
+                }, 3000);
             }
-        catch(error){
-            console.error(error);
+        } catch (error: any) {
+            setError(error.message);
         }
     };
 
-    render() {
+    useEffect(() => {
+        return () => {
+            setShowConfirmation(false);
+        };
+    }, []);
+
     return (
         <div className="form-container">
-                <form onSubmit={this.handleSubmit}>
+            <form onSubmit={handleSubmit}>
                 <br/>
                 <h3>Log In</h3>
                 <div className="mb-3">
@@ -68,7 +91,20 @@ export default class Login extends Component {
                     <a href="#">Mot de passe</a> oublié ?
                 </p>
             </form>
+
+            {error && (
+                <div className="alert alert-danger" role="alert">
+                    {error}
                 </div>
-        )
-    }
-}
+            )}
+
+            {showConfirmation && (
+                <div className="alert alert-success" role="alert">
+                    Connexion réussie ! Vous serez redirigé vers votre profil dans 3 secondes.
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default SignIn;

cryptide_project/src/Pages/SignUpForm.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
-import { useNavigate } from 'react-router-dom'; // Use useNavigate instead of useHistory
+import { useNavigate } from 'react-router-dom'; 
 import AuthService from '../services/AuthService';
 import '../Style/Global.css';
 
 const SignUp = () => {
-    const navigate = useNavigate(); // Use useNavigate instead of useHistory
+    const navigate = useNavigate(); 
 
     const [error, setError] = useState<string | null>(null);
     const [showConfirmation, setShowConfirmation] = useState(false);

cryptide_project/src/services/AuthService.tsx

@@ -7,6 +7,10 @@ class AuthService{
         return VerificationService.validateSignUpData(data);
     }
 
+    static async validateSignIn(data: any): Promise<{valid: boolean, error: string}> {
+        return VerificationService.validateSignInData(data);
+    }
+
     static async signUp(data: any) {
         try {
             const response = await fetch('http://localhost:3000/auth/signup', {
@@ -44,9 +48,11 @@ class AuthService{
                 const result = await response.json();
                 return result;
             } else {
-            throw new Error('Échec de la connexion.');
+                const errorResponse = await response.json();
+                throw new Error(errorResponse.error);
             }
-        } catch (error) {
+        } 
+        catch (error) {
             console.error(error);
             throw error;
         }

cryptide_project/src/services/VerificationService.tsx

@@ -14,6 +14,18 @@ class ValidationService {
 
         return {valid: true, error: ''};
     }
+
+    public static validateSignInData(data: any): {valid: boolean, error: string} {
+        if(!data.pseudo || !data.password) {
+            return {valid: false, error: 'Veuillez remplir tous les champs.'};
+        }
+
+        if(data.password.length < 8) {
+            return {valid: false, error: 'Le mot de passe doit contenir au moins 8 caractères.'};
+        }
+
+        return {valid: true, error: ''};
+    }
 }
 
 export default ValidationService;