fix: the button is disabled when the input fields are empty

upsaurav12 · Jan 1, 2024 · bdcc421 · bdcc421
1 parent 35be979
commit bdcc421
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/app/assets/stylesheets/users.scss b/app/assets/stylesheets/users.scss
@@ -134,6 +134,9 @@
   margin-top: 20px;
   padding: 8px 25px;
 }
+.users-login-primary-button:disabled{
+  cursor: not-allowed;
+}
 .password-length {
   display: flex;
   flex-direction: row;

diff --git a/app/views/users/sessions/new.html.erb b/app/views/users/sessions/new.html.erb
@@ -49,7 +49,7 @@
             <% if Flipper.enabled?(:recaptcha) %>
               <%= recaptcha_tags %>
             <% end %>
-            <%= f.submit t("login"), class: "btn primary-button users-login-primary-button" %>
+            <%= f.submit t("login"), class: "btn primary-button users-login-primary-button", disabled: true %>
             <div class="users-text-container">
               <span class="users-text"><%= t("users.ask_new_user") %></span>
               <% unless Flipper.enabled?(:block_registration) %>
@@ -65,6 +65,23 @@
   </div>
 </div>
 <script>
+    $(document).ready(()=>{
+      let email_input = $(".user-email-input");
+      let password_input = $(".users-password-input");
+      let login_button = $(".users-login-primary-button");
+
+      toggledButton = () =>{
+        let email_input_value = email_input.val().trim();
+        let password_input_value = password_input.val().trim();
+
+        if((email_input_value !== "") && (password_input_value !== "")){
+          login_button.prop("disabled",false);
+        }
+
+      }
+      email_input.on("input",toggledButton);
+      password_input.on("input",toggledButton);
+    })
     $(".users-forgot-password-text").on('click', () => {
       localStorage.setItem('Email', $(".user-email-input").val());
     });