Merge branch 'fix_auth_ui' of https://github.com/dave90/cheshire-cat-…

…ai-core into dave90-fix_auth_ui
cheshire-cat-ai · Nov 1, 2024 · 6bd1043 · 6bd1043
2 parents 38fff84 + 5cafad0
commit 6bd1043
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/core/cat/routes/static/core_static_folder/auth/auth.css b/core/cat/routes/static/core_static_folder/auth/auth.css
@@ -30,9 +30,10 @@ button {
     background-color: #ccc;
     color: white;
     font-weight: bold;
+    cursor: pointer;
 }
 
-button:hover {
+button.active {
     background-color: #333;
 }
 

diff --git a/core/cat/routes/static/core_static_folder/auth/login.html b/core/cat/routes/static/core_static_folder/auth/login.html
@@ -10,17 +10,20 @@
 <body>
     <form action="/auth/redirect" method="POST">
         <img id="logo" src="[[ url_for('core-static', path='/img/logo.svg') ]]">
+        <div class="error-message">
+            [[ error_message ]]
+        </div>
         <div>
-            <input type="text" id="username" name="username" required autofocus placeholder="Username">
+            <input type="text" id="username" name="username" oninput="toggleButtonColor()" required autofocus placeholder="Username">
         </div>
         <div>
-            <input type="password" id="password" name="password" required placeholder="Password">
+            <input type="password" id="password" name="password" oninput="toggleButtonColor()" required placeholder="Password">
         </div>
         <div>
             <input type="hidden" name="referer" value="[[ referer ]]">
         </div>
         <div>
-            <button type="submit">Login</button>
+            <button type="submit" id="submitLogin">Login</button>
         </div>
         {% if show_default_passwords %}
             Default users included out of the box:
@@ -32,10 +35,26 @@
         {% endif %}
         <div>
         </div>
-        <div class="error-message">
-            [[ error_message ]]
-        </div>
     </form>
 
+
+<script>
+    function toggleButtonColor() {
+            const button = document.getElementById('submitLogin');
+            const usernameValue = document.getElementById('username').value;
+            const passwordValue = document.getElementById('password').value;
+
+            if (usernameValue !== "" && passwordValue != "") {
+                button.disabled = false;
+                button.classList.add('active');
+            } else {
+                button.disabled = true;
+                button.classList.remove('active');
+
+            }
+        }
+</script>
 </body>
+
+
 </html>