anulax
/
skamkraft.anulax.ch
1
0
Fork 0
Code Issues Pull Requests Packages project_board Releases Wiki Activity

Ajout systeme d'authentificationƒ

Browse Source
michael
Makaci Michael Gabriel ago%!(EXTRA string=1 year)
parent c91a3b6f72
commit f03d3b52cd
13 changed files with 416 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      .vscode/settings.json
  2. 61
      css/auth.css
  3. 95
      css/global.css
  4. BIN
      img/galaxy.png
  5. BIN
      img/logo.png
  6. 51
      index.html
  7. 38
      login.html
  8. 43
      register.html
  9. 6
      scripts/api/agent.js
  10. 2
      scripts/api/systems.js
  11. 58
      scripts/auth.js
  12. 39
      scripts/main.js
  13. 50
      scripts/system.js

3
.vscode/settings.json vendored
Unescape View File

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5502
}

61
css/auth.css
Unescape View File

@ -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;
}

95
css/global.css
Unescape View File

@ -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;
} */

BIN
img/galaxy.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
img/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

51
index.html
Unescape View File

@ -1,16 +1,47 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="fr" class="html-index">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script <link rel="preconnect" href="https://fonts.googleapis.com" />
src="https://code.jquery.com/jquery-3.7.1.min.js" <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet" />
crossorigin="anonymous" <script src="https://code.jquery.com/jquery-3.7.1.min.js"
></script> integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="module" src="./scripts/main.js" defer></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> <title>SpaceTraders</title>
</head> </head>
<body></body>
<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> </html>

38
login.html
Unescape View File

@ -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>

43
register.html
Unescape View File

@ -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>

6
scripts/agent.js → scripts/api/agent.js
Unescape View File

@ -1,3 +1,5 @@
"use strict";
export async function createAgent(symbol, faction) { export async function createAgent(symbol, faction) {
let agent; let agent;
@ -14,7 +16,7 @@ export async function createAgent(symbol, faction) {
agent = response.data; agent = response.data;
}, },
error: function (error) { error: function (error) {
console.log(error); return error;
}, },
}); });
@ -34,7 +36,7 @@ export async function getAgent(token) {
agent = response.data; agent = response.data;
}, },
error: function (error) { error: function (error) {
console.log(error); return error;
}, },
}); });

2
scripts/systems.js → scripts/api/systems.js
Unescape View File

@ -1,3 +1,5 @@
"use strict";
export async function listSystems(limit, page) { export async function listSystems(limit, page) {
let systems; let systems;

58
scripts/auth.js
Unescape View File

@ -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;
}
}

39
scripts/main.js
Unescape View File

@ -1,29 +1,22 @@
"use strict"; "use strict";
import { createAgent } from "./agent.js"; import { login } from './auth.js'
import { getAgent } from "./agent.js"; import { register } from './auth.js'
import { listAgents } from "./agent.js"; import { isLogin } from './auth.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";
$(document).ready(async function () { $(document).ready(async function () {
let systemSymbol = await listSystems(1, 1); if (document.URL.includes('login.html')) {
systemSymbol = systemSymbol[0].symbol; $('#btn-login').on('click', () => {
login();
let waypointSymbol = await listWaypointsInSystem(1, 1, systemSymbol); });
waypointSymbol = waypointSymbol[0].symbol; return;
}
if (document.URL.includes('register.html')) {
$('#btn-register').on('click', () => {
register();
})
return;
}
let market = await getMarket(systemSymbol, waypointSymbol, token); if (!await isLogin()) window.location.href = '/login.html';
console.log(market);
}); });

50
scripts/system.js
Unescape View File

@ -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);
// }
Write Preview
Loading…
Cancel
Save