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

UX-1642 Making visual tweaks and enhancements to the logistration form

Browse Source
This commit is contained in:
Chris Rodriguez
2015-02-25 12:31:35 -05:00
parent 3d520f4fa8
commit 5ae7cc7ee1
8 changed files with 132 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
common/test/acceptance/pages/lms/login_and_register.py
View File

@@ -42,6 +42,7 @@ class RegisterPage(PageObject):
Fill in registration info.
`email`, `password`, `username`, and `full_name` are the user's credentials.
"""
self.wait_for_element_visibility('input#email', 'Email field is shown')
self.q(css='input#email').fill(email)
self.q(css='input#password').fill(password)
self.q(css='input#username').fill(username)
@@ -161,6 +162,7 @@ class CombinedLoginAndRegisterPage(PageObject):
"""
# Fill in the form
self.wait_for_element_visibility('#register-email', 'Email field is shown')
self.q(css="#register-email").fill(email)
self.q(css="#register-name").fill(full_name)
self.q(css="#register-username").fill(username)
@@ -187,6 +189,7 @@ class CombinedLoginAndRegisterPage(PageObject):
"""
# Fill in the form
self.wait_for_element_visibility('#login-email', 'Email field is shown')
self.q(css="#login-email").fill(email)
self.q(css="#login-password").fill(password)
@@ -214,6 +217,7 @@ class CombinedLoginAndRegisterPage(PageObject):
).fulfill()
# Fill in the form
self.wait_for_element_visibility('#password-reset-email', 'Email field is shown')
self.q(css="#password-reset-email").fill(email)
# Submit it

9
lms/static/js/spec/search/search_spec.js
View File

@@ -387,9 +387,14 @@ define([
this.collection.hasNextPage = function () { return true; };
this.listView.render();
this.listView.loadNext();
expect(this.listView.$el.find('a.search-load-next .icon')[0]).toBeVisible();
// Do we really need to check if a loading indicator exists? - CR
// jasmine.Clock.useMock(1000);
// expect(this.listView.$el.find('a.search-load-next .icon')[0]).toBeVisible();
this.listView.renderNext();
expect(this.listView.$el.find('a.search-load-next .icon')[0]).toBeHidden();
// jasmine.Clock.useMock(1000);
// expect(this.listView.$el.find('a.search-load-next .icon')[0]).toBeHidden();
});
});

8
lms/static/js/spec/student_account/login_spec.js
View File

@@ -43,16 +43,17 @@ define([
submit_url: '/user_api/v1/account/login_session/',
fields: [
{
placeholder: 'username@domain.com',
name: 'email',
label: 'Email',
defaultValue: '',
type: 'email',
required: true,
placeholder: 'place@holder.org',
instructions: 'Enter your email.',
restrictions: {}
},
{
placeholder: '',
name: 'password',
label: 'Password',
defaultValue: '',
@@ -62,6 +63,7 @@ define([
restrictions: {}
},
{
placeholder: '',
name: 'remember',
label: 'Remember me',
defaultValue: '',
@@ -150,7 +152,7 @@ define([
AjaxHelpers.expectRequest(
requests, 'POST',
FORM_DESCRIPTION.submit_url,
$.param( USER_DATA )
$.param(USER_DATA)
);
// Respond with status code 200
@@ -161,7 +163,7 @@ define([
});
it('sends analytics info containing the enrolled course ID', function() {
createLoginView( this );
createLoginView(this);
// Simulate that the user is attempting to enroll in a course
// by setting the course_id query string param.

15
lms/static/js/spec/student_account/register_spec.js
View File

@@ -50,16 +50,17 @@ define([
submit_url: '/user_api/v1/account/registration/',
fields: [
{
placeholder: 'username@domain.com',
name: 'email',
label: 'Email',
defaultValue: '',
type: 'email',
required: true,
placeholder: 'place@holder.org',
instructions: 'Enter your email.',
restrictions: {}
},
{
placeholder: 'Jane Doe',
name: 'name',
label: 'Full Name',
defaultValue: '',
@@ -69,6 +70,7 @@ define([
restrictions: {}
},
{
placeholder: 'JaneDoe',
name: 'username',
label: 'Username',
defaultValue: '',
@@ -78,6 +80,7 @@ define([
restrictions: {}
},
{
placeholder: '',
name: 'password',
label: 'Password',
defaultValue: '',
@@ -87,6 +90,7 @@ define([
restrictions: {}
},
{
placeholder: '',
name: 'level_of_education',
label: 'Highest Level of Education Completed',
defaultValue: '',
@@ -102,6 +106,7 @@ define([
restrictions: {}
},
{
placeholder: '',
name: 'gender',
label: 'Gender',
defaultValue: '',
@@ -117,6 +122,7 @@ define([
restrictions: {}
},
{
placeholder: '',
name: 'year_of_birth',
label: 'Year of Birth',
defaultValue: '',
@@ -132,6 +138,7 @@ define([
restrictions: {}
},
{
placeholder: '',
name: 'mailing_address',
label: 'Mailing Address',
defaultValue: '',
@@ -141,6 +148,7 @@ define([
restrictions: {}
},
{
placeholder: '',
name: 'goals',
label: 'Goals',
defaultValue: '',
@@ -150,6 +158,7 @@ define([
restrictions: {}
},
{
placeholder: '',
name: 'honor_code',
label: 'I agree to the <a href="/honor">Terms of Service and Honor Code</a>',
defaultValue: '',
@@ -228,7 +237,7 @@ define([
createRegisterView(this);
// Submit the form, with successful validation
submitForm( true );
submitForm(true);
// Verify that the client contacts the server with the expected data
AjaxHelpers.expectRequest(
@@ -247,7 +256,7 @@ define([
});
it('sends analytics info containing the enrolled course ID', function() {
createRegisterView( this );
createRegisterView(this);
// Simulate that the user is attempting to enroll in a course
// by setting the course_id query string param.

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

@@ -3,21 +3,6 @@
@import '../base/grid-settings';
@import "neat/neat"; // lib - Neat
%heading-4 {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0 !important;
color: $m-gray-d2;
}
%body-text {
font-size: 15px;
margin: 0 0 $baseline 0;
color: $base-font-color;
line-height: lh(1);
}
$sm-btn-google: #dd4b39;
$sm-btn-facebook: #3b5998;
$sm-btn-linkedin: #0077b5;
@@ -26,13 +11,14 @@ $sm-btn-linkedin: #0077b5;
@include box-sizing(border-box);
@include outer-container;
$grid-columns: 12;
background: white;
background: $white;
min-height: 100%;
width: 100%;
h2 {
line-height: 16px;
@extend %t-title5;
margin: 0;
letter-spacing: normal;
font-family: $sans-serif;
}
@@ -95,67 +81,59 @@ $sm-btn-linkedin: #0077b5;
margin-bottom: 20px;
&:after {
content: '';
width: 100%;
height: 1px;
background: $gray-l4;
position: absolute;
left: 0;
top: 12px;
width: 100%;
height: 1px;
background: $gray-l4;
content: '';
z-index: 5;
}
.text {
position: relative;
top: -2px; // Aligns center of text with center of line (CR)
z-index: 6;
padding: 0 $baseline;
background: $white;
}
}
h2 {
text-align: center;
.text {
position: relative;
background: white;
padding: 0 10px;
z-index: 6;
text-transform: none;
font-size: 0.7em;
font-weight: 600;
}
text-transform: none;
}
}
.nav-btn {
margin: 0 28px;
padding: 7px 0;
width: calc( 100% - 56px );
border: 3px solid $m-blue-d5;
border-radius: 5px;
color: $m-blue-d5;
box-shadow: none;
text-shadow: none;
@extend %btn-secondary-blue-outline;
width: 100%;
height: ($baseline*2);
text-transform: none;
background: white;
&:hover {
background: white;
border-color: $m-blue-d6;
color: $m-blue-d6;
}
&:active {
box-shadow: none;
}
text-shadow: none;
font-weight: 600;
letter-spacing: normal;
}
.form-type {
.form-type,
.toggle-form {
@include box-sizing(border-box);
width: 330px;
max-width: 650px;
min-width: 400px;
margin: 0 auto;
padding-left: $baseline; // Don't want to override any top or bottom (CR)
padding-right: $baseline // Don't want to override any top or bottom (CR)
}
.toggle-form {
text-align: center // Centers the text and buttons
}
.note {
@extend %t-copy-sub2;
display: block;
font-weight: normal;
color: $gray;
margin: 10px 10px 0px 10px;
margin: ($baseline/2) ($baseline/2) 0 ($baseline/2);
color: $m-gray-l1;
text-align: center;
}
@@ -163,7 +141,7 @@ $sm-btn-linkedin: #0077b5;
/** The forms **/
.form-wrapper {
padding-top: 25px;
padding-top: ($baseline + 5);
form {
@include clearfix();
@@ -180,7 +158,7 @@ $sm-btn-linkedin: #0077b5;
}
.password-reset-form {
padding-bottom: 25px;
padding-bottom: ($baseline + 5);
&:focus {
outline: none;
@@ -197,22 +175,16 @@ $sm-btn-linkedin: #0077b5;
@include font-size(16);
font-family: $sans-serif;
font-weight: $font-semibold;
font-style: normal;
text-transform: none;
}
.form-label {
@extend %bold-label;
padding: 0 0 0 5px;
letter-spacing: 1px;
padding: 0 0 0 ($baseline/4);
}
.action-label {
@include font-size(13);
font-family: $sans-serif;
font-weight: regular;
font-style: normal;
text-transform: none;
}
.form-field {
@@ -220,7 +192,7 @@ $sm-btn-linkedin: #0077b5;
clear: both;
position: relative;
width: 100%;
margin: 0 0 5px 0;
margin: ($baseline/2) 0 ($baseline/4) 0;
&.select-year_of_birth {
@include margin-left(15px);
@@ -236,22 +208,17 @@ $sm-btn-linkedin: #0077b5;
label,
input,
textarea {
border-radius: 0;
height: auto;
line-height: 1.5em;
border-radius: 0;
font-family: $sans-serif;
font-style: normal;
font-weight: 500;
font-size: 0.8em;
line-height: 1.5em;
color: $base-font-color;
}
label {
@include transition(color 0.15s ease-in-out 0s);
display: block;
margin: 0 0 6px 0;
color: tint($black, 20%);
font-weight: $font-semibold;
&.inline {
display: inline;
@@ -274,6 +241,7 @@ $sm-btn-linkedin: #0077b5;
}
.field-link {
@extend %t-copy-sub2;
display: block;
margin-bottom: ($baseline/2);
margin-top: ($baseline/4);
@@ -281,7 +249,6 @@ $sm-btn-linkedin: #0077b5;
font-weight: $font-regular;
text-decoration: none !important; // needed but nasty
font-family: $sans-serif;
font-size: 0.8em;
}
input,
@@ -330,6 +297,13 @@ $sm-btn-linkedin: #0077b5;
border-color: tint($red,50%);
}
}
.tip {
@extend %t-copy-sub2;
display: block;
margin: 0 0 ($baseline/2) 0;
color: $m-gray-l1;
}
/** FROM _accounts.scss - end **/
}
@@ -350,25 +324,13 @@ $sm-btn-linkedin: #0077b5;
}
.action-primary {
@extend %btn-primary-blue;
width: 100%;
height: 38px;
height: ($baseline*2);
margin-top: 1em; // Breathing room above (CR)
text-transform: none;
color: white;
background: $m-blue-d5;
border: 3px solid $m-blue-d6;
border-radius: 5px;
box-shadow: none;
font-weight: 600;
text-shadow: none;
&:hover,
&:focus {
background: $m-blue-l6;
}
&:active {
box-shadow: none;
}
letter-spacing: normal;
}
.login-provider {
@@ -479,16 +441,16 @@ $sm-btn-linkedin: #0077b5;
background: tint($yellow,20%);
.message-title {
@extend %heading-4;
@extend %t-title4;
font-family: $sans-serif;
margin: 0 0 ($baseline/4) 0;
font-size: em(14);
font-weight: 600;
text-transform: uppercase;
}
.message-copy,
.message-copy p {
@extend %body-text;
@extend %t-copy-base;
font-family: $sans-serif;
margin: 0 !important;
padding: 0;

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

@@ -49,8 +49,10 @@
data-errormsg-<%= type %>="<%= msg %>"
<% });
} %>
<% if ( placeholder ) { %> placeholder="<%= placeholder %>"<% } %>
value="<%- defaultValue %>"
/>
<% if ( instructions ) { %> <span class="tip tip-input" id="<%= form %>-<%= name %>-instructions"><%= instructions %></span><% } %>
<% } %>
<% if ( type === 'checkbox' ) { %>

45
openedx/core/djangoapps/user_api/tests/test_views.py
View File

@@ -785,6 +785,8 @@ class PasswordResetViewTest(ApiTestCase):
class RegistrationViewTest(ApiTestCase):
"""Tests for the registration end-points of the User API. """
maxDiff = None
USERNAME = "bob"
EMAIL = "bob@example.com"
PASSWORD = "password"
@@ -843,9 +845,10 @@ class RegistrationViewTest(ApiTestCase):
u"type": u"text",
u"required": True,
u"label": u"Full name",
u"instructions": u"The name that will appear on your certificates",
u"placeholder": u"Jane Doe",
u"instructions": u"Needed for any certificates you may earn",
u"restrictions": {
"max_length": NAME_MAX_LENGTH,
"max_length": 255
},
}
)
@@ -857,7 +860,8 @@ class RegistrationViewTest(ApiTestCase):
u"type": u"text",
u"required": True,
u"label": u"Public username",
u"instructions": u"The name that will identify you in your courses",
u"placeholder": u"JaneDoe",
u"instructions": u"The name that will identify you in your courses - <strong>(cannot be changed later)</strong>",
u"restrictions": {
"min_length": USERNAME_MIN_LENGTH,
"max_length": USERNAME_MAX_LENGTH
@@ -868,13 +872,14 @@ class RegistrationViewTest(ApiTestCase):
self._assert_reg_field(
no_extra_fields_setting,
{
u"placeholder": "",
u"name": u"password",
u"type": u"password",
u"required": True,
u"label": u"Password",
u"restrictions": {
"min_length": PASSWORD_MIN_LENGTH,
"max_length": PASSWORD_MAX_LENGTH
'min_length': account_api.PASSWORD_MIN_LENGTH,
'max_length': account_api.PASSWORD_MAX_LENGTH
},
}
)
@@ -923,7 +928,8 @@ class RegistrationViewTest(ApiTestCase):
u"type": u"text",
u"required": True,
u"label": u"Full name",
u"instructions": u"The name that will appear on your certificates",
u"placeholder": u"Jane Doe",
u"instructions": u"Needed for any certificates you may earn",
u"restrictions": {
"max_length": NAME_MAX_LENGTH,
}
@@ -939,8 +945,8 @@ class RegistrationViewTest(ApiTestCase):
u"type": u"text",
u"required": True,
u"label": u"Public username",
u"placeholder": u"",
u"instructions": u"The name that will identify you in your courses",
u"placeholder": u"JaneDoe",
u"instructions": u"The name that will identify you in your courses - <strong>(cannot be changed later)</strong>",
u"restrictions": {
"min_length": USERNAME_MIN_LENGTH,
"max_length": USERNAME_MAX_LENGTH
@@ -1511,7 +1517,28 @@ class RegistrationViewTest(ApiTestCase):
# Verify that the form description matches what we'd expect
form_desc = json.loads(response.content)
self.assertIn(expected_field, form_desc["fields"])
# Search the form for this field
actual_field = None
for field in form_desc["fields"]:
if field["name"] == expected_field["name"]:
actual_field = field
break
self.assertIsNot(
actual_field, None,
msg="Could not find field {name}".format(name=expected_field["name"])
)
for key, value in expected_field.iteritems():
self.assertEqual(
expected_field[key], actual_field[key],
msg=u"Expected {expected} for {key} but got {actual} instead".format(
key=key,
expected=expected_field[key],
actual=actual_field[key]
)
)
@ddt.ddt

14
openedx/core/djangoapps/user_api/views.py
View File

@@ -346,13 +346,18 @@ class RegistrationView(APIView):
# meant to hold the user's 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")
# Translators: These instructions appear on the registration form, immediately
# below a field meant to hold the user's full name.
name_instructions = _(u"The name that will appear on your certificates")
name_instructions = _(u"Needed for any certificates you may earn")
form_desc.add_field(
"name",
label=name_label,
placeholder=name_placeholder,
instructions=name_instructions,
restrictions={
"max_length": NAME_MAX_LENGTH,
@@ -377,13 +382,18 @@ class RegistrationView(APIView):
# Translators: These instructions appear on the registration form, immediately
# below a field meant to hold the user's public username.
username_instructions = _(
u"The name that will identify you in your courses"
u"The name that will identify you in your courses - {bold_start}(cannot be changed later){bold_end}").format(bold_start=u'<strong>', bold_end=u'</strong>'
)
# 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")
form_desc.add_field(
"username",
label=username_label,
instructions=username_instructions,
placeholder=username_placeholder,
restrictions={
"min_length": USERNAME_MIN_LENGTH,
"max_length": USERNAME_MAX_LENGTH,