github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-14 10:55:30 +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">
{{i18n "login.password"}}
</label>
{{#if @loginPassword}}
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
tabindex="3"
/>
{{/if}}
<div class="login__password-links">
<a
href
@ -57,13 +64,6 @@
>
{{i18n "forgot_password.action"}}
</a>
{{#if @loginPassword}}
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
tabindex="3"
/>
{{/if}}
</div>
<div class="caps-lock-warning {{unless this.capsLockOn 'hidden'}}">
{{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">
{{i18n "user.password.title"}}
</label>
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
/>
<div class="create-account__password-info">
<div class="create-account__password-tip-validation">
{{#if this.showPasswordValidation}}
@ -163,10 +166,6 @@
{{i18n "login.caps_lock_warning"}}
</div>
</div>
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
/>
</div>
{{/if}}

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

@ -1,10 +1,10 @@
<DButton
@action={{@togglePasswordMask}}
@label={{if @maskPassword "login.show_password" "login.hide_password"}}
@icon={{if @maskPassword "far-eye" "far-eye-slash"}}
@title={{if
@maskPassword
"login.show_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">
{{i18n "invites.password_label"}}
</label>
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
@parentController="invites-show"
/>
<div class="create-account__password-info">
<div class="create-account__password-tip-validation">
<InputTip
@ -148,11 +153,6 @@
{{i18n "login.caps_lock_warning"}}
</div>
</div>
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
@parentController="invites-show"
/>
</div>
</div>
{{/unless}}

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

@ -134,7 +134,10 @@
<label class="alt-placeholder" for="new-account-password">
{{i18n "user.password.title"}}
</label>
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
/>
<div class="create-account__password-info">
<div class="create-account__password-tip-validation">
{{#if this.showPasswordValidation}}
@ -159,10 +162,6 @@
{{i18n "login.caps_lock_warning"}}
</div>
</div>
<TogglePasswordMask
@maskPassword={{this.maskPassword}}
@togglePasswordMask={{this.togglePasswordMask}}
/>
</div>
{{/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 {
align-self: start;
line-height: 1.4; // aligns with input description text
position: absolute;
right: 0;
padding: 0.75em 0.77em; // alligns with input padding
.ios-device & {
// reset form-item-sizing mixin styles
padding-top: 0;
padding-bottom: 0;
padding: 0.7em;
font-size: var(--font-0);
}
}