From d899d06243605731c60a44b6934b340bf57bab9a Mon Sep 17 00:00:00 2001 From: Eliott-B Date: Thu, 19 Dec 2024 16:16:20 +0100 Subject: [PATCH 01/11] Add IPv6 module pages --- api/src/routes/ipv4.py | 2 +- api/src/utils/ipv6.py | 2 +- front-js/src/app/dashboard/page.tsx | 3 +- front-js/src/app/modules/ipv6/layout.tsx | 14 ++ front-js/src/app/modules/ipv6/page.tsx | 217 +++++++++++++++++++++++ front-js/src/components/Text/Text.tsx | 3 + 6 files changed, 238 insertions(+), 3 deletions(-) create mode 100644 front-js/src/app/modules/ipv6/layout.tsx diff --git a/api/src/routes/ipv4.py b/api/src/routes/ipv4.py index 65cf943..59b0152 100644 --- a/api/src/routes/ipv4.py +++ b/api/src/routes/ipv4.py @@ -3,7 +3,7 @@ from fastapi import APIRouter, Depends from dependencies.jwt import jwt_bearer -from utils.IPV4 import ( +from utils.ipv4 import ( bin_to_dec, dec_to_bin, dec_to_hex, diff --git a/api/src/utils/ipv6.py b/api/src/utils/ipv6.py index e2b1d49..911f24e 100644 --- a/api/src/utils/ipv6.py +++ b/api/src/utils/ipv6.py @@ -16,7 +16,7 @@ def simplify(ipv6: str) -> str: parts[parts.index(part)] = "0" is_zero = False - if ipv6.contains("::"): + if ipv6.find("::") != -1: is_zero = True i = 0 while i < len(parts): diff --git a/front-js/src/app/dashboard/page.tsx b/front-js/src/app/dashboard/page.tsx index 711bbbf..5d4c826 100644 --- a/front-js/src/app/dashboard/page.tsx +++ b/front-js/src/app/dashboard/page.tsx @@ -93,7 +93,7 @@ export default function Dashboard() { ) : ( <> - + Bonjour {username} <Spacer x={2} /> @@ -114,6 +114,7 @@ export default function Dashboard() { title="IPv6" description="Simplifiez ou étendez une adresse IPv6 avec ce module." image="/modules_assets/ipv6.svg" + onClick={() => router.push("/modules/ipv6")} /> </Grid2> <Grid2 size={4}> diff --git a/front-js/src/app/modules/ipv6/layout.tsx b/front-js/src/app/modules/ipv6/layout.tsx new file mode 100644 index 0000000..d476975 --- /dev/null +++ b/front-js/src/app/modules/ipv6/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 <body>{children}</body>; +} diff --git a/front-js/src/app/modules/ipv6/page.tsx b/front-js/src/app/modules/ipv6/page.tsx index e69de29..78e87ca 100644 --- a/front-js/src/app/modules/ipv6/page.tsx +++ b/front-js/src/app/modules/ipv6/page.tsx @@ -0,0 +1,217 @@ +"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"; +import Input from "@/components/Input"; +import { AxiosError } from "axios"; + +export default function Dashboard() { + 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 [ipv6, setIPv6] = useState(""); + const [res, setRes] = useState(""); + + const handleSimplify = async (e: { preventDefault: () => void }) => { + e.preventDefault(); + try { + const response = await axios.get("/ipv6/simplify/" + ipv6, { + headers: { + Authorization: `Bearer ${Cookies.get("access_token")}`, + }, + }); + const data = response.data; + if (response.status === 200) { + setRes(data.ipv6); + } + } catch (error: unknown) { + // const axiosError = error as AxiosError; + // if ( + // axiosError.response?.status === 400 || + // axiosError.response?.status === 404 + // ) { + // setError("Nom d'utilisateur ou mot de passe incorrect"); + // } else if (axiosError.response?.status === 403) { + // setError("Erreur lors de la connexion"); + // } else { + // setError("Erreur lors de la connexion"); + // } + } + }; + + 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}> + IPv6 + + +
+ Introduction + + + IPv6 (Internet Protocol version 6) est une version du protocole Internet (IP). + Cette version a été développé pour remplacer IPv4 (Internet Protocol version 4) qui n'était plus suffisant pour répondre aux besoins de l'Internet. + +
+ + Structure IPv6 + + + IPv6 est composé de 128 bits, contre 32 bits pour IPv4. Cela permet de créer un nombre d'adresses IP bien plus important. + L'IPv6 est représenté sous la forme de huit groupes de quatre chiffres hexadécimaux séparés par des deux-points. + + Exemple : 2001:0db8:85a3:0000:0000:8a2e:0370:7334 + + + Exercices + + Simplification d'une IPv6 + +
+ setIPv6(e.target.value)} + required + label="Adresse IPv6" + /> +