edit image implemented

front/views/Settings.tsx

@@ -1,3 +1,4 @@
+import { BASE } from "../Constants"
 import "../style/settings/settings.css"
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { MainTitle, SecondTitle } from "./component/Title"
@@ -112,6 +113,8 @@ function updateAccountPicture(lien: string) {
 
 function MyVerticallyCenteredModal(props: any) {
 	const urlRef = useRef<HTMLInputElement>(null);
+	const [invalidShow, setInvalidShow] = useState(false);
+
 	return (
 		<Modal
 			{...props}
@@ -126,41 +129,68 @@ function MyVerticallyCenteredModal(props: any) {
 			</Modal.Header>
 			<Modal.Body>
 				<Form.Label>Nouvelle image</Form.Label>
-				<Form.Control ref={urlRef} type="input" />
+				<Form.Control isInvalid={invalidShow} ref={urlRef} type="input" />
 			</Modal.Body>
 			<Modal.Footer>
 				<Button onClick={props.onHide}>Annuler</Button>
-				<Button onClick={() => handleNewImage(urlRef.current!.value)}>Valider</Button>
+				<Button onClick={() => handleNewImage(urlRef.current!.value, setInvalidShow)}>Valider</Button>
 			</Modal.Footer>
 		</Modal>
 	);
 }
 
-async function handleNewImage(lien: string) {
+async function handleNewImage(lien: string, invalidRef : React.Dispatch<React.SetStateAction<boolean>>) {
 	let exist = await testImage(lien);
 	console.log(exist);
 	if (exist) {
+		invalidRef(false);
 		updateAccountPicture(lien);
 	}
+	else {
+		invalidRef(true);
+	}
 }
 
 async function testImage(lien: string) {
-	// try {
-	// 	const response = await axios.head(lien);
-	// 	console.log(response);
-	// 	// Vérifier le statut de la réponse (200 OK est considéré comme valide)
-	// 	if (response.status === 200) {
-	// 		// Vérifier le type de contenu pour s'assurer qu'il s'agit d'une image
-	// 		const contentType = response.headers['content-type'];
-	// 		if (contentType && contentType.startsWith('image/')) {
-	// 		    return true;
-	// 		}
-	// 		return true;
-	// 	}
-	// 	return false;
-	// } catch (error) {
-	// 	console.error("Erreur lors de la requête HEAD:", error);
-	// 	return false;
-	// }
-	return true;
+	try {
+		const response = await axios.head(lien);
+		console.log(response);
+		// Vérifier le statut de la réponse (200 OK est considéré comme valide)
+		if (response.status === 200) {
+			// Vérifier le type de contenu pour s'assurer qu'il s'agit d'une image
+			const contentType = response.headers['content-type'];
+			if (contentType && contentType.startsWith('image/')) {
+			    return true;
+			}
+			return true;
+		}
+		return false;
+	} catch (error) {
+		console.error("Erreur lors de la requête HEAD: ", error);
+		return false;
+	}
+	// return true;
 }
+
+// async function testImage(imageUrl: string) {
+//   try {
+//     const response = await axios.head(`${BASE.PROXY}?url=${encodeURIComponent(imageUrl)}`);
+
+//     console.log(response);
+
+//     // Check the response status (200 OK is considered valid)
+//     if (response.status === 200) {
+//       // Check the content type to ensure it's an image
+//       const contentType = response.headers['content-type'];
+//       if (contentType && contentType.startsWith('image/')) {
+//         return true;
+//       }
+//       return false;
+//     }
+
+//     return false;
+//   } catch (error) {
+//     console.error("Error during HEAD request: ", error);
+//     return false;
+//   }
+// }

package.json

@@ -12,6 +12,7 @@
     "@types/react-dom": "^18.2.14",
     "axios": "^1.6.7",
     "bootstrap": "^5.3.2",
+    "express": "^4.18.2",
     "node-fetch": "^3.3.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.0",
@@ -26,7 +27,8 @@
     "build": "vite build",
     "test": "vite test",
     "format": "prettier --config .prettierrc 'front' --write",
-    "tsc": "tsc"
+    "tsc": "tsc",
+    "proxy" : "node src/Proxy/server-proxy.js"
   },
   "eslintConfig": {
     "extends": [

src/Proxy/server-proxy.js

@@ -0,0 +1,22 @@
+const express = require('express');
+const axios = require('axios');
+
+const app = express();
+const PORT = 8080;
+
+app.use(express.json());
+
+app.use('/proxy', async (req, res) => {
+  try {
+    const response = await axios.head(req.query.url);
+    res.status(response.status).send(response.headers);
+  } catch (error) {
+    console.log("test");
+    console.error("Error during HEAD request: ", error);
+    res.status(500).send("Internal Server Error");
+  }
+});
+
+app.listen(PORT, () => {
+  console.log(`Proxy server listening on port ${PORT}`);
+});