From 84248d8eb56d2ca6a823fb4d02bf103f870598cb Mon Sep 17 00:00:00 2001
From: Eliott-B <eliottb.info@gmail.com>
Date: Fri, 20 Dec 2024 10:18:57 +0100
Subject: [PATCH 1/8] Add skeleton page

---
 front-js/src/app/modules/vlsm/page.tsx | 190 +++++++++----------------
 1 file changed, 68 insertions(+), 122 deletions(-)

diff --git a/front-js/src/app/modules/vlsm/page.tsx b/front-js/src/app/modules/vlsm/page.tsx
index cd10bb6..9a00f24 100644
--- a/front-js/src/app/modules/vlsm/page.tsx
+++ b/front-js/src/app/modules/vlsm/page.tsx
@@ -4,141 +4,87 @@ import Layout from "@/components/Layout";
 import Header from "@/components/Header";
 import Title from "@/components/Title";
 import Box from "@/components/Box";
-import Text from "@/components/Text";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import Cookies from "js-cookie";
-import { Spacer } from "@nextui-org/spacer";
-import Space from "@/components/Space";
 import axios from "@/axiosConfig";
-import Button from "@/components/Button";
-import Input from "@/components/Input";
+import { Tabs, Tab } from "@mui/material";
+import Cours from "./Cours";
+import VlsmSandbox from "./VlsmSandbox";
 
 export default function VLSM() {
-    const router = useRouter();
-  
-    const [, setHasAccessToken] = useState(false);
+  const router = useRouter();
 
-    useEffect(() => {
-        const checkTokens = async () => {
-        const token = Cookies.get("access_token");
-        const refresh = Cookies.get("refresh_token");
-        if (!token && refresh) {
-            try {
-            const response = await axios.post("/auth/refresh", {
-                refresh_token: refresh,
-            });
-            const data = response.data;
-            if (response.status === 200) {
-                Cookies.set("access_token", data.access_token);
-                Cookies.set("refresh_token", refresh);
-            }
-            } catch {
-            Cookies.remove("access_token");
-            Cookies.remove("refresh_token");
-            }
-        }
-        setHasAccessToken(!!token);
-
-        if (!token && !refresh) {
-            router.push("/");
-        }
-        };
+  const [, setHasAccessToken] = useState(false);
 
-        checkTokens();
-    }, [router]);
-
-    const [ipv4, setIPv4] = useState("");
-    const [subnet, setSubnet] = useState("");
-    const [res, setRes] = useState("");
-
-    const handleVLSM = async (e: { preventDefault: () => void }) => {
-        e.preventDefault();
+  useEffect(() => {
+    const checkTokens = async () => {
+      const token = Cookies.get("access_token");
+      const refresh = Cookies.get("refresh_token");
+      if (!token && refresh) {
         try {
-          const response = await axios.get("/ipv4/vlsm/" + ipv4 + "/" + subnet, {
-            headers: {
-              Authorization: `Bearer ${Cookies.get("access_token")}`,
-            },
+          const response = await axios.post("/auth/refresh", {
+            refresh_token: refresh,
           });
           const data = response.data;
           if (response.status === 200) {
-            console.log(data);
-            setRes(data.ipv6);
+            Cookies.set("access_token", data.access_token);
+            Cookies.set("refresh_token", refresh);
           }
-        } catch (error: unknown) {
+        } catch {
+          Cookies.remove("access_token");
+          Cookies.remove("refresh_token");
         }
-      };
+      }
+      setHasAccessToken(!!token);
+
+      if (!token && !refresh) {
+        router.push("/");
+      }
+    };
+
+    checkTokens();
+  }, [router]);
+
+  const [activeTab, setActiveTab] = useState("cours");
+
+  const handleTabChange = (tab: string) => {
+    setActiveTab(tab);
+  };
+
+  return (
+    <Layout type="logged">
+      <Box align="center" margin={{ top: "50px", bottom: "50px" }}>
+        <Header
+          tabs={{
+            dashboard: "Tableau de bord",
+            modules: "Mes modules",
+            profile: "Mon profil",
+          }}
+          activeTab="modules"
+          onClick={(tab) => router.push(`/${tab.toLowerCase()}`)}
+          onClickLogout={() => router.push("/auth/logout")}
+          onClickLogo={() => router.push("/")}
+        />
+      </Box>
+      <Box align="center" margin={{ top: "50px", bottom: "50px" }}>
+        <Title level={1} align="center">
+          VLSM
+        </Title>
+      </Box>
+
+      <Tabs
+        value={activeTab}
+        onChange={(_, tab) => handleTabChange(tab)}
+        centered
+      >
+        <Tab label="Cours & exercice" value="cours" />
+        <Tab label="Bac à sable" value="sandbox" />
+      </Tabs>
 
-    return (
-      <Layout type="logged">
-        <Box align="center" margin={{ top: "50px", bottom: "50px" }}>
-            <Header
-                tabs={{
-                    dashboard: "Tableau de bord",
-                    modules: "Mes modules",
-                    profile: "Mon profil",
-                }}
-                activeTab="modules"
-                onClick={(tab) => router.push(`/${tab.toLowerCase()}`)}
-                onClickLogout={() => router.push("/auth/logout")}
-                onClickLogo={() => router.push("/")}
-                />
-        </Box>
-        <Box margin={{ top: "50px", bottom: "50px", left: "10%" }}>
-            <Title level={1}>
-                VLSM
-            </Title>
-            <Spacer y={2} />
-          <div>
-            <Title level={2}>Introduction</Title>
-            <Spacer y={1} />
-            <Text>
-                ...
-            </Text>
-          </div>
-          <Spacer y={2} />
-            <Title level={2}>Exercices</Title>
-            <Spacer y={1} />
-            <Title level={3}>???</Title>
-            <Spacer y={1} />
-            <form onSubmit={handleVLSM}>
-                <Input
-                type="text"
-                placeholder="192.168.1.1"
-                value={ipv4}
-                margin={{ bottom: "20px" }}
-                onChange={(e) => setIPv4(e.target.value)}
-                required
-                label="Adresse IPv4"
-                />
-                <Input
-                type="text"
-                placeholder="12"
-                value={subnet}
-                margin={{ bottom: "20px" }}
-                onChange={(e) => setSubnet(e.target.value)}
-                required
-                label="Sous-réseau"
-                />
-                <Button
-                text="???"
-                primary
-                form="submit"
-                type="input"
-                margin={{ top: "20px" }}
-                disabled={!ipv4 || !subnet}
-                onClick={(e) => {
-                    handleVLSM(e);
-                }}
-                />
-            </form>
-            {res ? 
-            <>
-            <Text>Résultat : {res}</Text>
-            </>
-            : null}
-        </Box>
+      <Box margin={{ top: "50px", bottom: "50px", left: "20%", right: "20%" }}>
+        {activeTab === "cours" ? <Cours /> : <VlsmSandbox />}
+      </Box>
     </Layout>
-    );
-  }
-  
+  );
+}

From d598dc58bbdfd6724f536a8d470c6242713516c9 Mon Sep 17 00:00:00 2001
From: Eliott-B <eliottb.info@gmail.com>
Date: Fri, 20 Dec 2024 10:23:23 +0100
Subject: [PATCH 2/8] Add course VLSM

---
 front-js/src/app/modules/vlsm/Cours.tsx | 40 +++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 front-js/src/app/modules/vlsm/Cours.tsx

diff --git a/front-js/src/app/modules/vlsm/Cours.tsx b/front-js/src/app/modules/vlsm/Cours.tsx
new file mode 100644
index 0000000..1ae5a7b
--- /dev/null
+++ b/front-js/src/app/modules/vlsm/Cours.tsx
@@ -0,0 +1,40 @@
+import Title from "@/components/Title";
+import Text from "@/components/Text";
+import React from "react";
+import Space from "@/components/Space";
+import { Emoji, EmojiProvider } from "react-apple-emojis";
+import emojiData from "react-apple-emojis/src/data.json";
+
+const Cours: React.FC = () => {
+
+  return (
+    <>
+      <EmojiProvider data={emojiData}>
+        <Space space="1rem">
+          <Title level={2}>Introduction</Title>
+          <Text>
+            VLSM (Variable Length Subnet Masking) est une technique de
+            sous-réseautage qui permet de créer des sous-réseaux de différentes
+            tailles. Cette technique est utilisée pour optimiser l&rsquot;utilisation
+            des adresses IP.
+          </Text>
+          <Title level={2} margin={{ top: "2rem" }}>
+            Fonctionnement VLSM
+          </Title>
+          <Text>
+            VLSM permet de diviser un réseau en sous-réseaux de différentes
+            tailles. Chaque sous-réseau peut accueillir un nombre minimisé
+            de machine. Cela permet d&rsquo;optimiser l&rsquo;utilisation
+            des adresses IP.
+
+          </Text>
+          <Title level={2} margin={{ top: "2rem" }}>
+            Essayez ! <Emoji name="test-tube" width={32} />
+          </Title>
+        </Space>
+      </EmojiProvider>
+    </>
+  );
+};
+
+export default Cours;

From 5435a52ffc142cbcd8a59b5829068aa65b55aa92 Mon Sep 17 00:00:00 2001
From: Eliott-B <eliottb.info@gmail.com>
Date: Fri, 20 Dec 2024 10:46:59 +0100
Subject: [PATCH 3/8] Add VLSM sandbox

---
 front-js/src/app/modules/vlsm/VlsmSandbox.tsx | 125 ++++++++++++++++++
 1 file changed, 125 insertions(+)
 create mode 100644 front-js/src/app/modules/vlsm/VlsmSandbox.tsx

diff --git a/front-js/src/app/modules/vlsm/VlsmSandbox.tsx b/front-js/src/app/modules/vlsm/VlsmSandbox.tsx
new file mode 100644
index 0000000..7350698
--- /dev/null
+++ b/front-js/src/app/modules/vlsm/VlsmSandbox.tsx
@@ -0,0 +1,125 @@
+import Title from "@/components/Title";
+import Button from "@/components/Button";
+import Input from "@/components/Input";
+import Space from "@/components/Space";
+import React from "react";
+import { useState } from "react";
+import axios from "@/axiosConfig";
+import Cookies from "js-cookie";
+import { AxiosError } from "axios";
+import { Alert } from "@mui/material";
+import Box from "@/components/Box";
+
+const VlsmSandbox: React.FC = () => {
+  const [baseIp, setBaseIp] = useState("");
+  const [nombreAddr, setNombreAddr] = useState("");
+  const [subnets, setSubnets] = useState<
+    Array<{ network: string; mask: string; broadcast: string; range: string }>
+  >([]);
+
+  const handleSimplify = async (e: { preventDefault: () => void }) => {
+    e.preventDefault();
+    try {
+      const response = await axios.get("/ipv4/vlsm/" + baseIp + "/" + nombreAddr, {
+        headers: {
+          Authorization: `Bearer ${Cookies.get("access_token")}`,
+        },
+      });
+      const data = response.data;
+      if (response.status === 200) {
+        const formattedSubnets = data.subnet.map((subnet: any) => ({
+          network: subnet.network,
+          mask: subnet.mask,
+          broadcast: subnet.broadcast,
+          range: subnet.range,
+        }));
+        setSubnets(formattedSubnets);
+      }
+    } catch (error: unknown) {
+      const axiosError = error as AxiosError;
+      if (axiosError.response?.status === 400) {
+        const data = axiosError.response.data as { detail: string };
+        if (data.detail === "Invalid IPv6") {
+          // setSimpleRes("Adresse IPv6 invalide");
+        } else {
+          // setSimpleRes("Adresse IPv6 invalide");
+        }
+      } else {
+        // setSimpleRes("Erreur lors de la simplification de l'adresse IPv6");
+      }
+    }
+  };
+
+  return (
+    <>
+      <Space space="50px" direction="vertical" margin={{ bottom: "100px" }}>
+        <form onSubmit={handleSimplify}>
+          <Title level={2}>Création d&rsquot;un sous réseau</Title>
+
+          <Input
+            type="text"
+            placeholder="192.168.1.0"
+            value={baseIp}
+            margin={{ bottom: "20px" }}
+            onChange={(e) => setBaseIp(e.target.value)}
+            required
+            label="Adresse IP de base"
+          />
+          <Input
+            type="text"
+            placeholder="2,50,100"
+            value={nombreAddr}
+            margin={{ bottom: "20px" }}
+            onChange={(e) => setNombreAddr(e.target.value)}
+            required
+            label="Nombre d&rsquot;adresses à attribuer (séparées par des virgules)"
+          />
+          <Button
+            text="Simplifier"
+            primary
+            form="submit"
+            type="input"
+            margin={{ top: "20px" }}
+            disabled={!baseIp || !nombreAddr}
+            onClick={(e) => {
+              handleSimplify(e);
+            }}
+          />
+          {subnets.length > 0 ? (
+            <Box margin={{ top: "20px", bottom: "20px" }}>
+              <Alert
+                severity="success"
+                variant="outlined"
+                style={{ borderRadius: "10px" }}
+              >
+                Résultat :
+                <table style={{ borderCollapse: "collapse", width: "100%" }}>
+                  <thead>
+                    <tr style={{ borderBottom: "1px solid black" }}>
+                      <th style={{ paddingRight: "1.5em" }}>Network</th>
+                      <th style={{ paddingRight: "1.5em" }}>Mask</th>
+                      <th style={{ paddingRight: "1.5em" }}>Broadcast</th>
+                      <th style={{ paddingRight: "1.5em" }}>Range</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {subnets.map((subnet, index) => (
+                      <tr key={index} style={{ borderBottom: "1px solid black" }}>
+                        <td>{subnet.network}</td>
+                        <td>{subnet.mask}</td>
+                        <td>{subnet.broadcast}</td>
+                        <td>{subnet.range}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </Alert>
+            </Box>
+          ) : null}
+        </form>
+      </Space>
+    </>
+  );
+};
+
+export default VlsmSandbox;

From 9dae440169839d69b5b6c742386229a86fa17910 Mon Sep 17 00:00:00 2001
From: Eliott-B <eliottb.info@gmail.com>
Date: Fri, 20 Dec 2024 10:47:11 +0100
Subject: [PATCH 4/8] Rename output

---
 api/src/routes/ipv4.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/src/routes/ipv4.py b/api/src/routes/ipv4.py
index a23d589..dfa9faf 100644
--- a/api/src/routes/ipv4.py
+++ b/api/src/routes/ipv4.py
@@ -102,4 +102,4 @@ async def get_mask(ipv4: str) -> dict:
 async def get_vlsm(baseip: str, subnet: str) -> dict:
     """Implement the VLSM (Variable Length Subnet Mask) technique."""
     res = vlsm(baseip, subnet)
-    return {"ipv4": res}
+    return {"subnet": res}

From 86ffef47c18ae426420b79a0b8d8652bec329584 Mon Sep 17 00:00:00 2001
From: Eliott-B <eliottb.info@gmail.com>
Date: Fri, 20 Dec 2024 11:20:03 +0100
Subject: [PATCH 5/8] Fix quote and remove useless comment

---
 front-js/src/app/modules/vlsm/VlsmSandbox.tsx | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/front-js/src/app/modules/vlsm/VlsmSandbox.tsx b/front-js/src/app/modules/vlsm/VlsmSandbox.tsx
index 7350698..d050b6e 100644
--- a/front-js/src/app/modules/vlsm/VlsmSandbox.tsx
+++ b/front-js/src/app/modules/vlsm/VlsmSandbox.tsx
@@ -6,7 +6,6 @@ import React from "react";
 import { useState } from "react";
 import axios from "@/axiosConfig";
 import Cookies from "js-cookie";
-import { AxiosError } from "axios";
 import { Alert } from "@mui/material";
 import Box from "@/components/Box";
 
@@ -36,17 +35,6 @@ const VlsmSandbox: React.FC = () => {
         setSubnets(formattedSubnets);
       }
     } catch (error: unknown) {
-      const axiosError = error as AxiosError;
-      if (axiosError.response?.status === 400) {
-        const data = axiosError.response.data as { detail: string };
-        if (data.detail === "Invalid IPv6") {
-          // setSimpleRes("Adresse IPv6 invalide");
-        } else {
-          // setSimpleRes("Adresse IPv6 invalide");
-        }
-      } else {
-        // setSimpleRes("Erreur lors de la simplification de l'adresse IPv6");
-      }
     }
   };
 
@@ -54,7 +42,7 @@ const VlsmSandbox: React.FC = () => {
     <>
       <Space space="50px" direction="vertical" margin={{ bottom: "100px" }}>
         <form onSubmit={handleSimplify}>
-          <Title level={2}>Création d&rsquot;un sous réseau</Title>
+          <Title level={2}>Création d&rsquo;un sous réseau</Title>
 
           <Input
             type="text"
@@ -72,7 +60,7 @@ const VlsmSandbox: React.FC = () => {
             margin={{ bottom: "20px" }}
             onChange={(e) => setNombreAddr(e.target.value)}
             required
-            label="Nombre d&rsquot;adresses à attribuer (séparées par des virgules)"
+            label="Nombre d&rsquo;adresses à attribuer (séparées par des virgules)"
           />
           <Button
             text="Simplifier"

From a0379004b2af59b36e90ea596ef13be0f197f08f Mon Sep 17 00:00:00 2001
From: Eliott-B <eliottb.info@gmail.com>
Date: Fri, 20 Dec 2024 11:58:37 +0100
Subject: [PATCH 6/8] Add exercice and course to VLSM

---
 front-js/src/app/modules/vlsm/Cours.tsx | 78 ++++++++++++++++++++++++-
 1 file changed, 76 insertions(+), 2 deletions(-)

diff --git a/front-js/src/app/modules/vlsm/Cours.tsx b/front-js/src/app/modules/vlsm/Cours.tsx
index 1ae5a7b..2981cd3 100644
--- a/front-js/src/app/modules/vlsm/Cours.tsx
+++ b/front-js/src/app/modules/vlsm/Cours.tsx
@@ -4,8 +4,45 @@ import React from "react";
 import Space from "@/components/Space";
 import { Emoji, EmojiProvider } from "react-apple-emojis";
 import emojiData from "react-apple-emojis/src/data.json";
+import { Alert } from "@mui/material";
+import axios from "@/axiosConfig";
+import Cookies from 'js-cookie';
+import { Code, solarizedLight } from "react-code-blocks";
+import Box from "@/components/Box";
+import Button from "@/components/Button";
+import Input from "@/components/Input";
 
 const Cours: React.FC = () => {
+  const [addrRestante, setAddrRestante] = React.useState("");
+  const [res, setRes] = React.useState("");
+
+  const handleAddrRestante = async (e: { preventDefault: () => void }) => {
+    e.preventDefault();
+    try {
+      const response = await axios.get("/ipv4/vlsm/192.168.1.0/15,30,50", {
+        headers: {
+          Authorization: `Bearer ${Cookies.get("access_token")}`,
+        },
+      });
+      const data = response.data;
+      if (response.status === 200) {
+        let lastRange = data.subnet[data.subnet.length - 1].range;
+        lastRange = lastRange.split(" - ")[1];
+        const listLastRange = lastRange.split(".");
+        const newLastDigit = parseInt(listLastRange[listLastRange.length - 1]) + 1;
+        listLastRange.pop();
+        listLastRange.push(newLastDigit.toString());
+        const ok = listLastRange.join('.') + " - 192.168.1.254";
+        if (addrRestante == ok) {
+          setRes("Bravo !");
+        }
+        else {
+          setRes("");
+        }
+      }
+    } catch (error: unknown) {
+    }
+  };
 
   return (
     <>
@@ -24,13 +61,50 @@ const Cours: React.FC = () => {
           <Text>
             VLSM permet de diviser un réseau en sous-réseaux de différentes
             tailles. Chaque sous-réseau peut accueillir un nombre minimisé
-            de machine. Cela permet d&rsquo;optimiser l&rsquo;utilisation
+            de machine. Cela permet d&rsquot;optimiser l&rsquo;utilisation
             des adresses IP.
-
+            <Space />
+            Attention il ne faut pas oublier de réserver une adresse pour le
+            réseau et une pour le broadcast.
           </Text>
           <Title level={2} margin={{ top: "2rem" }}>
             Essayez ! <Emoji name="test-tube" width={32} />
           </Title>
+          <Text>
+            Notre réseau (<Code text="192.168.1.0" language="text" theme={solarizedLight} />) contient des sous-réseaux avec 15 machines, 30 machines et 50 machines.
+            Qu&rsquo;elle est la plage d&rsquo;adresses IP restante ?
+          </Text>
+          <form onSubmit={handleAddrRestante}>
+            <Input
+              onChange={(e) => setAddrRestante(e.target.value)}
+              value={addrRestante}
+              type="text"
+              placeholder="192.168.1.xxx - 192.168.1.xxx"
+              margin={{ bottom: "20px" }}
+              required
+              label="Plage restante"
+            />
+            <Button text="Répondre" primary form="submit" type="input" />
+          </form>
+          <Box margin={{ top: "20px", bottom: "20px" }}>
+            {res ? (
+              <Alert
+                severity="success"
+                variant="outlined"
+                style={{ borderRadius: "10px" }}
+              >
+                Bien joué !
+              </Alert>
+            ) : (
+              <Alert
+                severity="error"
+                variant="outlined"
+                style={{ borderRadius: "10px" }}
+              >
+                Et non !
+              </Alert>
+            )}
+          </Box>
         </Space>
       </EmojiProvider>
     </>

From 92a837c5b21eb76c507632d155a541b9c96b0272 Mon Sep 17 00:00:00 2001
From: Chak <444chak@gmail.com>
Date: Fri, 20 Dec 2024 14:08:46 +0100
Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=90=9E=20fix:=20Ajout=20d'un=20indica?=
 =?UTF-8?q?teur=20de=20chargement=20et=20gestion=20des=20erreurs=20pour=20?=
 =?UTF-8?q?la=20r=C3=A9cup=C3=A9ration=20des=20adresses=20IP=20restantes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front-js/src/app/modules/vlsm/Cours.tsx | 62 ++++++++++++++-----------
 1 file changed, 36 insertions(+), 26 deletions(-)

diff --git a/front-js/src/app/modules/vlsm/Cours.tsx b/front-js/src/app/modules/vlsm/Cours.tsx
index 2981cd3..a7818f6 100644
--- a/front-js/src/app/modules/vlsm/Cours.tsx
+++ b/front-js/src/app/modules/vlsm/Cours.tsx
@@ -4,19 +4,23 @@ import React from "react";
 import Space from "@/components/Space";
 import { Emoji, EmojiProvider } from "react-apple-emojis";
 import emojiData from "react-apple-emojis/src/data.json";
-import { Alert } from "@mui/material";
+import { Alert, CircularProgress } from "@mui/material";
 import axios from "@/axiosConfig";
-import Cookies from 'js-cookie';
+import Cookies from "js-cookie";
 import { Code, solarizedLight } from "react-code-blocks";
 import Box from "@/components/Box";
 import Button from "@/components/Button";
 import Input from "@/components/Input";
+import { AxiosError } from "axios";
 
 const Cours: React.FC = () => {
   const [addrRestante, setAddrRestante] = React.useState("");
   const [res, setRes] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
 
   const handleAddrRestante = async (e: { preventDefault: () => void }) => {
+    setIsLoading(true);
+    setRes("");
     e.preventDefault();
     try {
       const response = await axios.get("/ipv4/vlsm/192.168.1.0/15,30,50", {
@@ -29,19 +33,26 @@ const Cours: React.FC = () => {
         let lastRange = data.subnet[data.subnet.length - 1].range;
         lastRange = lastRange.split(" - ")[1];
         const listLastRange = lastRange.split(".");
-        const newLastDigit = parseInt(listLastRange[listLastRange.length - 1]) + 1;
+        const newLastDigit =
+          parseInt(listLastRange[listLastRange.length - 1]) + 1;
         listLastRange.pop();
         listLastRange.push(newLastDigit.toString());
-        const ok = listLastRange.join('.') + " - 192.168.1.254";
+        const ok = listLastRange.join(".") + " - 192.168.1.254";
         if (addrRestante == ok) {
           setRes("Bravo !");
-        }
-        else {
-          setRes("");
+        } else {
+          setRes("Mauvaise réponse !");
         }
       }
     } catch (error: unknown) {
+      const axiosError = error as AxiosError;
+      if (axiosError.response?.status === 400) {
+        setRes("Erreur interne");
+      } else {
+        setRes("Erreur interne");
+      }
     }
+    setIsLoading(false);
   };
 
   return (
@@ -52,18 +63,19 @@ const Cours: React.FC = () => {
           <Text>
             VLSM (Variable Length Subnet Masking) est une technique de
             sous-réseautage qui permet de créer des sous-réseaux de différentes
-            tailles. Cette technique est utilisée pour optimiser l&rsquot;utilisation
-            des adresses IP.
+            tailles. Cette technique est utilisée pour optimiser
+            l&rsquo;utilisation des adresses IP.
           </Text>
           <Title level={2} margin={{ top: "2rem" }}>
             Fonctionnement VLSM
           </Title>
           <Text>
             VLSM permet de diviser un réseau en sous-réseaux de différentes
-            tailles. Chaque sous-réseau peut accueillir un nombre minimisé
-            de machine. Cela permet d&rsquot;optimiser l&rsquo;utilisation
-            des adresses IP.
-            <Space />
+            tailles. Chaque sous-réseau peut accueillir un nombre minimisé de
+            machine. Cela permet d&rsquo;optimiser l&rsquo;utilisation des
+            adresses IP.
+          </Text>
+          <Text>
             Attention il ne faut pas oublier de réserver une adresse pour le
             réseau et une pour le broadcast.
           </Text>
@@ -71,8 +83,10 @@ const Cours: React.FC = () => {
             Essayez ! <Emoji name="test-tube" width={32} />
           </Title>
           <Text>
-            Notre réseau (<Code text="192.168.1.0" language="text" theme={solarizedLight} />) contient des sous-réseaux avec 15 machines, 30 machines et 50 machines.
-            Qu&rsquo;elle est la plage d&rsquo;adresses IP restante ?
+            Notre réseau{" "}
+            <Code text="192.168.1.0" language="text" theme={solarizedLight} />{" "}
+            contient des sous-réseaux avec 15 machines, 30 machines et 50
+            machines. Qu&rsquo;elle est la plage d&rsquo;adresses IP restante ?
           </Text>
           <form onSubmit={handleAddrRestante}>
             <Input
@@ -89,21 +103,17 @@ const Cours: React.FC = () => {
           <Box margin={{ top: "20px", bottom: "20px" }}>
             {res ? (
               <Alert
-                severity="success"
-                variant="outlined"
-                style={{ borderRadius: "10px" }}
-              >
-                Bien joué !
-              </Alert>
-            ) : (
-              <Alert
-                severity="error"
+                severity={res === "Bravo !" ? "success" : "error"}
                 variant="outlined"
                 style={{ borderRadius: "10px" }}
               >
-                Et non !
+                {res}
               </Alert>
-            )}
+            ) : isLoading ? (
+              <Box align="center">
+                <CircularProgress />
+              </Box>
+            ) : null}
           </Box>
         </Space>
       </EmojiProvider>

From 51abf0412d49b398f6c11a915cac23d7583a5474 Mon Sep 17 00:00:00 2001
From: Chak <444chak@gmail.com>
Date: Fri, 20 Dec 2024 14:09:50 +0100
Subject: [PATCH 8/8] =?UTF-8?q?=F0=9F=90=9E=20fix:=20Ajout=20d'un=20indica?=
 =?UTF-8?q?teur=20de=20chargement=20et=20gestion=20des=20erreurs=20pour=20?=
 =?UTF-8?q?la=20r=C3=A9cup=C3=A9ration=20des=20sous-r=C3=A9seaux=20dans=20?=
 =?UTF-8?q?VLSM?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front-js/src/app/modules/vlsm/VlsmSandbox.tsx | 123 +++++++++++++-----
 1 file changed, 93 insertions(+), 30 deletions(-)

diff --git a/front-js/src/app/modules/vlsm/VlsmSandbox.tsx b/front-js/src/app/modules/vlsm/VlsmSandbox.tsx
index d050b6e..0331cc4 100644
--- a/front-js/src/app/modules/vlsm/VlsmSandbox.tsx
+++ b/front-js/src/app/modules/vlsm/VlsmSandbox.tsx
@@ -6,8 +6,26 @@ import React from "react";
 import { useState } from "react";
 import axios from "@/axiosConfig";
 import Cookies from "js-cookie";
-import { Alert } from "@mui/material";
+import {
+  Alert,
+  CircularProgress,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
 import Box from "@/components/Box";
+import { AxiosError } from "axios";
+
+interface Subnet {
+  network: string;
+  mask: string;
+  broadcast: string;
+  range: string;
+}
 
 const VlsmSandbox: React.FC = () => {
   const [baseIp, setBaseIp] = useState("");
@@ -15,18 +33,26 @@ const VlsmSandbox: React.FC = () => {
   const [subnets, setSubnets] = useState<
     Array<{ network: string; mask: string; broadcast: string; range: string }>
   >([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
 
-  const handleSimplify = async (e: { preventDefault: () => void }) => {
+  const handleSubnets = async (e: { preventDefault: () => void }) => {
+    setIsLoading(true);
+    setError("");
+    setSubnets([]);
     e.preventDefault();
     try {
-      const response = await axios.get("/ipv4/vlsm/" + baseIp + "/" + nombreAddr, {
-        headers: {
-          Authorization: `Bearer ${Cookies.get("access_token")}`,
-        },
-      });
+      const response = await axios.get(
+        "/ipv4/vlsm/" + baseIp + "/" + nombreAddr,
+        {
+          headers: {
+            Authorization: `Bearer ${Cookies.get("access_token")}`,
+          },
+        }
+      );
       const data = response.data;
       if (response.status === 200) {
-        const formattedSubnets = data.subnet.map((subnet: any) => ({
+        const formattedSubnets = data.subnet.map((subnet: Subnet) => ({
           network: subnet.network,
           mask: subnet.mask,
           broadcast: subnet.broadcast,
@@ -35,13 +61,20 @@ const VlsmSandbox: React.FC = () => {
         setSubnets(formattedSubnets);
       }
     } catch (error: unknown) {
+      const axiosError = error as AxiosError;
+      if (axiosError.response?.status === 400) {
+        setError("Erreur interne");
+      } else {
+        setError("Erreur interne inconnue");
+      }
     }
+    setIsLoading(false);
   };
 
   return (
     <>
       <Space space="50px" direction="vertical" margin={{ bottom: "100px" }}>
-        <form onSubmit={handleSimplify}>
+        <form onSubmit={handleSubnets}>
           <Title level={2}>Création d&rsquo;un sous réseau</Title>
 
           <Input
@@ -63,14 +96,14 @@ const VlsmSandbox: React.FC = () => {
             label="Nombre d&rsquo;adresses à attribuer (séparées par des virgules)"
           />
           <Button
-            text="Simplifier"
+            text="Trouver les sous-réseaux"
             primary
             form="submit"
             type="input"
             margin={{ top: "20px" }}
             disabled={!baseIp || !nombreAddr}
             onClick={(e) => {
-              handleSimplify(e);
+              handleSubnets(e);
             }}
           />
           {subnets.length > 0 ? (
@@ -80,27 +113,57 @@ const VlsmSandbox: React.FC = () => {
                 variant="outlined"
                 style={{ borderRadius: "10px" }}
               >
-                Résultat :
-                <table style={{ borderCollapse: "collapse", width: "100%" }}>
-                  <thead>
-                    <tr style={{ borderBottom: "1px solid black" }}>
-                      <th style={{ paddingRight: "1.5em" }}>Network</th>
-                      <th style={{ paddingRight: "1.5em" }}>Mask</th>
-                      <th style={{ paddingRight: "1.5em" }}>Broadcast</th>
-                      <th style={{ paddingRight: "1.5em" }}>Range</th>
-                    </tr>
-                  </thead>
-                  <tbody>
+                Sous-réseaux créés avec succès !
+              </Alert>
+              <TableContainer
+                component={Paper}
+                sx={{ marginTop: "20px", backgroundColor: "#f6f6f666" }}
+              >
+                <Table style={{ borderCollapse: "collapse", width: "100%" }}>
+                  <TableHead>
+                    <TableRow style={{ borderBottom: "1px solid black" }}>
+                      <TableCell style={{ paddingRight: "1.5em" }}>
+                        Network
+                      </TableCell>
+                      <TableCell style={{ paddingRight: "1.5em" }}>
+                        Mask
+                      </TableCell>
+                      <TableCell style={{ paddingRight: "1.5em" }}>
+                        Broadcast
+                      </TableCell>
+                      <TableCell style={{ paddingRight: "1.5em" }}>
+                        Range
+                      </TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
                     {subnets.map((subnet, index) => (
-                      <tr key={index} style={{ borderBottom: "1px solid black" }}>
-                        <td>{subnet.network}</td>
-                        <td>{subnet.mask}</td>
-                        <td>{subnet.broadcast}</td>
-                        <td>{subnet.range}</td>
-                      </tr>
+                      <TableRow
+                        key={index}
+                        style={{ borderBottom: "1px solid black" }}
+                      >
+                        <TableCell>{subnet.network}</TableCell>
+                        <TableCell>{subnet.mask}</TableCell>
+                        <TableCell>{subnet.broadcast}</TableCell>
+                        <TableCell>{subnet.range}</TableCell>
+                      </TableRow>
                     ))}
-                  </tbody>
-                </table>
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </Box>
+          ) : isLoading ? (
+            <Box align="center" margin={{ top: "20px", bottom: "20px" }}>
+              <CircularProgress />
+            </Box>
+          ) : error ? (
+            <Box margin={{ top: "20px", bottom: "20px" }}>
+              <Alert
+                severity="error"
+                variant="outlined"
+                style={{ borderRadius: "10px" }}
+              >
+                {error}
               </Alert>
             </Box>
           ) : null}