Added buttons only visible if loged in and registration

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;

css/ui.css

@@ -3,3 +3,4 @@
 .modal-disable::backdrop {
     background-color: rgba(0, 0, 0, 0.493);
 }
+

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>

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>

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>

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>

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

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);
 
-function menu_mod() {
-    if(my_agent && my_agent.name) $(".pseudo").text(`Agent name : ${my_agent.name}`);
+    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("");
+    });
+
+    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) {