Segmented functions for rendering pages in there own file

html/templates/login_modal.html

@@ -3,7 +3,7 @@
 <div class="my-modal">
     <p class="modal-title">Login success</p>
     <div>
-        <button id="ok" class="btn btn-val">Ok</button>
+        <button id="ok" class="btn btn-val">Continue</button>
         <button id="forget" class="btn btn-cancel">Forget agent</button>
     </div>
 </div>

html/templates/reg_modal.html

@@ -4,7 +4,7 @@
     <p class="modal-title">Login success</p>
     <p class="show-token"></p>
     <div>
-        <button id="ok" class="btn btn-val">Ok</button>
+        <button id="ok" class="btn btn-val">Continue</button>
         <button id="forget" class="btn btn-cancel">Forget agent</button>
     </div>
 </div>

js/index.js

@@ -1,7 +1,7 @@
 // Copyright © 2023 Entreprise SkamKraft
 'use strict';
 import { TemplateEngine } from "./skama_code/ui/templeting_engine.js";
-import { home } from "./scripts/main.js";
+import home from "./scripts/home.js";
 
 let temp_engine = new TemplateEngine("html");
 home(temp_engine);

js/scripts/home.js

@@ -0,0 +1,9 @@
+import menu_mod from "./menu_mod.js";
+
+export default function home(temp_engine) {
+    temp_engine.after_render(menu_mod);
+    temp_engine.render("templates/home.html");
+}
+
+
+

js/scripts/login.js

@@ -0,0 +1,54 @@
+import { Modal } from "../skama_code/ui/modal.js";
+import { Auth } from "../skama_code/auth/auth.js";
+import { My } from "../skama_code/api/agent.js";
+import home from "./home.js";
+import menu_mod from "./menu_mod.js";
+
+export default function login(temp_engine) {
+    let auth = new Auth(true);
+    let modal = new Modal("login-modal", temp_engine);
+
+    function render_login() {
+        temp_engine.render(`templates/login.html`);
+        modal.load("templates/login_modal.html")
+    }
+
+    modal.add_class("ext-modal");
+    temp_engine.after_render(menu_mod);
+
+    render_login();
+
+    temp_engine.add_event("#ok", "click", () => {
+        home(temp_engine);
+    });
+
+    temp_engine.add_event("#forget", "click", () => {
+        My.agent = null;
+        auth.unload_token();
+        modal.close();
+        render_login();
+    });
+
+    temp_engine.add_event("#val", "click", () => {
+        let token = $("#in-token").val();
+        auth.login(token);
+    });
+
+    temp_engine.add_event("#cancel", "click", () => {
+        $("#in-token").val("");
+    });
+
+    auth.done((agent) => {
+        modal.show();
+        My.agent = agent;
+    }).fail((errs) => {
+        $(".errors").html("");
+        errs.forEach(err => {
+            $(".errors").append(`
+                <p>${err}</p>
+            `);
+        });
+    });
+
+    auth.relog();
+}

js/scripts/main.js

@@ -1,154 +0,0 @@
-import { Modal } from "../skama_code/ui/modal.js";
-import { Auth } from "../skama_code/auth/auth.js";
-
-let my_agent = null;
-
-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 show_stats() {
-    $(".stats").html(`
-        <p>Agent name : ${my_agent.name}</p>
-        <p>Credits : ${my_agent.credits}</p>
-        <p>Ships : ${my_agent.ships_cpt}</p>
-        <p>Faction : ${my_agent.faction}</p>
-        <p>HQ : ${my_agent.hq}</p>
-    `);
-}
-
-function menu_mod(temp_engine) {
-    init_menu(temp_engine);
-    if(my_agent) {
-        show_stats();
-        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("");
-    });
-
-    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) {
-    let auth = new Auth(true);
-    let modal = new Modal("login-modal", temp_engine);
-
-    function render_login() {
-        temp_engine.render(`templates/login.html`);
-        modal.load("templates/login_modal.html")
-    }
-
-    modal.add_class("ext-modal");
-    temp_engine.after_render(menu_mod);
-
-    render_login();
-
-    temp_engine.add_event("#ok", "click", () => {
-        home(temp_engine);
-    });
-
-    temp_engine.add_event("#forget", "click", () => {
-        my_agent = null;
-        auth.unload_token();
-        modal.close();
-        render_login();
-    });
-
-    temp_engine.add_event("#val", "click", () => {
-        let token = $("#in-token").val();
-        auth.login(token);
-    });
-
-    temp_engine.add_event("#cancel", "click", () => {
-        $("#in-token").val("");
-    });
-
-    auth.done((agent) => {
-        modal.show();
-        my_agent = agent;
-    }).fail((errs) => {
-        $(".errors").html("");
-        errs.forEach(err => {
-            $(".errors").append(`
-                <p>${err}</p>
-            `);
-        });
-    });
-
-    auth.relog();
-}

js/scripts/menu_mod.js

@@ -0,0 +1,42 @@
+import { My } from "../skama_code/api/agent.js";
+import login from "./login.js";
+import reg from "./reg.js";
+import home from "./home.js";
+
+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 show_stats() {
+    $(".stats").html(`
+        <p>Agent name : ${My.agent.name}</p>
+        <p>Credits : ${My.agent.credits}</p>
+        <p>Ships : ${My.agent.ships_cpt}</p>
+        <p>Faction : ${My.agent.faction}</p>
+        <p>HQ : ${My.agent.hq}</p>
+    `);
+}
+
+export default function menu_mod(temp_engine) {
+    init_menu(temp_engine);
+    console.log(My.agent)
+    if(My.agent) {
+        show_stats();
+        loged_links();
+    }
+}

js/scripts/reg.js

@@ -0,0 +1,64 @@
+import { Modal } from "../skama_code/ui/modal.js";
+import { Auth } from "../skama_code/auth/auth.js";
+import { My } from "../skama_code/api/agent.js";
+import home from "./home.js";
+import menu_mod from "./menu_mod.js";
+
+export default 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("");
+    });
+
+    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;
+    });
+}