login page changes

medic · Jun 6, 2024 · a9de676 · a9de676
1 parent 4d186d0
commit a9de676
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 50 deletions.
diff --git a/src/liquid/app/view.html b/src/liquid/app/view.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title>CHT User Management Tool</title>
+  <title>CHT User Management</title>
   <script src="/public/scripts/htmx.min.js"></script>
   <script src="/public/scripts/sse.js"></script>
   <script src="/public/scripts/jquery-3.7.1.slim.min.js"></script>

diff --git a/src/liquid/auth/authentication_form.html b/src/liquid/auth/authentication_form.html
@@ -1,39 +1,46 @@
-<form id="form_authenticate" hx-post="/authenticate" hx-target="this" hx-swap="outerHTML">
-  <!-- want to use tiles, they are super weird with forms in them -->
-  <div class="box" style="margin: 20px; padding: 50px;">
-    {% if errors %}
-      <span class='tag is-warning is-overlay'>Login Failed. Please Try Again</span>
-    {% endif %}
+<form id="form_authenticate" hx-post="/authenticate" hx-indicator="#login-spinner"
+  hx-on="htmx:beforeRequest:clearErrorMsg()"
+  hx-disabled-elt="button#login-btn"
+  hx-target="this" hx-swap="outerHTML">
 
-    <div class="field">
-      <label class="label">Instance</label>
-      <div class="control">
-        <div class="select is-fullwidth">
-          <select name="domain">
-              {% for domain in domains %}
-                <option value="{{ domain.domain }}">{{ domain.friendly }}</option>
-              {% endfor %}
-          </select>
-        </div>
-      </div>
+  {%if errors %}
+    <div id="error-msg" class="error-bg white-text error-message">
+      <span>Login Failed. Please Try Again</span>
     </div>
-    <div class="field">
-      <label class="label">Credentials</label>
-      <div class="control">
-          <input name="username" class="input" type="text" placeholder="username">
-      </div>
-    </div>
-    <div class="field">
-        <div class="control">
-            <input name="password" class="input" type="password" placeholder="password">
-        </div>
+  {%endif%}
+
+  <div>
+    <label>Instance</label>
+    <div class="custom-select">
+      <select class="dropdown-input" name="domain">
+        {% for domain in domains %}
+        <option value="{{ domain.domain }}">{{ domain.friendly }}</option>
+        {% endfor %}
+      </select>
     </div>
-    <div class="field is-grouped is-grouped-right">
-      <p class="control">
-        <button class="button is-primary">
-          Sign In
-        </button>
-      </p>
+  </div>
+
+  <div>
+    <label>Credentials</label>
+    <div>
+      <div><input name="username" type="text" placeholder="Username" required></div>
+      <div><input name="password" type="password" placeholder="Password" required></div>
     </div>
   </div>
+
+  <div>
+    <button class="login-btn" id="login-btn">Login
+      <span id="login-spinner" class="spinner-sm btn-spinner"></span>
+    </button>
+  </div>
+
 </form>
+
+<script>
+  function clearErrorMsg() {
+    const errMsg = document.getElementById('error-msg');
+    if (errMsg){
+      document.getElementById('error-msg').style.display = 'none';
+    }
+  }
+</script>
diff --git a/src/liquid/auth/view.html b/src/liquid/auth/view.html
@@ -1,22 +1,19 @@
+<!DOCTYPE html>
 <html>
 
 <head>
-    <title>CHT User Management Tool</title>
-    <script src="/public/scripts/htmx.min.js"></script>
-    <link rel="stylesheet" href="/public/bulma.min.css" />  
+  <title>CHT User Management</title>
+  <script src="/public/scripts/htmx.min.js"></script>
+  <link rel="stylesheet" href="/public/css/styles.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 
 <body>
-  <div class="container is-fluid">
-
-    <section class="hero">
-      <div class="hero-body">
-        <p class="title">
-          <img src="{{ logo }}" />
-          User Management Tool
-        </p>
-      </div>
-    </section>
+  <div class="content">
+    <div class="login-branding">
+      <img class="logo" src="{{ logo }}">
+      <p>CHT User Management</p>
+    </div>
     {% include "auth/authentication_form.html" %}
   </div>
 </body>

diff --git a/src/public/css/styles.css b/src/public/css/styles.css
diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss
@@ -91,7 +91,6 @@ a.clear-btn {
     margin: 30px auto;
     display: block;
     height: 40px;
-    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.5);
 }
 
 .data-form {

diff --git a/src/scss/_input-forms.scss b/src/scss/_input-forms.scss
@@ -128,7 +128,10 @@ form {
     }
 
     .error-message {
-        padding: 10px;
+        padding: 5px;
+        margin-bottom: 15px;
+        text-align: center;
+        font-size: $font-medium;
         border-radius: $border-radius;
     }
 }

diff --git a/src/scss/_spinner.scss b/src/scss/_spinner.scss
@@ -41,6 +41,10 @@ $spinner-color: $_gray-dark;
     border: $spinner-width solid white;
     border-width: 2px;
     border-right-color: transparent;
+    &#login-spinner {
+      width: 21px;
+      height: 21px;
+    }
   }
 }