diff --git a/css/auth.css b/css/auth.css new file mode 100644 index 0000000..cd6d4c2 --- /dev/null +++ b/css/auth.css @@ -0,0 +1,27 @@ +.auth-container { + height: inherit; + display: flex; + justify-content: center; + align-items: center; +} + +.auth{ + width: 300px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: var(--main-color); + padding: 30px; + border-radius: 5px; +} + +.auth-grp-label { + font-size: 20px; + display: flex; + justify-content: space-between; +} + +.errors { + color: red; +} \ No newline at end of file diff --git a/css/global.css b/css/global.css new file mode 100644 index 0000000..38548e3 --- /dev/null +++ b/css/global.css @@ -0,0 +1,129 @@ +@font-face { + font-family: pixellari; + src: url("/assets/fonts/Pixellari.ttf"); +} + +:root { + --text-color: white; + --text-familly: pixellari; + --main-color: black; + --sec-color: rgba(69, 128, 255, 0.842); +} + +body{ + background-image: url("/assets/img/background.png"); + background-repeat: no-repeat; + background-size: 100%; + overflow-x: hidden; + font-family: var(--text-familly); + color: var(--text-color); + margin: 0; + padding: 0; +} + +button{ + font-family: var(--text-familly); + color: var(--text-color); +} + +input{ + font-family: var(--text-familly); + color: var(--text-color); +} + +select { + font-family: var(--text-familly); + color: var(--text-color); +} + +#block-content{ + margin: 0; + padding: 0; + width: 100%; + height: 100vh; +} + +.modal-disable::backdrop { + background-color: rgba(0, 0, 0, 0.493); +} + +.ext-modal[open] { + animation: myFadeIn 0.5s ease normal; + } + + @keyframes myFadeIn{ + from { + bottom: 100%; + } + to { + bottom: 0%; + } +} + +.languettes { + right: -30px; + top: 25%; + width: 80px; + position: absolute; + display: flex; + flex-direction: column; + align-items:flex-end; +} +.languettes input{ + width: 100%; +} +.languettes input:hover{ + animation: slide-left; + position: relative; + animation-timing-function: ease; + animation-fill-mode: forwards; + animation-duration: 1s; +} + +@keyframes slide-left { + 0% {right: 0px; top: 0px;} + 100% {right: 25px; top: 0px;} +} + +.title{ + font-size: 50px; +} + +::placeholder { + color: var(--text-color); + } + +.base-input{ + margin: 5px; + padding: 10px; + border: none; + border-radius: 5px; + background-color: var(--sec-color); + font-size: 20px; +} +.base-input:active{ + background-color: var(--sec-color); + font-size: 20px; +} + +.base-btn{ + margin: 2px; + padding: 10px; + border: none; + border-radius: 5px; + background-color: var(--sec-color); + font-size: 20px; +} + +.base-btn:hover{ + box-shadow: 1px 1px 1px 0px rgba(88, 88, 252, 0.842); +} + +.base-select { + margin: 5px; + padding: 10px; + border: none; + border-radius: 3px; + background-color: var(--sec-color); + font-size: 15px; +} \ No newline at end of file diff --git a/html/auth/login.html b/html/auth/login.html deleted file mode 100644 index e69de29..0000000 diff --git a/html/template.html b/html/template.html index df1afea..6a3c791 100644 --- a/html/template.html +++ b/html/template.html @@ -1,16 +1,11 @@ -
- - - - - +
-
diff --git a/html/templates/auth/login.html b/html/templates/auth/login.html new file mode 100644 index 0000000..152fdb0 --- /dev/null +++ b/html/templates/auth/login.html @@ -0,0 +1,19 @@ + +
+
+

Login

+ +
+

Remember me ?

+ +
+
+ + +
+
+ +
+
+
+
diff --git a/html/templates/auth/register.html b/html/templates/auth/register.html new file mode 100644 index 0000000..bf813dc --- /dev/null +++ b/html/templates/auth/register.html @@ -0,0 +1,23 @@ + +
+
+

New Agent

+ + +
+

Remember me ?

+ +
+
+ + +
+
+ +
+
+
+
\ No newline at end of file diff --git a/html/templates/home.html b/html/templates/home.html new file mode 100644 index 0000000..89abad0 --- /dev/null +++ b/html/templates/home.html @@ -0,0 +1,3 @@ +
+

Home

+
\ No newline at end of file diff --git a/html/templates/modal_profile.html b/html/templates/modal_profile.html new file mode 100644 index 0000000..33dd69c --- /dev/null +++ b/html/templates/modal_profile.html @@ -0,0 +1,3 @@ +
+

Profile

+
diff --git a/index.html b/index.html index c33d960..5ec4a93 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,8 @@ + + diff --git a/js/controllers/home.js b/js/controllers/home.js index e69de29..90821fe 100644 --- a/js/controllers/home.js +++ b/js/controllers/home.js @@ -0,0 +1,6 @@ +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"); +} diff --git a/js/controllers/login.js b/js/controllers/login.js index 60e434e..050eb7a 100644 --- a/js/controllers/login.js +++ b/js/controllers/login.js @@ -1,7 +1,8 @@ import { Auth } from "../skama_code/auth/auth.js"; -import { My } from "../skama_code/api/agent.js"; +import { My } from "../skama_code/commun/my.js"; import home from "./home.js"; import menu_mod from "./menu_mod.js"; +import register from "./register.js"; export default function login(temp_engine) { const auth = new Auth(); @@ -20,6 +21,10 @@ export default function login(temp_engine) { $("#in-token").val(""); $("#in-remember").prop("checked", false); }); + + temp_engine.add_event("#btn-register", "click", () => { + register(temp_engine); + }); }); auth.done((agent) => { @@ -34,5 +39,5 @@ export default function login(temp_engine) { }); }); - temp_engine.render(`templates/auth/login.html`); + temp_engine.render("templates/auth/login.html"); } diff --git a/js/controllers/menu_mod.js b/js/controllers/menu_mod.js index 2b03e1e..4e2e771 100644 --- a/js/controllers/menu_mod.js +++ b/js/controllers/menu_mod.js @@ -1,27 +1,20 @@ -import { My } from "../skama_code/api/agent.js"; +import { My } from "../skama_code/commun/my.js"; import login from "./login.js"; +import profile from "./profile.js"; -function init_menu(temp_engine) { - temp_engine.add_event("#login-link", "click", () => { - login(temp_engine); - }); -} - -function loged_links() { +function loged_links(temp_engine) { $("#links").html(` - - - `); + + + `); + temp_engine.add_event("#profile-link", "click", () => { + profile(temp_engine); + }); } -export default function menu_mod(temp_engine) { - init_menu(temp_engine); - if (My.agent) { - loged_links(); - } else { - unloged_links(); - } +export default (temp_engine) => { + if(My.agent) loged_links(temp_engine); } diff --git a/js/controllers/profile.js b/js/controllers/profile.js new file mode 100644 index 0000000..c090d2b --- /dev/null +++ b/js/controllers/profile.js @@ -0,0 +1,9 @@ +import { Modal } from "../skama_code/ui/modal.js" + +export default function profile(temp_engine) { + let modal = new Modal("profile-modal", temp_engine); + modal.load("templates/modal_profile.html"); + modal.after_load((temp_engine) => { + modal.show(); + }); +} \ No newline at end of file diff --git a/js/controllers/register.js b/js/controllers/register.js new file mode 100644 index 0000000..f48228d --- /dev/null +++ b/js/controllers/register.js @@ -0,0 +1,58 @@ +import { Auth } from "../skama_code/auth/auth.js"; +import { My } from "../skama_code/commun/my.js"; +import { Faction } from "../skama_code/api/faction.js"; +import home from "./home.js"; +import login from "./login.js"; +import menu_mod from "./menu_mod.js"; + +export default function register(temp_engine) { + let auth = new Auth(); + + temp_engine.after_render((temp_engine) => { + menu_mod(temp_engine); + + Faction.list_all((factions) => { + factions.forEach((faction) => { + let option; + if (faction.isRecruiting) { + option = ``; + } else { + option = ``; + } + + $("#group-faction").append(option); + }); + }); + + temp_engine.add_event("#btn-register", "click", () => { + const is_checked = $("#in-remember").is(":checked"); + const symbol = $("#in-name").val(); + const faction = $("#in-faction").val(); + auth.store = is_checked; + auth.register({ name: symbol, faction: faction }); + }); + + temp_engine.add_event("#btn-cancel", "click", () => { + $("#in-name").val(""); + $("#in-remember").prop("checked", false); + }); + + temp_engine.add_event("#btn-log", "click", () => { + login(temp_engine); + }); + }); + + auth.done((agent) => { + My.agent = agent; + home(temp_engine); + }); + + auth.fail((errors) => { + $(".errors").html(""); + errors.forEach((error) => { + $(".errors").append(`

${error}

`); + }); + }); + + temp_engine.render(`templates/auth/register.html`); +} \ No newline at end of file