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

cryptide_project/src/Pages/LoginForm.tsx

@@ -1,53 +1,76 @@
-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 result = await AuthService.signIn(data);
-            console.log(result);
-            alert('Connexion réussie !');
-        }
-        catch(error){
-            console.error(error);
+            const validation = await AuthService.validateSignIn(data);
+
+            if (!validation.valid) {
+                setError(validation.error);
+            } else {
+                setError(null);
+
+                const result = await AuthService.signIn(data);
+                // console.log(result);
+
+                setShowConfirmation(true);
+                setTimeout(() => {
+                    navigate('/play');         // 3 secondes avant de rediriger vers la page de connexion
+                }, 3000);
+            }
+        } catch (error: any) {
+            setError(error.message);
         }
     };
 
-    render() {
-        return (
-            <div className="form-container">
-                <form onSubmit={this.handleSubmit}>
-                    <br/>
-                    <h3>Log In</h3>
-                    <div className="mb-3">
-                        <label>Pseudo</label>
-                        <input
+    useEffect(() => {
+        return () => {
+            setShowConfirmation(false);
+        };
+    }, []);
+
+    return (
+        <div className="form-container">
+            <form onSubmit={handleSubmit}>
+                <br/>
+                <h3>Log In</h3>
+                <div className="mb-3">
+                    <label>Pseudo</label>
+                    <input
                         type="pseudo"
                         name='pseudo'
                         className="form-control"
                         placeholder="Entrez votre pseudo ici"
-                        />
-                    </div>
-                    <div className="mb-3">
-                        <label>Password</label>
-                        <input
+                    />
+                </div>
+                <div className="mb-3">
+                    <label>Password</label>
+                    <input
                         type="password"
                         name='password'
                         className="form-control"
                         placeholder="Entrez votre mot de passe ici"
-                        />
-                    </div>
-                    <div className="mb-3">
-                        <div className="custom-control custom-checkbox">
+                    />
+                </div>
+                <div className="mb-3">
+                    <div className="custom-control custom-checkbox">
                         <input
                             type="checkbox"
                             name='remember'
@@ -57,18 +80,31 @@ export default class Login extends Component {
                         <label className="custom-control-label" htmlFor="customCheck1">
                             Se souvenir de moi
                         </label>
-                        </div>
                     </div>
-                    <div className="d-grid">
-                        <button type="submit" className="btn btn-primary">
+                </div>
+                <div className="d-grid">
+                    <button type="submit" className="btn btn-primary">
                         Soumettre <AiOutlineSend/>
-                        </button>
-                    </div>
-                    <p className="forgot-password text-right">
-                        <a href="#">Mot de passe</a> oublié ?
-                    </p>
-                </form>
-            </div>
-        )
-    }
-}
+                    </button>
+                </div>
+                <p className="forgot-password text-right">
+                    <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', {
@@ -32,21 +36,23 @@ class AuthService{
 
     static async signIn(data: any) {
         try {
-        const response = await fetch('http://localhost:3000/auth/signin', {
-            method: 'POST',
-            headers: {
-            'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(data),
-        });
-    
-        if (response.ok) {
-            const result = await response.json();
-            return result;
-        } else {
-            throw new Error('Échec de la connexion.');
-        }
-        } catch (error) {
+            const response = await fetch('http://localhost:3000/auth/signin', {
+                method: 'POST',
+                headers: {
+                'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            });
+        
+            if (response.ok) {
+                const result = await response.json();
+                return result;
+            } else {
+                const errorResponse = await response.json();
+                throw new Error(errorResponse.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;