osr-plastic/osr-discourse-src
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

UX: add user toggle to mask/unmask passwords

Browse Source
This commit is contained in:
awesomerobot 2022-12-02 17:41:33 -05:00
parent 666fd43c37
commit cff8925480
11 changed files with 77 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/discourse/app/components/toggle-password-mask.hbs Normal file
View File

@ -0,0 +1,3 @@
<a role="button" class="toggle-password-mask" {{on "click" @togglePasswordMask}}>
{{if @maskPassword (i18n "login.show_password") (i18n "login.hide_password") }}
</a>

7
app/assets/javascripts/discourse/app/controllers/create-account.js
View File

@ -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 });

8
app/assets/javascripts/discourse/app/controllers/invites-show.js
View File

@ -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;

7
app/assets/javascripts/discourse/app/controllers/login.js
View File

@ -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();

6
app/assets/javascripts/discourse/app/controllers/password-reset.js
View File

@ -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({

15
app/assets/javascripts/discourse/app/templates/invites/show.hbs
View File

@ -94,17 +94,20 @@
{{#unless this.externalAuthsOnly}}
<div class="input password-input input-group">
<PasswordField @value={{this.accountPassword}} @class={{value-entered this.accountPassword}} @type="password" @id="new-account-password" @capsLockOn={{this.capsLockOn}} />
<PasswordField @value={{this.accountPassword}} @class={{value-entered this.accountPassword}} @type={{if this.maskPassword "password" "text"}} @id="new-account-password" @capsLockOn={{this.capsLockOn}} />
<label class="alt-placeholder" for="new-account-password">
{{i18n "invites.password_label"}}
<span class="required">*</span>
</label>
<InputTip @validation={{this.passwordValidation}} />
<div class="instructions">
{{this.passwordInstructions}}
<div class="caps-lock-warning {{unless this.capsLockOn " hidden"}}">
{{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}
<div class="create-account__password-info">
<div class="create-account__password-tip-validation">
<InputTip @validation={{this.passwordValidation}} @id="password-validation" />
<span class="more-info">{{this.passwordInstructions}}</span>
<div class="caps-lock-warning {{unless this.capsLockOn "hidden"}}">
{{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}
</div>
</div>
<TogglePasswordMask @maskPassword={{this.maskPassword}} @togglePasswordMask={{this.togglePasswordMask}} />
</div>
</div>
{{/unless}}

16
app/assets/javascripts/discourse/app/templates/modal/create-account.hbs
View File

@ -68,18 +68,22 @@
<div class="input-group create-account__password">
{{#if this.passwordRequired}}
<PasswordField @value={{this.accountPassword}} @class={{value-entered this.accountPassword}} @type="password" @id="new-account-password" @autocomplete="current-password" @capsLockOn={{this.capsLockOn}} @aria-describedby="password-validation" @aria-invalid={{this.passwordValidation.failed}} />
<PasswordField @value={{this.accountPassword}} @class={{value-entered this.accountPassword}} @type={{if this.maskPassword "password" "text"}} id="new-account-password" @autocomplete="current-password" @capsLockOn={{this.capsLockOn}} @aria-describedby="password-validation" @aria-invalid={{this.passwordValidation.failed}} />
<label class="alt-placeholder" for="new-account-password">
{{i18n "user.password.title"}}
{{~#if this.userFields~}}
<span class="required">*</span>
{{/if}}
</label>
<InputTip @validation={{this.passwordValidation}} @id="password-validation" />
<span class="more-info">{{this.passwordInstructions}}</span>
<div class="caps-lock-warning {{unless this.capsLockOn "hidden"}}">
{{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}
<div class="create-account__password-info">
<div class="create-account__password-tip-validation">
<InputTip @validation={{this.passwordValidation}} @id="password-validation" />
<span class="more-info">{{this.passwordInstructions}}</span>
<div class="caps-lock-warning {{unless this.capsLockOn "hidden"}}">
{{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}
</div>
</div>
<TogglePasswordMask @maskPassword={{this.maskPassword}} @togglePasswordMask={{this.togglePasswordMask}} />
</div>
{{/if}}

7
app/assets/javascripts/discourse/app/templates/modal/login.hbs
View File

@ -20,9 +20,12 @@
{{/if}}
</div>
<div class="input-group">
<PasswordField @value={{this.loginPassword}} @type="password" class={{value-entered this.loginPassword}} id="login-account-password" autocomplete="current-password" maxlength="200" @capsLockOn={{this.capsLockOn}} disabled={{this.disableLoginFields}} tabindex="1" />
<PasswordField @value={{this.loginPassword}} @type={{if this.maskPassword "password" "text"}} class={{value-entered this.loginPassword}} id="login-account-password" autocomplete="current-password" maxlength="200" @capsLockOn={{this.capsLockOn}} disabled={{this.disableLoginFields}} tabindex="1" />
<label class="alt-placeholder" for="login-account-password">{{i18n "login.password"}}</label>
<a href id="forgot-password-link" tabindex="3" {{on "click" this.handleForgotPassword}}>{{i18n "forgot_password.action"}}</a>
<div class="login__password-links">
<a href id="forgot-password-link" tabindex="3" {{on "click" this.handleForgotPassword}}>{{i18n "forgot_password.action"}}</a>
<TogglePasswordMask @maskPassword={{this.maskPassword}} @togglePasswordMask={{this.togglePasswordMask}} />
</div>
<div class="caps-lock-warning {{unless this.capsLockOn "hidden"}}">{{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}</div>
</div>
</div>

5
app/assets/javascripts/discourse/app/templates/password-reset.hbs
View File

@ -36,8 +36,9 @@
<h2>{{i18n "user.change_password.choose"}}</h2>
<div class="input">
<PasswordField @value={{this.accountPassword}} @type="password" @id="new-account-password" @capsLockOn={{this.capsLockOn}} @autofocus="autofocus" />
&nbsp;<InputTip @validation={{this.passwordValidation}} />
<PasswordField @value={{this.accountPassword}} @type={{if this.maskPassword "password" "text"}} @id="new-account-password" @capsLockOn={{this.capsLockOn}} @autofocus="autofocus" />
<TogglePasswordMask @maskPassword={{this.maskPassword}} @togglePasswordMask={{this.togglePasswordMask}} />
<InputTip @validation={{this.passwordValidation}} />
</div>
<div class="instructions">

20
app/assets/stylesheets/common/base/login.scss
View File

@ -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;
}

2
config/locales/client.en.yml
View File

@ -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"