Skip to content

E
edx-platform
Commit 5dc5f5f9 by AlasdairSwan
Options

Merge pull request #5849 from edx/alasdair/logistration-form-order-update 

ECOM-587 and ECOM-585 Switched tab order based on url and on selection o...
parents 864040ee 8a62991f
Showing with 63 additions and 34 deletions
lms/static/js/student_account/views/AccessView.js
......@@ -29,7 +29,7 @@ var edx = edx || {};
* (all but include, contains, and reverse) into the
* Underscore namespace
*/
_.mixin(_.str.exports())
_.mixin( _.str.exports() );
this.tpl = $(this.tpl).html();
this.activeForm = obj.mode || 'login';
......@@ -132,7 +132,8 @@ var edx = edx || {};
toggleForm: function( e ) {
var type = $(e.currentTarget).val(),
$form = $('#' + type + '-form');
$form = $('#' + type + '-form'),
$anchor = $('#' + type + '-anchor');
if ( !this.form.isLoaded( $form ) ) {
this.loadForm( type );
......@@ -140,6 +141,11 @@ var edx = edx || {};
this.element.hide( $(this.el).find('.form-wrapper') );
this.element.show( $form );
// Scroll to top of selected form
$('html,body').animate({
scrollTop: $anchor.offset().top
},'slow');
},
form: {
......
lms/static/js/student_account/views/LoginView.js
......@@ -73,9 +73,6 @@ var edx = edx || {};
if (providerUrl) {
window.location.href = providerUrl;
} else {
// TODO -- error handling here
console.log('No URL available for third party auth provider');
}
},
......
lms/static/js/student_account/views/RegisterView.js
......@@ -28,8 +28,9 @@ var edx = edx || {};
var fields = html || '';
$(this.el).html( _.template( this.tpl, {
// We pass the context object to the template so that
// we can perform variable interpolation using sprintf
/* We pass the context object to the template so that
* we can perform variable interpolation using sprintf
*/
context: {
fields: fields,
currentProvider: this.currentProvider,
......@@ -46,11 +47,8 @@ var edx = edx || {};
thirdPartyAuth: function( event ) {
var providerUrl = $(event.target).data('provider-url') || '';
if (providerUrl) {
if ( providerUrl ) {
window.location.href = providerUrl;
} else {
// TODO -- error handling here
console.log('No URL available for third party auth provider');
}
}
});
......
lms/static/sass/views/_login-register.scss
......@@ -130,6 +130,7 @@
.form-field {
@include clearfix;
clear: both;
position: relative;
width: 100%;
margin: 0 0 $baseline 0;
......@@ -166,7 +167,6 @@
.field-link {
position: relative;
float: right;
color: $link-color-d1;
font-weight: $font-regular;
text-decoration: none !important; // needed but nasty
......@@ -371,6 +371,12 @@
@extend %inline-form-field-tablet;
width: calc( 50% - 10px );
}
.field-link {
position: absolute;
top: 0;
right: 0;
}
}
}
......@@ -412,6 +418,12 @@
@extend %inline-form-field-desktop;
width: 100px;
}
.field-link {
position: absolute;
top: 0;
right: 0;
}
}
.login-provider {
......
lms/templates/student_account/access.underscore
......@@ -3,7 +3,17 @@
<p class="tagline"><%- gettext("Log in or register to take courses from the world's best universities.") %></p>
</header>
<section class="form-type">
<% if ( mode === 'login' ) { %>
<section id="register-anchor" class="form-type">
<h2>
<input type="radio" name="form" id="register-option" value="register" class="form-toggle" <% if ( mode === 'register' ) { %>checked<% } %> >
<label for="register-option" class="form-label"><%- gettext("I am a new user") %></label>
</h2>
<div id="register-form" class="form-wrapper <% if ( mode !== 'register' ) { %>hidden" aria-hidden="true<% } %>"></div>
</section>
<% } %>
<section id="login-anchor" class="form-type">
<h2>
<input type="radio" name="form" id="login-option" value="login" class="form-toggle" <% if ( mode === 'login' ) { %>checked<% } %>>
<label for="login-option" class="form-label"><%- gettext("I am a returning user") %></label>
......@@ -11,12 +21,14 @@
<div id="login-form" class="form-wrapper <% if ( mode !== 'login' ) { %>hidden" aria-hidden="true<% } %>"></div>
</section>
<section class="form-type">
<h2>
<input type="radio" name="form" id="register-option" value="register" class="form-toggle" <% if ( mode === 'register' ) { %>checked<% } %> >
<label for="register-option" class="form-label"><%- gettext("I am a new user") %></label>
</h2>
<div id="register-form" class="form-wrapper <% if ( mode !== 'register' ) { %>hidden" aria-hidden="true<% } %>"></div>
</section>
<% if ( mode === 'register' ) { %>
<section id="register-anchor" class="form-type">
<h2>
<input type="radio" name="form" id="register-option" value="register" class="form-toggle" <% if ( mode === 'register' ) { %>checked<% } %> >
<label for="register-option" class="form-label"><%- gettext("I am a new user") %></label>
</h2>
<div id="register-form" class="form-wrapper <% if ( mode !== 'register' ) { %>hidden" aria-hidden="true<% } %>"></div>
</section>
<% } %>
<div id="password-reset-wrapper"></div>
lms/templates/student_account/form_field.underscore
......@@ -6,10 +6,6 @@
</label>
<% } %>
<% if( form === 'login' && name === 'password' ) { %>
<a href="#" class="forgot-password field-link"><%- gettext("Forgot password?") %></a>
<% } %>
<% if ( type === 'select' ) { %>
<select id="<%= form %>-<%= name %>"
name="<%= name %>"
......@@ -59,5 +55,9 @@
</label>
<% } %>
<% if( form === 'login' && name === 'password' ) { %>
<a href="#" class="forgot-password field-link"><%- gettext("Forgot password?") %></a>
<% } %>
<span id="<%= form %>-<%= name %>-desc" class="desc"><%= instructions %></span>
</p>
lms/templates/student_account/login.underscore
......@@ -17,8 +17,10 @@
<button class="action action-primary action-update js-login"><%- gettext("Log in") %></button>
</form>
<% _.each( context.providers, function( provider ) { %>
<button type="submit"class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.loginUrl %>">
<span class="icon <%- provider.iconClass %>"></span><%- _.sprintf(gettext("Log in using %(name)s"), provider) %>
</button>
<% }); %>
<% _.each( context.providers, function( provider ) {
if ( provider.loginUrl ) { %>
<button type="submit"class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.loginUrl %>">
<span class="icon <%- provider.iconClass %>"></span><%- _.sprintf(gettext("Log in using %(name)s"), provider) %>
</button>
<% }
}); %>
lms/templates/student_account/register.underscore
......@@ -6,11 +6,13 @@
</p>
</div>
<% } else {
_.each( context.providers, function( provider) { %>
<button type="submit"class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.registerUrl %>">
<span class="icon <%- provider.iconClass %>"></span><%- _.sprintf(gettext("Register using %(name)s"), provider) %>
</button>
<% });
_.each( context.providers, function( provider) {
if ( provider.registerUrl ) { %>
<button type="submit"class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.registerUrl %>">
<span class="icon <%- provider.iconClass %>"></span><%- _.sprintf(gettext("Register using %(name)s"), provider) %>
</button>
<% }
});
} %>
<form id="register" autocomplete="off">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment