Merge pull request #14985 from open-craft/jill/update-registration-login
ENT-332/ENT-333 Updates Register and Login as per new design
This commit is contained in:
@@ -220,7 +220,7 @@ class CombinedLoginAndRegisterPage(PageObject):
|
||||
if favorite_movie:
|
||||
self.q(css="#register-favorite_movie").fill(favorite_movie)
|
||||
if terms_of_service:
|
||||
self.q(css="#register-honor_code").click()
|
||||
self.q(css="label[for='register-honor_code']").click()
|
||||
|
||||
# Submit it
|
||||
self.q(css=".register-button").click()
|
||||
|
||||
@@ -341,7 +341,7 @@ class RegisterFromCombinedPageTest(UniqueCourseTest):
|
||||
|
||||
# Verify that the expected errors are displayed.
|
||||
errors = self.register_page.wait_for_errors()
|
||||
self.assertIn(u'Please enter your Public username.', errors)
|
||||
self.assertIn(u'Please enter your Public Username.', errors)
|
||||
self.assertIn(
|
||||
u'You must agree to the édX Terms of Service and Honor Code',
|
||||
errors
|
||||
|
||||
@@ -2450,13 +2450,13 @@ REGISTRATION_EXTRA_FIELDS = {
|
||||
}
|
||||
|
||||
REGISTRATION_FIELD_ORDER = [
|
||||
"email",
|
||||
"confirm_email",
|
||||
"name",
|
||||
"username",
|
||||
"password",
|
||||
"first_name",
|
||||
"last_name",
|
||||
"username",
|
||||
"email",
|
||||
"confirm_email",
|
||||
"password",
|
||||
"city",
|
||||
"state",
|
||||
"country",
|
||||
|
||||
@@ -205,7 +205,8 @@
|
||||
toggleForm: function(e) {
|
||||
var type = $(e.currentTarget).data('type'),
|
||||
$form = $('#' + type + '-form'),
|
||||
$anchor = $('#' + type + '-anchor'),
|
||||
scrollX = window.scrollX,
|
||||
scrollY = window.scrollY,
|
||||
queryParams = url('?'),
|
||||
queryStr = queryParams.length > 0 ? '?' + queryParams : '';
|
||||
|
||||
@@ -224,7 +225,6 @@
|
||||
this.element.hide($(this.el).find('.submission-success'));
|
||||
this.element.hide($(this.el).find('.form-wrapper'));
|
||||
this.element.show($form);
|
||||
this.element.scrollTop($anchor);
|
||||
|
||||
// Update url without reloading page
|
||||
if (type != 'institution_login') {
|
||||
@@ -234,6 +234,9 @@
|
||||
|
||||
// Focus on the form
|
||||
$('#' + type).focus();
|
||||
|
||||
// Maintain original scroll position
|
||||
window.scrollTo(scrollX, scrollY);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@@ -35,7 +35,13 @@
|
||||
fields: [],
|
||||
|
||||
// String to append to required label fields
|
||||
requiredStr: '*',
|
||||
requiredStr: '',
|
||||
|
||||
/*
|
||||
Translators: This string is appended to optional field labels on the student login, registration, and
|
||||
profile forms.
|
||||
*/
|
||||
optionalStr: gettext('(optional)'),
|
||||
|
||||
submitButton: '',
|
||||
|
||||
@@ -94,6 +100,7 @@
|
||||
html.push(_.template(fieldTpl)($.extend(data[i], {
|
||||
form: this.formType,
|
||||
requiredStr: this.requiredStr,
|
||||
optionalStr: this.optionalStr,
|
||||
supplementalText: data[i].supplementalText || '',
|
||||
supplementalLink: data[i].supplementalLink || ''
|
||||
})));
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
},
|
||||
formType: 'login',
|
||||
requiredStr: '',
|
||||
optionalStr: '',
|
||||
submitButton: '.js-login',
|
||||
formSuccessTpl: formSuccessTpl,
|
||||
formStatusTpl: formStatusTpl,
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
formType: 'password-reset',
|
||||
|
||||
requiredStr: '',
|
||||
optionalStr: '',
|
||||
|
||||
submitButton: '.js-reset',
|
||||
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
box-shadow: 0 1px 2px $shadow-l1;
|
||||
height: auto;
|
||||
padding: ($baseline/4) 0 ($baseline/2) 0;
|
||||
border-bottom: 1px solid $outer-border-color;
|
||||
border-bottom: 1px solid $header-border-color;
|
||||
background: $header-bg;
|
||||
line-height: 1.4;
|
||||
|
||||
|
||||
@@ -76,6 +76,7 @@
|
||||
border: none;
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
|
||||
@@ -142,7 +143,6 @@
|
||||
// blue primary button
|
||||
%btn-primary-blue {
|
||||
@extend %btn-primary;
|
||||
box-shadow: 0 2px 1px 0 $m-blue-d4;
|
||||
background: $m-blue-d3;
|
||||
color: $white;
|
||||
|
||||
@@ -152,12 +152,10 @@
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
box-shadow: inset 0 2px 1px 1px $m-blue-d2;
|
||||
background: $m-blue;
|
||||
color: $m-blue-d2;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
box-shadow: inset 0 2px 1px 1px $m-blue-d3;
|
||||
color: $m-blue-d3;
|
||||
}
|
||||
}
|
||||
@@ -473,3 +471,20 @@
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// enlarge the clickable area of a control.
|
||||
%expand-clickable-area {
|
||||
position: relative;
|
||||
|
||||
&, &:link, &:visited, &:hover, &:active, &:focus {
|
||||
&:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc( 50% - #{($baseline * 1.1)});
|
||||
min-height: ($baseline * 2.2);
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -466,6 +466,7 @@ $container-bg: $white !default;
|
||||
// header
|
||||
$header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9)) !default;
|
||||
$header-bg: $white !default;
|
||||
$header-border-color: $blue !default;
|
||||
$header-graphic-super-color: $m-blue-d1 !default;
|
||||
$header-graphic-sub-color: $m-gray-d2 !default;
|
||||
$header-sans-serif: 'Open Sans', Arial, Helvetica, sans-serif !default;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
.header-global {
|
||||
@extend %ui-depth1;
|
||||
border-bottom: 1px solid $gray-l1;
|
||||
border-bottom: 2px solid $header-border-color;
|
||||
box-shadow: 0 1px 5px 0 $shadow-l1;
|
||||
background: $header-bg;
|
||||
position: relative;
|
||||
|
||||
@@ -10,13 +10,29 @@
|
||||
background: $white;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
padding-left: ($baseline/2);
|
||||
padding-right: ($baseline/2);
|
||||
$third-party-button-height: ($baseline*1.75);
|
||||
|
||||
h2 {
|
||||
@extend %t-title5;
|
||||
@extend %t-title4;
|
||||
margin-top: $baseline;
|
||||
letter-spacing: normal;
|
||||
font-family: $sans-serif;
|
||||
color: $uxpl-blue-hover-active;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %t-title6;
|
||||
@extend %t-light;
|
||||
margin: 0;
|
||||
letter-spacing: normal;
|
||||
font-family: $sans-serif;
|
||||
color: $gray-d4;
|
||||
}
|
||||
|
||||
a, label {
|
||||
@extend %expand-clickable-area;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
@@ -68,27 +84,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
form,
|
||||
.wrapper-other-login {
|
||||
border: 1px solid $gray-l4;
|
||||
border-radius: ($baseline/4);
|
||||
padding: 0 ($baseline*1.25) $baseline ($baseline*1.25);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
position: relative;
|
||||
margin: 20px 0 10px;
|
||||
margin: $baseline 0 ($baseline/2);
|
||||
|
||||
&.lines {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: $baseline;
|
||||
margin-top: $baseline;
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 12px;
|
||||
top: ($baseline/2);
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: $gray-l4;
|
||||
background: $gray-l3;
|
||||
content: '';
|
||||
z-index: 5;
|
||||
}
|
||||
@@ -125,18 +136,13 @@
|
||||
.form-type,
|
||||
.toggle-form {
|
||||
@include box-sizing(border-box);
|
||||
max-width: 650px;
|
||||
max-width: 600px;
|
||||
min-width: 250px;
|
||||
margin: 0 auto;
|
||||
padding: {
|
||||
left: $baseline; // Don't want to override any top or bottom (CR)
|
||||
right: $baseline; // Don't want to override any top or bottom (CR)
|
||||
bottom: ($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-form {
|
||||
text-align: center // Centers the text and buttons
|
||||
@extend %t-action1;
|
||||
}
|
||||
|
||||
.note {
|
||||
@@ -149,7 +155,8 @@
|
||||
|
||||
/** The forms **/
|
||||
.form-wrapper {
|
||||
padding-top: ($baseline + 5);
|
||||
padding-top: $baseline;
|
||||
padding-bottom: $baseline;
|
||||
|
||||
form {
|
||||
@include clearfix();
|
||||
@@ -161,22 +168,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-bottom: $baseline;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.password-reset-form {
|
||||
padding-bottom: ($baseline + 5);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form,
|
||||
.password-reset-form,
|
||||
.register-form {
|
||||
&:focus {
|
||||
outline: none;
|
||||
@@ -204,7 +197,7 @@
|
||||
clear: both;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: ($baseline/2) 0 ($baseline/4) 0;
|
||||
margin: ($baseline/2) 0 0 0;
|
||||
|
||||
&.select-year_of_birth {
|
||||
@include margin-left(15px);
|
||||
@@ -219,6 +212,7 @@
|
||||
/** FROM _accounts.scss - start **/
|
||||
label,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
height: auto;
|
||||
line-height: 1.5em;
|
||||
@@ -235,7 +229,8 @@
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0 0 6px 0;
|
||||
margin: 0;
|
||||
color: $black;
|
||||
|
||||
&.inline {
|
||||
display: inline;
|
||||
@@ -244,13 +239,12 @@
|
||||
&.error {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
|
||||
&[for="register-data_sharing_consent"],
|
||||
&[for="register-honor_code"],
|
||||
&[for="register-terms_of_service"] {
|
||||
display: inline-block;
|
||||
margin: 5px 5px 0 0;
|
||||
width: 90%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@@ -275,7 +269,7 @@
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
font-family: $sans-serif;
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
@@ -286,6 +280,7 @@
|
||||
select,
|
||||
textarea {
|
||||
display: block;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
margin: 0 0 ($baseline/4);
|
||||
padding: 0 ($baseline/2);
|
||||
@@ -301,7 +296,12 @@
|
||||
&.checkbox {
|
||||
display: inline;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-right: ($baseline/4);
|
||||
|
||||
& + label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
@@ -309,31 +309,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
|
||||
&.long {
|
||||
height: ($baseline*5);
|
||||
}
|
||||
height: ($baseline*5);
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
opacity: 0.85;
|
||||
border: none;
|
||||
outline: solid 1px $gray-l3;
|
||||
cursor: pointer;
|
||||
|
||||
&.error {
|
||||
border-color: tint($red,50%);
|
||||
&:active, &:focus {
|
||||
outline: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.tip, .label-optional {
|
||||
@extend %t-copy-sub1;
|
||||
color: $gray-d2;
|
||||
}
|
||||
.tip {
|
||||
@extend %t-copy-sub2;
|
||||
display: block;
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
color: $base-font-color;
|
||||
}
|
||||
/** FROM _accounts.scss - end **/
|
||||
}
|
||||
@@ -356,12 +354,11 @@
|
||||
|
||||
.action-primary {
|
||||
@extend %btn-primary-blue;
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
padding: ($baseline/2);
|
||||
padding: 1ex 1em;
|
||||
text-transform: none;
|
||||
font-weight: 600;
|
||||
letter-spacing: normal;
|
||||
margin-top: $baseline;
|
||||
|
||||
.icon {
|
||||
@extend %sso-icon;
|
||||
@@ -377,7 +374,7 @@
|
||||
|
||||
position: relative;
|
||||
margin-right: ($baseline/4);
|
||||
margin-bottom: $baseline;
|
||||
margin-bottom: ($baseline/4);
|
||||
border-color: $lightGrey1;
|
||||
width: $baseline*6.5;
|
||||
height: $third-party-button-height;
|
||||
@@ -426,10 +423,6 @@
|
||||
border: 1px solid #A5382B;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 1px 0 #8D3024;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-oa2-facebook {
|
||||
@@ -445,10 +438,6 @@
|
||||
border: 1px solid #263A62;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 1px 0 #30487C;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-oa2-linkedin-oauth2 {
|
||||
@@ -464,10 +453,6 @@
|
||||
border: 1px solid #06527D;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 1px 0 #005D8E;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-oa2-azuread-oauth2 {
|
||||
@@ -483,10 +468,6 @@
|
||||
border: 1px solid $microsoft-blue;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 1px 0 darken($microsoft-blue, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -151,11 +151,11 @@ site_status_msg = get_site_status_msg(course_id)
|
||||
%endif
|
||||
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
|
||||
<li class="item nav-global-04">
|
||||
<a class="btn-neutral" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
|
||||
<a class="btn-neutral btn-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
|
||||
</li>
|
||||
% elif static.get_value('ALLOW_PUBLIC_ACCOUNT_CREATION', settings.FEATURES.get('ALLOW_PUBLIC_ACCOUNT_CREATION')):
|
||||
<li class="item nav-global-04">
|
||||
<a class="btn-neutral" href="/register${login_query()}">${_("Register")}</a>
|
||||
<a class="btn-neutral btn-register" href="/register${login_query()}">${_("Register")}</a>
|
||||
</li>
|
||||
% endif
|
||||
% endif
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<div class="form-field <%=type%>-<%= name %>">
|
||||
<% if ( type !== 'checkbox' ) { %>
|
||||
<label for="<%= form %>-<%= name %>">
|
||||
<%= label %>
|
||||
<% if ( required && requiredStr ) { %> <%= requiredStr %></label><% } %>
|
||||
<span class="label-text"><%= label %></span>
|
||||
<% if ( required && requiredStr && (type !== 'hidden') ) { %><span class="label-required"><%= requiredStr %></span><% } %>
|
||||
<% if ( !required && optionalStr && (type !== 'hidden') ) { %><span class="label-optional"><%= optionalStr %></span><% } %>
|
||||
</label>
|
||||
<% if (supplementalLink && supplementalText) { %>
|
||||
<div class="supplemental-link">
|
||||
<a href="<%- supplementalLink %>"><%- supplementalText %></a>
|
||||
<a href="<%- supplementalLink %>" target="_blank"><%- supplementalText %></a>
|
||||
</div>
|
||||
<% } %>
|
||||
<% } %>
|
||||
@@ -31,7 +32,7 @@
|
||||
<% if ( instructions ) { %> <span class="tip tip-input" id="<%= form %>-<%= name %>-desc"><%= instructions %></span><% } %>
|
||||
<% if (supplementalLink && supplementalText) { %>
|
||||
<div class="supplemental-link">
|
||||
<a href="<%- supplementalLink %>"><%- supplementalText %></a>
|
||||
<a href="<%- supplementalLink %>" target="_blank"><%- supplementalText %></a>
|
||||
</div>
|
||||
<% } %>
|
||||
<% } else if ( type === 'textarea' ) { %>
|
||||
@@ -53,10 +54,17 @@
|
||||
<% if ( instructions ) { %> <span class="tip tip-input" id="<%= form %>-<%= name %>-desc"><%= instructions %></span><% } %>
|
||||
<% if (supplementalLink && supplementalText) { %>
|
||||
<div class="supplemental-link">
|
||||
<a href="<%- supplementalLink %>"><%- supplementalText %></a>
|
||||
<a href="<%- supplementalLink %>" target="_blank"><%- supplementalText %></a>
|
||||
</div>
|
||||
<% } %>
|
||||
<% } else { %>
|
||||
<% if ( type === 'checkbox' ) { %>
|
||||
<% if (supplementalLink && supplementalText) { %>
|
||||
<div class="supplemental-link">
|
||||
<a href="<%- supplementalLink %>" target="_blank"><%- supplementalText %></a>
|
||||
</div>
|
||||
<% } %>
|
||||
<% } %>
|
||||
<input id="<%= form %>-<%= name %>"
|
||||
type="<%= type %>"
|
||||
name="<%= name %>"
|
||||
@@ -75,16 +83,12 @@
|
||||
/>
|
||||
<% if ( type === 'checkbox' ) { %>
|
||||
<label for="<%= form %>-<%= name %>">
|
||||
<%= label %>
|
||||
<% if ( required && requiredStr ) { %> <%= requiredStr %><% } %>
|
||||
<span class="label-text"><%= label %></span>
|
||||
<% if ( required && requiredStr ) { %><span class="label-required"><%= requiredStr %></span><% } %>
|
||||
<% if ( !required && optionalStr ) { %><span class="label-optional"><%= optionalStr %></span><% } %>
|
||||
</label>
|
||||
<% } %>
|
||||
<% if ( instructions ) { %> <span class="tip tip-input" id="<%= form %>-<%= name %>-desc"><%= instructions %></span><% } %>
|
||||
<% if (supplementalLink && supplementalText) { %>
|
||||
<div class="supplemental-link">
|
||||
<a href="<%- supplementalLink %>"><%- supplementalText %></a>
|
||||
</div>
|
||||
<% } %>
|
||||
<% } %>
|
||||
|
||||
<% if( form === 'login' && name === 'password' ) { %>
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
<div class="js-form-feedback" aria-live="assertive" tabindex="-1">
|
||||
</div>
|
||||
|
||||
<form id="login" class="login-form" tabindex="-1" method="POST">
|
||||
<% if ( context.createAccountOption !== false ) { %>
|
||||
<div class="toggle-form">
|
||||
<span class="text"><%- gettext("First time here?") %></span>
|
||||
<a href="#login" class="form-toggle" data-type="register"><%- gettext("Create an Account.") %></a>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<div class="section-title lines">
|
||||
<h2>
|
||||
<span class="text"><%- gettext("Sign in") %></span>
|
||||
</h2>
|
||||
</div>
|
||||
<h2><%- gettext("Sign In") %></h2>
|
||||
|
||||
<form id="login" class="login-form" tabindex="-1" method="POST">
|
||||
|
||||
<p class="sr">
|
||||
<% if ( context.providers.length > 0 && !context.currentProvider || context.hasSecondaryProviders ) { %>
|
||||
@@ -25,9 +28,9 @@
|
||||
<% if ( context.providers.length > 0 && !context.currentProvider || context.hasSecondaryProviders ) { %>
|
||||
<div class="login-providers">
|
||||
<div class="section-title lines">
|
||||
<h2>
|
||||
<h3>
|
||||
<span class="text"><%- gettext("or sign in with") %></span>
|
||||
</h2>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<% _.each( context.providers, function( provider ) {
|
||||
@@ -53,13 +56,3 @@
|
||||
<% } %>
|
||||
</form>
|
||||
|
||||
<% if ( context.createAccountOption !== false ) { %>
|
||||
<div class="toggle-form">
|
||||
<div class="section-title">
|
||||
<h2>
|
||||
<span class="text"><%- _.sprintf( gettext("New to %(platformName)s?"), context ) %></span>
|
||||
</h2>
|
||||
</div>
|
||||
<button class="nav-btn form-toggle" data-type="register"><%- gettext("Create an account") %></button>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
<div class="js-form-feedback" aria-live="assertive" tabindex="-1">
|
||||
</div>
|
||||
|
||||
<form id="password-reset" class="password-reset-form" tabindex="-1" method="POST">
|
||||
<h2><%- gettext("Password assistance") %></h2>
|
||||
|
||||
<div class="section-title lines">
|
||||
<h2>
|
||||
<span class="text"><%- gettext("Password assistance") %></span>
|
||||
</h2>
|
||||
</div>
|
||||
<form id="password-reset" class="password-reset-form" tabindex="-1" method="POST">
|
||||
|
||||
<p class="action-label"><%- gettext("Please enter your email address below and we will send you instructions for setting a new password.") %></p>
|
||||
|
||||
|
||||
@@ -1,14 +1,22 @@
|
||||
<div class="js-form-feedback" aria-live="assertive" tabindex="-1">
|
||||
</div>
|
||||
|
||||
<div class="toggle-form">
|
||||
<span class="text"><%- gettext("Already have an account?") %></span>
|
||||
<a href="#login" class="form-toggle" data-type="login"><%- gettext("Sign in.") %></a>
|
||||
</div>
|
||||
|
||||
<h2><%- gettext("Create an Account") %></h2>
|
||||
|
||||
<form id="register" class="register-form" autocomplete="off" tabindex="-1" method="POST">
|
||||
|
||||
<% if (!context.currentProvider) { %>
|
||||
<% if (context.providers.length > 0 || context.hasSecondaryProviders) { %>
|
||||
<div class="login-providers">
|
||||
<div class="section-title lines">
|
||||
<h2>
|
||||
<h3>
|
||||
<span class="text"><%- gettext("Create an account using") %></span>
|
||||
</h2>
|
||||
</h3>
|
||||
</div>
|
||||
<%
|
||||
_.each( context.providers, function( provider) {
|
||||
@@ -32,30 +40,14 @@
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="section-title lines">
|
||||
<h2>
|
||||
<h3>
|
||||
<span class="text"><%- gettext("or create a new one here") %></span>
|
||||
</h2>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<div class="section-title lines">
|
||||
<h2>
|
||||
<span class="text"><%- gettext("Create a new account") %></span>
|
||||
</h2>
|
||||
</h3>
|
||||
</div>
|
||||
<% } %>
|
||||
<% } %>
|
||||
|
||||
<%= context.fields %>
|
||||
|
||||
<button type="submit" class="action action-primary action-update js-register register-button"><%- gettext("Create your account") %></button>
|
||||
<p class="note">* <%- gettext("Required field") %></p>
|
||||
<button type="submit" class="action action-primary action-update js-register register-button"><%- gettext("Create account") %></button>
|
||||
</form>
|
||||
|
||||
<div class="toggle-form">
|
||||
<div class="section-title">
|
||||
<h2>
|
||||
<span class="text"><%- gettext("Already have an account?") %></span>
|
||||
</h2>
|
||||
</div>
|
||||
<button class="nav-btn form-toggle" data-type="login"><%- gettext("Sign in") %></button>
|
||||
</div>
|
||||
|
||||
@@ -822,6 +822,7 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
|
||||
u"required": True,
|
||||
u"label": u"Email",
|
||||
u"placeholder": u"username@domain.com",
|
||||
u"instructions": u"This is what you will use to login.",
|
||||
u"restrictions": {
|
||||
"min_length": EMAIL_MIN_LENGTH,
|
||||
"max_length": EMAIL_MAX_LENGTH
|
||||
@@ -835,9 +836,9 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
|
||||
u"name": u"name",
|
||||
u"type": u"text",
|
||||
u"required": True,
|
||||
u"label": u"Full name",
|
||||
u"placeholder": u"Jane Doe",
|
||||
u"instructions": u"Your legal name, used for any certificates you earn.",
|
||||
u"label": u"Full Name",
|
||||
u"placeholder": u"Jane Q. Learner",
|
||||
u"instructions": u"This name will be used on any certificates that you earn.",
|
||||
u"restrictions": {
|
||||
"max_length": 255
|
||||
},
|
||||
@@ -850,9 +851,10 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
|
||||
u"name": u"username",
|
||||
u"type": u"text",
|
||||
u"required": True,
|
||||
u"label": u"Public username",
|
||||
u"placeholder": u"JaneDoe",
|
||||
u"instructions": u"The name that will identify you in your courses - <strong>(cannot be changed later)</strong>", # pylint: disable=line-too-long
|
||||
u"label": u"Public Username",
|
||||
u"placeholder": u"Jane_Q_Learner",
|
||||
u"instructions": u"The name that will identify you in your courses. "
|
||||
u"It cannot be changed later.",
|
||||
u"restrictions": {
|
||||
"min_length": USERNAME_MIN_LENGTH,
|
||||
"max_length": USERNAME_MAX_LENGTH
|
||||
@@ -890,6 +892,7 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
|
||||
u"required": True,
|
||||
u"label": u"Email",
|
||||
u"placeholder": u"username@domain.com",
|
||||
u"instructions": u"This is what you will use to login.",
|
||||
u"restrictions": {
|
||||
"min_length": EMAIL_MIN_LENGTH,
|
||||
"max_length": EMAIL_MAX_LENGTH
|
||||
@@ -973,6 +976,7 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
|
||||
u"required": True,
|
||||
u"label": u"Email",
|
||||
u"placeholder": u"username@domain.com",
|
||||
u"instructions": u"This is what you will use to login.",
|
||||
u"restrictions": {
|
||||
"min_length": EMAIL_MIN_LENGTH,
|
||||
"max_length": EMAIL_MAX_LENGTH
|
||||
@@ -980,7 +984,7 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
|
||||
}
|
||||
)
|
||||
|
||||
# Full name should be filled in
|
||||
# Full Name should be filled in
|
||||
self._assert_reg_field(
|
||||
no_extra_fields_setting,
|
||||
{
|
||||
@@ -988,9 +992,9 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
|
||||
u"defaultValue": u"Bob",
|
||||
u"type": u"text",
|
||||
u"required": True,
|
||||
u"label": u"Full name",
|
||||
u"placeholder": u"Jane Doe",
|
||||
u"instructions": u"Your legal name, used for any certificates you earn.",
|
||||
u"label": u"Full Name",
|
||||
u"placeholder": u"Jane Q. Learner",
|
||||
u"instructions": u"This name will be used on any certificates that you earn.",
|
||||
u"restrictions": {
|
||||
"max_length": NAME_MAX_LENGTH,
|
||||
}
|
||||
@@ -1005,9 +1009,10 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
|
||||
u"defaultValue": u"Bob123",
|
||||
u"type": u"text",
|
||||
u"required": True,
|
||||
u"label": u"Public username",
|
||||
u"placeholder": u"JaneDoe",
|
||||
u"instructions": u"The name that will identify you in your courses - <strong>(cannot be changed later)</strong>", # pylint: disable=line-too-long
|
||||
u"label": u"Public Username",
|
||||
u"placeholder": u"Jane_Q_Learner",
|
||||
u"instructions": u"The name that will identify you in your courses. "
|
||||
u"It cannot be changed later.",
|
||||
u"restrictions": {
|
||||
"min_length": USERNAME_MIN_LENGTH,
|
||||
"max_length": USERNAME_MAX_LENGTH
|
||||
@@ -1197,7 +1202,7 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
|
||||
"required": True,
|
||||
"label": "Confirm Email",
|
||||
"errorMessages": {
|
||||
"required": "Please confirm your email.",
|
||||
"required": "Please confirm your email address.",
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
@@ -396,11 +396,16 @@ class RegistrationView(APIView):
|
||||
# a field on the registration form meant to hold the user's email address.
|
||||
email_placeholder = _(u"username@domain.com")
|
||||
|
||||
# Translators: These instructions appear on the registration form, immediately
|
||||
# below a field meant to hold the user's email address.
|
||||
email_instructions = _(u"This is what you will use to login.")
|
||||
|
||||
form_desc.add_field(
|
||||
"email",
|
||||
field_type="email",
|
||||
label=email_label,
|
||||
placeholder=email_placeholder,
|
||||
instructions=email_instructions,
|
||||
restrictions={
|
||||
"min_length": EMAIL_MIN_LENGTH,
|
||||
"max_length": EMAIL_MAX_LENGTH,
|
||||
@@ -421,7 +426,7 @@ class RegistrationView(APIView):
|
||||
# Translators: This label appears above a field on the registration form
|
||||
# meant to confirm the user's email address.
|
||||
email_label = _(u"Confirm Email")
|
||||
error_msg = _(u"Please confirm your email.")
|
||||
error_msg = _(u"Please confirm your email address.")
|
||||
|
||||
form_desc.add_field(
|
||||
"confirm_email",
|
||||
@@ -444,15 +449,15 @@ class RegistrationView(APIView):
|
||||
"""
|
||||
# Translators: This label appears above a field on the registration form
|
||||
# meant to hold the user's full name.
|
||||
name_label = _(u"Full name")
|
||||
name_label = _(u"Full Name")
|
||||
|
||||
# Translators: This example name is used as a placeholder in
|
||||
# a field on the registration form meant to hold the user's name.
|
||||
name_placeholder = _(u"Jane Doe")
|
||||
name_placeholder = _(u"Jane Q. Learner")
|
||||
|
||||
# Translators: These instructions appear on the registration form, immediately
|
||||
# below a field meant to hold the user's full name.
|
||||
name_instructions = _(u"Your legal name, used for any certificates you earn.")
|
||||
name_instructions = _(u"This name will be used on any certificates that you earn.")
|
||||
|
||||
form_desc.add_field(
|
||||
"name",
|
||||
@@ -477,18 +482,18 @@ class RegistrationView(APIView):
|
||||
"""
|
||||
# Translators: This label appears above a field on the registration form
|
||||
# meant to hold the user's public username.
|
||||
username_label = _(u"Public username")
|
||||
username_label = _(u"Public Username")
|
||||
|
||||
username_instructions = _(
|
||||
# Translators: These instructions appear on the registration form, immediately
|
||||
# below a field meant to hold the user's public username.
|
||||
u"The name that will identify you in your courses - "
|
||||
u"{bold_start}(cannot be changed later){bold_end}"
|
||||
).format(bold_start=u'<strong>', bold_end=u'</strong>')
|
||||
u"The name that will identify you in your courses. "
|
||||
u"It cannot be changed later."
|
||||
)
|
||||
|
||||
# Translators: This example username is used as a placeholder in
|
||||
# a field on the registration form meant to hold the user's username.
|
||||
username_placeholder = _(u"JaneDoe")
|
||||
username_placeholder = _(u"Jane_Q_Learner")
|
||||
|
||||
form_desc.add_field(
|
||||
"username",
|
||||
|
||||
Reference in New Issue
Block a user