From a721d5b56898e3ca543bce342193ab7ac215499b Mon Sep 17 00:00:00 2001
From: Eliott-B <eliottb.info@gmail.com>
Date: Fri, 20 Dec 2024 09:39:18 +0100
Subject: [PATCH 1/7] Add cours + sandbox for TCP ping

---
 front-js/src/app/dashboard/page.tsx         |   3 +-
 front-js/src/app/modules/tcp/Cours.tsx      |  49 ++++++
 front-js/src/app/modules/tcp/TcpSandbox.tsx | 156 ++++++++++++++++++++
 front-js/src/app/modules/tcp/layout.tsx     |  14 ++
 front-js/src/app/modules/tcp/page.tsx       |  90 +++++++++++
 5 files changed, 311 insertions(+), 1 deletion(-)
 create mode 100644 front-js/src/app/modules/tcp/Cours.tsx
 create mode 100644 front-js/src/app/modules/tcp/TcpSandbox.tsx
 create mode 100644 front-js/src/app/modules/tcp/layout.tsx

diff --git a/front-js/src/app/dashboard/page.tsx b/front-js/src/app/dashboard/page.tsx
index 47f6d70..b5c0275 100644
--- a/front-js/src/app/dashboard/page.tsx
+++ b/front-js/src/app/dashboard/page.tsx
@@ -154,9 +154,10 @@ export default function Dashboard() {
                 </Grid2>
                 <Grid2 size={4}>
                   <Card
-                    title="TCP"
+                    title="Ping TCP"
                     description="..."
                     image="/modules_assets/scapy.svg"
+                    onClick={() => router.push("/modules/tcp")}
                   />
                 </Grid2>
                 <Grid2 size={4}>
diff --git a/front-js/src/app/modules/tcp/Cours.tsx b/front-js/src/app/modules/tcp/Cours.tsx
new file mode 100644
index 0000000..750da7b
--- /dev/null
+++ b/front-js/src/app/modules/tcp/Cours.tsx
@@ -0,0 +1,49 @@
+import Title from "@/components/Title";
+import Text from "@/components/Text";
+import React from "react";
+import Space from "@/components/Space";
+
+const Cours: React.FC = () => {
+
+  return (
+    <>
+      <Space space="1rem">
+        <Title level={2}>Introduction</Title>
+        <Text>
+          TCP (Transmission Control Protocol) est un protocole de
+          communication qui assure la transmission de données entre deux
+          machines. Il garantit que les données envoyées par une machine
+          arrivent bien à l&rsquo;autre machine, dans le bon ordre et sans
+          erreur.
+        </Text>
+        <Title level={2} margin={{ top: "2rem" }}>
+          Fonctionnement TCP
+        </Title>
+        <Text>
+          TCP fonctionne en établissant une connexion entre deux machines
+          avant de transmettre des données. Cette connexion est appelée{" "}
+          <b>connexion TCP</b>. Elle est établie en trois étapes :
+
+          <ol>
+            <li>
+              <b>Établissement de la connexion :</b> Les deux machines
+              s&rsquo;échangent des paquets pour s&rsquo;assurer qu&rsquo;elles
+              sont prêtes à communiquer.
+            </li>
+            <li>
+              <b>Transfert des données :</b> Les données sont envoyées en
+              plusieurs paquets, chacun étant numéroté pour être reconstitué
+              dans le bon ordre.
+            </li>
+            <li>
+              <b>Fin de la connexion :</b> Les deux machines s&rsquo;échangent
+              des paquets pour clôturer la connexion.
+            </li>
+          </ol>
+        </Text>
+      </Space>
+    </>
+  );
+};
+
+export default Cours;
diff --git a/front-js/src/app/modules/tcp/TcpSandbox.tsx b/front-js/src/app/modules/tcp/TcpSandbox.tsx
new file mode 100644
index 0000000..87d4f21
--- /dev/null
+++ b/front-js/src/app/modules/tcp/TcpSandbox.tsx
@@ -0,0 +1,156 @@
+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 TcpSandbox: React.FC = () => {
+  const [res, setRes] = useState("");
+  const [ping, setPing] = useState<{
+    rtt_ms: number;
+    packet_size: number;
+    ttl: number;
+    source: string;
+    destination: string;
+  } | null>(null);
+  const [command, setCommand] = useState<string>("");
+  const [error, setError] = useState<string>("");
+
+  const handlePing = async (e: { preventDefault: () => void }) => {
+    e.preventDefault();
+    const parts = command.split(" ");
+    if (parts.length < 2 || parts.length > 2) {
+      setError("Commande invalide");
+      setRes("");
+      return;
+    }
+    if (parts[0] !== "ping") {
+      setError("Commande invalide");
+      setRes("");
+      return;
+    }
+    try {
+      const ip_port = parts[1].split(":");
+      if (ip_port.length < 2 || ip_port.length > 2) {
+        setError("Commande invalide");
+        setRes("");
+        return;
+      }
+      const ip = ip_port[0];
+      const port = ip_port[1];
+
+      const response = await axios.get("/scapy/tcp-test/" + ip + "/" + port, {
+        headers: {
+          Authorization: `Bearer ${Cookies.get("access_token")}`,
+        },
+      });
+      const data = response.data;
+      if (response.status === 200) {
+        setRes(data.message);
+        const formattedPing = {
+          rtt_ms: data.details.rtt_ms,
+          packet_size: data.details.packet_size,
+          ttl: data.details.ttl,
+          source: data.details.source,
+          destination: data.details.destination,
+        };
+        setPing(formattedPing);
+        setError("");
+      }
+    } catch (error: unknown) {
+      const axiosError = error as AxiosError;
+      if (axiosError.response?.status === 404) {
+        setRes("");
+        setError("Impossible de résoudre l'adresse");
+      } else {
+        setError("Erreur lors du ping TCP");
+      }
+    }
+  };
+
+  return (
+    <>
+      <Space space="50px" direction="vertical" margin={{ bottom: "100px" }}>
+        <form onSubmit={handlePing}>
+          <Title level={2}>Ping TCP</Title>
+
+          <Input
+            type="text"
+            placeholder="ping 8.8.8.8:80"
+            value={command}
+            margin={{ bottom: "20px" }}
+            onChange={(e) => setCommand(e.target.value)}
+            required
+            label="Commande ping"
+          />
+          <Button
+            text="Ping"
+            primary
+            form="submit"
+            type="input"
+            margin={{ top: "20px" }}
+            disabled={!command}
+            onClick={(e) => {
+              handlePing(e);
+            }}
+          />
+          {res && ping ? (
+            <Box margin={{ top: "20px", bottom: "20px" }}>
+              <Alert
+                severity="success"
+                variant="outlined"
+                style={{ borderRadius: "10px" }}
+              >
+                Résultat : {res}
+                <Space />
+                <table style={{ borderCollapse: "collapse", width: "100%" }}>
+                  <tbody>
+                    <tr style={{ borderBottom: "1px solid black" }}>
+                      <th style={{ paddingRight: "1.5em" }}>Source</th>
+                      <td>{ping.source}</td>
+                    </tr>
+                    <tr style={{ borderBottom: "1px solid black" }}>
+                      <th style={{ paddingRight: "1.5em" }}>Destination</th>
+                      <td>{ping.destination}</td>
+                    </tr>
+                    <tr style={{ borderBottom: "1px solid black" }}>
+                      <th style={{ paddingRight: "1.5em" }}>TTL</th>
+                      <td>{ping.ttl}</td>
+                    </tr>
+                    <tr style={{ borderBottom: "1px solid black" }}>
+                      <th style={{ paddingRight: "1.5em" }}>RTT (ms)</th>
+                      <td>{ping.rtt_ms}</td>
+                    </tr>
+                    <tr style={{ borderBottom: "1px solid black" }}>
+                      <th style={{ paddingRight: "1.5em" }}>Taille du paquet</th>
+                      <td>{ping.packet_size}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </Alert>
+            </Box>
+          ) : null}
+          {error ? (
+            <Box margin={{ top: "20px", bottom: "20px" }}>
+              <Alert
+                severity="error"
+                variant="outlined"
+                style={{ borderRadius: "10px" }}
+              >
+                {error}
+              </Alert>
+            </Box>
+          ) : null}
+        </form>
+      </Space>
+    </>
+  );
+};
+
+export default TcpSandbox;
diff --git a/front-js/src/app/modules/tcp/layout.tsx b/front-js/src/app/modules/tcp/layout.tsx
new file mode 100644
index 0000000..6201077
--- /dev/null
+++ b/front-js/src/app/modules/tcp/layout.tsx
@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "TCP",
+  description: "Networkers",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <body>{children}</body>;
+}
diff --git a/front-js/src/app/modules/tcp/page.tsx b/front-js/src/app/modules/tcp/page.tsx
index e69de29..206008b 100644
--- a/front-js/src/app/modules/tcp/page.tsx
+++ b/front-js/src/app/modules/tcp/page.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import Layout from "@/components/Layout";
+import Header from "@/components/Header";
+import Title from "@/components/Title";
+import Box from "@/components/Box";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import Cookies from "js-cookie";
+import axios from "@/axiosConfig";
+import { Tabs, Tab } from "@mui/material";
+import Cours from "./Cours";
+import TcpSandbox from "./TcpSandbox";
+
+export default function TCP() {
+  const router = useRouter();
+
+  const [, setHasAccessToken] = useState(false);
+
+  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("/");
+      }
+    };
+
+    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">
+          Ping TCP
+        </Title>
+      </Box>
+
+      <Tabs
+        value={activeTab}
+        onChange={(_, tab) => handleTabChange(tab)}
+        centered
+      >
+        <Tab label="Cours" value="cours" />
+        <Tab label="Bac à sable" value="sandbox" />
+      </Tabs>
+
+      <Box margin={{ top: "50px", bottom: "50px", left: "20%", right: "20%" }}>
+        {activeTab === "cours" ? <Cours /> : < TcpSandbox />}
+      </Box>
+    </Layout>
+  );
+}

From aa74a0f5094fa91b4707a55c95cfe87ab2513ea0 Mon Sep 17 00:00:00 2001
From: Eliott-B <eliottb.info@gmail.com>
Date: Fri, 20 Dec 2024 09:39:35 +0100
Subject: [PATCH 2/7] Fix DNS lookup for tcp

---
 api/src/routes/scapy.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/api/src/routes/scapy.py b/api/src/routes/scapy.py
index b8251c8..5526de0 100644
--- a/api/src/routes/scapy.py
+++ b/api/src/routes/scapy.py
@@ -1,5 +1,6 @@
 """Scapy routes modules."""
 
+import re
 import time
 
 from fastapi import APIRouter, HTTPException
@@ -26,7 +27,7 @@ def create_ethernet_frame(dst_mac: str, src_mac: str, eth_type: str) -> dict:
 @router.get("/tcp-test/{target_ip}/{target_port}", summary="Test a TCP connection")
 def get_tcp_test(target_ip: str, target_port: int) -> dict:
     """Test a TCP connection."""
-    if RE_IP.match(target_ip) is None:
+    if re.search(RE_IP, target_ip) is None:
         target_ip = get_ip_from_dns(target_ip)
     start_time = time.time()
     status, response, packet, tcp_flags = tcp(target_ip, target_port)

From 54f3cf1a0357a5dd6712600b33e7c8ec089a5082 Mon Sep 17 00:00:00 2001
From: Eliott-B <eliottb.info@gmail.com>
Date: Fri, 20 Dec 2024 09:42:11 +0100
Subject: [PATCH 3/7] Fix remove res when error

---
 front-js/src/app/modules/tcp/TcpSandbox.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front-js/src/app/modules/tcp/TcpSandbox.tsx b/front-js/src/app/modules/tcp/TcpSandbox.tsx
index 87d4f21..02e0c60 100644
--- a/front-js/src/app/modules/tcp/TcpSandbox.tsx
+++ b/front-js/src/app/modules/tcp/TcpSandbox.tsx
@@ -70,6 +70,7 @@ const TcpSandbox: React.FC = () => {
         setError("Impossible de résoudre l'adresse");
       } else {
         setError("Erreur lors du ping TCP");
+        setRes("");
       }
     }
   };

From c00c7d11c078f4f17783b773e1700d85ed50db90 Mon Sep 17 00:00:00 2001
From: Eliott-B <eliottb.info@gmail.com>
Date: Fri, 20 Dec 2024 11:07:40 +0100
Subject: [PATCH 4/7] Add description to card

---
 front-js/src/app/dashboard/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front-js/src/app/dashboard/page.tsx b/front-js/src/app/dashboard/page.tsx
index b5c0275..6f74c2b 100644
--- a/front-js/src/app/dashboard/page.tsx
+++ b/front-js/src/app/dashboard/page.tsx
@@ -155,7 +155,7 @@ export default function Dashboard() {
                 <Grid2 size={4}>
                   <Card
                     title="Ping TCP"
-                    description="..."
+                    description="Expérimentez l'envoi de paquets avec le protocole TCP."
                     image="/modules_assets/scapy.svg"
                     onClick={() => router.push("/modules/tcp")}
                   />

From cd19d8a82cf22e0a731737111674943698f850ae Mon Sep 17 00:00:00 2001
From: Chak <444chak@gmail.com>
Date: Fri, 20 Dec 2024 14:51:03 +0100
Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=90=9E=20fix:=20Am=C3=A9liore=20la=20?=
 =?UTF-8?q?pr=C3=A9sentation=20du=20fonctionnement=20de=20TCP=20avec=20une?=
 =?UTF-8?q?=20mise=20en=20forme=20appropri=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front-js/src/app/modules/tcp/Cours.tsx | 50 +++++++++++++-------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/front-js/src/app/modules/tcp/Cours.tsx b/front-js/src/app/modules/tcp/Cours.tsx
index 750da7b..7eb464d 100644
--- a/front-js/src/app/modules/tcp/Cours.tsx
+++ b/front-js/src/app/modules/tcp/Cours.tsx
@@ -2,44 +2,44 @@ import Title from "@/components/Title";
 import Text from "@/components/Text";
 import React from "react";
 import Space from "@/components/Space";
+import Box from "@/components/Box";
 
 const Cours: React.FC = () => {
-
   return (
     <>
       <Space space="1rem">
         <Title level={2}>Introduction</Title>
         <Text>
-          TCP (Transmission Control Protocol) est un protocole de
-          communication qui assure la transmission de données entre deux
-          machines. Il garantit que les données envoyées par une machine
-          arrivent bien à l&rsquo;autre machine, dans le bon ordre et sans
-          erreur.
+          TCP (Transmission Control Protocol) est un protocole de communication
+          qui assure la transmission de données entre deux machines. Il garantit
+          que les données envoyées par une machine arrivent bien à l&rsquo;autre
+          machine, dans le bon ordre et sans erreur.
         </Text>
         <Title level={2} margin={{ top: "2rem" }}>
           Fonctionnement TCP
         </Title>
         <Text>
-          TCP fonctionne en établissant une connexion entre deux machines
-          avant de transmettre des données. Cette connexion est appelée{" "}
+          TCP fonctionne en établissant une connexion entre deux machines avant
+          de transmettre des données. Cette connexion est appelée{" "}
           <b>connexion TCP</b>. Elle est établie en trois étapes :
-
-          <ol>
-            <li>
-              <b>Établissement de la connexion :</b> Les deux machines
-              s&rsquo;échangent des paquets pour s&rsquo;assurer qu&rsquo;elles
-              sont prêtes à communiquer.
-            </li>
-            <li>
-              <b>Transfert des données :</b> Les données sont envoyées en
-              plusieurs paquets, chacun étant numéroté pour être reconstitué
-              dans le bon ordre.
-            </li>
-            <li>
-              <b>Fin de la connexion :</b> Les deux machines s&rsquo;échangent
-              des paquets pour clôturer la connexion.
-            </li>
-          </ol>
+          <Box margin={{ top: "1rem", left: "2rem" }}>
+            <ol>
+              <li>
+                <b>Établissement de la connexion :</b> Les deux machines
+                s&rsquo;échangent des paquets pour s&rsquo;assurer
+                qu&rsquo;elles sont prêtes à communiquer.
+              </li>
+              <li>
+                <b>Transfert des données :</b> Les données sont envoyées en
+                plusieurs paquets, chacun étant numéroté pour être reconstitué
+                dans le bon ordre.
+              </li>
+              <li>
+                <b>Fin de la connexion :</b> Les deux machines s&rsquo;échangent
+                des paquets pour clôturer la connexion.
+              </li>
+            </ol>
+          </Box>
         </Text>
       </Space>
     </>

From b406b98103576157fe1dcb7a86d947f32f1571da Mon Sep 17 00:00:00 2001
From: Chak <444chak@gmail.com>
Date: Fri, 20 Dec 2024 14:51:20 +0100
Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=90=9E=20fix:=20Ajout=20d'un=20indica?=
 =?UTF-8?q?teur=20de=20chargement=20et=20am=C3=A9lioration=20des=20message?=
 =?UTF-8?q?s=20d'erreur=20dans=20TcpSandbox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front-js/src/app/modules/tcp/TcpSandbox.tsx | 24 ++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/front-js/src/app/modules/tcp/TcpSandbox.tsx b/front-js/src/app/modules/tcp/TcpSandbox.tsx
index 02e0c60..e9d346d 100644
--- a/front-js/src/app/modules/tcp/TcpSandbox.tsx
+++ b/front-js/src/app/modules/tcp/TcpSandbox.tsx
@@ -7,7 +7,7 @@ import { useState } from "react";
 import axios from "@/axiosConfig";
 import Cookies from "js-cookie";
 import { AxiosError } from "axios";
-import { Alert } from "@mui/material";
+import { Alert, CircularProgress } from "@mui/material";
 import Box from "@/components/Box";
 
 const TcpSandbox: React.FC = () => {
@@ -21,18 +21,22 @@ const TcpSandbox: React.FC = () => {
   } | null>(null);
   const [command, setCommand] = useState<string>("");
   const [error, setError] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(false);
 
   const handlePing = async (e: { preventDefault: () => void }) => {
+    setIsLoading(true);
     e.preventDefault();
     const parts = command.split(" ");
     if (parts.length < 2 || parts.length > 2) {
       setError("Commande invalide");
       setRes("");
+      setIsLoading(false);
       return;
     }
     if (parts[0] !== "ping") {
       setError("Commande invalide");
       setRes("");
+      setIsLoading(false);
       return;
     }
     try {
@@ -40,6 +44,7 @@ const TcpSandbox: React.FC = () => {
       if (ip_port.length < 2 || ip_port.length > 2) {
         setError("Commande invalide");
         setRes("");
+        setIsLoading(false);
         return;
       }
       const ip = ip_port[0];
@@ -73,6 +78,7 @@ const TcpSandbox: React.FC = () => {
         setRes("");
       }
     }
+    setIsLoading(false);
   };
 
   return (
@@ -83,7 +89,7 @@ const TcpSandbox: React.FC = () => {
 
           <Input
             type="text"
-            placeholder="ping 8.8.8.8:80"
+            placeholder="ping 145.242.11.100:80 ou ping impots.gouv.fr:443"
             value={command}
             margin={{ bottom: "20px" }}
             onChange={(e) => setCommand(e.target.value)}
@@ -101,7 +107,13 @@ const TcpSandbox: React.FC = () => {
               handlePing(e);
             }}
           />
-          {res && ping ? (
+          {isLoading && (
+            <Box align="center" margin={{ top: "20px" }}>
+              {" "}
+              <CircularProgress />
+            </Box>
+          )}
+          {!isLoading && res && ping ? (
             <Box margin={{ top: "20px", bottom: "20px" }}>
               <Alert
                 severity="success"
@@ -129,7 +141,9 @@ const TcpSandbox: React.FC = () => {
                       <td>{ping.rtt_ms}</td>
                     </tr>
                     <tr style={{ borderBottom: "1px solid black" }}>
-                      <th style={{ paddingRight: "1.5em" }}>Taille du paquet</th>
+                      <th style={{ paddingRight: "1.5em" }}>
+                        Taille du paquet
+                      </th>
                       <td>{ping.packet_size}</td>
                     </tr>
                   </tbody>
@@ -137,7 +151,7 @@ const TcpSandbox: React.FC = () => {
               </Alert>
             </Box>
           ) : null}
-          {error ? (
+          {!isLoading && error ? (
             <Box margin={{ top: "20px", bottom: "20px" }}>
               <Alert
                 severity="error"

From 7e99f01569f3489677a2f7cc72c653c663cacde9 Mon Sep 17 00:00:00 2001
From: 444chak <102913424+444chak@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:00:07 +0100
Subject: [PATCH 7/7] Update layout.tsx

---
 front-js/src/app/modules/tcp/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front-js/src/app/modules/tcp/layout.tsx b/front-js/src/app/modules/tcp/layout.tsx
index 6201077..59c718e 100644
--- a/front-js/src/app/modules/tcp/layout.tsx
+++ b/front-js/src/app/modules/tcp/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "TCP",
+  title: "Ping TCP",
   description: "Networkers",
 };