Merge pull request #4544 from aignatov-bio/ai-sci-7233-fix-login-signup-forms

Fix css issues for login and signup forms [SCI-7233]

app/assets/javascripts/sitewide/show_password.js

@@ -1,6 +1,11 @@
 $(document).on('turbolinks:load', function() {
   $.each($('input[type="password"]'), function(i, e) {
-    $('<i class="fas fa-eye show-password" style="cursor: pointer; z-index: 10"></i>').insertAfter(e);
+    $(`<i class="fas fa-eye show-password"
+          style="
+            cursor: pointer;
+            z-index: 10;
+            top: ${$(e).position().top}px
+          "></i>`).insertAfter(e);
     $(e).parent().addClass('right-icon');
   });
 });

app/assets/stylesheets/shared/form_errors.scss

@@ -0,0 +1,6 @@
+.field_with_errors,
+.sci-input-container {
+  .help-block {
+    color: $brand-danger;
+  }
+}

app/assets/stylesheets/sign_up.scss

@@ -25,7 +25,7 @@
         margin-bottom: 24px;
       }
 
-      .sci-input-container {
+      .sci-input-container:not(.field_with_errors) {
         margin-bottom: 24px;
 
         .minimum-password-length {

app/views/users/passwords/edit.html.erb

@@ -16,8 +16,9 @@
     <p class="sci-input-container">
       <%= f.label :password, t("devise.passwords.edit.password") %>
       <% if @minimum_password_length %>
-      <em><%= t("devise.passwords.edit.password_length", min_length: @minimum_password_length) %></em>
-      <% end %><br />
+        <em><%= t("devise.passwords.edit.password_length", min_length: @minimum_password_length) %></em>
+      <% end %>
+      <br>
       <%= f.password_field :password, autofocus: true, autocomplete: "off", class: "sci-input-field" %>
     </p>
 

config/application.rb

@@ -70,5 +70,9 @@ module Scinote
       # Only Authorization endpoint
       Doorkeeper::AuthorizationsController.layout 'sign_in_halt'
     end
+
+    config.action_view.field_error_proc = Proc.new { |html_tag, instance|
+      "<div class=\"field_with_errors sci-input-container\">#{html_tag}</div>".html_safe
+    }
   end
 end