Proto login methode with token storage and erase

css/style.css

@@ -36,6 +36,23 @@ body {
     border-bottom: 2px solid black;
 }
 
+.btn {
+    padding: 10px;
+    font-size: 8px;
+    font-family: 'M42';
+    color: white;
+    border: none;
+    border-radius: 10px;
+}
+
+.btn-val {
+    background-color: rgba(0, 0, 255, 0.637);
+}
+
+.btn-cancel {
+    background-color: rgba(255, 0, 0, 0.699);
+}
+
 /*footer*/
 footer {
     position: fixed;
@@ -93,6 +110,25 @@ footer {
     border-radius: 10px;
 }
 
+.in-big {
+    font-family: 'M42';
+    font-size: 6px;
+    padding: 5px;
+    width: 20%;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    border: none;
+}
+
+.errors p {
+    background-color: rgba(255, 56, 56, 0.733);
+    border: 3px solid rgb(255, 111, 111);
+    padding: 10px;
+    color: white;
+    border-radius: 5px;
+    text-align: center;
+}
+
 /* Modal */
 .ext-modal {
     background-color: rgba(255, 255, 255, 0.767);
@@ -120,11 +156,3 @@ footer {
     margin-bottom: 10px;
 }
 
-.my-modal button {
-    background-color: rgba(0, 0, 0, 0.308);
-    justify-self: center;
-    border: none;
-    border-radius: 5px;
-    width: fit-content;
-    padding: 10px;
-}

html/templates/login.html

@@ -2,9 +2,10 @@
 
 <div class="container smooth"> 
     <p class="con-title">Login</p>
-    <input type="text" placeholder="agent token">
+    <input type="text" placeholder="agent token" id="in-token" class="in-big">
     <div class="grp-btn">
-        <button id="valid">Validate</button>
+        <button class="btn btn-val" id="val">Validate</button>
-        <button>Cancel</button>
+        <button class="btn btn-cancel" id="cancel">Cancel</button>
     </div>
+    <div class="errors"></div>
 </div>

html/templates/login_modal.html

@@ -0,0 +1,9 @@
+<!-- Copyright © 2023 Entreprise SkamKraft -->
+
+<div class="my-modal">
+    <p class="modal-title">Login success</p>
+    <div>
+        <button id="ok" class="btn btn-val">Ok</button>
+        <button id="forget" class="btn btn-cancel">Forget agent</button>
+    </div>
+</div>

html/templates/test_modal.html

@@ -1,7 +0,0 @@
-<!-- Copyright © 2023 Entreprise SkamKraft -->
-
-<div class="my-modal">
-    <p class="modal-title">Bienvenue dans cet modal</p>
-    <div id="timer"></div>
-    <button id="ok">OK</button>
-</div>

js/index.js

@@ -1,6 +1,47 @@
 // Copyright © 2023 Entreprise SkamKraft
 'use strict';
+import { Modal } from "./skama_code/ui/modal.js";
+import { TemplateEngine } from "./skama_code/ui/templeting_engine.js";
+import { AgentBuilder } from "./skama_code/api/agent.js";
+import { Auth } from "./skama_code/auth/auth.js";
 
-import tests from "./test/tests.js";
+let temp_engine = new TemplateEngine("html");
+let auth = new Auth(true);
+let modal = new Modal("login-modal", temp_engine);
+
+temp_engine.add_event("#ok", "click", () => {
+    temp_engine.render("templates/home.html");
+});
+
+temp_engine.add_event("#forget", "click", () => {
+    auth.unload_token();
+    modal.close();
+});
+
+temp_engine.add_event("#val", "click", () => {
+    let token = $("#in-token").val();
+    auth.login(token);
+});
+
+temp_engine.add_event("#cancel", "click", () => {
+    $("#in-token").val("");
+});
+
+temp_engine.render("templates/login.html");
+
+modal.add_class("ext-modal");
+modal.render("templates/login_modal.html");
+
+auth.done((agent) => {
+    modal.show();
+}).fail((errs) => {
+    $(".errors").html("");
+    errs.forEach(err => {
+        $(".errors").append(`
+            <p>${err}</p>
+        `);
+    });
+});
+
+auth.relog();
 
-tests.modal();