From 66052f1f7fd485a920f691e4832a638081f9af93 Mon Sep 17 00:00:00 2001 From: anulax1225 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 @@

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

Login

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

New Agent

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

+
+ + +
+
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(` + + + `); +} + +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(` +

${err}

+ `); + }); + active = false; + }); } export function login(temp_engine) {