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:
AlasdairSwan
2014-11-05 11:49:04 -05:00
8 changed files with 63 additions and 34 deletions

View File

@@ -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: {

View File

@@ -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');
}
},

View File

@@ -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');
}
}
});

View File

@@ -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 {

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>
<% }
}); %>

View File

@@ -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">