6 files changed, 268 insertions, 0 deletions
diff --git a/graphs/js/oidc/complete/epita/index.html b/graphs/js/oidc/complete/epita/index.html
new file mode 100644
index 0000000..2706a33
--- /dev/null
+++ b/graphs/js/oidc/complete/epita/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<script defer src="./index.js" type="module"></script>
+		<link rel="stylesheet" href="../../style.css">
+	</head>
+	<body>
+		<div class="card-container">
+			<div class="img-container">
+				<img class="round" id="image"src="https://cri.epita.fr/photos/square/puff" alt="user" width="225" height="225"/>
+			</div>
+			<h1 id="name">Puff Puff</h1>
+			<h3 id="campus">Marseille</h3>
+			<p id ="grad-year">2059</p>
+			
+			<div class="info-container">
+				<div class="infos">
+					<h3>infos</h3>
+					<ul id="list">
+					</ul>
+				</div>
+			</div>
+			<div class="buttons">
+				<button class="primary" id="RequestBtn">
+					Request Infos
+				</button>
+				<button class="primary ghost" id="EndBtn">
+					End Session
+				</button>
+			</div>
+		</div>
+    </body>
+</html>
diff --git a/graphs/js/oidc/complete/epita/index.js b/graphs/js/oidc/complete/epita/index.js
new file mode 100644
index 0000000..513197c
--- /dev/null
+++ b/graphs/js/oidc/complete/epita/index.js
@@ -0,0 +1,40 @@
+window.END_SESSION_URL = "https://cri.epita.fr/end-session";
+const reqInfosBtn = document.getElementById("RequestBtn");
+const params = new URLSearchParams(window.location.search);
+const code = params.get("code");
+
+let form = new FormData();
+
+form.append("client_id", "assistants-atelier-js");
+form.append("redirect_uri", "http://localhost:8080/complete/epita/");
+form.append("grant_type", "authorization_code");
+form.append("code", code);
+const tokenEndpoint = "http://localhost:8080/auth-api";
+reqInfosBtn.addEventListener("click", async () => {
+    let response = await fetch(tokenEndpoint, {
+        method: "POST",
+        body: form,
+    });
+    const responsePretty = await response.json();
+    const token = responsePretty.id_token;
+    const content = token.split(".")[1];
+    const b64 = content.replace(/-/g, "+").replace(/_/g, "/");
+    const payload = JSON.parse(window.atob(b64));
+
+    document.getElementById("name").innerHTML = payload.name;
+    document.getElementById("campus").innerHTML = payload.zoneinfo;
+    document.getElementById("grad-year").innerHTML = payload.graduation_years;
+    document
+        .getElementById("image")
+        .setAttribute("src", payload.picture_square);
+    const ul = document.getElementById("list");
+    for (const group of payload.groups) {
+        const item = document.createElement("li");
+        item.innerHTML = group.slug + " " + group.name;
+        ul.appendChild(item);
+    }
+});
+
+document
+    .getElementById("EndBtn")
+    .addEventListener("click", () => window.location.replace(END_SESSION_URL));
diff --git a/graphs/js/oidc/main.html b/graphs/js/oidc/main.html
new file mode 100644
index 0000000..698eb6d
--- /dev/null
+++ b/graphs/js/oidc/main.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="./style.css">
+        <script defer src="./redirect.js"></script>
+	</head>
+	<body>
+        
+		<div class="card-container">
+			<div class="img-container">
+				<img class="round" src="https://cri.epita.fr/photos/square/puff" alt="user" width="225" height="225"/>
+			</div>
+			<h1>User Application</h1>
+			<h3>app</h3>
+			<p>Small application to display user informations<br/> Using ForgeID for Auth</p>
+
+            <div class="buttons">
+				<button class="primary" id="redirectBtn">
+					Sign-In
+				</button>
+			</div>
+		</div>
+    </body>
+</html>
+
diff --git a/graphs/js/oidc/redirect.js b/graphs/js/oidc/redirect.js
new file mode 100644
index 0000000..d063df3
--- /dev/null
+++ b/graphs/js/oidc/redirect.js
@@ -0,0 +1,17 @@
+const redirectBtn = document.getElementById("redirectBtn");
+
+const authQueryParams = {
+    client_id: "assistants-atelier-js",
+    scope: "epita profile picture",
+    redirect_uri: "http://localhost:8080/complete/epita/",
+    response_type: "code",
+};
+
+const authEndpoint = "https://cri.epita.fr/authorize";
+window.LOGIN_URL = new URL(
+    `?client_id=${authQueryParams.client_id}&scope=${authQueryParams.scope}&redirect_uri=${authQueryParams.redirect_uri}&response_type=${authQueryParams.response_type}`,
+    authEndpoint,
+);
+redirectBtn.addEventListener("click", () => {
+    window.location.replace(window.LOGIN_URL);
+});
diff --git a/graphs/js/oidc/server.js b/graphs/js/oidc/server.js
new file mode 100644
index 0000000..401b48f
--- /dev/null
+++ b/graphs/js/oidc/server.js
@@ -0,0 +1,33 @@
+const express = require("express");
+const { createProxyMiddleware } = require("http-proxy-middleware");
+
+const app = express();
+
+/**
+ * The requests sent to our local server running on http://localhost:8080
+ * will pass by the reverse proxy and be sent to a specified path.
+ *
+ * In our case,
+ * /auth-api -> https://cri.epita.fr/token
+ **/
+
+const path = `https://cri.epita.fr/token`;
+const proxyAuth = createProxyMiddleware("/auth-api", {
+    target: path,
+    changeOrigin: true,
+    pathRewrite: {
+        "^/auth-api": "",
+    },
+});
+
+app.get("/", (req, res) => {
+    res.sendFile("main.html", { root: "./" });
+});
+
+app.use(proxyAuth, express.static("./"));
+
+const port = 8080;
+
+app.listen(port, () => {
+    console.log(`Server is running at http://localhost:${port}`);
+});
diff --git a/graphs/js/oidc/style.css b/graphs/js/oidc/style.css
new file mode 100644
index 0000000..0433246
--- /dev/null
+++ b/graphs/js/oidc/style.css
@@ -0,0 +1,116 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	background-color: whitesmoke;
+	font-family: Montserrat, sans-serif;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 100vh;
+}
+
+h1 {
+	margin: 10px 0;
+    color: white;
+	word-break: break-all;
+}
+
+h3 {
+	margin: 5px 0;
+	text-transform: uppercase;
+    color: white;
+	word-break: break-all;
+}
+
+p {
+	font-size: 16px;
+	line-height: 21px;
+    color: white;
+	word-break: break-all;
+}
+
+.card-container {
+    background: linear-gradient(180deg, rgba(8,4,78,1) 0%, rgba(9,9,121,1) 51%, rgba(0,155,255,1) 100%);
+	box-shadow: 0px 20px 40px -10px rgba(0,0,0,0.75);
+	padding-top: 30px;	
+	width: 600px;
+	height: auto;
+	max-width: 100%;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	border-radius: 25px;
+}
+
+.img-container {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 6em;
+}
+
+.round {
+	border: 3px solid whitesmoke;
+	border-radius: 50%;
+	padding: 2px;
+}
+
+.buttons {
+	margin-top: 2em;
+}
+
+button {
+    margin-bottom: 10px;
+}
+
+button.primary {
+	background-color: whitesmoke;
+	border: 1px solid black;
+	border-radius: 3px;
+	color: #231E39;
+	font-family: Montserrat, sans-serif;
+	font-weight: 500;
+	padding: 10px 25px;
+}
+
+button.primary.ghost {
+	background-color: transparent;
+	color: black;
+}
+
+.info-container {
+    display: flex;
+    justify-content: center;
+}
+
+.infos {
+	background-color: #0a0a8a;
+    border-radius: 10px;
+	text-align: left;
+	padding: 15px;
+	margin-top: 30px;
+    width: 80%;
+    margin-bottom: 15px;
+}
+
+.infos ul {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+
+.infos ul li {
+	border: 2px solid whitesmoke;
+	border-radius: 5px;
+    color: white;
+	display: inline-block;
+	font-size: 14px;
+	margin: 0 7px 7px 0;
+	padding: 7px;
+}
+\ No newline at end of file