From 7a4b70ef587273fb59273049fd6bae6444891aca Mon Sep 17 00:00:00 2001 From: Guo Xiang Tan Date: Fri, 23 Mar 2018 11:05:11 +0800 Subject: [PATCH] UX cleanup changes to 2FA flow. --- .../admin/components/cancel-link.js.es6 | 3 +++ .../controllers/preferences/account.js.es6 | 6 ++--- .../preferences/second-factor.js.es6 | 12 ++++++++- .../templates/components/cancel-link.hbs | 3 +++ .../templates/preferences-second-factor.hbs | 15 ++++++++--- .../templates/preferences/account.hbs | 27 +++++++------------ app/assets/stylesheets/desktop/user.scss | 4 +++ app/controllers/users_controller.rb | 2 +- config/locales/client.en.yml | 11 ++++---- 9 files changed, 50 insertions(+), 33 deletions(-) create mode 100644 app/assets/javascripts/admin/components/cancel-link.js.es6 create mode 100644 app/assets/javascripts/discourse/templates/components/cancel-link.hbs diff --git a/app/assets/javascripts/admin/components/cancel-link.js.es6 b/app/assets/javascripts/admin/components/cancel-link.js.es6 new file mode 100644 index 00000000000..9250c1ae73b --- /dev/null +++ b/app/assets/javascripts/admin/components/cancel-link.js.es6 @@ -0,0 +1,3 @@ +export default Ember.Component.extend({ + tagName: '' +}); diff --git a/app/assets/javascripts/discourse/controllers/preferences/account.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/account.js.es6 index d8c54177d43..a89a97d4123 100644 --- a/app/assets/javascripts/discourse/controllers/preferences/account.js.es6 +++ b/app/assets/javascripts/discourse/controllers/preferences/account.js.es6 @@ -40,9 +40,9 @@ export default Ember.Controller.extend(CanCheckEmails, PreferencesTabController, return !this.siteSettings.enable_sso && this.siteSettings.enable_local_logins; }, - @computed("model.second_factor_enabled") - secondFactorStatusClass(secondFactorEnabled) { - return secondFactorEnabled ? 'tip good' : 'tip bad'; + @computed + showTwoFactorModalText() { + return I18n.t('user.second_factor.title').toLowerCase(); }, actions: { diff --git a/app/assets/javascripts/discourse/controllers/preferences/second-factor.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/second-factor.js.es6 index f09263712d9..bdaab628cd9 100644 --- a/app/assets/javascripts/discourse/controllers/preferences/second-factor.js.es6 +++ b/app/assets/javascripts/discourse/controllers/preferences/second-factor.js.es6 @@ -18,7 +18,17 @@ export default Ember.Controller.extend({ @computed('loading') submitButtonText(loading) { - return loading ? 'loading' : 'submit'; + return loading ? 'loading' : 'continue'; + }, + + @computed('loading') + enableButtonText(loading) { + return loading ? 'loading' : 'enable'; + }, + + @computed('loading') + disableButtonText(loading) { + return loading ? 'loading' : 'disable'; }, @computed diff --git a/app/assets/javascripts/discourse/templates/components/cancel-link.hbs b/app/assets/javascripts/discourse/templates/components/cancel-link.hbs new file mode 100644 index 00000000000..8c3a3cb4c7e --- /dev/null +++ b/app/assets/javascripts/discourse/templates/components/cancel-link.hbs @@ -0,0 +1,3 @@ +{{#link-to route args}} + {{i18n 'cancel'}} +{{/link-to}} diff --git a/app/assets/javascripts/discourse/templates/preferences-second-factor.hbs b/app/assets/javascripts/discourse/templates/preferences-second-factor.hbs index d8c58a6ff85..6621b7e2a7a 100644 --- a/app/assets/javascripts/discourse/templates/preferences-second-factor.hbs +++ b/app/assets/javascripts/discourse/templates/preferences-second-factor.hbs @@ -15,7 +15,7 @@ {{/if}} {{#if model.second_factor_enabled}} - +
@@ -32,7 +32,9 @@ {{d-button action="disableSecondFactor" class="btn btn-primary" disabled=loading - label=submitButtonText}} + label=disableButtonText}} + + {{cancel-link route="preferences.account" args= model.username}}
{{else}} @@ -66,7 +68,7 @@
- +
{{second-factor-input value=secondFactorToken inputId='second-factor-token'}} @@ -78,7 +80,9 @@ {{d-button action="enableSecondFactor" class="btn btn-primary" disabled=loading - label=submitButtonText}} + label=enableButtonText}} + + {{cancel-link route="preferences.account" args= model.username}}
{{else}} @@ -108,9 +112,12 @@ {{d-button action="resetPassword" class="btn" disabled=resetPasswordLoading + icon="envelope" label='user.change_password.action'}} {{resetPasswordProgress}} + + {{cancel-link route="preferences.account" args= model.username}} {{/if}} diff --git a/app/assets/javascripts/discourse/templates/preferences/account.hbs b/app/assets/javascripts/discourse/templates/preferences/account.hbs index 60c3e58b422..6862fac382e 100644 --- a/app/assets/javascripts/discourse/templates/preferences/account.hbs +++ b/app/assets/javascripts/discourse/templates/preferences/account.hbs @@ -63,27 +63,18 @@ {{i18n 'user.change_password.action'}} {{/if}} + {{passwordProgress}} - -
- - -
- {{i18n 'user.second_factor.info_prompt'}} -
- -
- - {{#if model.second_factor_enabled}} - {{i18n 'user.second_factor.enabled_status'}} - {{d-icon 'check'}} - {{else}} - {{i18n 'user.second_factor.disabled_status'}} - {{d-icon 'times'}} - {{/if}} - +
+ {{#if model.second_factor_enabled}} + {{i18n 'user.second_factor.disable'}} + {{else}} + {{i18n 'enable'}} + {{showTwoFactorModalText}} + {{i18n 'user.second_factor.enable'}} + {{/if}} {{#if isCurrentUser}} {{#link-to "preferences.second-factor" class="btn btn-small btn-icon pad-left no-text"}} diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss index a7ac7803c32..7345548003e 100644 --- a/app/assets/stylesheets/desktop/user.scss +++ b/app/assets/stylesheets/desktop/user.scss @@ -100,6 +100,10 @@ } } +.pref-second-factor { + margin-top: 10px; +} + .user-invite-list { width: 100%; margin-top: 15px; diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb index d8c0ab70437..1a0118a152d 100644 --- a/app/controllers/users_controller.rb +++ b/app/controllers/users_controller.rb @@ -970,7 +970,7 @@ class UsersController < ApplicationController ) render json: success_json.merge( - key: current_user.user_second_factor.data, + key: current_user.user_second_factor.data.scan(/.{4}/).join(" "), qr: qrcode_svg ) end diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 7118c5aa29d..c887609c0bf 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -313,6 +313,7 @@ en: enable: "Enable" disable: "Disable" + continue: "Continue" undo: "Undo" revert: "Revert" failed: "Failed" @@ -727,15 +728,14 @@ en: second_factor: title: "Two Factor Authentication" - disable: "Disable Two Factor Authentication" - enabled_status: "Status: On" - disabled_status: "Status: Off" + disable: "Disable two factor authentication" + enable: "for enhanced account security" confirm_password_description: "Please confirm your password to continue" + label: "Code" enable_description: | Scan this QR code in a supported app (Android – iOS – Windows Phone) and enter your authentication code. disable_description: "Please enter the authentication code from your app:" show_key_description: "Enter manually" - info_prompt: "What is Two Factor Authentication?" extended_description: | Two factor authentication adds extra security to your account by requiring a one-time token in addition to your password. Tokens can be generated on Android, iOS, and Windows Phone devices. oauth_enabled_warning: "Please note that social logins will be disabled once two factor authentication has been enabled on your account." @@ -1131,9 +1131,8 @@ en: title: "Log In" username: "User" password: "Password" - second_factor_title: "Two Factor Authentication Required" + second_factor_title: "Two Factor Authentication" second_factor_description: "Please enter the authentication code from your app:" - second_factor_label: "Code" email_placeholder: "email or username" caps_lock_warning: "Caps Lock is on" error: "Unknown error"