Skip to content

E
edx-platform
Commit 8a62991f by AlasdairSwan
Options

ECOM-585, ECOM-587 and ECOM-588 Changed order of forms based on url, fixed… 

ECOM-585, ECOM-587 and ECOM-588 Changed order of forms based on url, fixed tabbing issue with forgot password link and moved third party quth error message so now does not load buttons if they do not have a url
parent 864040ee
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