Merge pull request #2524 from pat-son/moveGoogleButton

Moved the Google Sign In button to the top

app/assets/stylesheets/application.css.scss

@@ -297,7 +297,6 @@ body {
   }
 
   .mdl-button--google-sign-in {
-    float: right;
     padding: 0;
     font-family: 'Roboto', sans-serif;
     background-color: #4285F4 !important;

app/assets/stylesheets/sessions.css.scss

@@ -1,3 +1,46 @@
 // Place all the styles related to the Sessions controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+}
+
+.google-or-isense {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 1.5em;
+  margin: 20px 0px;
+}
+
+.left-rule {
+  display: inline-block;
+  background-color: black; // backwards compatibility
+  background: linear-gradient(to left, black, white);
+  height: 1px;
+  width: 45%;
+}
+
+.or-label {
+  display: inline-block;
+  width: 10%;
+}
+
+.right-rule {
+  display: inline-block;
+  background-color: black; // backwards compatibility
+  background: linear-gradient(to right, black, white);
+  height: 1px;
+  width: 45%;
+}
+
+.log-in-button {
+  float: right;
+}
+
+.remember-me-label {
+  width: initial !important;
+}

app/views/devise/registrations/new.html.erb

@@ -2,6 +2,20 @@
 
 <div class="row">
   <div class="col-lg-6 col-lg-offset-3">
+    <div class="panel panel-default">
+      <div class="panel-body flex-center">
+        <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--google-sign-in"
+          href='/users/auth/google_oauth2'>
+          <img class="google-logo" src='/assets/btn_google_light_normal_ios.svg'/>
+          Sign in with Google
+        </a>
+      </div>
+    </div>
+    <div class="google-or-isense">
+      <div class="left-rule"></div>
+      <div class="or-label">or</div>
+      <div class="right-rule"></div>
+    </div>
     <div class="panel panel-default">
       <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
         <div class="panel-heading">

app/views/devise/sessions/new.html.erb

@@ -1,18 +1,24 @@
 <%= content_for(:title, "Log in to iSENSE") %>
 <%= devise_error_messages! %><br>
 
-<div class="alert alert-warning">
-  <strong>Attention!</strong> All passwords have been reset as of 4/29/16 to make way for our new user system. Please click the 'forgot password' button to create a new one if you have not already. More info is posted <a href='/news/45'>here.</a>
-</div>
-</br>
-
 <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="row">
-    <div class="col-lg-6 col-lg-offset-3">
+    <div class="col-lg-5 col-lg-offset-3">
       <div class="panel panel-default">
-        <div class="panel-heading">
-          <h3>Log in to iSENSE</h3>
+        <div class="panel-body flex-center">
+          <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--google-sign-in"
+            href='/users/auth/google_oauth2'>
+            <img class="google-logo" src='/assets/btn_google_light_normal_ios.svg'/>
+            Sign in with Google
+          </a>
         </div>
+      </div>
+      <div class="google-or-isense">
+        <div class="left-rule"></div>
+        <div class="or-label">or</div>
+        <div class="right-rule"></div>
+      </div>
+      <div class="panel panel-default">
 
         <div class="panel-body">
           <div class="form-group">
@@ -24,24 +30,14 @@
             <%= label_tag(:password, "Password #{(link_to "(forgot password)", '/users/pw_request', tabindex: -1)}:".html_safe) %><br/>
             <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
           </div>
-
-          <% if devise_mapping.rememberable? -%>
-            <div class="form-group">
-              <label for="user_remember_me" class="mdl-checkbox mdl-js-checkbox">
+          <div class="form-group">
+            <% if devise_mapping.rememberable? -%>
+              <label for="user_remember_me" class="mdl-checkbox mdl-js-checkbox remember-me-label">
                 <%= f.check_box :remember_me, class: "mdl-checkbox__input" %>
                 <span >Remember me</span>
               </label>
-            </div>
-          <% end -%>
-        </div>
-        <div class="panel-footer">
-          <div class="form-group">
-            <%= f.submit "Log in", class: "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--blue" %>
-            <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--google-sign-in"
-              href='/users/auth/google_oauth2'>
-              <img class="google-logo" src='/assets/btn_google_light_normal_ios.svg'/>
-              Sign in with Google
-            </a>
+            <% end -%>
+            <%= f.submit "Log in", class: "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--blue log-in-button" %>
           </div>
         </div>
       </div>

config/locales/devise.en.yml

@@ -9,10 +9,10 @@ en:
     failure:
       already_authenticated: "You are already signed in."
       inactive: "Your account is not activated yet."
-      invalid: "Invalid %{authentication_keys} or password."
+      invalid: "Invalid %{authentication_keys} or password. Please click \"forgot password\" if you need to reset your password."
       locked: "Your account is locked."
       last_attempt: "You have one more attempt before your account is locked."
-      not_found_in_database: "Invalid %{authentication_keys} or password."
+      not_found_in_database: "Invalid %{authentication_keys} or password. Please click \"forgot password\" if you need to reset your password."
       timeout: "Your session expired. Please sign in again to continue."
       unauthenticated: "You need to sign in or sign up before continuing."
       unconfirmed: "You have to confirm your email address before continuing."

test/integration/bug_report_test.rb

@@ -22,6 +22,6 @@ class BugReportTest < IntegrationTest
     visit '/report_bug'
     find(:css, '#github_account').click
 
-    assert page.has_content?('Log in to iSENSE'), 'Should have redirected to github for authorization'
+    assert page.has_title?('Sign in to iSENSE'), 'Should have redirected to sign-in page first'
   end
 end