maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add toggle button to 'New Forem Secret' form (#17016)

Browse source 
* Add toggle button to 'New Forem Secret' form

* Display messages using i18n

* Fix from snake case to kebab case

* Fix a bug when the specified class did not exist
This commit is contained in:
MrFuku 2022-03-29 23:29:29 +09:00 • committed by GitHub
parent 6aebd9335f
commit 847cd594ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
app/javascript/packs/foremCreatorSignup.js
View file

@ -64,36 +64,42 @@ function hideHintRow() {
hintRow.classList.add('hidden');
}
function togglePasswordMask(event) {
event.preventDefault();
visible = !visible;
toggleAriaPressed(visible);
togglePasswordType(visible);
toggleEyeIcons(visible);
function setTogglePasswordEvent(targetWrapper) {
function togglePasswordMask(event) {
event.preventDefault();
visible = !visible;
toggleAriaPressed(visible);
togglePasswordType(visible);
toggleEyeIcons(visible);
}
function toggleAriaPressed(visible) {
visibility.setAttribute('aria-pressed', visible);
}
function togglePasswordType(visible) {
const passwordType = visible ? 'text' : 'password';
passwordField.type = passwordType;
}
function toggleEyeIcons(visible) {
eyeOffIcon.classList.toggle('hidden', !visible);
eyeIcon.classList.toggle('hidden', visible);
}
let visible = false;
const eyeIcon = targetWrapper.getElementsByClassName('js-eye')[0];
const eyeOffIcon = targetWrapper.getElementsByClassName('js-eye-off')[0];
const passwordField = targetWrapper.getElementsByClassName('js-password')[0];
const visibility = targetWrapper.getElementsByClassName(
'js-creator-password-visibility',
)[0];
visibility.addEventListener('click', togglePasswordMask);
}
function toggleAriaPressed(visible) {
visibility.setAttribute('aria-pressed', visible);
}
function togglePasswordType(visible) {
const passwordType = visible ? 'text' : 'password';
passwordField.type = passwordType;
}
function toggleEyeIcons(visible) {
eyeOffIcon.classList.toggle('hidden', !visible);
eyeIcon.classList.toggle('hidden', visible);
}
let visible = false;
const eyeIcon = document.getElementsByClassName('js-eye')[0];
const eyeOffIcon = document.getElementsByClassName('js-eye-off')[0];
const passwordField = document.getElementsByClassName('js-password')[0];
const visibility = document.getElementsByClassName(
'js-creator-password-visibility',
)[0];
visibility.addEventListener('click', togglePasswordMask);
document.querySelectorAll('.js-password-toggle-wrapper').forEach((el) => {
setTogglePasswordEvent(el);
});
const name = document.getElementsByClassName('js-creator-signup-name')[0];
name.addEventListener('input', setDefaultUsername);

10
app/views/shared/authentication/_forem_creator_signup.html.erb
View file

@ -76,7 +76,7 @@
<div class="crayons-field mt-6">
<%= f.label :password, t("views.auth.register.field.password.label"), class: "crayons-field__label" %>
<div class="relative">
<div class="relative js-password-toggle-wrapper">
<%= f.password_field :password, minlength: "8", class: "crayons-textfield js-password", placeholder: t("views.auth.register.field.password.placeholder"), required: true, aria: { describedby: "password-helper-text" } %>
<button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--s js-creator-password-visibility h-100 absolute z-elevate right-0" aria-label="<%= t("views.auth.register.field.password.show") %>" aria-pressed="false">
<%= crayons_icon_tag(:eye, class: "js-eye", data: { testid: "mask-icon" }, aria_hidden: true, title: t("views.auth.register.field.password.show")) %>
@ -92,7 +92,13 @@
<% else %>
<div class="crayons-field mt-6">
<%= f.label :forem_owner_secret, t("views.auth.register.secret.label"), class: "crayons-field__label" %>
<%= f.password_field :forem_owner_secret, class: "crayons-textfield", required: ForemInstance.needs_owner_secret?, placeholder: t("views.auth.register.secret.placeholder") %>
<div class="relative js-password-toggle-wrapper">
<%= f.password_field :forem_owner_secret, class: "crayons-textfield js-password", required: ForemInstance.needs_owner_secret?, placeholder: t("views.auth.register.secret.placeholder") %>
<button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--s js-creator-password-visibility h-100 absolute z-elevate right-0" aria-label="<%= t("views.auth.register.secret.show") %>" aria-pressed="false">
<%= crayons_icon_tag(:eye, class: "js-eye", data: { testid: "mask-icon" }, aria_hidden: true, title: t("views.auth.register.secret.show")) %>
<%= crayons_icon_tag("eye-off", class: "hidden js-eye-off", data: { testid: "unmask-icon" }, aria_hidden: true, title: t("views.auth.register.secret.hide")) %>
</button>
</div>
</div>
<% end %>
<% end %>

2
config/locales/views/auth/en.yml
View file

@ -61,6 +61,8 @@ en:
secret:
label: New Forem Secret
placeholder: As provided by your Forem host
hide: Hide new Forem secret
show: Show new Forem secret
submit: Sign up
wizard:
meta:

2
config/locales/views/auth/fr.yml
View file

@ -61,6 +61,8 @@ fr:
secret:
label: New Forem Secret
placeholder: As provided by your Forem host
hide: Hide new Forem secret
show: Show new Forem secret
submit: Sign up
wizard:
meta: