refactor share_token form

openpoke · Jul 11, 2024 · e9f0bc4 · e9f0bc4
1 parent 81fe2c1
commit e9f0bc4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/decidim-admin/app/views/decidim/admin/share_tokens/_form.html.erb b/decidim-admin/app/views/decidim/admin/share_tokens/_form.html.erb
@@ -4,42 +4,42 @@
       <%= form.text_field :token, aria: { label: :token }, class: "form-input" %>
     </div>
     <div class="row column">
-      <div class="flex items-center space-x-4">
-        <div class="flex items-center">
-          <%= form.radio_button :no_expiration, true, id: "expires_never", checked: form.object.no_expiration %>
-          <%= form.label :no_expiration, "Never expire", for: "expires_never" %>
+      <%= t("share_tokens.form.expires_at", scope: "decidim.admin") %>
+    </div>
+    <div class="row column -mt-4">
+      <div class="ml-2">
+        <div class="mr-4">
+          <%= form.radio_button :no_expiration, t("share_tokens.form.never_expire", scope: "decidim.admin"), checked: form.object.no_expiration %>
         </div>
+
+        <%= form.radio_button :no_expiration, t("share_tokens.form.custom", scope: "decidim.admin"), checked: !form.object.no_expiration %>
 
-        <div class="flex items-center">
-          <%= form.radio_button :no_expiration, false, id: "expires_custom", checked: !form.object.no_expiration %>
-          <%= form.label :no_expiration, "Custom", for: "expires_custom" %>
+        <div id="expires_at_field_wrapper" class="<%= form.object.no_expiration ? "hidden" : "" %> mt-4 row column">
+          <%= form.datetime_field :expires_at, label: t("share_tokens.form.custom_expiration", scope: "decidim.admin") %>
         </div>
-      </div>
-
-      <div id="expires_at_field_wrapper" class="<%= form.object.no_expiration ? "hidden" : "" %> mt-4">
-        <%= form.datetime_field :expires_at, aria: { label: :expires_at } %>
+
       </div>
     </div>
   </div>
 </div>
 
 <script>
   document.addEventListener("DOMContentLoaded", () => {
-    const expiresNever = document.getElementById("expires_never");
-    const expiresCustom = document.getElementById("expires_custom");
+    const radioButtons = document.querySelectorAll("input[name='share_token[no_expiration]']");
     const expiresAtFieldWrapper = document.getElementById("expires_at_field_wrapper");
 
     const toggleExpiresAtField = () => {
-      if (expiresCustom.checked) {
+      if (radioButtons[1].checked) {
         expiresAtFieldWrapper.classList.remove("hidden");
       } else {
         expiresAtFieldWrapper.classList.add("hidden");
         expiresAtFieldWrapper.querySelector("input[name='share_token[expires_at]']").value = "";
       }
     };
 
-    expiresNever.addEventListener("change", toggleExpiresAtField);
-    expiresCustom.addEventListener("change", toggleExpiresAtField);
+    radioButtons.forEach(radioButton => {
+      radioButton.addEventListener("change", toggleExpiresAtField);
+    });
 
     toggleExpiresAtField();
   });

diff --git a/decidim-admin/config/locales/en.yml b/decidim-admin/config/locales/en.yml
@@ -964,6 +964,11 @@ en:
         destroy:
           error: There was a problem destroying the token.
           success: Token destroyed successfully.
+        form:
+          custom: Custom
+          custom_expiration: Custom expiration
+          expires_at: Expires at
+          never_expire: Never
         index:
           back_to_share_tokens: Back to share tokens
           new_share_token_button: New token