CORE-986: Fix color contrast of signup heading (#1645)

* CORE-986: Fix color contrast of signup heading

[CORE-986]
New color contrast ratio is 5.
Also moved the disabled-submit styling to CSS
Also added some JS to control the disabled state of the Continue button on login.

* CORE-1047

Because this is so tiny, I'm rolling it in here.
Fixes contrast of Show/Hide label (which is a problem when the input is in an error state - pink)

* Remove test for blank email; submit is disabled if email is blank

Author: RoyEJohnson

app/assets/javascripts/newflow/newflow_ui.js.coffee

@@ -2,17 +2,11 @@ NewflowUi = do () ->
   disableButton: (selector) ->
     $(selector).attr('disabled', 'disabled')
     $(selector).addClass('ui-state-disabled ui-button-disabled')
-    $(selector).css({
-        'background': '#ccc',
-        'box-shadow': 'none',
-        'color': '#666'
-      })
 
   enableButton: (selector) ->
     $(selector).removeAttr('disabled')
     $(selector).removeClass('ui-state-disabled ui-button-disabled')
     $(selector).button()
-    $(selector).css({ 'background': '', 'box-shadow': '', 'color': '' })
 
   renderAndOpenDialog: (html_id, content, modal_options = {}) ->
     if $('#' + html_id).exists() then $('#' + html_id).remove()

app/assets/stylesheets/newflow.scss

@@ -223,7 +223,7 @@ label.required::after {
         top: 3.7rem;
         right: 1.8rem;
 
-        color: #027EB5;
+        color: #0070af;
         font-weight: bold;
         cursor: pointer;
 
@@ -674,7 +674,7 @@ $very-narrow: 37rem * $scale-factor;
             padding-right: 0;
 
             background-color: #f1f1f1;
-            color: #c1c1c1;
+            color: #666666;
 
             @include title-font(2.4rem);
             text-align: center;
@@ -774,10 +774,12 @@ $very-narrow: 37rem * $scale-factor;
 
     input[type=submit] {
         &:disabled {
+            background-color: #ccc;
+            box-shadow: none;
+            color: #666;
             opacity: 0.85;
         }
 
-        -webkit-appearance: none;
         border-radius: 0;
     }
 }

app/views/newflow/login/login_form.html.erb

@@ -93,7 +93,8 @@
                     <%= f.submit I18n.t(:"login_signup_form.continue_button"),
                                 disable_with: I18n.t(:"login_signup_form.continue_button"),
                                 class: 'primary',
-                                data: { ga_category: 'Login', ga_action: 'Click', ga_label: 'Email' }
+                                data: { ga_category: 'Login', ga_action: 'Click', ga_label: 'Email' },
+                                disabled: 'disabled'
                     %>
                 </div>
 
@@ -118,5 +119,18 @@
 
 <script type="text/javascript">
     NewflowUi.focusOnFirstErrorItem();
+    const $requiredInputs = $('form input[aria-required="true"]');
+    const handleDisable = () => {
+        const disableSubmit = $requiredInputs.toArray().some((i) => i.value.length == 0);
+
+        if (disableSubmit) {
+            NewflowUi.disableButton('form [type="submit"]');
+        } else {
+            NewflowUi.enableButton('form [type="submit"]');
+        }    
+    }
+
+    $requiredInputs.on('input', handleDisable);
+    handleDisable();
 </script>
 

spec/features/newflow/user_cant_sign_in_spec.rb

@@ -17,11 +17,7 @@
       screenshot!
     end
 
-    scenario "email blank" do
-      newflow_log_in_user('', 'password')
-      expect(page).to have_content(error_msg Newflow::LogInUser, :email, :blank)
-      screenshot!
-    end
+    # Removed test for blank email; blank email is not allowed
 
     scenario "multiple accounts match email but no usernames" do
       # For a brief window in 2017 users could sign up with [email protected] and [email protected]