Added Disabled Login Button Feature to both Login Panels such that the Login Button is only enabled whenever both TextFields aren't empty as well as changed error message color for the Customer Login Panel.

yehiarasheed · yehiarasheed · commit 490e89dfc934 · 2025-02-16T12:32:39.000+02:00
diff --git a/WebApplication2/Customer/Pages/login.aspx b/WebApplication2/Customer/Pages/login.aspx
@@ -69,11 +69,17 @@
             margin-top: 10px;
         }
 
-        .login-container input[type="submit"]:hover,
+        /*.login-container input[type="submit"]:hover,*/
         .login-container .login-button:hover {
             background-color: #6a11cb;
         }
 
+        .login-container .login-button:disabled {
+            background-color: #2575fc; /* Original color */
+            filter: brightness(0.8); /* Darkens the button */
+            cursor: not-allowed;
+        }
+
         .forgot-password {
             margin-top: 10px;
             font-size: 12px;
@@ -86,7 +92,7 @@
         }
 
         .error-message {
-            color: #6a11cb;
+            color: #2e4c5d;
             font-size: 14px;
             margin-top: 10px;
         }
@@ -144,14 +150,14 @@
     <form id="form1" runat="server" class="login-container">
             <h2>Customer Login</h2>
             <!-- Mobile Number Field -->
-            <asp:TextBox ID="mnumber" runat="server" placeholder="Mobile Number" type="text"></asp:TextBox>
+            <asp:TextBox ID="mnumber" runat="server" placeholder="Mobile Number" type="text" onkeyup="validateForm()"></asp:TextBox>
 
             <!-- Password Field -->
-            <asp:TextBox ID="password" runat="server" placeholder="Password" type="password"></asp:TextBox>
+            <asp:TextBox ID="password" runat="server" placeholder="Password" type="password" onkeyup="validateForm()"></asp:TextBox>
 
             <!-- Login Button -->
             <div>
-            <asp:Button ID="buttonlogin" runat="server" onclick="loginm" Text="Login" CssClass="login-button" />
+                <asp:Button ID="buttonlogin" runat="server" onclick="loginm" Text="Login" CssClass="login-button" Enabled="false" />
             </div>
             <br />
             <div>
@@ -188,5 +194,21 @@
             showPopup();
         }
     }
+
+    // Function to validate the form
+    function validateForm() {
+        var mnumber = document.getElementById('<%= mnumber.ClientID %>').value;
+    var password = document.getElementById('<%= password.ClientID %>').value;
+        var buttonlogin = document.getElementById('<%= buttonlogin.ClientID %>');
+
+        if (mnumber.trim() !== "" && password.trim() !== "") {
+            buttonlogin.disabled = false;
+            buttonlogin.style.cursor = 'pointer';
+        } else {
+            buttonlogin.disabled = true;
+            buttonlogin.style.cursor = 'not-allowed';
+        }
+    }
+
 </script>
 </html>
diff --git a/WebApplication2/Pages/Login/Login.aspx b/WebApplication2/Pages/Login/Login.aspx
@@ -58,6 +58,12 @@
             background: #D81B60; 
         }
 
+        .login-button:disabled {
+        background-color: #E91E63; /* Original color */
+        filter: brightness(0.8);
+        cursor: not-allowed;
+        }
+
         .error-message {
             color: #E91E63;
             font-size: 14px;
@@ -137,11 +143,11 @@
 <body>
     <form id="form1" runat="server" class="login-container">
         <h2>Admin Login</h2>
-        <input id="txtUsername" runat="server" type="text" placeholder="AdminID" />
+        <input id="txtUsername" runat="server" type="text" placeholder="AdminID" onkeyup="validateForm()" />
         <br />
-        <input id="txtPassword" runat="server" type="password" placeholder="Password" />
+        <input id="txtPassword" runat="server" type="password" placeholder="Password" onkeyup="validateForm()" />
         <br />
-        <asp:Button ID="btnLogin" runat="server" CssClass="login-button" Text="Login" OnClick="LoginButton" />
+        <asp:Button ID="btnLogin" runat="server" CssClass="login-button" Text="Login" OnClick="LoginButton" Enabled="false" />
         <div>
         <asp:Label ID="lblError" runat="server" CssClass="error-message"></asp:Label>
         </div>
@@ -177,5 +183,20 @@
             showPopup();
         }
     }
+
+    // Function to validate the form
+    function validateForm() {
+        var txtUsername = document.getElementById('<%= txtUsername.ClientID %>').value;
+        var txtPassword = document.getElementById('<%= txtPassword.ClientID %>').value;
+        var buttonlogin = document.getElementById('<%= btnLogin.ClientID %>');
+
+        if (txtUsername.trim() !== "" && txtPassword.trim() !== "") {
+            btnLogin.disabled = false;
+            btnLogin.style.cursor = 'pointer';
+        } else {
+            btnLogin.disabled = true;
+            btnLogin.style.cursor = 'not-allowed';
+        }
+    }
 </script>
 </html>
