From 4cf9fab13c98255ed3370836ba338b12942ddfa8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 28 Apr 2022 11:44:12 -0500
Subject: [PATCH] RegistrationModePicker: convert to TSX

---
 .../components/registration_mode_picker.js    | Bin 3177 -> 0 bytes
 .../components/registration_mode_picker.tsx   |  86 ++++++++++++++++++
 2 files changed, 86 insertions(+)
 delete mode 100644 app/soapbox/features/admin/components/registration_mode_picker.js
 create mode 100644 app/soapbox/features/admin/components/registration_mode_picker.tsx

diff --git a/app/soapbox/features/admin/components/registration_mode_picker.js b/app/soapbox/features/admin/components/registration_mode_picker.js
deleted file mode 100644
index 275d9b0c0bd1f913533d08079c1ca226341bf885..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3177
zcmc&$OK;ma5Wf3Y%w8%9aOAsdr7Z$vkwdycvwJ9tz@VkE%|<3wlFB9!{NH!@vLwew
zi|sxR7EEe5kMEoLD86f?GVlpmX<)774iaVmCvPX*zq;A&TEkW~-n9y^By9>5Bijoe
zO)eU;xhSJi@1z4RzG7)^gsG=c;hGD)MXlKe^%Sn9+A(9W3R|!rrgFjQ(9l&Wg&<!?
zRtl^3napC|9kflw45cjAd~-0?k~J&&Jfj-96ne(09T&ZKEm--uVk#tXY#m?s2f7Ks
zJwa8Ytzt^6YmRlLe^s(=?D7+<xE!x;43cFmGR9aVGX$TWt;vzLl~AGDz%Jkf#Sw6+
zjjh=eR&yYL>6y4{@`~y0N-|aD8jay%qnFMsanQ52HUVflaUU$aqhAu(Q)XEooHh4`
zQ2brqDcNYsA=P$0g~qNkC@#U}v6B_f!9K64i*6`!CQ9_i`36mz@UWL;*(k&Y1*)E?
z!a1>iZFwF7dJ>1XtfBaJ7eF>B=J2Hh(-QRbFPSUcaBaww<#lNds9vL5e4v^Lpx%;|
zrEG;+vWALyV)attx0X`_(SbFqwLS4*xdVtM|4OWoTnJUxQd=s&U(_haJ#ht~ka|bZ
zS(o+3HXo5YCv1ofmiS^G@x^W)i151vKuZW7F#cjmbUE!G-cGFh(1%Cd5*N`^WQ(sM
zjeDN-h+hwJ25;UR4tk>zbJQNOnk1g4VK|gH_J4E~-a+D+2P)J9N@r~i`0Rv^q{sF@
zyr-J1h@`u5gJ+ZXy;4oenrThq*f-WKfpEvmM^u2%21TXej6iml7AdZ_Ol**_qMvW+
z*wh_VTsO>=+bQ8;YLch|%$Doijg~DrntE>N^>|iN%negCT)E?rrq&*bUelrerQSuB
z<z|Z_P2J%7W*MA_@|NqiEJ=2VOjGApk64t9G|Ex#Bqhs2)P0thwwCDHY6!sI_ok>&
zQAi)pcT?xb{J3UUL1^aGEdUn1zFvkc+8oGizf1eQ-X3f%Dm7bSU380AcMY$KSF$<m
zs-+!=r8}Nj0UpR_kqlcyCosF*kAg<}i_Y;HmqVjr?lF6NKaBkRZ2GyKiE}mlW|i_)
z>Hu3J|8E24BU%@)LHi(H=o<n`Cg7{&B0m+p+#(HGRdg18D2gJ?^$<Est84ti&-@6o
z*?$9URH$>{eh60#iAcC&{&A!aDV#?84~<GYur=QZ`Y4*hsx>4u$Q6W}kaVhkA#pL9
zb_{=_+qi;1Nhp9ga^Do;B18?`{3u~DvE&SChxh*nasF~RN86RVi%&J?&rL;$dYY+^
zawV&mAyqkimaX3~ysqh*c;W`3K}i?;kJ1pX!80U;x92HX%z8!bXKFD!p}&jSu~NrN
HU_bc_2S*6u

diff --git a/app/soapbox/features/admin/components/registration_mode_picker.tsx b/app/soapbox/features/admin/components/registration_mode_picker.tsx
new file mode 100644
index 0000000000..5808ace632
--- /dev/null
+++ b/app/soapbox/features/admin/components/registration_mode_picker.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+
+import { updateConfig } from 'soapbox/actions/admin';
+import snackbar from 'soapbox/actions/snackbar';
+import {
+  SimpleForm,
+  FieldsGroup,
+  RadioGroup,
+  RadioItem,
+} from 'soapbox/features/forms';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+
+import type { Instance } from 'soapbox/types/entities';
+
+type RegistrationMode = 'open' | 'approval' | 'closed';
+
+const messages = defineMessages({
+  saved: { id: 'admin.dashboard.settings_saved', defaultMessage: 'Settings saved!' },
+});
+
+const generateConfig = (mode: RegistrationMode) => {
+  const configMap = {
+    open: [{ tuple: [':registrations_open', true] }, { tuple: [':account_approval_required', false] }],
+    approval: [{ tuple: [':registrations_open', true] }, { tuple: [':account_approval_required', true] }],
+    closed: [{ tuple: [':registrations_open', false] }],
+  };
+
+  return [{
+    group: ':pleroma',
+    key: ':instance',
+    value: configMap[mode],
+  }];
+};
+
+const modeFromInstance = (instance: Instance): RegistrationMode => {
+  if (instance.approval_required && instance.registrations) return 'approval';
+  return instance.registrations ? 'open' : 'closed';
+};
+
+/** Allows changing the registration mode of the instance, eg "open", "closed", "approval" */
+const RegistrationModePicker: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const mode = useAppSelector(state => modeFromInstance(state.instance));
+
+  const onChange: React.ChangeEventHandler<HTMLInputElement> = e => {
+    const config = generateConfig(e.target.value as RegistrationMode);
+    dispatch(updateConfig(config)).then(() => {
+      dispatch(snackbar.success(intl.formatMessage(messages.saved)));
+    }).catch(() => {});
+  };
+
+  return (
+    <SimpleForm>
+      <FieldsGroup>
+        <RadioGroup
+          label={<FormattedMessage id='admin.dashboard.registration_mode_label' defaultMessage='Registrations' />}
+          onChange={onChange}
+        >
+          <RadioItem
+            label={<FormattedMessage id='admin.dashboard.registration_mode.open_label' defaultMessage='Open' />}
+            hint={<FormattedMessage id='admin.dashboard.registration_mode.open_hint' defaultMessage='Anyone can join.' />}
+            checked={mode === 'open'}
+            value='open'
+          />
+          <RadioItem
+            label={<FormattedMessage id='admin.dashboard.registration_mode.approval_label' defaultMessage='Approval Required' />}
+            hint={<FormattedMessage id='admin.dashboard.registration_mode.approval_hint' defaultMessage='Users can sign up, but their account only gets activated when an admin approves it.' />}
+            checked={mode === 'approval'}
+            value='approval'
+          />
+          <RadioItem
+            label={<FormattedMessage id='admin.dashboard.registration_mode.closed_label' defaultMessage='Closed' />}
+            hint={<FormattedMessage id='admin.dashboard.registration_mode.closed_hint' defaultMessage='Nobody can sign up. You can still invite people.' />}
+            checked={mode === 'closed'}
+            value='closed'
+          />
+        </RadioGroup>
+      </FieldsGroup>
+    </SimpleForm>
+  );
+};
+
+export default RegistrationModePicker;