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...
This commit is contained in:
@@ -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: {
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
<% }
|
||||
}); %>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user