Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #14985 from open-craft/jill/update-registration-login

Browse Source 
ENT-332/ENT-333 Updates Register and Login as per new design
This commit is contained in:
Brittney Exline
2017-05-12 11:07:10 -04:00
committed by GitHub
parent 78a9b1f0ae 71ba54a963
commit 69d85dc103
19 changed files with 175 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lms/envs/common.py
View File

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

7
lms/static/js/student_account/views/AccessView.js
View File

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

9
lms/static/js/student_account/views/FormView.js
View File

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

1
lms/static/js/student_account/views/LoginView.js
View File

@@ -20,6 +20,7 @@
},
formType: 'login',
requiredStr: '',
optionalStr: '',
submitButton: '.js-login',
formSuccessTpl: formSuccessTpl,
formStatusTpl: formStatusTpl,

1
lms/static/js/student_account/views/PasswordResetView.js
View File

@@ -17,6 +17,7 @@
formType: 'password-reset',
requiredStr: '',
optionalStr: '',
submitButton: '.js-reset',

2
lms/static/sass/course/layout/_courseware_header.scss
View File

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

21
lms/static/sass/elements/_controls.scss
View File

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

1
lms/static/sass/partials/base/_variables.scss
View File

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

2
lms/static/sass/shared/_header.scss
View File

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

131
lms/static/sass/views/_login-register.scss
View File

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

4
lms/templates/navigation.html
View File

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

28
lms/templates/student_account/form_field.underscore
View File

@@ -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' ) { %>

29
lms/templates/student_account/login.underscore
View File

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

8
lms/templates/student_account/password_reset.underscore
View File

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

34
lms/templates/student_account/register.underscore
View File

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