diff --git a/www/css/form.css b/www/css/form.css index 68bdf90..804f62f 100644 --- a/www/css/form.css +++ b/www/css/form.css @@ -9,7 +9,7 @@ main.form>section{ flex-grow:1; } -main.form>section>div{ +main.form>section>form{ display:block; position:relative; width:100%; @@ -22,11 +22,11 @@ main.form>section>div{ color: #e0e0e0; } -main.form>section>div>table{ +main.form>section>form>table{ width:100%; } -main.form>section>div>table label{ +main.form>section>form>table label{ display:block; position:relative; width:auto; @@ -39,7 +39,7 @@ main.form>section>div>table label{ color:#e0e0e0; } -main.form>section>div>table input[type="text"], main.form>section>div>table input[type="password"]{ +main.form>section>form>table input[type="text"],main.form>section>form>table input[type="password"]{ display:block; position:relative; width:100%; @@ -54,11 +54,11 @@ main.form>section>div>table input[type="text"], main.form>section>div>table inpu border:1px solid #303030; outline:0; } -main.form>section>div>table input.error{ +main.form>section>form>table input.error{ border:1px solid #603030; } -main.form>section>div>button{ +main.form>section>form>button,main.form>section>form>input[type="submit"]{ display:block; position:relative; width:100%; @@ -73,18 +73,18 @@ main.form>section>div>button{ border:0; outline:0; } -main.form>section>div>button.error{ +main.form>section>form>button.error,main.form>section>form>input[type="submit"].error{ border:1px solid #603030; } -main.form>section>div>button:hover{ +main.form>section>form>button:hover,main.form>section>form>input[type="submit"]:hover{ background-color:#383838; } -main.form>section>div>button:disabled{ +main.form>section>form>button:disabled,main.form>section>form>input[type="submit"]:disabled{ background-color:#2c2c2c; color:#606060; cursor:pointer; } -main.form>section>div input[type="checkbox"] { +main.form>section>form input[type="checkbox"] { height:1.5em; } diff --git a/www/css/ui.css b/www/css/ui.css index bcd15c4..d692715 100644 --- a/www/css/ui.css +++ b/www/css/ui.css @@ -45,6 +45,8 @@ main>table.list td:last-child{ main>table.list.session th:nth-child(1){width:10rem;} main>table.list.session th:nth-child(2){width:10rem;} +main>table.list.session-resume th:nth-child(1){width:10rem;} + main>table.list.challenge th:nth-child(2){width:10rem;} main>table.list td:last-child>button{ diff --git a/www/js/scene.js b/www/js/scene.js index ecd9118..ddf2821 100644 --- a/www/js/scene.js +++ b/www/js/scene.js @@ -26,14 +26,20 @@ const SCENES = { UI.mainnav([], [], { auth:true }); let container = document.createElement("section"); - let form = document.createElement("div"); + let form = document.createElement("form"); form.appendChild(UI.table(null, [ [ UI.label(LANG("handle"), "handle"), UI.textbox("handle", "") ], [ UI.label(LANG("secret"), "secret"), UI.password("secret") ], [ UI.label(LANG("invitation"), "code"), UI.password("code") ], ])); - let button = UI.button(LANG("register"), (event) => { + let button = UI.submit(LANG("register")); + button.setAttribute("id", "submit"); + form.appendChild(button); + + form.addEventListener("submit", (event) => { + event.preventDefault(); + let handle = document.getElementById("handle"); let secret = document.getElementById("secret"); let code = document.getElementById("code"); @@ -66,8 +72,6 @@ const SCENES = { if(code.value.length == 0) { code.setAttribute("class", "error"); } } }); - button.setAttribute("id", "submit"); - form.appendChild(button); container.appendChild(form); MAIN.appendChild(container); @@ -121,13 +125,19 @@ const SCENES = { UI.mainnav([], [], { auth:true }); let container = document.createElement("section"); - let form = document.createElement("div"); + let form = document.createElement("form"); form.appendChild(UI.table(null, [ [ UI.label(LANG("handle"), "handle"), UI.textbox("handle", "") ], [ UI.label(LANG("secret"), "secret"), UI.password("secret") ], ])); - let button = UI.button(LANG("login"), (event) => { + let button = UI.submit(LANG("login")); + button.setAttribute("id", "submit"); + form.appendChild(button); + + form.addEventListener("submit", (event) => { + event.preventDefault(); + let handle = document.getElementById("handle"); let secret = document.getElementById("secret"); @@ -154,9 +164,7 @@ const SCENES = { if(secret.value.length == 0) { secret.setAttribute("class", "error"); } } }); - button.setAttribute("id", "submit"); - form.appendChild(button); - + container.appendChild(form); MAIN.appendChild(container); MAIN.setAttribute("class", "form"); @@ -259,7 +267,7 @@ const SCENES = { let table = document.createElement("table"); table.setAttribute("id", "content"); - table.setAttribute("class", "list session"); + table.setAttribute("class", "list session-resume"); MAIN.appendChild(table); SCENE.refresh(); diff --git a/www/js/ui.js b/www/js/ui.js index b493999..612e3c3 100644 --- a/www/js/ui.js +++ b/www/js/ui.js @@ -11,6 +11,13 @@ const UI = { return button; }, + submit(text) { + let button = document.createElement("input"); + button.setAttribute("type", "submit"); + button.value = text; + return button; + }, + slider(id, callback) { let input = document.createElement("input"); if(id !== null) { input.setAttribute("id", id); }