Port ban functionality to TypeScript

app/javascript/retrospring/features/moderation/ban.ts

@@ -0,0 +1,59 @@
+import Rails from '@rails/ujs';
+
+import I18n from '../../../legacy/i18n';
+import { showNotification, showErrorNotification } from 'utilities/notifications';
+
+export function banCheckboxHandler(event: Event): void {
+  const checkbox = event.target as HTMLInputElement;
+
+  if (checkbox.checked) {
+    document.querySelector('#ban-controls').classList.remove('d-none');
+  } else {
+    document.querySelector('#ban-controls').classList.add('d-none');
+  }
+}
+
+export function permanentBanCheckboxHandler(event: Event): void {
+  const checkbox = event.target as HTMLInputElement;
+
+  if (checkbox.checked) {
+    document.querySelector('#ban-controls-time').classList.add('d-none');
+  } else {
+    document.querySelector('#ban-controls-time').classList.remove('d-none');
+  }
+}
+
+export function banFormHandler(event: Event): void {
+  const form = event.target as HTMLFormElement;
+  const checkbox = document.querySelector<HTMLInputElement>('[name="ban"][type="checkbox"]');
+  const permaCheckbox = document.querySelector<HTMLInputElement>('[name="permaban"][type="checkbox"]');
+  event.preventDefault();
+
+  const data = {
+    ban: '0',
+    user: form.elements['user'].value,
+  };
+
+  if (checkbox && checkbox.checked) {
+    data['ban'] = '1';
+    data['reason'] = form.elements['user'].value;
+
+    if (!permaCheckbox.checked) {
+      data['duration'] = form.elements['duration'].value.trim();
+      data['duration_unit'] = form.elements['duration_unit'].value.trim();
+    }
+  }
+
+  Rails.ajax({
+    url: '/ajax/mod/ban',
+    type: 'POST',
+    data: new URLSearchParams(data).toString(),
+    success: (data) => {
+      showNotification(data.message, data.success);
+    },
+    error: (data, status, xhr) => {
+      console.log(data, status, xhr);
+      showErrorNotification(I18n.translate('frontend.error.message'));
+    }
+  });
+}

app/views/modal/_ban.haml

@@ -13,9 +13,9 @@
         - if current_ban.nil?
           .modal-body
             = f.check_box :ban, label: t('views.modal.bancontrol.ban'), checked: user.banned?
-            #ban-controls{ style: user.banned? ? '' : 'display: none' }
+            #ban-controls{ class: user.banned? ? '' : 'd-none' }
               = f.check_box :permaban, label: t('views.modal.bancontrol.permanent'), checked: user.permanently_banned?
-              #ban-controls-time{ style: user.permanently_banned? ? 'display: none' : '' }
+              #ban-controls-time{ class: user.permanently_banned? ? 'd-none' : '' }
                 = f.text_field :duration, label: '', required: true
                 .form-check.form-check-inline
                   = f.radio_button :duration_unit, 'hours', label: 'Hours', checked: true