Merge Feat/interfaces

front-js/src/app/api/config/route.ts

@@ -2,6 +2,6 @@ import { NextResponse } from 'next/server';
 
 export async function GET() {
   return NextResponse.json({
-    commonKey: process.env.COMMON_KEY
+    commonKey: process.env.COMMON_KEY,
   });
 }

front-js/src/app/dashboard/page.tsx

@@ -164,6 +164,7 @@ export default function Dashboard() {
                     title="Interface réseau"
                     description="..."
                     image="/modules_assets/scapy.svg"
+                    onClick={() => router.push("/modules/interface_reseau")}
                   />
                 </Grid2>
               </Grid2>

front-js/src/app/modules/interface_reseau/Cours.tsx

@@ -0,0 +1,64 @@
+import Title from "@/components/Title";
+import Text from "@/components/Text";
+import React from "react";
+import Space from "@/components/Space";
+import { Code, solarizedLight } from "react-code-blocks";
+
+const Cours: React.FC = () => {
+  return (
+    <>
+      <Space space="1rem">
+        <Title level={2}>Introduction</Title>
+        <Text>
+          L&apos;interface réseau est un composant logiciel ou matériel qui
+          permet à un ordinateur de se connecter à un réseau. En utilisant la
+          commande{" "}
+          <Code text="ifconfig" language="bash" theme={solarizedLight} /> (ou{" "}
+          <Code text="ip addr" language="bash" theme={solarizedLight} /> sur les
+          systèmes Linux récents), on peut obtenir des informations importantes
+          comme :
+        </Text>
+        <ul style={{ listStyleType: "disc", marginLeft: "20px" }}>
+          <li>
+            <Text>L&apos;adresse IP de l&apos;interface</Text>
+          </li>
+          <li>
+            <Text>L&apos;adresse MAC (identifiant physique)</Text>
+          </li>
+          <li>
+            <Text>Le masque de sous-réseau</Text>
+          </li>
+          <li>
+            <Text>L&apos;état de l&apos;interface (active ou non)</Text>
+          </li>
+        </ul>
+        <Text>
+          Sur les systèmes Windows, on peut utiliser la commande{" "}
+          <Code text="ipconfig" language="batch" theme={solarizedLight} /> pour
+          obtenir ces informations.
+        </Text>
+        <Title level={2} margin={{ top: "2rem" }}>
+          Interface réseau
+        </Title>
+        <Text>
+          Chaque interface a une adresse IP unique et une adresse MAC
+          (identifiant physique).
+          <Space />
+          L&apos;interface{" "}
+          <Code text="lo" language="text" theme={solarizedLight} /> est une
+          interface spéciale qui est utilisée pour les communications internes
+          de la machine hôte.
+          <Space />
+          Sur la machine du site, l&apos;interface{" "}
+          <Code text="eth0" language="text" theme={solarizedLight} /> est
+          l&apos;interface principale de la machine hôte qui est connectée au
+          réseau internet. Les autres interfaces sont des interfaces virtuelles
+          qui sont utilisées pour Docker. Elles ne nous intéressent pas pour le
+          moment.
+        </Text>
+      </Space>
+    </>
+  );
+};
+
+export default Cours;

front-js/src/app/modules/interface_reseau/InterfaceSandbox.tsx

@@ -0,0 +1,85 @@
+import Title from "@/components/Title";
+import Button from "@/components/Button";
+import Space from "@/components/Space";
+import React from "react";
+import { useState } from "react";
+import axios from "@/axiosConfig";
+import Cookies from "js-cookie";
+import { Alert } from "@mui/material";
+import Box from "@/components/Box";
+
+const InterfaceSandbox: React.FC = () => {
+  const [interfaces, setInterfaces] = useState<
+    Array<{ name: string; mac: string; ip: string }>
+  >([]);
+
+  const handleInterfaces = async (e: { preventDefault: () => void }) => {
+    e.preventDefault();
+    try {
+      const response = await axios.get("/scapy/interfaces/", {
+        headers: {
+          Authorization: `Bearer ${Cookies.get("access_token")}`,
+        },
+      });
+      const data = response.data;
+      if (response.status === 200) {
+        const formattedInterfaces = Object.entries(data.interfaces).map(
+          ([name, details]: [string, any]) => ({
+            name,
+            mac: details.mac,
+            ip: details.ip,
+          }),
+        );
+        setInterfaces(formattedInterfaces);
+      }
+    } catch (error: unknown) {}
+  };
+
+  return (
+    <>
+      <Space space="50px" direction="vertical" margin={{ bottom: "100px" }}>
+        <form onSubmit={handleInterfaces}>
+          <Title level={2}>Interface réseau</Title>
+
+          <Button
+            text="Obtenir les interfaces de la machine hôte"
+            primary
+            form="submit"
+            type="input"
+            margin={{ top: "20px" }}
+            onClick={(e) => {
+              handleInterfaces(e);
+            }}
+          />
+          {interfaces.length > 0 ? (
+            <Box margin={{ top: "20px", bottom: "20px" }}>
+              <Alert
+                severity="success"
+                variant="outlined"
+                style={{ borderRadius: "10px" }}
+              >
+                Résultat :
+                <table style={{ borderCollapse: "collapse", width: "100%" }}>
+                  <tr style={{ borderBottom: "1px solid black" }}>
+                    <th style={{ paddingRight: "1.5em" }}>Interface</th>
+                    <th style={{ paddingRight: "1.5em" }}>Adresse IP</th>
+                    <th style={{ paddingRight: "1.5em" }}>Adresse MAC</th>
+                  </tr>
+                  {interfaces.map((iface, index) => (
+                    <tr key={index} style={{ borderBottom: "1px solid black" }}>
+                      <td>{iface.name}</td>
+                      <td>{iface.ip}</td>
+                      <td>{iface.mac}</td>
+                    </tr>
+                  ))}
+                </table>
+              </Alert>
+            </Box>
+          ) : null}
+        </form>
+      </Space>
+    </>
+  );
+};
+
+export default InterfaceSandbox;

front-js/src/app/modules/interface_reseau/layout.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Interface réseau",
+  description: "Networkers",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <body>{children}</body>;
+}

front-js/src/app/modules/interface_reseau/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 InterfaceSandbox from "./InterfaceSandbox";
+import Cours from "./Cours";
+import { Tab, Tabs } from "@mui/material";
+
+export default function Interface() {
+  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">
+          Interface réseau
+        </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 /> : <InterfaceSandbox />}
+      </Box>
+    </Layout>
+  );
+}

front-js/src/app/modules/ipv6/Cours.tsx

@@ -29,7 +29,7 @@ const Cours: React.FC = () => {
           headers: {
             Authorization: `Bearer ${Cookies.get("access_token")}`,
           },
-        }
+        },
       );
       const data = response.data;
       if (response.status === 200) {

front-js/src/app/profile/layout.tsx

@@ -11,4 +11,4 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return <body>{children}</body>;
-}
+}