diff --git a/front-js/src/app/dashboard/page.tsx b/front-js/src/app/dashboard/page.tsx
index 63f403b..16f8868 100644
--- a/front-js/src/app/dashboard/page.tsx
+++ b/front-js/src/app/dashboard/page.tsx
@@ -157,9 +157,10 @@ export default function Dashboard() {
router.push("/modules/tcp")}
/>
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..7eb464d
--- /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";
+import Box from "@/components/Box";
+
+const Cours: React.FC = () => {
+ return (
+ <>
+
+ Introduction
+
+ 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’autre
+ machine, dans le bon ordre et sans erreur.
+
+
+ Fonctionnement TCP
+
+
+ TCP fonctionne en établissant une connexion entre deux machines avant
+ de transmettre des données. Cette connexion est appelée{" "}
+ connexion TCP. Elle est établie en trois étapes :
+
+
+ -
+ Établissement de la connexion : Les deux machines
+ s’échangent des paquets pour s’assurer
+ qu’elles sont prêtes à communiquer.
+
+ -
+ Transfert des données : Les données sont envoyées en
+ plusieurs paquets, chacun étant numéroté pour être reconstitué
+ dans le bon ordre.
+
+ -
+ Fin de la connexion : Les deux machines s’échangent
+ des paquets pour clôturer la connexion.
+
+
+
+
+
+
+ );
+};
+
+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..e9d346d
--- /dev/null
+++ b/front-js/src/app/modules/tcp/TcpSandbox.tsx
@@ -0,0 +1,171 @@
+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, CircularProgress } 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("");
+ const [error, setError] = useState("");
+ 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 {
+ const ip_port = parts[1].split(":");
+ if (ip_port.length < 2 || ip_port.length > 2) {
+ setError("Commande invalide");
+ setRes("");
+ setIsLoading(false);
+ 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");
+ setRes("");
+ }
+ }
+ setIsLoading(false);
+ };
+
+ return (
+ <>
+
+
+
+
+ );
+};
+
+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..59c718e
--- /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: "Ping TCP",
+ description: "Networkers",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return {children};
+}
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 (
+
+
+ router.push(`/${tab.toLowerCase()}`)}
+ onClickLogout={() => router.push("/auth/logout")}
+ onClickLogo={() => router.push("/")}
+ />
+
+
+
+ Ping TCP
+
+
+
+ handleTabChange(tab)}
+ centered
+ >
+
+
+
+
+
+ {activeTab === "cours" ? : < TcpSandbox />}
+
+
+ );
+}