From b371783e63b5d8e733d3bf4803116bdbe4cb1a91 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Wed, 6 Aug 2014 10:27:16 -0400 Subject: [PATCH 1/3] login, registration, and dashboard page changes for third-party auth --- lms/static/sass/elements/_controls.scss | 48 ++++++++++ lms/static/sass/multicourse/_account.scss | 101 ++++++++++++++++++-- lms/static/sass/multicourse/_dashboard.scss | 35 +++++-- lms/templates/dashboard.html | 41 ++++---- lms/templates/login.html | 14 ++- lms/templates/register-sidebar.html | 8 +- lms/templates/register.html | 26 ++--- 7 files changed, 217 insertions(+), 56 deletions(-) diff --git a/lms/static/sass/elements/_controls.scss b/lms/static/sass/elements/_controls.scss index 776c2e3ac2..f094f78df1 100644 --- a/lms/static/sass/elements/_controls.scss +++ b/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 diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss index 26cafdc432..00b19e636d 100644 --- a/lms/static/sass/multicourse/_account.scss +++ b/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; } } diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index 6f5f4c1e71..a2a2f1a90b 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/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); - .icon { - margin-top: 4px; + .status { + width: flex-grid(1); + display: inline-block; + color: $gray-l2; + + .icon-link { + color: $base-font-color; + } + + .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; + } } } } diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html index 4f086d901c..8099775f95 100644 --- a/lms/templates/dashboard.html +++ b/lms/templates/dashboard.html @@ -198,7 +198,7 @@ % if duplicate_provider:
## 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='', link_start='' % logout_url, provider_name='%s' % duplicate_provider.NAME, platform_name=platform_name)} +

${_('The {provider_name} account you selected is already linked to another {platform_name} account.').format(provider_name='%s' % duplicate_provider.NAME, platform_name=platform_name)}

% endif @@ -226,22 +226,23 @@ % if settings.FEATURES.get('ENABLE_THIRD_PARTY_AUTH'):
  • -
    ## 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")}     % for state in provider_user_states: -
    +
    - % if state.has_account: - - % else: - - % endif +
    + % if state.has_account: + ${_('Linked')} + % else: + ${_('Not Linked')} + % endif +
    ${state.provider.NAME} @@ -252,17 +253,19 @@ method="post" name="${state.get_unlink_form_name()}"> - -     - ## 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")} - - % else: - - ## 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")} - + + + ## 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")} + + % else: + + ## 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")} + % endif + +
    % endfor diff --git a/lms/templates/login.html b/lms/templates/login.html index 293bd5d934..9ab2e0e2fe 100644 --- a/lms/templates/login.html +++ b/lms/templates/login.html @@ -190,19 +190,17 @@ % if settings.FEATURES.get('ENABLE_THIRD_PARTY_AUTH'): -
    - -

    - ## 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.')} -

    + + ## 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')} +
    % for enabled in provider.Registry.enabled(): ## Translators: provider_name is the name of an external, third-party user authentication provider (like Google or LinkedIn). - + % endfor
    diff --git a/lms/templates/register-sidebar.html b/lms/templates/register-sidebar.html index 96f9d5d592..cd63b602c4 100644 --- a/lms/templates/register-sidebar.html +++ b/lms/templates/register-sidebar.html @@ -12,11 +12,11 @@ from django.core.urlresolvers import reverse % if has_extauth_info is UNDEFINED: -
    -

    ${_("Already registered?")}

    + diff --git a/lms/templates/register.html b/lms/templates/register.html index 63a8a8cfa2..aa587951f0 100644 --- a/lms/templates/register.html +++ b/lms/templates/register.html @@ -120,23 +120,27 @@ % if not running_pipeline: -

    - ${_("Register to start learning today!")} -

    -
    % for enabled in provider.Registry.enabled(): ## Translators: provider_name is the name of an external, third-party user authentication service (like Google or LinkedIn). - + % endfor
    + + ## 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')} + +

    - ${_('or create your own {platform_name} account by completing all required* fields below.').format(platform_name=platform_name)} + ${_('Create your own {platform_name} account below').format(platform_name=platform_name)} + ${_('Required fields are noted by bold text and an asterisk (*).')}

    + % else:

    @@ -235,7 +239,7 @@

    -

    ${_("Extra Personal Information")}

    +

    ${_("Additional Personal Information")}

      % if settings.REGISTRATION_EXTRA_FIELDS['city'] != 'hidden': @@ -258,7 +262,7 @@ % endif % if settings.REGISTRATION_EXTRA_FIELDS['level_of_education'] != 'hidden': -
    1. +
    2. @@ -284,7 +288,7 @@
      3. % endif % if settings.REGISTRATION_EXTRA_FIELDS['year_of_birth'] != 'hidden': -
    3. +