From 569a190f2f3f8cb399d22502cf355ba4e0bf85f2 Mon Sep 17 00:00:00 2001 From: Pierre Jarriges <pierre.jarriges@tutanota.com> Date: Wed, 5 Oct 2022 17:40:57 +0200 Subject: [PATCH] admin app js css files --- admin_app/auth/index.html | 5 +++- admin_app/auth/index.js | 1 + admin_app/login/index.html | 11 ++++---- admin_app/login/index.js | 11 ++++++++ admin_app/style.css | 55 ++++++++++++++++++++++++++++++++++++++ default_assets/admin.css | 18 ------------- default_assets/admin.js | 10 ------- 7 files changed, 77 insertions(+), 34 deletions(-) create mode 100644 admin_app/auth/index.js create mode 100644 admin_app/login/index.js create mode 100644 admin_app/style.css delete mode 100644 default_assets/admin.css delete mode 100644 default_assets/admin.js diff --git a/admin_app/auth/index.html b/admin_app/auth/index.html index b40b6ea..87a1f98 100644 --- a/admin_app/auth/index.html +++ b/admin_app/auth/index.html @@ -1,3 +1,5 @@ +<!DOCTYPE html> + <html lang="en"> <head> @@ -5,11 +7,12 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Krustacea | Admin dashboard</title> + <link rel="stylesheet" href="/admin_app/style.css"> </head> <body> ADMIN Dahsboard </body> -<script src='/assets/default/admin.js'></script> +<script src="/admin_app/auth/index.js"></script> </html> \ No newline at end of file diff --git a/admin_app/auth/index.js b/admin_app/auth/index.js new file mode 100644 index 0000000..cb44693 --- /dev/null +++ b/admin_app/auth/index.js @@ -0,0 +1 @@ +console.log("Admin board") \ No newline at end of file diff --git a/admin_app/login/index.html b/admin_app/login/index.html index 8ebf404..52bdbed 100644 --- a/admin_app/login/index.html +++ b/admin_app/login/index.html @@ -1,3 +1,4 @@ +<!DOCTYPE html> <html lang='en' prefix='og: https://ogp.me/ns#'> <head> @@ -5,22 +6,22 @@ <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Krustacea - Admin Login</title> - <link rel='stylesheet' href='/assets/default/admin.css'> + <link rel="stylesheet" href="/admin_app/style.css"> </head> <body> <form id='admin-login-form'> - <div> + <div class="input-group"> <label for='username'>Admin Id</label> <input type='text' name='username' /> </div> - <div> + <div class="input-group"> <label for='password'>Password</label> <input type='password' name='password' /> </div> - <input type='submit' /> + <input type='submit' value="Login" /> </form> </body> -<script src='/assets/default/admin.js'></script> +<script src='/admin_app/login/index.js'></script> </html> \ No newline at end of file diff --git a/admin_app/login/index.js b/admin_app/login/index.js new file mode 100644 index 0000000..ed73214 --- /dev/null +++ b/admin_app/login/index.js @@ -0,0 +1,11 @@ +document.getElementById("admin-login-form").onsubmit = function (e) { + e.preventDefault(); + fetch('/admin/login', { method: "POST", body: new URLSearchParams(new FormData(e.target)) }).then(res => { + if (res.status >= 200 && res.status < 400) { + window.location = "/admin_app/auth/"; + } else { + e.target.classList.add("error"); + } + + }).catch(err => console.log(err)) +} \ No newline at end of file diff --git a/admin_app/style.css b/admin_app/style.css new file mode 100644 index 0000000..f2ad173 --- /dev/null +++ b/admin_app/style.css @@ -0,0 +1,55 @@ +*+* { + box-sizing: border-box; + font-family: Lato, Arial, Helvetica, sans-serif +} + +body { + margin: 0; +} + +#admin-login-form { + display: grid; + width: 340px; + gap: 20px; + padding: 40px; + background-color: #c2ccd5; + position: relative; + margin: 0 auto; + top: 100px; +} + +#admin-login-form.error { + box-shadow: 0 0 6px rgb(158, 42, 7); +} + +#admin-login-form>.input-group { + display: flex; + align-items: center; + gap: 10px; +} + +#admin-login-form>.input-group>input { + padding: 4px; + flex: 1; +} + +#admin-login-form>.input-group>label { + padding: 4px; + font-weight: bold; + color: #444; + width: 100px; +} + +#admin-login-form>input[type=submit] { + padding: 10px; + color: #ddd; + background-color: #657583; + border: none; + font-weight: bold; + cursor: pointer; +} + +#admin-login-form>input[type=submit]:hover { + color: white; + background-color: #444c53; +} \ No newline at end of file diff --git a/default_assets/admin.css b/default_assets/admin.css deleted file mode 100644 index 97d8b53..0000000 --- a/default_assets/admin.css +++ /dev/null @@ -1,18 +0,0 @@ -*+* { - box-sizing: border-box; - font-family: Lato, Arial, Helvetica, sans-serif -} - -body { - margin: 0; -} - -#admin-login-form { - display: grid; - width: 300px; - gap: 20px; -} - -#admin-login-form input { - padding: 4px; -} \ No newline at end of file diff --git a/default_assets/admin.js b/default_assets/admin.js deleted file mode 100644 index 0b48213..0000000 --- a/default_assets/admin.js +++ /dev/null @@ -1,10 +0,0 @@ -document.getElementById('admin-login-form').onsubmit = function (e) { - e.preventDefault(); - fetch('/admin/login', { method: 'POST', body: new URLSearchParams(new FormData(e.target)) }).then(res => { - if (res.status >= 200 && res.status < 400) { - console.log(res) - window.location = '/admin_app/auth/'; - } - - }).catch(err => console.log(err)) -} \ No newline at end of file -- GitLab