Skip to content

E
edx-platform
Commit b371783e by Frances Botsford Committed by Julia Hansbrough
Options

login, registration, and dashboard page changes for third-party auth

parent f5f4326b
Showing with 217 additions and 56 deletions
lms/static/sass/elements/_controls.scss
......@@ -237,6 +237,54 @@
}
}
// blue secondary button outline style
%btn-secondary-blue-outline {
@extend %t-action2;
@extend %btn;
@extend %btn-edged;
box-shadow: none;
border: 1px solid $m-blue-d3;
padding: ($baseline/2) $baseline;
background: transparent;
color: $m-blue-d3;
&:hover, &:active, &:focus {
box-shadow: 0 2px 1px 0 $m-blue-d4;
background: $m-blue-d1;
color: $white;
}
&.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;
}
}
&.disabled, &[disabled] {
box-shadow: none;
}
}
// grey secondary button outline style
%btn-secondary-grey-outline {
@extend %btn-secondary-blue-outline;
border: 1px solid $gray-l4;
&:hover, &:active, &:focus {
box-shadow: none;
border: 1px solid $m-blue-d3;
}
&.disabled, &[disabled] {
box-shadow: none;
}
}
// ====================
// application: canned actions
......
lms/static/sass/multicourse/_account.scss
......@@ -230,6 +230,21 @@
margin: 0 0 ($baseline/4) 0;
}
}
.cta-login {
h3.title,
.instructions {
display: inline-block;
margin-bottom: 0;
}
.cta-login-action {
@extend %btn-secondary-grey-outline;
padding: ($baseline/10) ($baseline*.75);
margin-left: ($baseline/4);
}
}
}
// forms
......@@ -275,6 +290,17 @@
}
}
.group-form-personalinformation {
.field-education-level,
.field-gender,
.field-yob {
display: inline-block;
vertical-align: top;
margin-bottom: 0;
}
}
// individual fields
.field {
margin: 0 0 $baseline 0;
......@@ -304,6 +330,16 @@
font-size: em(13);
}
&.password {
position: relative;
.tip {
position: absolute;
top: 0;
right: 0;
}
}
input, textarea {
width: 100%;
margin: 0;
......@@ -432,9 +468,7 @@
}
.action-primary {
float: left;
width: flex-grid(8,8);
margin-right: flex-gutter(0);
}
.action-secondary {
......@@ -452,16 +486,71 @@
}
// forms - third-party auth
.form-third-party-auth {
// UI: deco - divider
.deco-divider {
position: relative;
display: block;
margin: ($baseline*1.5) 0;
border-top: ($baseline/5) solid $m-gray-l4;
.copy {
@extend %t-copy-lead1;
@extend %t-weight4;
position: absolute;
top: -($baseline);
left: 43%;
padding: ($baseline/4) ($baseline*1.5);
background: white;
text-align: center;
color: $m-gray-l2;
}
}
// downplay required note
.instructions .note {
@extend %t-copy-sub2;
display: block;
font-weight: normal;
color: $gray;
}
.form-actions.form-third-party-auth {
width: flex-grid(8,8);
margin-bottom: $baseline;
button {
margin-right: $baseline;
button[type="submit"] {
@extend %btn-secondary-blue-outline;
width: flex-grid(4,8);
margin-right: ($baseline/2);
.icon {
color: inherit;
margin-right: $baseline/2;
}
&:last-child {
margin-right: 0;
}
&.button-Google:hover {
box-shadow: 0 2px 1px 0 #8D3024;
background-color: #dd4b39;
border: 1px solid #A5382B;
}
&.button-Facebook:hover {
box-shadow: 0 2px 1px 0 #30487C;
background-color: #3b5998;
border: 1px solid #263A62;
}
&.button-LinkedIn:hover {
box-shadow: 0 2px 1px 0 #005D8E;
background-color: #0077b5;
border: 1px solid #06527D;
}
}
}
......@@ -536,7 +625,6 @@
.introduction {
header {
height: 120px;
border-bottom: 1px solid $m-gray;
background: transparent $login-banner-image 0 0 no-repeat;
}
}
......@@ -548,7 +636,6 @@
.introduction {
header {
height: 120px;
border-bottom: 1px solid $m-gray;
background: transparent $register-banner-image 0 0 no-repeat;
}
}
......
lms/static/sass/multicourse/_dashboard.scss
......@@ -110,17 +110,40 @@
.third-party-auth {
color: inherit;
font-weight: inherit;
}
.control {
float: right;
}
.auth-provider {
width: flex-grid(12);
display: block;
margin-top: ($baseline/4);
.status {
width: flex-grid(1);
display: inline-block;
color: $gray-l2;
.icon-link {
color: $base-font-color;
}
.icon {
margin-top: 4px;
.copy {
@extend %text-sr;
}
}
.provider {
display: inline;
width: flex-grid(9);
display: inline-block;
}
.control {
width: flex-grid(2);
display: inline-block;
text-align: right;
a:link, a:visited {
@extend %t-copy-sub2;
}
}
}
}
......
lms/templates/dashboard.html
......@@ -198,7 +198,7 @@
% if duplicate_provider:
<section class="dashboard-banner third-party-auth">
## Translators: this message is displayed when a user tries to link their account with a third-party authentication provider (for example, Google or LinkedIn) with a given edX account, but their third-party account is already associated with another edX account. provider_name is the name of the third-party authentication provider, and platform_name is the name of the edX deployment.
${_('The selected {provider_name} account is already linked to another {platform_name} account. Please {link_start}log out{link_end}, then log in with your {provider_name} account.').format(link_end='</a>', link_start='<a href="%s">' % logout_url, provider_name='<strong>%s</strong>' % duplicate_provider.NAME, platform_name=platform_name)}
<p>${_('The {provider_name} account you selected is already linked to another {platform_name} account.').format(provider_name='<strong>%s</strong>' % duplicate_provider.NAME, platform_name=platform_name)}
</section>
% endif
......@@ -226,22 +226,23 @@
% if settings.FEATURES.get('ENABLE_THIRD_PARTY_AUTH'):
<li class="controls--account">
<span class="title">
<div class="icon icon-gears"></div>
## Translators: this section lists all the third-party authentication providers (for example, Google and LinkedIn) the user can link with or unlink from their edX account.
${_("Account Links")}
${_("Connected Accounts")}
</span>
<span class="data">
<span class="third-party-auth">
% for state in provider_user_states:
<div>
<div class="auth-provider">
% if state.has_account:
<span class="icon icon-link pull-left"></span>
% else:
<span class="icon icon-unlink pull-left"></span>
% endif
<div class="status">
% if state.has_account:
<i class="icon icon-link"></i> <span class="copy">${_('Linked')}</span>
% else:
<i class="icon icon-unlink"></i><span class="copy">${_('Not Linked')}</span>
% endif
</div>
<span class="provider">${state.provider.NAME}</span>
<span class="control">
......@@ -252,17 +253,19 @@
method="post"
name="${state.get_unlink_form_name()}">
<input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}">
</form>
<a href="#" onclick="document.${state.get_unlink_form_name()}.submit()">
## Translators: clicking on this removes the link between a user's edX account and their account with an external authentication provider (like Google or LinkedIn).
${_("unlink")}
</a>
% else:
<a href="${pipeline.get_login_url(state.provider.NAME, pipeline.AUTH_ENTRY_DASHBOARD)}">
## Translators: clicking on this creates a link between a user's edX account and their account with an external authentication provider (like Google or LinkedIn).
${_("link")}
</a>
<a href="#" onclick="document.${state.get_unlink_form_name()}.submit()">
## Translators: clicking on this removes the link between a user's edX account and their account with an external authentication provider (like Google or LinkedIn).
${_("Unlink")}
</a>
% else:
<a href="${pipeline.get_login_url(state.provider.NAME, pipeline.AUTH_ENTRY_DASHBOARD)}">
## Translators: clicking on this creates a link between a user's edX account and their account with an external authentication provider (like Google or LinkedIn).
${_("Link")}
</a>
% endif
</form>
</span>
</div>
% endfor
......
lms/templates/login.html
......@@ -190,19 +190,17 @@
% if settings.FEATURES.get('ENABLE_THIRD_PARTY_AUTH'):
<hr />
<p class="instructions">
## Developers: this is a sentence fragment, which is usually frowned upon. The design of the pags uses this fragment to provide an "else" clause underneath a number of choices. It's OK to leave it.
## Translators: this is the last choice of a number of choices of how to log in to the site.
${_('or, if you have connected one of these providers, log in below.')}
</p>
<span class="deco-divider">
## Developers: this is a sentence fragment, which is usually frowned upon. The design of the pags uses this fragment to provide an "else" clause underneath a number of choices. It's OK to leave it.
## Translators: this is the last choice of a number of choices of how to log in to the site.
<span class="copy">${_('or')}</span>
</span>
<div class="form-actions form-third-party-auth">
% for enabled in provider.Registry.enabled():
## Translators: provider_name is the name of an external, third-party user authentication provider (like Google or LinkedIn).
<button type="submit" class="button button-primary" onclick="thirdPartySignin(event, '${pipeline.get_login_url(enabled.NAME, pipeline.AUTH_ENTRY_LOGIN)}');"><span class="icon ${enabled.ICON_CLASS}"></span>${_('Sign in with {provider_name}').format(provider_name=enabled.NAME)}</button>
<button type="submit" class="button button-primary button-${enabled.NAME}" onclick="thirdPartySignin(event, '${pipeline.get_login_url(enabled.NAME, pipeline.AUTH_ENTRY_LOGIN)}');"><span class="icon ${enabled.ICON_CLASS}"></span>${_('Sign in with {provider_name}').format(provider_name=enabled.NAME)}</button>
% endfor
</div>
......
lms/templates/register-sidebar.html
......@@ -12,11 +12,11 @@ from django.core.urlresolvers import reverse
% if has_extauth_info is UNDEFINED:
<div class="cta">
<h3>${_("Already registered?")}</h3>
<div class="cta cta-login">
<h3 class="title">${_("Already registered?")}</h3>
<p class="instructions">
<a href="${reverse('signin_user')}${login_query()}">
${_("Click here to log in.")}
<a class="cta-login-action" href="${reverse('signin_user')}${login_query()}">
${_("Log in")}
</a>
</p>
</div>
......
lms/templates/register.html
......@@ -120,23 +120,27 @@
% if not running_pipeline:
<p class="instructions">
${_("Register to start learning today!")}
</p>
<div class="form-actions form-third-party-auth">
% for enabled in provider.Registry.enabled():
## Translators: provider_name is the name of an external, third-party user authentication service (like Google or LinkedIn).
<button type="submit" class="button button-primary" onclick="thirdPartySignin(event, '${pipeline.get_login_url(enabled.NAME, pipeline.AUTH_ENTRY_REGISTER)}');"><span class="icon ${enabled.ICON_CLASS}"></span>${_('Sign in with {provider_name}').format(provider_name=enabled.NAME)}</button>
<button type="submit" class="button button-primary button-${enabled.NAME}" onclick="thirdPartySignin(event, '${pipeline.get_login_url(enabled.NAME, pipeline.AUTH_ENTRY_REGISTER)}');"><span class="icon ${enabled.ICON_CLASS}"></span>${_('Sign up with {provider_name}').format(provider_name=enabled.NAME)}</button>
% endfor
</div>
<span class="deco-divider">
## Developers: this is a sentence fragment, which is usually frowned upon. The design of the pags uses this fragment to provide an "else" clause underneath a number of choices. It's OK to leave it.
## Translators: this is the last choice of a number of choices of how to log in to the site.
<span class="copy">${_('or')}</span>
</span>
<p class="instructions">
${_('or create your own {platform_name} account by completing all <strong>required*</strong> fields below.').format(platform_name=platform_name)}
${_('Create your own {platform_name} account below').format(platform_name=platform_name)}
<span class="note">${_('Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.')}</span>
</p>
% else:
<p class="instructions">
......@@ -235,7 +239,7 @@
</div>
<div class="group group-form group-form-secondary group-form-personalinformation">
<h2 class="sr">${_("Extra Personal Information")}</h2>
<h2 class="sr">${_("Additional Personal Information")}</h2>
<ol class="list-input">
% if settings.REGISTRATION_EXTRA_FIELDS['city'] != 'hidden':
......@@ -258,7 +262,7 @@
</li>
% endif
% if settings.REGISTRATION_EXTRA_FIELDS['level_of_education'] != 'hidden':
<li class="field-group">
<li class="field-group field-education-level">
<div class="field ${settings.REGISTRATION_EXTRA_FIELDS['level_of_education']} select" id="field-education-level">
<label for="education-level">${_("Highest Level of Education Completed")}</label>
<select id="education-level" name="level_of_education" ${'required aria-required="true"' if settings.REGISTRATION_EXTRA_FIELDS['level_of_education'] == 'required' else ''}>
......@@ -271,7 +275,7 @@
</li>
% endif
% if settings.REGISTRATION_EXTRA_FIELDS['gender'] != 'hidden':
<li class="field-group">
<li class="field-group field-gender">
<div class="field ${settings.REGISTRATION_EXTRA_FIELDS['gender']} select" id="field-gender">
<label for="gender">${_("Gender")}</label>
<select id="gender" name="gender" ${'required aria-required="true"' if settings.REGISTRATION_EXTRA_FIELDS['gender'] == 'required' else ''}>
......@@ -284,7 +288,7 @@
</li>
% endif
% if settings.REGISTRATION_EXTRA_FIELDS['year_of_birth'] != 'hidden':
<li class="field-group">
<li class="field-group field-yob">
<div class="field ${settings.REGISTRATION_EXTRA_FIELDS['year_of_birth']} select" id="field-yob">
<label for="yob">${_("Year of Birth")}</label>
<select id="yob" name="year_of_birth" ${'required aria-required="true"' if settings.REGISTRATION_EXTRA_FIELDS['year_of_birth'] == 'required' else ''}>
......@@ -300,8 +304,6 @@
</div>
<div class="group group-form group-form-personalinformation2">
<h2 class="sr">${_("Extra Personal Information")}</h2>
<ol class="list-input">
% if settings.REGISTRATION_EXTRA_FIELDS['mailing_address'] != 'hidden':
<li class="field ${settings.REGISTRATION_EXTRA_FIELDS['mailing_address']} text" id="field-address-mailing">
......
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