Merge branch 'fix_auth_ui' of https://github.com/dave90/cheshire-cat-ai-core into dave90-fix_auth_ui

pieroit · pieroit · commit 6bd1043df104 · 2024-11-01T18:33:01.000+01:00
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>

Original file line number	Diff line number	Diff line change
`@@ -30,9 +30,10 @@ button {`
`30`	`30`	`background-color: #ccc;`
`31`	`31`	`color: white;`
`32`	`32`	`font-weight: bold;`
	`33`	`+ cursor: pointer;`
`33`	`34`	`}`
`34`	`35`
`35`		`-button:hover {`
	`36`	`+button.active {`
`36`	`37`	`background-color: #333;`
`37`	`38`	`}`
`38`	`39`