Ajout systeme d'authentification

ago%!(EXTRA string=2 years) · f03d3b52cd
parent c91a3b6f72
commit f03d3b52cd
13 changed files with 416 additions and 40 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
--- a/css/auth.css
+++ b/css/auth.css
@ -0,0 +1,61 @@
+* {
+  background-color: #272727;
+}
+
+body {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.container-auth {
+  border-radius: 10px;
+  padding: 20px;
+  text-align: center;
+  max-width: 400px;
+  width: 100%;
+}
+
+h1 {
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 600;
+}
+
+h2 {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 20px;
+  color: #fa777c;
+}
+
+label {
+  font-weight: 700;
+  font-size: 12px;
+  color: #b5bac1;
+  line-height: 16px;
+}
+
+input {
+  color: #fff;
+  width: 100%;
+  height: 30px;
+  border-radius: 5px;
+  padding: 5px;
+}
+
+button {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  color: #fff;
+  margin-top: 10px;
+  padding: 10px 20px;
+  cursor: pointer;
+  border-radius: 10px;
+  width: 100%;
+  margin-bottom: 10px;
+}
--- a/css/global.css
+++ b/css/global.css
@ -0,0 +1,95 @@
+* {
+  font-family: "Inter", sans-serif;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: #272727;
+}
+
+body,
+html {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Menu */
+.menu {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.title-section {
+  color: white;
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+}
+
+.title-section img {
+  max-width: 80px;
+  max-height: 50px;
+}
+
+.page-change-button {
+  padding-right: 10px;
+}
+
+.page-change-button button {
+  margin: 2px;
+  color: black;
+  background-color: white;
+  border: 1px solid white;
+  border-radius: 10px;
+}
+
+.page-change-button button:hover {
+  border-color: #eab308;
+  background-color: #eab308;
+  transition: all 1s;
+}
+
+main {
+  flex: 1;
+}
+
+/* Footer */
+footer {
+  color: white;
+}
+
+footer p {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0px;
+}
+
+/* Canvas system
+#canvas-system {
+  border: 1px solid white;
+}
+
+/* Login modal */
+/* #loginModal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px black;
+  z-index: 1000;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+} */
+
+/* #loginModal p {
+  margin-top: -10px;
+}
+
+#loginModal input {
+  margin-bottom: 10px;
+} */
--- a/img/galaxy.png
+++ b/img/galaxy.png
--- a/img/logo.png
+++ b/img/logo.png
--- a/index.html
+++ b/index.html
@ -1,16 +1,47 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script
-      src="https://code.jquery.com/jquery-3.7.1.min.js"
-      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
-      crossorigin="anonymous"
-    ></script>
-    <script type="module" src="./scripts/main.js" defer></script>
-    <title>SpaceTraders</title>
-  </head>
-  <body></body>
-</html>
+<html lang="fr" class="html-index">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet" />
+  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
+    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+  <script type="module" src="scripts/main.js" defer></script>
+  <link rel="stylesheet" href="/css/global.css" />
+  <link rel="icon" href="img/logo.png" />
+  <title>SpaceTraders</title>
+</head>
+
+<body>
+  <header id="header">
+    <div class="menu">
+      <div class="title-section">
+        <img src="img/logo.png" alt="Logo AppleTech.svg" />
+        <p>SpaceTraders</p>
+      </div>
+      <div class="page-change-button">
+        <button id="btn-agent">Mon agent</button>
+        <button id="btn-contract">Mes contracts</button>
+        <button id="btn-faction">Ma faction</button>
+        <button id="btn-ship">Mes vaiseaux</button>
+        <button id="btn-system">Systeme</button>
+      </div>
+    </div>
+    <hr />
+  </header>
+
+  <main>
+    <p>PAGE D'ACCEUIL</p>
+  </main>
+
+  <footer id="footer">
+    <hr />
+    <p>SpaceTrader &copy; 2023</p>
+  </footer>
+</body>
+
+</html>
--- a/login.html
+++ b/login.html
@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="fr" class="html-index">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet" />
+  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
+    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+  <script type="module" src="/scripts/main.js" defer></script>
+  <link rel="stylesheet" href="/css/auth.css" />
+  <link rel="icon" href="img/logo.png" />
+  <title>SpaceTraders</title>
+</head>
+
+<body>
+  <main>
+    <div className="container-auth">
+      <h1>Connexion</h1>
+      <h2 id="error">
+        <h2>
+
+          <div className="input-auth">
+            <label>TOKEN</label>
+            <input type="text" id="input-token" />
+          </div>
+
+          <button id="btn-login">Connexion</button>
+
+          <a href="/register.html">S'inscrire</a>
+    </div>
+  </main>
+</body>
+
+</html>
--- a/register.html
+++ b/register.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="fr" class="html-index">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet" />
+  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
+    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+  <script type="module" src="/scripts/main.js" defer></script>
+  <link rel="stylesheet" href="/css/auth.css" />
+  <link rel="icon" href="img/logo.png" />
+  <title>SpaceTraders</title>
+</head>
+
+<body>
+  <main>
+    <div className="container-auth">
+      <h1>S'inscrire</h1>
+      <h2 id="error">
+        <h2>
+
+          <div className="input-auth">
+            <label>SYMBOL</label>
+            <input type="text" id="input-symbol" />
+          </div>
+
+          <div className="input-auth">
+            <label>FACTION</label>
+            <input type="text" id="input-faction" />
+          </div>
+
+          <button id="btn-register">S'inscrire</button>
+
+          <a href="/login.html">Se connecter</a>
+    </div>
+  </main>
+</body>
+
+</html>
--- a/scripts/api/agent.js
+++ b/scripts/api/agent.js
@ -1,3 +1,5 @@
+"use strict";
+
 export async function createAgent(symbol, faction) {
  let agent;

@ -14,7 +16,7 @@ export async function createAgent(symbol, faction) {
      agent = response.data;
    },
    error: function (error) {
-      console.log(error);
+      return error;
    },
  });

@ -34,7 +36,7 @@ export async function getAgent(token) {
      agent = response.data;
    },
    error: function (error) {
-      console.log(error);
+      return error;
    },
  });

--- a/scripts/api/systems.js
+++ b/scripts/api/systems.js
@ -1,3 +1,5 @@
+"use strict";
+
 export async function listSystems(limit, page) {
  let systems;

--- a/scripts/auth.js
+++ b/scripts/auth.js
@ -0,0 +1,58 @@
+"use strict";
+
+import { getAgent } from "./api/agent.js";
+import { createAgent } from "./api/agent.js";
+
+export async function login() {
+  let token = $('#input-token').val();
+
+  if (!token) {
+    $('#error').text('Token manquant');
+    return;
+  }
+
+  try {
+    await getAgent(token);
+    localStorage.setItem('token', token);
+    window.location.href = '/index.html';
+  } catch (error) {
+    $('#error').text('Token invalide');
+  }
+}
+
+
+export async function register() {
+
+  let symbol = $('#input-symbol').val();
+  if (!symbol) {
+    $('#error').text('Symbol manquant');
+    return;
+  }
+
+  let faction = $('#input-faction').val();
+  if (!faction) {
+    $('#error').text('Faction manquante');
+    return;
+  }
+
+  try {
+    await createAgent(symbol, faction);
+    localStorage.setItem('token', token);
+    window.location.href = '/index.html';
+  } catch {
+    $('#error').text('Symbol ou faction invalide');
+  }
+}
+
+export async function isLogin() {
+  let token = localStorage.getItem('token');
+
+  if (!token) return false;
+
+  try {
+    await getAgent(token);
+    return true;
+  } catch {
+    return false;
+  }
+}
--- a/scripts/main.js
+++ b/scripts/main.js
@ -1,29 +1,22 @@
 "use strict";

-import { createAgent } from "./agent.js";
-import { getAgent } from "./agent.js";
-import { listAgents } from "./agent.js";
-import { getPublicAgent } from "./agent.js";
-
-import { listSystems } from "./systems.js";
-import { getSystem } from "./systems.js";
-import { listWaypointsInSystem } from "./systems.js";
-import { getWaypoint } from "./systems.js";
-import { getMarket } from "./systems.js";
-
-const token =
-  "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiVEVTVDUzNTYiLCJ2ZXJzaW9uIjoidjIuMS4yIiwicmVzZXRfZGF0ZSI6IjIwMjMtMTEtMTgiLCJpYXQiOjE3MDA4MzEzOTEsInN1YiI6ImFnZW50LXRva2VuIn0.H4C3rNwgaBf6ych4txV7WO3jwt-ZAsb6jWSnQ3EMZfO7BgVbUW00a3uMtiQ7qCBuZ91YnmtUL8PZSRnR1RzCAjUd6Y64Kwt8cARgSZ56a08zIreXQ66WsXpm-pVXHKlrD7LeA9sHzZGhD9yADnghbJmCy6UoiYhgr8I7OwL9EIf-nb3B5l2UTchiNHTNmKjsggycQDDaK2yCcKXhy6rro8-ptogU5QFFYiIbshCiEos4Sc-CHbKci-DQpzWb9FcsNntb1PdZcm2hhjGDi4KD8Q1Ccvd-m1vTH4SwV1xt66tT5SMMuBA7nblsC2DlNV682PZi27XcpibMIyWoSQ938w";
-
-// const systemSym = "X1-KD70";
-// const waypointSym = "X1-KD70-AA1X";
+import { login } from './auth.js'
+import { register } from './auth.js'
+import { isLogin } from './auth.js';

 $(document).ready(async function () {
-  let systemSymbol = await listSystems(1, 1);
-  systemSymbol = systemSymbol[0].symbol;
-
-  let waypointSymbol = await listWaypointsInSystem(1, 1, systemSymbol);
-  waypointSymbol = waypointSymbol[0].symbol;
+    if (document.URL.includes('login.html')) {
+        $('#btn-login').on('click', () => {
+            login();
+        });
+        return;
+    }
+    if (document.URL.includes('register.html')) {
+        $('#btn-register').on('click', () => {
+            register();
+        })
+        return;
+    }

-  let market = await getMarket(systemSymbol, waypointSymbol, token);
-  console.log(market);
+    if (!await isLogin()) window.location.href = '/login.html';
 });
--- a/scripts/system.js
+++ b/scripts/system.js
@ -0,0 +1,50 @@
+"use strict";
+
+// let canvas = document.getElementById("canvas-system");
+// let ctx = canvas.getContext("2d");
+
+// window.addEventListener("resize", function () {
+//   resizeCanvas(canvas, ctx);
+// });
+
+// resizeCanvas(canvas, ctx);
+
+// let offset = {
+//   x: 0,
+//   y: 0,
+// };
+
+// drawSystem(canvas, ctx, offset);
+
+// canvas.addEventListener("mousedown", function (event) {
+//   let rec = canvas.getBoundingClientRect();
+//   let mousePos = { x: event.clientX - rec.x, y: event.clientY - rec.y };
+//   offset.x = mousePos.x;
+//   offset.y = mousePos.y;
+//   drawSystem(canvas, ctx, offset);
+// });
+
+// async function drawSystem(canvas, ctx, offset) {
+//   let waypoints = await listWaypointsInSystem(20, 1, "X1-KD70");
+//   ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+//   waypoints.forEach((waypoint) => {
+//     ctx.beginPath();
+//     ctx.arc(waypoint.x, waypoint.y, 10, 0, Math.PI * 2, false);
+//     ctx.fill();
+//     ctx.closePath();
+//   });
+// }
+
+// function resizeCanvas(canvas, ctx) {
+//   let header = document.getElementById("header");
+//   let footer = document.getElementById("footer");
+
+//   let availableHeight =
+//     window.innerHeight - header.clientHeight - footer.clientHeight;
+
+//   canvas.width = window.innerWidth - 18;
+//   canvas.height = availableHeight - 20;
+
+//   ctx.translate(canvas.width / 2, canvas.height / 2);
+// }