github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-27 18:55:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: move to icon for password masking (#30321)

Browse Source
This commit is contained in:
Jordan Vidrine 2024-12-17 11:12:41 -06:00 committed by GitHub
parent bcff64b9ab
commit 086b1e82e4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 30 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/javascripts/discourse/app/components/local-login-form.hbs
View File

@ -48,6 +48,13 @@
<label class="alt-placeholder" for="login-account-password"> <label class="alt-placeholder" for="login-account-password">
{{i18n "login.password"}} {{i18n "login.password"}}
</label> </label>
{{#if @loginPassword}}
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
tabindex="3"
/>
{{/if}}
<div class="login__password-links"> <div class="login__password-links">
<a <a
href href
@ -57,13 +64,6 @@
> >
{{i18n "forgot_password.action"}} {{i18n "forgot_password.action"}}
</a> </a>
{{#if @loginPassword}}
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
tabindex="3"
/>
{{/if}}
</div> </div>
<div class="caps-lock-warning {{unless this.capsLockOn 'hidden'}}"> <div class="caps-lock-warning {{unless this.capsLockOn 'hidden'}}">
{{d-icon "triangle-exclamation"}} {{d-icon "triangle-exclamation"}}

9
app/assets/javascripts/discourse/app/components/modal/create-account.hbs
View File

@ -138,7 +138,10 @@
<label class="alt-placeholder" for="new-account-password"> <label class="alt-placeholder" for="new-account-password">
{{i18n "user.password.title"}} {{i18n "user.password.title"}}
</label> </label>
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
/>
<div class="create-account__password-info"> <div class="create-account__password-info">
<div class="create-account__password-tip-validation"> <div class="create-account__password-tip-validation">
{{#if this.showPasswordValidation}} {{#if this.showPasswordValidation}}
@ -163,10 +166,6 @@
{{i18n "login.caps_lock_warning"}} {{i18n "login.caps_lock_warning"}}
</div> </div>
</div> </div>
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
/>
</div> </div>
{{/if}} {{/if}}

4
app/assets/javascripts/discourse/app/components/toggle-password-mask.hbs
View File

@ -1,10 +1,10 @@
<DButton <DButton
@action={{@togglePasswordMask}} @action={{@togglePasswordMask}}
@label={{if @maskPassword "login.show_password" "login.hide_password"}} @icon={{if @maskPassword "far-eye" "far-eye-slash"}}
@title={{if @title={{if
@maskPassword @maskPassword
"login.show_password_title" "login.show_password_title"
"login.hide_password_title" "login.hide_password_title"
}} }}
class="btn-link toggle-password-mask" class="btn-transparent toggle-password-mask"
/> />

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

@ -134,6 +134,11 @@
<label class="alt-placeholder" for="new-account-password"> <label class="alt-placeholder" for="new-account-password">
{{i18n "invites.password_label"}} {{i18n "invites.password_label"}}
</label> </label>
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
@parentController="invites-show"
/>
<div class="create-account__password-info"> <div class="create-account__password-info">
<div class="create-account__password-tip-validation"> <div class="create-account__password-tip-validation">
<InputTip <InputTip
@ -148,11 +153,6 @@
{{i18n "login.caps_lock_warning"}} {{i18n "login.caps_lock_warning"}}
</div> </div>
</div> </div>
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
@parentController="invites-show"
/>
</div> </div>
</div> </div>
{{/unless}} {{/unless}}

9
app/assets/javascripts/discourse/app/templates/signup.hbs
View File

@ -134,7 +134,10 @@
<label class="alt-placeholder" for="new-account-password"> <label class="alt-placeholder" for="new-account-password">
{{i18n "user.password.title"}} {{i18n "user.password.title"}}
</label> </label>
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
/>
<div class="create-account__password-info"> <div class="create-account__password-info">
<div class="create-account__password-tip-validation"> <div class="create-account__password-tip-validation">
{{#if this.showPasswordValidation}} {{#if this.showPasswordValidation}}
@ -159,10 +162,6 @@
{{i18n "login.caps_lock_warning"}} {{i18n "login.caps_lock_warning"}}
</div> </div>
</div> </div>
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
/>
</div> </div>
{{/if}} {{/if}}

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

@ -61,13 +61,17 @@ body.invite-page {
} }
} }
.signup-fullpage .input-group input[type="password"] {
padding-right: 3em;
}
.toggle-password-mask { .toggle-password-mask {
align-self: start; position: absolute;
line-height: 1.4; // aligns with input description text right: 0;
padding: 0.75em 0.77em; // alligns with input padding
.ios-device & { .ios-device & {
// reset form-item-sizing mixin styles // reset form-item-sizing mixin styles
padding-top: 0; padding: 0.7em;
padding-bottom: 0;
font-size: var(--font-0); font-size: var(--font-0);
} }
} }