Merge pull request #21135 from edx/waheed/PROD-478-move-sso-button

Move secondary SSO login button.

lms/static/js/student_account/views/LoginView.js

@@ -69,6 +69,7 @@
                         _.template(this.tpl)({
                             // We pass the context object to the template so that
                             // we can perform variable interpolation using sprintf
+                            HtmlUtils: HtmlUtils,
                             context: {
                                 fields: fields,
                                 currentProvider: this.currentProvider,

lms/static/sass/views/_login-register.scss

@@ -637,12 +637,14 @@
     @extend %t-action4;
     @extend %t-regular;
 
-    border-color: $lightGrey1;
+    font-size: 1rem;
+    font-weight: 600;
     padding: 0;
-    height: $third-party-button-height;
 
     &:hover {
       border-color: $m-blue-d3;
+      box-shadow: none;
+
     }
   }
 
@@ -797,7 +799,7 @@
     &:first-of-type {
       margin-top: 20px;
     }
-        
+
     font-size: 16px;
     line-height: 1.5;
     color: $gray-d2;

lms/templates/student_account/login.underscore

@@ -38,11 +38,23 @@
         <%- gettext("If you do not yet have an account, use the button below to register.") %>
     </p>
 
-    <%= context.fields %>
+    <% if ( context.hasSecondaryProviders ) { %>
+        <button type="button" class="button-secondary-login form-toggle" data-type="institution_login">
+            <%- gettext("Use my university info") %>
+        </button>
+
+        <div class="section-title lines">
+            <h3>
+                <span class="text"><%- gettext("or sign in with") %></span>
+            </h3>
+        </div>
+    <% } %>
+
+    <%= HtmlUtils.HTML(context.fields) %>
 
     <button type="submit" class="action action-primary action-update js-login login-button"><%- gettext("Sign in") %></button>
 
-    <% if ( context.providers.length > 0 && !context.currentProvider || context.hasSecondaryProviders ) { %>
+    <% if ( context.providers.length > 0 && !context.currentProvider) { %>
     <div class="login-providers">
         <div class="section-title lines">
             <h3>
@@ -63,12 +75,6 @@
                 </button>
             <% }
         }); %>
-
-        <% if ( context.hasSecondaryProviders ) { %>
-            <button type="button" class="button-secondary-login form-toggle" data-type="institution_login">
-                <%- gettext("Use my institution/campus credentials") %>
-            </button>
-        <% } %>
     </div>
     <% } %>
 </form>