From 66052f1f7fd485a920f691e4832a638081f9af93 Mon Sep 17 00:00:00 2001
From: anulax1225 <anulax1225@icloud.com>
Date: Fri, 22 Dec 2023 00:20:42 +0100
Subject: [PATCH] Added buttons only visible if loged in and registration

---
 css/style.css                 | 11 +++++
 css/ui.css                    |  3 +-
 html/template.html            |  6 +--
 html/templates/login.html     |  2 +-
 html/templates/reg.html       | 12 +++++
 html/templates/reg_modal.html | 10 ++++
 js/index.js                   |  8 ++--
 js/scripts/main.js            | 88 +++++++++++++++++++++++++++++++++--
 8 files changed, 126 insertions(+), 14 deletions(-)
 create mode 100644 html/templates/reg.html
 create mode 100644 html/templates/reg_modal.html

diff --git a/css/style.css b/css/style.css
index c7936a0..1594ca0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -29,6 +29,7 @@ body {
     flex-direction: column;
     align-items: center;
     border: 4px solid rgba(68, 68, 68, 0.575);
+    height: 100%;
 }
 
 .container .con-title {
@@ -153,6 +154,16 @@ footer {
     margin-bottom: 40px;
 }
 
+.show-token {
+    width: fit-content;
+    border: 2px solid black;
+    border-radius: 10px;
+    padding: 30px;
+    font-size: 5px;
+    white-space:pre-wrap;
+    word-break:break-word;
+}
+
 .my-modal #timer {
     text-align: center;
     border: 1px solid black;
diff --git a/css/ui.css b/css/ui.css
index c0c70f5..5fa1b91 100644
--- a/css/ui.css
+++ b/css/ui.css
@@ -2,4 +2,5 @@
 
 .modal-disable::backdrop {
     background-color: rgba(0, 0, 0, 0.493);
-}
\ No newline at end of file
+}
+
diff --git a/html/template.html b/html/template.html
index 75a8d2f..ccd2dc3 100644
--- a/html/template.html
+++ b/html/template.html
@@ -5,11 +5,9 @@
   </div>
   <p class="pseudo"></p>
   <ul class="nav-links">
-    <li class="nav-link smooth" id="contracts-link">Contracts</li>
     <li class="nav-link smooth" id="systems-link">System</li>
-    <li class="nav-link smooth" id="ships-link">Ships</li>
-    <li class="nav-link smooth" id="signin-link">Sign in</li>
-    <li class="nav-link smooth" id="signup-link">Sign up</li>
+    <li class="nav-link smooth" id="login-link">Log in</li>
+    <li class="nav-link smooth" id="reg-link">New Agent</li>
   </ul>
 </nav>
 <main id="block-content"></main>
diff --git a/html/templates/login.html b/html/templates/login.html
index 240d683..81974a4 100644
--- a/html/templates/login.html
+++ b/html/templates/login.html
@@ -2,7 +2,7 @@
 
 <div class="container smooth"> 
     <p class="con-title">Login</p>
-    <input type="text" placeholder="agent token" id="in-token" class="in-big">
+    <input type="text" placeholder="Agent token" id="in-token" class="in-big">
     <div class="grp-btn">
         <button class="btn btn-val" id="val">Validate</button>
         <button class="btn btn-cancel" id="cancel">Cancel</button>
diff --git a/html/templates/reg.html b/html/templates/reg.html
new file mode 100644
index 0000000..4d68dcd
--- /dev/null
+++ b/html/templates/reg.html
@@ -0,0 +1,12 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+
+<div class="container smooth"> 
+    <p class="con-title">New Agent</p>
+    <input type="text" placeholder="Name" id="in-name" class="in-big">
+    <input type="text" placeholder="Faction" id="in-faction" class="in-big">
+    <div class="grp-btn">
+        <button class="btn btn-val" id="val">Validate</button>
+        <button class="btn btn-cancel" id="cancel">Cancel</button>
+    </div>
+    <div class="errors"></div>
+</div>
\ No newline at end of file
diff --git a/html/templates/reg_modal.html b/html/templates/reg_modal.html
new file mode 100644
index 0000000..09aadfa
--- /dev/null
+++ b/html/templates/reg_modal.html
@@ -0,0 +1,10 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+
+<div class="my-modal">
+    <p class="modal-title">Login success</p>
+    <p class="show-token"></p>
+    <div>
+        <button id="ok" class="btn btn-val">Ok</button>
+        <button id="forget" class="btn btn-cancel">Forget agent</button>
+    </div>
+</div>
diff --git a/js/index.js b/js/index.js
index 6b93806..bb6f4ba 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,11 +1,9 @@
 // Copyright © 2023 Entreprise SkamKraft
 'use strict';
 import { TemplateEngine } from "./skama_code/ui/templeting_engine.js";
-import { login } from "./scripts/main.js";
+import { home } from "./scripts/main.js";
 
 let temp_engine = new TemplateEngine("html");
-login(temp_engine);
+home(temp_engine);
+
 
-temp_engine.add_event("#signin-link", "click", () => {
-    login(temp_engine);
-});
diff --git a/js/scripts/main.js b/js/scripts/main.js
index 9b8c309..0979942 100644
--- a/js/scripts/main.js
+++ b/js/scripts/main.js
@@ -3,13 +3,95 @@ import { Auth } from "../skama_code/auth/auth.js";
 
 let my_agent = null;
 
-function home(temp_engine) {
+function init_menu(temp_engine) {
+    temp_engine.add_event("#reg-link", "click", () => {
+        reg(temp_engine);
+    });
+    temp_engine.add_event("#login-link", "click", () => {
+        login(temp_engine);
+    });
+    temp_engine.add_event(".nav-brand", "click", () => {
+        home(temp_engine);
+    });
+}
+
+function loged_links() {
+    $(".nav-links").prepend(`
+        <li class="nav-link smooth" id="contracts-link">Contracts</li>
+        <li class="nav-link smooth" id="ships-link">Ships</li>
+    `);
+}
+
+function menu_mod(temp_engine) {
+    init_menu(temp_engine);
+    if(my_agent) {
+        $(".pseudo").text(`Agent name : ${my_agent.name}`);
+        loged_links();
+    }
+}
+
+export function home(temp_engine) {
+    temp_engine.after_render(menu_mod);
     temp_engine.render("templates/home.html");
 }
 
+export function reg(temp_engine) {
+    let active = false;
+    let auth = new Auth(true);
+    let modal = new Modal("reg-modal", temp_engine);
+
+    function render_reg() {
+        temp_engine.render(`templates/reg.html`);
+        modal.load("templates/reg_modal.html")
+    }
+
+    modal.add_class("ext-modal");
+    temp_engine.after_render(menu_mod);
+
+    render_reg();
+
+    temp_engine.add_event("#ok", "click", () => {
+        home(temp_engine);
+    });
+
+    temp_engine.add_event("#forget", "click", () => {
+        my_agent = null;
+        auth.unload_token();
+        modal.close();
+        render_reg();
+    });
+
+    temp_engine.add_event("#val", "click", () => {
+        if (!active) {
+            active = true;
+            let name = $("#in-name").val();
+            let faction = $("#in-faction").val();
+            auth.register({
+                name: name,
+                faction: faction
+            });
+        }
+    });
+
+    temp_engine.add_event("#cancel", "click", () => {
+        $("#in-name").val("");
+        $("#in-faction").val("");
+    });
 
-function menu_mod() {
-    if(my_agent && my_agent.name) $(".pseudo").text(`Agent name : ${my_agent.name}`);
+    auth.done((agent) => {
+        $(".show-token").text(agent.token);
+        modal.show();
+        my_agent = agent;
+        active = false;
+    }).fail((errs) => {
+        $(".errors").html("");
+        errs.forEach(err => {
+            $(".errors").append(`
+                <p>${err}</p>
+            `);
+        });
+        active = false;
+    });
 }
 
 export function login(temp_engine) {