diff --git a/app/assets/javascripts/discourse/app/components/toggle-password-mask.hbs b/app/assets/javascripts/discourse/app/components/toggle-password-mask.hbs new file mode 100644 index 0000000000..fe8812a196 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/toggle-password-mask.hbs @@ -0,0 +1,3 @@ + + {{if @maskPassword (i18n "login.show_password") (i18n "login.hide_password") }} + diff --git a/app/assets/javascripts/discourse/app/controllers/create-account.js b/app/assets/javascripts/discourse/app/controllers/create-account.js index 997a72afd5..b364d8d2eb 100644 --- a/app/assets/javascripts/discourse/app/controllers/create-account.js +++ b/app/assets/javascripts/discourse/app/controllers/create-account.js @@ -42,6 +42,7 @@ export default Controller.extend( prefilledUsername: null, userFields: null, isDeveloper: false, + maskPassword: true, hasAuthOptions: notEmpty("authOptions"), canCreateLocal: setting("enable_local_logins"), @@ -68,6 +69,7 @@ export default Controller.extend( rejectedPasswords: [], prefilledUsername: null, isDeveloper: false, + maskPassword: true, }); this._createUserFields(); }, @@ -435,6 +437,11 @@ export default Controller.extend( }); }, + @action + togglePasswordMask() { + this.toggleProperty("maskPassword"); + }, + actions: { externalLogin(provider) { this.login.send("externalLogin", provider, { signup: true }); diff --git a/app/assets/javascripts/discourse/app/controllers/invites-show.js b/app/assets/javascripts/discourse/app/controllers/invites-show.js index ea121fac4b..2d99c580f8 100644 --- a/app/assets/javascripts/discourse/app/controllers/invites-show.js +++ b/app/assets/javascripts/discourse/app/controllers/invites-show.js @@ -1,7 +1,7 @@ import { alias, bool, not, readOnly } from "@ember/object/computed"; import Controller, { inject as controller } from "@ember/controller"; import DiscourseURL from "discourse/lib/url"; -import EmberObject from "@ember/object"; +import EmberObject, { action } from "@ember/object"; import I18n from "I18n"; import NameValidation from "discourse/mixins/name-validation"; import PasswordValidation from "discourse/mixins/password-validation"; @@ -47,6 +47,7 @@ export default Controller.extend( inviteImageUrl: getUrl("/images/envelope.svg"), isInviteLink: readOnly("model.is_invite_link"), rejectedEmails: null, + maskPassword: true, init() { this._super(...arguments); @@ -288,6 +289,11 @@ export default Controller.extend( }); }, + @action + togglePasswordMask() { + this.toggleProperty("maskPassword"); + }, + actions: { submit() { const userFields = this.userFields; diff --git a/app/assets/javascripts/discourse/app/controllers/login.js b/app/assets/javascripts/discourse/app/controllers/login.js index 482509d68a..24abc05601 100644 --- a/app/assets/javascripts/discourse/app/controllers/login.js +++ b/app/assets/javascripts/discourse/app/controllers/login.js @@ -41,6 +41,7 @@ export default Controller.extend(ModalFunctionality, { showLoginButtons: true, showSecondFactor: false, awaitingApproval: false, + maskPassword: true, canLoginLocal: setting("enable_local_logins"), canLoginLocalWithEmail: setting("enable_local_logins_via_email"), @@ -58,6 +59,7 @@ export default Controller.extend(ModalFunctionality, { showSecurityKey: false, showLoginButtons: true, awaitingApproval: false, + maskPassword: true, }); }, @@ -188,6 +190,11 @@ export default Controller.extend(ModalFunctionality, { this.send("showForgotPassword"); }, + @action + togglePasswordMask() { + this.toggleProperty("maskPassword"); + }, + actions: { forgotPassword() { this.handleForgotPassword(); diff --git a/app/assets/javascripts/discourse/app/controllers/password-reset.js b/app/assets/javascripts/discourse/app/controllers/password-reset.js index 472a69005d..6e232fd5b2 100644 --- a/app/assets/javascripts/discourse/app/controllers/password-reset.js +++ b/app/assets/javascripts/discourse/app/controllers/password-reset.js @@ -33,6 +33,7 @@ export default Controller.extend(PasswordValidation, { successMessage: null, requiresApproval: false, redirected: false, + maskPassword: true, @discourseComputed() continueButtonText() { @@ -58,6 +59,11 @@ export default Controller.extend(PasswordValidation, { DiscourseURL.redirectTo(this.redirectTo || "/"); }, + @action + togglePasswordMask() { + this.toggleProperty("maskPassword"); + }, + actions: { submit() { ajax({ diff --git a/app/assets/javascripts/discourse/app/templates/invites/show.hbs b/app/assets/javascripts/discourse/app/templates/invites/show.hbs index 737efb6734..9b2cc7620f 100644 --- a/app/assets/javascripts/discourse/app/templates/invites/show.hbs +++ b/app/assets/javascripts/discourse/app/templates/invites/show.hbs @@ -94,17 +94,20 @@ {{#unless this.externalAuthsOnly}}
- + - -
- {{this.passwordInstructions}} -
- {{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}} +
{{/unless}} diff --git a/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs b/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs index a3a0b8f52b..0ccee1824e 100644 --- a/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs +++ b/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs @@ -68,18 +68,22 @@ diff --git a/app/assets/javascripts/discourse/app/templates/password-reset.hbs b/app/assets/javascripts/discourse/app/templates/password-reset.hbs index cdb63e219f..ccfa920bdb 100644 --- a/app/assets/javascripts/discourse/app/templates/password-reset.hbs +++ b/app/assets/javascripts/discourse/app/templates/password-reset.hbs @@ -36,8 +36,9 @@

{{i18n "user.change_password.choose"}}

- -   + + +
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss index 1cf5d7336c..6405a1f0c6 100644 --- a/app/assets/stylesheets/common/base/login.scss +++ b/app/assets/stylesheets/common/base/login.scss @@ -217,9 +217,11 @@ body.invite-page { } } - #forgot-password-link, - #email-login-link { + #email-login-link, + .login__password-links { font-size: var(--font-down-1); + display: flex; + justify-content: space-between; } .tip:not(:empty) + label.more-info { @@ -334,6 +336,15 @@ body.invite-page { color: var(--primary-medium); } } + #new-account-password { + width: 15em; + } + .tip { + margin: 0 0 0.5em; + } + .toggle-password-mask { + margin-left: 0.25em; + } } // admin invite page @@ -490,3 +501,8 @@ button#new-account-link { } } } + +.create-account__password-info { + display: flex; + justify-content: space-between; +} diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index b34e9bc913..0fef0824b3 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -2022,6 +2022,8 @@ en: title: "Log in" username: "User" password: "Password" + show_password: "Show" + hide_password: "Hide" second_factor_title: "Two-Factor Authentication" second_factor_description: "Please enter the authentication code from your app:" second_factor_backup: "Log in using a backup code"