From d4749c2a1d05d8dc19f9dd600d24114c27e3e6d1 Mon Sep 17 00:00:00 2001
From: MaxOuvrard <118462372+MaxOuvrard@users.noreply.github.com>
Date: Thu, 19 Dec 2024 14:27:40 +0100
Subject: [PATCH 01/14] Create utils folder
---
front-js/src/{app/auth/signup => utils}/validatePasswd.js | 0
1 file changed, 0 insertions(+), 0 deletions(-)
rename front-js/src/{app/auth/signup => utils}/validatePasswd.js (100%)
diff --git a/front-js/src/app/auth/signup/validatePasswd.js b/front-js/src/utils/validatePasswd.js
similarity index 100%
rename from front-js/src/app/auth/signup/validatePasswd.js
rename to front-js/src/utils/validatePasswd.js
From 72bb716c43be926732f862f7795d644f79d1584c Mon Sep 17 00:00:00 2001
From: MaxOuvrard <118462372+MaxOuvrard@users.noreply.github.com>
Date: Thu, 19 Dec 2024 14:30:44 +0100
Subject: [PATCH 02/14] Change path for validate passwd in signup
---
front-js/src/app/auth/signup/page.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/front-js/src/app/auth/signup/page.tsx b/front-js/src/app/auth/signup/page.tsx
index 468a477..c0d1ba8 100644
--- a/front-js/src/app/auth/signup/page.tsx
+++ b/front-js/src/app/auth/signup/page.tsx
@@ -11,7 +11,7 @@ import { use, useState } from "react";
import Link from "@/components/Link";
import Space from "@/components/Space";
import ValidatePsw from "@/components/ValidatePsw";
-import {validate_passwd} from "./validatePasswd";
+import {validate_passwd} from "../../../utils/validatePasswd";
export default function Home() {
const [username, setUsername] = useState("");
From 5ee253675daeea1a3c0a6123298a2047c5e00eeb Mon Sep 17 00:00:00 2001
From: MaxOuvrard <118462372+MaxOuvrard@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:32:56 +0100
Subject: [PATCH 03/14] Add front profile pages
---
front-js/src/app/profile/layout.tsx | 14 ++++++
front-js/src/app/profile/page.tsx | 72 +++++++++++++++++++++++++++++
2 files changed, 86 insertions(+)
create mode 100644 front-js/src/app/profile/layout.tsx
create mode 100644 front-js/src/app/profile/page.tsx
diff --git a/front-js/src/app/profile/layout.tsx b/front-js/src/app/profile/layout.tsx
new file mode 100644
index 0000000..5e2b311
--- /dev/null
+++ b/front-js/src/app/profile/layout.tsx
@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+ title: "Modifier mon mot de passe",
+ description: "Networkers",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return {children};
+}
\ No newline at end of file
diff --git a/front-js/src/app/profile/page.tsx b/front-js/src/app/profile/page.tsx
new file mode 100644
index 0000000..755ea73
--- /dev/null
+++ b/front-js/src/app/profile/page.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import Box from "@/components/Box";
+import Header from "@/components/Header";
+import { useRouter } from "next/navigation";
+import Button from "@/components/Button";
+import Input from "@/components/Input";
+import Layout from "@/components/Layout";
+import Modal from "@/components/Modal";
+import ValidatePsw from "@/components/ValidatePsw";
+import {validate_passwd} from "../../utils/validatePasswd";
+import { useEffect, useState } from "react";
+import Title from "@/components/Title";
+
+export default function Profile() {
+ const router = useRouter();
+
+ const [password, setPassword] = useState("");
+
+ const [confirmPassword, setConfirmPassword] = useState("")
+ return (
+
+
+ router.push(`/${tab.toLowerCase()}`)}
+ onClickLogout={() => router.push("/auth/logout")}
+ onClickLogo={() => router.push("/")}
+ />
+
+
+
+ Modifier mon mot de passe
+ setPassword(e.target.value)}
+ required
+ label="Nouveau mot de passe"
+ />
+ setConfirmPassword(e.target.value)}
+ required
+ label="Confirmer nouveau mot de passe"
+ />
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
From 567cfaab7b6380b5b15deeae2e7025ac344622ae Mon Sep 17 00:00:00 2001
From: MaxOuvrard <118462372+MaxOuvrard@users.noreply.github.com>
Date: Thu, 19 Dec 2024 16:44:50 +0100
Subject: [PATCH 04/14] Connect pages profile with API
---
front-js/src/app/profile/page.tsx | 105 ++++++++++++++++++++++++++++++
1 file changed, 105 insertions(+)
diff --git a/front-js/src/app/profile/page.tsx b/front-js/src/app/profile/page.tsx
index 755ea73..5d1536d 100644
--- a/front-js/src/app/profile/page.tsx
+++ b/front-js/src/app/profile/page.tsx
@@ -11,13 +11,87 @@ import ValidatePsw from "@/components/ValidatePsw";
import {validate_passwd} from "../../utils/validatePasswd";
import { useEffect, useState } from "react";
import Title from "@/components/Title";
+import axios from "@/axiosConfig";
+import { AxiosError } from "axios";
+import Cookies from "js-cookie";
+import { Alert } from "@mui/material";
export default function Profile() {
const router = useRouter();
+ const [oldPassword, setOldPassword] = useState("");
+
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("")
+
+ const [error, setError] = useState("");
+ const [success, setSuccess] = useState("");
+
+
+ const [hasAccessToken, 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 changePassword = async (e: { preventDefault: () => void }) => {
+ e.preventDefault();
+ try {
+ setError("");
+ setSuccess("");
+ const response = await axios.patch("/users/me/password", {
+ old_password: oldPassword,
+ password: password,
+ confirm_password: confirmPassword,
+ }, {
+ headers: {
+ Authorization: `Bearer ${Cookies.get("access_token")}`,
+ },
+ });
+ const data = response.data;
+ if (response.status === 200) {
+ setSuccess("Mot de passe modifié avec succès")
+ }
+ } catch (error: unknown) {
+ const axiosError = error as AxiosError;
+ if (
+ axiosError.response?.status === 400 ||
+ axiosError.response?.status === 404
+ ) {
+ setError("L'ancien mot de passe est incorrect");
+ } else if (axiosError.response?.status === 403) {
+ setError("Erreur lors de la connexion");
+ } else {
+ setError("Erreur lors de la connexion");
+ }
+ }
+ };
return (
@@ -36,6 +110,16 @@ export default function Profile() {
Modifier mon mot de passe
+
From 4d69522e475bcdffc525934f6638e7d75ce1f13c Mon Sep 17 00:00:00 2001
From: MaxOuvrard <118462372+MaxOuvrard@users.noreply.github.com>
Date: Thu, 19 Dec 2024 16:50:25 +0100
Subject: [PATCH 05/14] Correction path util
---
front-js/src/app/profile/page.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/front-js/src/app/profile/page.tsx b/front-js/src/app/profile/page.tsx
index 5d1536d..2a098b3 100644
--- a/front-js/src/app/profile/page.tsx
+++ b/front-js/src/app/profile/page.tsx
@@ -8,7 +8,7 @@ import Input from "@/components/Input";
import Layout from "@/components/Layout";
import Modal from "@/components/Modal";
import ValidatePsw from "@/components/ValidatePsw";
-import {validate_passwd} from "../../utils/validatePasswd";
+import {validate_passwd} from "@/utils/validatePasswd";
import { useEffect, useState } from "react";
import Title from "@/components/Title";
import axios from "@/axiosConfig";
From f5dbe9001959a3410bcab445c93cf900b830a33a Mon Sep 17 00:00:00 2001
From: MaxOuvrard <118462372+MaxOuvrard@users.noreply.github.com>
Date: Thu, 19 Dec 2024 16:52:54 +0100
Subject: [PATCH 06/14] Correction signup page
---
front-js/src/app/auth/signup/page.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/front-js/src/app/auth/signup/page.tsx b/front-js/src/app/auth/signup/page.tsx
index c0d1ba8..39d9d64 100644
--- a/front-js/src/app/auth/signup/page.tsx
+++ b/front-js/src/app/auth/signup/page.tsx
@@ -11,7 +11,7 @@ import { use, useState } from "react";
import Link from "@/components/Link";
import Space from "@/components/Space";
import ValidatePsw from "@/components/ValidatePsw";
-import {validate_passwd} from "../../../utils/validatePasswd";
+import {validate_passwd} from "@/utils/validatePasswd";
export default function Home() {
const [username, setUsername] = useState("");
From 7c5cabcd7d24a9431649b7296b88ca3dc49ea984 Mon Sep 17 00:00:00 2001
From: Eliott-B
Date: Thu, 19 Dec 2024 17:18:08 +0100
Subject: [PATCH 07/14] Add interface_reseau page
---
front-js/src/app/dashboard/page.tsx | 1 +
.../src/app/modules/interface_reseau/layout.tsx | 14 ++++++++++++++
2 files changed, 15 insertions(+)
create mode 100644 front-js/src/app/modules/interface_reseau/layout.tsx
diff --git a/front-js/src/app/dashboard/page.tsx b/front-js/src/app/dashboard/page.tsx
index 5d4c826..47f6d70 100644
--- a/front-js/src/app/dashboard/page.tsx
+++ b/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")}
/>
diff --git a/front-js/src/app/modules/interface_reseau/layout.tsx b/front-js/src/app/modules/interface_reseau/layout.tsx
new file mode 100644
index 0000000..d476975
--- /dev/null
+++ b/front-js/src/app/modules/interface_reseau/layout.tsx
@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+ title: "IPv6",
+ description: "Networkers",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return {children};
+}
From 2b2a711c74be89ff817e1a90ad738e92d63e8906 Mon Sep 17 00:00:00 2001
From: Eliott-B
Date: Thu, 19 Dec 2024 21:26:18 +0100
Subject: [PATCH 08/14] Add interface_reseau page with the course and the
result
---
.../app/modules/interface_reseau/layout.tsx | 2 +-
.../src/app/modules/interface_reseau/page.tsx | 160 ++++++++++++++++++
2 files changed, 161 insertions(+), 1 deletion(-)
diff --git a/front-js/src/app/modules/interface_reseau/layout.tsx b/front-js/src/app/modules/interface_reseau/layout.tsx
index d476975..6e9f6e2 100644
--- a/front-js/src/app/modules/interface_reseau/layout.tsx
+++ b/front-js/src/app/modules/interface_reseau/layout.tsx
@@ -1,7 +1,7 @@
import type { Metadata } from "next";
export const metadata: Metadata = {
- title: "IPv6",
+ title: "Interface réseau",
description: "Networkers",
};
diff --git a/front-js/src/app/modules/interface_reseau/page.tsx b/front-js/src/app/modules/interface_reseau/page.tsx
index e69de29..8567d1d 100644
--- a/front-js/src/app/modules/interface_reseau/page.tsx
+++ b/front-js/src/app/modules/interface_reseau/page.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+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";
+
+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 [interfaces, setInterfaces] = useState>([]);
+
+ 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 (
+
+
+ router.push(`/${tab.toLowerCase()}`)}
+ onClickLogout={() => router.push("/auth/logout")}
+ onClickLogo={() => router.push("/")}
+ />
+
+
+
+ Interface réseau
+
+
+ Introduction
+
+
+ L'interface réseau est un composant logiciel ou matériel qui permet à un ordinateur de se connecter à un réseau.
+ En utilisant la commande ifconfig (ou ip addr sur les systèmes Linux récents), on peut obtenir des informations importantes comme :
+
+
+
L'adresse IP de l'interface
+
L'adresse MAC (identifiant physique)
+
Le masque de sous-réseau
+
L'état de l'interface (active ou non)
+
+
+ Sur les systèmes Windows, on peut utiliser la commande ipconfig pour obtenir ces informations.
+
+
+ Exemple d'une interface réseau
+
+
+ {interfaces.length > 0 ?
+ <>
+
+ Résultats :
+
+
+
+
Interface
+
Adresse IP
+
Adresse MAC
+
+ {interfaces.map((iface, index) => (
+
+
{iface.name}
+
{iface.ip}
+
{iface.mac}
+
+ ))}
+
+ Explication des résultats
+
+
+ Les résultats ci-dessus montrent les interfaces réseau de la machine hôte.
+ Chaque interface a une adresse IP unique et une adresse MAC (identifiant physique).
+
+ L'interface 'lo' est une interface spéciale qui est utilisée pour les communications internes de la machine hôte.
+
+ Sur cette exemple, l'interface 'eth0' est l'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.
+
+
+
+ : null}
+
+
+ );
+ }
+
From 22f695f8e5087ac1187b6157313453ebc7d40119 Mon Sep 17 00:00:00 2001
From: Eliott-B
Date: Fri, 20 Dec 2024 06:40:00 +0100
Subject: [PATCH 09/14] Refactor interface_reseau page
---
.../app/modules/interface_reseau/Cours.tsx | 48 ++++++
.../interface_reseau/InterfaceSandbox.tsx | 83 +++++++++++
.../src/app/modules/interface_reseau/page.tsx | 141 +++++-------------
3 files changed, 167 insertions(+), 105 deletions(-)
create mode 100644 front-js/src/app/modules/interface_reseau/Cours.tsx
create mode 100644 front-js/src/app/modules/interface_reseau/InterfaceSandbox.tsx
diff --git a/front-js/src/app/modules/interface_reseau/Cours.tsx b/front-js/src/app/modules/interface_reseau/Cours.tsx
new file mode 100644
index 0000000..2e96055
--- /dev/null
+++ b/front-js/src/app/modules/interface_reseau/Cours.tsx
@@ -0,0 +1,48 @@
+import Title from "@/components/Title";
+import Text from "@/components/Text";
+import React from "react";
+import Space from "@/components/Space";
+import { EmojiProvider } from "react-apple-emojis";
+import emojiData from "react-apple-emojis/src/data.json";
+
+const Cours: React.FC = () => {
+
+ return (
+ <>
+
+
+ Introduction
+
+ L'interface réseau est un composant logiciel ou matériel qui permet à un ordinateur de se connecter à un réseau.
+ En utilisant la commande ifconfig (ou ip addr sur les systèmes Linux récents), on peut obtenir des informations importantes comme :
+
+
+
L'adresse IP de l'interface
+
L'adresse MAC (identifiant physique)
+
Le masque de sous-réseau
+
L'état de l'interface (active ou non)
+
+
+ Sur les systèmes Windows, on peut utiliser la commande ipconfig pour obtenir ces informations.
+
+
+ Interface réseau
+
+
+ Chaque interface a une adresse IP unique et une adresse MAC (identifiant physique).
+
+ L'interface 'lo' est une interface spéciale qui est utilisée pour les
+ communications internes de la machine hôte.
+
+ Sur la machine du site, l'interface 'eth0' est l'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.
+
+
+
+
+ );
+};
+
+export default Cours;
diff --git a/front-js/src/app/modules/interface_reseau/InterfaceSandbox.tsx b/front-js/src/app/modules/interface_reseau/InterfaceSandbox.tsx
new file mode 100644
index 0000000..4b45918
--- /dev/null
+++ b/front-js/src/app/modules/interface_reseau/InterfaceSandbox.tsx
@@ -0,0 +1,83 @@
+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>([]);
+
+ 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 (
+ <>
+
+
+
+
+ );
+};
+
+export default InterfaceSandbox;
diff --git a/front-js/src/app/modules/interface_reseau/page.tsx b/front-js/src/app/modules/interface_reseau/page.tsx
index 8567d1d..69fab66 100644
--- a/front-js/src/app/modules/interface_reseau/page.tsx
+++ b/front-js/src/app/modules/interface_reseau/page.tsx
@@ -4,14 +4,13 @@ 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 InterfaceSandbox from "./InterfaceSandbox";
+import Cours from "./Cours";
+import { Tab, Tabs } from "@mui/material";
export default function Interface() {
const router = useRouter();
@@ -47,114 +46,46 @@ export default function Interface() {
checkTokens();
}, [router]);
- const [interfaces, setInterfaces] = useState>([]);
+ const [activeTab, setActiveTab] = useState("cours");
- 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) {
- }
- };
+ const handleTabChange = (tab: string) => {
+ setActiveTab(tab);
+ };
return (
-
+ router.push(`/${tab.toLowerCase()}`)}
- onClickLogout={() => router.push("/auth/logout")}
- onClickLogo={() => router.push("/")}
- />
+ 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("/")}
+ />
-
-
- Interface réseau
+ <Box align="center" margin={{ top: "50px", bottom: "50px" }}>
+ <Title level={1} align="center">
+ Interface réseau
-
- Introduction
-
-
- L'interface réseau est un composant logiciel ou matériel qui permet à un ordinateur de se connecter à un réseau.
- En utilisant la commande ifconfig (ou ip addr sur les systèmes Linux récents), on peut obtenir des informations importantes comme :
-
-
-
L'adresse IP de l'interface
-
L'adresse MAC (identifiant physique)
-
Le masque de sous-réseau
-
L'état de l'interface (active ou non)
-
-
- Sur les systèmes Windows, on peut utiliser la commande ipconfig pour obtenir ces informations.
-
-
- Exemple d'une interface réseau
-
-
- {interfaces.length > 0 ?
- <>
-
- Résultats :
-
-
- Sur les systèmes Windows, on peut utiliser la commande ipconfig pour obtenir ces informations.
+ Sur les systèmes Windows, on peut utiliser la commande{" "}
+ {" "}
+ pour obtenir ces informations.
Interface réseau
@@ -31,12 +52,25 @@ const Cours: React.FC = () => {
<Text>
Chaque interface a une adresse IP unique et une adresse MAC (identifiant physique).
<Space />
- L'interface 'lo' est une interface spéciale qui est utilisée pour les
+ L'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'interface 'eth0' est l'interface principale
+ Sur la machine du site, l'interface{" "}
+ <Code
+ text="eth0"
+ language="text"
+ theme={solarizedLight}
+ />{" "}
+ est l'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
+ Les autres interfaces sont des interfaces virtuelles qui sont
+ utilisées pour Docker. Elles
ne nous intéressent pas pour le moment.
</Text>
</Space>
From 77f8b6c514042372a2313757a1f006addc3127e6 Mon Sep 17 00:00:00 2001
From: Eliott-B <eliottb.info@gmail.com>
Date: Fri, 20 Dec 2024 06:48:20 +0100
Subject: [PATCH 11/14] Add style to the table
---
.../modules/interface_reseau/InterfaceSandbox.tsx | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/front-js/src/app/modules/interface_reseau/InterfaceSandbox.tsx b/front-js/src/app/modules/interface_reseau/InterfaceSandbox.tsx
index 4b45918..f042991 100644
--- a/front-js/src/app/modules/interface_reseau/InterfaceSandbox.tsx
+++ b/front-js/src/app/modules/interface_reseau/InterfaceSandbox.tsx
@@ -57,14 +57,14 @@ const InterfaceSandbox: React.FC = () => {
style={{ borderRadius: "10px" }}
>
Résultat :
- <table>
- <tr>
- <th>Interface</th>
- <th>Adresse IP</th>
- <th>Adresse MAC</th>
+ <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}>
+ <tr key={index} style={{ borderBottom: "1px solid black" }}>
<td>{iface.name}</td>
<td>{iface.ip}</td>
<td>{iface.mac}</td>
From d229aae8b59c05cc8da6b74c4e1d56956d6de06b Mon Sep 17 00:00:00 2001
From: Eliott-B <eliottb.info@gmail.com>
Date: Fri, 20 Dec 2024 08:25:02 +0100
Subject: [PATCH 12/14] Fix merge
---
front-js/src/utils/validatePasswd.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/front-js/src/utils/validatePasswd.js b/front-js/src/utils/validatePasswd.js
index 9a2f38d..27afb64 100644
--- a/front-js/src/utils/validatePasswd.js
+++ b/front-js/src/utils/validatePasswd.js
@@ -1,6 +1,6 @@
export function validate_passwd(passwd) {
if (!passwd.match(/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/)) {
return false;
- }p
+ }
return true;
}
From 72283c168c30338412be85ff595bece2ff8d32a7 Mon Sep 17 00:00:00 2001
From: Eliott-B <eliottb.info@gmail.com>
Date: Fri, 20 Dec 2024 08:27:18 +0100
Subject: [PATCH 13/14] Fix pages
---
.../app/modules/interface_reseau/Cours.tsx | 124 +++++++---------
.../interface_reseau/InterfaceSandbox.tsx | 134 +++++++++---------
.../src/app/modules/interface_reseau/page.tsx | 131 +++++++++--------
3 files changed, 186 insertions(+), 203 deletions(-)
diff --git a/front-js/src/app/modules/interface_reseau/Cours.tsx b/front-js/src/app/modules/interface_reseau/Cours.tsx
index 4a6c7f2..db6fc46 100644
--- a/front-js/src/app/modules/interface_reseau/Cours.tsx
+++ b/front-js/src/app/modules/interface_reseau/Cours.tsx
@@ -2,81 +2,63 @@ import Title from "@/components/Title";
import Text from "@/components/Text";
import React from "react";
import Space from "@/components/Space";
-import { EmojiProvider } from "react-apple-emojis";
-import emojiData from "react-apple-emojis/src/data.json";
import { Code, solarizedLight } from "react-code-blocks";
const Cours: React.FC = () => {
-
- return (
- <>
- <EmojiProvider data={emojiData}>
- <Space space="1rem">
+ return (
+ <>
+ <Space space="1rem">
<Title level={2}>Introduction
-
- L'interface réseau est un composant logiciel ou matériel qui permet à un
- ordinateur de se connecter à un réseau.
- En utilisant la commande{" "}
- {" "}
- (ou{" "}
- {" "}
- sur les systèmes Linux récents),
- on peut obtenir des informations importantes comme :
-
-
-
L'adresse IP de l'interface
-
L'adresse MAC (identifiant physique)
-
Le masque de sous-réseau
-
L'état de l'interface (active ou non)
-
-
- Sur les systèmes Windows, on peut utiliser la commande{" "}
- {" "}
- pour obtenir ces informations.
-
-
- Interface réseau
-
-
- Chaque interface a une adresse IP unique et une adresse MAC (identifiant physique).
-
- L'interface{" "}
- {" "}
- est une interface spéciale qui est utilisée pour les
- communications internes de la machine hôte.
-
- Sur la machine du site, l'interface{" "}
- {" "}
- est l'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.
-
-
-
-
- );
+
+ L'interface réseau est un composant logiciel ou matériel qui
+ permet à un ordinateur de se connecter à un réseau. En utilisant la
+ commande{" "}
+ (ou{" "}
+ sur les
+ systèmes Linux récents), on peut obtenir des informations importantes
+ comme :
+
+