From 847cd594ba5c0cc2a08eda46dd7d9ac26c94a9cb Mon Sep 17 00:00:00 2001
From: MrFuku <mmafighter_shun@icloud.com>
Date: Tue, 29 Mar 2022 23:29:29 +0900
Subject: [PATCH] Add toggle button to 'New Forem Secret' form (#17016)

* 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
---
 app/javascript/packs/foremCreatorSignup.js    | 62 ++++++++++---------
 .../_forem_creator_signup.html.erb            | 10 ++-
 config/locales/views/auth/en.yml              |  2 +
 config/locales/views/auth/fr.yml              |  2 +
 4 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/app/javascript/packs/foremCreatorSignup.js b/app/javascript/packs/foremCreatorSignup.js
index d6dfff042..e4c206b52 100644
--- a/app/javascript/packs/foremCreatorSignup.js
+++ b/app/javascript/packs/foremCreatorSignup.js
@@ -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);
diff --git a/app/views/shared/authentication/_forem_creator_signup.html.erb b/app/views/shared/authentication/_forem_creator_signup.html.erb
index d695f2cdc..3f78c16a7 100644
--- a/app/views/shared/authentication/_forem_creator_signup.html.erb
+++ b/app/views/shared/authentication/_forem_creator_signup.html.erb
@@ -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 %>
diff --git a/config/locales/views/auth/en.yml b/config/locales/views/auth/en.yml
index 80c0e4265..445b2cfe4 100644
--- a/config/locales/views/auth/en.yml
+++ b/config/locales/views/auth/en.yml
@@ -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:
diff --git a/config/locales/views/auth/fr.yml b/config/locales/views/auth/fr.yml
index a0f087a7b..6e176d9ec 100644
--- a/config/locales/views/auth/fr.yml
+++ b/config/locales/views/auth/fr.yml
@@ -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: