Commit 4157e5c0 by Renzo Lucioni

i18n logistration

parent 63ea30da
......@@ -12,6 +12,7 @@ urlpatterns = patterns(
url(r'^v1/', include(user_api_router.urls)),
url(r'^v1/account/login_session/$', user_api_views.LoginSessionView.as_view(), name="user_api_login_session"),
url(r'^v1/account/registration/$', user_api_views.RegistrationView.as_view(), name="user_api_registration"),
url(r'^v1/account/password_reset/$', user_api_views.PasswordResetView.as_view(), name="user_api_password_reset"),
url(
r'^v1/preferences/(?P<pref_key>{})/users/$'.format(UserPreference.KEY_REGEX),
user_api_views.PreferenceUsersListView.as_view()
......
var edx = edx || {};
(function( $, _ ) {
(function( $, _, gettext ) {
'use strict';
edx.utils = edx.utils || {};
......@@ -10,10 +10,10 @@ var edx = edx || {};
validate: {
msg: {
email: '<li>The email address you\'ve provided is invalid.</li>',
min: '<li><%= field %> must have at least <%= count %> characters.</li>',
max: '<li><%= field %> can only contain up to <%= count %> characters.</li>',
required: '<li><%= field %> is required.</li>',
email: '<li><%- gettext("The email address you\'ve provided is invalid.") %></li>',
min: '<li><%- _.sprintf(gettext("%(field)s must have at least %(count)d characters"), context) %></li>',
max: '<li><%- _.sprintf(gettext("%(field)s can only contain up to %(count)d characters"), context) %></li>',
required: '<li><%- _.sprintf(gettext("%(field)s is required"), context) %></li>',
custom: '<li><%= content %></li>'
},
......@@ -123,13 +123,17 @@ var edx = edx || {};
tpl = _fn.validate.msg[key];
obj = {
field: _fn.validate.str.capitalizeFirstLetter( name )
// We pass the context object to the template so that
// we can perform variable interpolation using sprintf
context: {
field: _fn.validate.str.capitalizeFirstLetter( name )
}
};
if ( key === 'min' ) {
obj.count = $el.attr('minlength');
obj.context.count = $el.attr('minlength');
} else if ( key === 'max' ) {
obj.count = $el.attr('maxlength');
obj.context.count = $el.attr('maxlength');
}
}
......@@ -150,4 +154,4 @@ var edx = edx || {};
edx.utils.validate = utils.validate;
})( jQuery, _ );
\ No newline at end of file
})( jQuery, _, gettext );
......@@ -69,6 +69,7 @@ def login_and_registration_form(request, initial_mode="login"):
'disable_courseware_js': True,
'initial_mode': initial_mode,
'third_party_auth': json.dumps(_third_party_auth_context(request)),
'platform_name': settings.PLATFORM_NAME,
}
return render_to_response('student_account/login_and_register.html', context)
......
......@@ -275,7 +275,8 @@
exports: 'js/student_account/views/LoginView',
deps: [
'js/student_account/models/LoginModel',
'js/student_account/views/FormView'
'js/student_account/views/FormView',
'underscore.string'
]
},
'js/student_account/models/PasswordResetModel': {
......@@ -297,7 +298,8 @@
exports: 'js/student_account/views/RegisterView',
deps: [
'js/student_account/models/RegisterModel',
'js/student_account/views/FormView'
'js/student_account/views/FormView',
'underscore.string'
]
},
'js/student_account/views/AccessView': {
......@@ -305,7 +307,8 @@
deps: [
'js/student_account/views/LoginView',
'js/student_account/views/PasswordResetView',
'js/student_account/views/RegisterView'
'js/student_account/views/RegisterView',
'underscore.string'
]
},
},
......
......@@ -8,6 +8,7 @@ var edx = edx || {};
return new edx.student.account.AccessView({
mode: $('#login-and-registration-container').data('initial-mode'),
thirdPartyAuth: $('#login-and-registration-container').data('third-party-auth')
thirdPartyAuth: $('#login-and-registration-container').data('third-party-auth'),
platformName: $('#login-and-registration-container').data('platform-name')
});
})(jQuery);
......@@ -49,4 +49,4 @@ var edx = edx || {};
});
}
});
})(jQuery, _, Backbone, gettext);
\ No newline at end of file
})(jQuery, _, Backbone, gettext);
......@@ -12,14 +12,18 @@ var edx = edx || {};
email: ''
},
urlRoot: '/account/password',
urlRoot: '',
initialize: function( obj ) {
this.urlRoot = obj.url;
},
sync: function(method, model) {
var headers = {
'X-CSRFToken': $.cookie('csrftoken')
};
// Is just expecting email address
// Only expects an email address.
$.ajax({
url: model.urlRoot,
type: 'POST',
......
......@@ -52,9 +52,8 @@ var edx = edx || {};
window.location.href = url;
})
.fail( function( error ) {
console.log('RegisterModel.save() FAILURE!!!!!');
model.trigger('error', error);
});
}
});
})(jQuery, _, Backbone, gettext);
\ No newline at end of file
})(jQuery, _, Backbone, gettext);
......@@ -25,12 +25,19 @@ var edx = edx || {};
activeForm: '',
initialize: function( obj ) {
/* Mix non-conflicting functions from underscore.string
* (all but include, contains, and reverse) into the
* Underscore namespace
*/
_.mixin(_.str.exports())
this.tpl = $(this.tpl).html();
this.activeForm = obj.mode || 'login';
this.thirdPartyAuth = obj.thirdPartyAuth || {
currentProvider: null,
providers: []
};
this.platformName = obj.platformName;
this.render();
},
......@@ -52,11 +59,7 @@ var edx = edx || {};
},
loadForm: function( type ) {
if ( type === 'reset' ) {
this.load.reset( this );
} else {
this.getFormData( type, this.load[type], this );
}
this.getFormData( type, this.load[type], this );
},
load: {
......@@ -68,27 +71,21 @@ var edx = edx || {};
context.subview.login = new edx.student.account.LoginView({
fields: data.fields,
model: model,
thirdPartyAuth: context.thirdPartyAuth
thirdPartyAuth: context.thirdPartyAuth,
platformName: context.platformName
});
// Listen for 'password-help' event to toggle sub-views
context.listenTo( context.subview.login, 'password-help', context.resetPassword );
},
reset: function( context ) {
var model = new edx.student.account.PasswordResetModel(),
data = [{
label: 'Email',
instructions: 'The email address you used to register with edX',
name: 'email',
required: true,
type: 'email',
restrictions: [],
defaultValue: ''
}];
reset: function( data, context ) {
var model = new edx.student.account.PasswordResetModel({
url: data.submit_url
});
context.subview.passwordHelp = new edx.student.account.PasswordResetView({
fields: data,
fields: data.fields,
model: model
});
},
......@@ -101,7 +98,8 @@ var edx = edx || {};
context.subview.register = new edx.student.account.RegisterView({
fields: data.fields,
model: model,
thirdPartyAuth: context.thirdPartyAuth
thirdPartyAuth: context.thirdPartyAuth,
platformName: context.platformName
});
}
},
......@@ -109,7 +107,8 @@ var edx = edx || {};
getFormData: function( type, callback, context ) {
var urls = {
login: 'login_session',
register: 'registration'
register: 'registration',
reset: 'password_reset'
};
$.ajax({
......
......@@ -44,7 +44,7 @@ var edx = edx || {};
* default init steps
*/
preRender: function( data ) {
/* custom code goes here */
/* Custom code goes here */
return data;
},
......@@ -89,7 +89,7 @@ var edx = edx || {};
this.render( html.join('') );
},
/* Helper method ot toggle display
/* Helper method to toggle display
* including accessibility considerations
*/
element: {
......@@ -143,7 +143,7 @@ var edx = edx || {};
key = $el.attr('name') || false;
if ( key ) {
test = this.validate( elements[i], this.formType );
test = this.validate( elements[i] );
if ( test.isValid ) {
obj[key] = $el.attr('type') === 'checkbox' ? $el.is(':checked') : $el.val();
......@@ -204,8 +204,9 @@ var edx = edx || {};
this.element.hide( this.$errors );
}
},
validate: function( $el, form ) {
return edx.utils.validate( $el, form );
validate: function( $el ) {
return edx.utils.validate( $el );
}
});
......
......@@ -24,15 +24,21 @@ var edx = edx || {};
preRender: function( data ) {
this.providers = data.thirdPartyAuth.providers || [];
this.currentProvider = data.thirdPartyAuth.currentProvider || '';
this.platformName = data.platformName;
},
render: function( html ) {
var fields = html || '';
$(this.el).html( _.template( this.tpl, {
fields: fields,
currentProvider: this.currentProvider,
providers: this.providers
// We pass the context object to the template so that
// we can perform variable interpolation using sprintf
context: {
fields: fields,
currentProvider: this.currentProvider,
providers: this.providers,
platformName: this.platformName
}
}));
this.postRender();
......@@ -94,5 +100,4 @@ var edx = edx || {};
}
}
});
})(jQuery, _, gettext);
......@@ -43,24 +43,6 @@ var edx = edx || {};
this.element.hide( $el.find('#password-reset-form') );
this.element.show( $el.find('.js-reset-success') );
},
submitForm: function( event ) {
var data = this.getFormData();
event.preventDefault();
if ( !_.compact(this.errors).length ) {
this.model.set( data );
this.model.save();
this.toggleErrorMsg( false );
} else {
this.toggleErrorMsg( true );
}
},
validate: function( $el ) {
return edx.utils.validate( $el );
}
});
......
......@@ -21,15 +21,21 @@ var edx = edx || {};
preRender: function( data ) {
this.providers = data.thirdPartyAuth.providers || [];
this.currentProvider = data.thirdPartyAuth.currentProvider || '';
this.platformName = data.platformName;
},
render: function( html ) {
var fields = html || '';
$(this.el).html( _.template( this.tpl, {
fields: fields,
currentProvider: this.currentProvider,
providers: this.providers
// We pass the context object to the template so that
// we can perform variable interpolation using sprintf
context: {
fields: fields,
currentProvider: this.currentProvider,
providers: this.providers,
platformName: this.platformName
}
}));
this.postRender();
......
......@@ -99,6 +99,11 @@
/** The forms **/
.form-wrapper {
padding-top: 25px;
form {
@include clearfix;
clear: both;
}
}
.login-form {
......
<header class="js-login-register-header header">
<h1 class="headline">Welcome!</h1>
<p class="tagline">Log in or register to take courses from the world's best universities.</p>
<h1 class="headline"><%- gettext("Welcome!") %></h1>
<p class="tagline"><%- gettext("Log in or register to take courses from the world's best universities.") %></p>
</header>
<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">I am a new user</label>
<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>
......@@ -14,7 +14,7 @@
<section 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">I am a returning user</label>
<label for="login-option" class="form-label"><%- gettext("I am a returning user") %></label>
</h2>
<div id="login-form" class="form-wrapper <% if ( mode !== 'login' ) { %>hidden" aria-hidden="true<% } %>"></div>
</section>
......
......@@ -7,7 +7,7 @@
<% } %>
<% if( form === 'login' && name === 'password' ) { %>
<a href="#" class="forgot-password field-link">Forgot password?</a>
<a href="#" class="forgot-password field-link"><%- gettext("Forgot password?") %></a>
<% } %>
<% if ( type === 'select' ) { %>
......@@ -60,4 +60,4 @@
<% } %>
<span id="<%= form %>-<%= name %>-desc" class="desc"><%= instructions %></span>
</p>
\ No newline at end of file
</p>
<form id="login" class="login-form">
<div class="status already-authenticated-msg hidden" aria-hidden="true">
<% if (currentProvider) { %>
<p class="message-copy">You've successfully logged into <%- currentProvider %>, but your <%- currentProvider %> account isn't linked with an edX account. To link your accounts, go to your edX dashboard.</p>
<% if (context.currentProvider) { %>
<p class="message-copy">
<%- _.sprintf(gettext("You've successfully logged into %(currentProvider)s, but your %(currentProvider)s account isn't linked with an %(platformName)s account. To link your accounts, go to your %(platformName)s dashboard."), context) %>
</p>
<% } %>
</div>
<div class="status submission-error hidden" aria-hidden="true">
<h4 class="message-title">We couldn't log you in.</h4>
<h4 class="message-title"><%- gettext("We couldn't log you in.") %></h4>
<ul class="message-copy"></ul>
</div>
<%= fields %>
<button class="action action-primary action-update js-login">Log in</button>
<%= context.fields %>
<button class="action action-primary action-update js-login"><%- gettext("Log in") %></button>
</form>
<% _.each( providers, function( provider) { %>
<% _.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>Log in using <%- provider.name %>
<span class="icon <%- provider.iconClass %>"></span><%- _.sprintf(gettext("Log in using %(name)s"), provider) %>
</button>
<% }); %>
......@@ -6,16 +6,16 @@
<%block name="pagetitle">${_("Log in or Register")}</%block>
<%block name="js_extra">
<script type="text/javascript" src="${static.url('js/vendor/underscore-min.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/backbone-min.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/underscore.string.min.js')}"></script>
<%static:js group='student_account'/>
</%block>
<%block name="header_extras">
% for template_name in ["account", "access", "form_field", "login", "register", "password_reset"]:
<script type="text/template" id="${template_name}-tpl">
<%static:include path="student_account/${template_name}.underscore" />
</script>
% for template_name in ["account", "access", "form_field", "login", "register", "password_reset"]:
<script type="text/template" id="${template_name}-tpl">
<%static:include path="student_account/${template_name}.underscore" />
</script>
% endfor
</%block>
......@@ -24,5 +24,6 @@
class="login-register"
data-initial-mode="${initial_mode}"
data-third-party-auth='${third_party_auth}'
data-platform-name='${platform_name}'
/>
</div>
<header class="header">
<h1 class="headline">Reset Password</h1>
<h1 class="headline"><%- gettext("Reset Password") %></h1>
</header>
<section class="form-type">
<div id="password-reset-form" class="form-wrapper">
<!-- <p class="action-label">Please enter your email address below and we will send you instructions for setting a new password.</p> -->
<p class="action-label">Enter the email address you used to create your account. We'll send you a link you can use to reset your password.</p>
<p class="action-label"><%- gettext("Enter the email address you used to create your account. We'll send you a link you can use to reset your password.") %></p>
<form id="password-reset-form">
<div class="status submission-error hidden" aria-hidden="true">
<h4 class="message-title">An error occurred.</h4>
<h4 class="message-title"><%- gettext("An error occurred.") %></h4>
<ul class="message-copy"></ul>
</div>
<%= fields %>
<button class="action action-primary action-update js-reset">Reset password</button>
<button class="action action-primary action-update js-reset"><%- gettext("Reset password") %></button>
</form>
</div>
<div class="js-reset-success status submission-success hidden" aria-hidden="true">
<h4 class="message-title">Password Reset Email Sent</h4>
<h4 class="message-title"><%- gettext("Password Reset Email Sent") %></h4>
<div class="message-copy">
<p>We've sent instructions for resetting your password to the email address you provided.</p>
<p>
<%- gettext("We've sent instructions for resetting your password to the email address you provided.") %>
</p>
</div>
</div>
</section>
<% if (currentProvider) { %>
<% if (context.currentProvider) { %>
<div class="status" aria-hidden="false">
<p class="message-copy">You've successfully logged into <%- currentProvider %>. We just need a little more information before you start learning with edX.</p>
<p class="message-copy">
<%- _.sprintf(gettext("You've successfully logged into %(currentProvider)s."), context) %>
<%- _.sprintf(gettext("We just need a little more information before you start learning with %(platformName)s."), context) %>
</p>
</div>
<% } else {
_.each( providers, function( provider) { %>
_.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>Register using <%- provider.name %>
<span class="icon <%- provider.iconClass %>"></span><%- _.sprintf(gettext("Register using %(name)s"), provider) %>
</button>
<% });
} %>
<form id="register" autocomplete="off">
<div class="status submission-error hidden" aria-hidden="true">
<h4 class="message-title">An error occurred in your registration.</h4>
<h4 class="message-title"><%- gettext("An error occurred in your registration.") %></h4>
<ul class="message-copy"></ul>
</div>
<!-- PASSWORD FIELD DISPLAYS IN PLAIN TEXT -->
<%= fields %>
<button class="action action-primary action-update js-register">Register</button>
<%= context.fields %>
<button class="action action-primary action-update js-register"><%- gettext("Register") %></button>
</form>
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