Admin: add registration mode picker

app/soapbox/actions/admin.js

@@ -37,13 +37,13 @@ export function fetchConfig() {
   };
 }
 
-export function updateAdminConfig(params) {
+export function updateConfig(configs) {
   return (dispatch, getState) => {
-    dispatch({ type: ADMIN_CONFIG_UPDATE_REQUEST });
+    dispatch({ type: ADMIN_CONFIG_UPDATE_REQUEST, configs });
     return api(getState)
-      .post('/api/pleroma/admin/config', params)
+      .post('/api/pleroma/admin/config', { configs })
-      .then(response => {
+      .then(({ data: { configs } }) => {
-        dispatch({ type: ADMIN_CONFIG_UPDATE_SUCCESS, config: response.data });
+        dispatch({ type: ADMIN_CONFIG_UPDATE_SUCCESS, configs });
       }).catch(error => {
         dispatch({ type: ADMIN_CONFIG_UPDATE_FAIL, error });
       });

app/soapbox/features/admin/components/admin_nav.js

@@ -37,18 +37,18 @@ class AdminNav extends React.PureComponent {
               <IconWithCounter icon='gavel' count={reportsCount} fixedWidth />
               <FormattedMessage id='admin_nav.reports' defaultMessage='Reports' />
             </a>
-            {(instance.get('approval_required') || approvalCount > 0) && (
+            {((instance.get('registrations') && instance.get('approval_required')) || approvalCount > 0) && (
               <NavLink className='promo-panel-item' to='/admin/approval'>
                 <IconWithCounter icon='user' count={approvalCount} fixedWidth />
                 <FormattedMessage id='admin_nav.awaiting_approval' defaultMessage='Awaiting Approval' />
               </NavLink>
             )}
-            {!instance.get('registrations') && (
+            {/* !instance.get('registrations') && (
-              {/* <NavLink className='promo-panel-item' to='#'>
+              <NavLink className='promo-panel-item' to='#'>
                 <Icon id='envelope' className='promo-panel-item__icon' fixedWidth />
                 <FormattedMessage id='admin_nav.invites' defaultMessage='Invites' />
-              </NavLink> */}
+              </NavLink>
-            )}
+            ) */}
             {/* <NavLink className='promo-panel-item' to='#'>
               <Icon id='group' className='promo-panel-item__icon' fixedWidth />
               <FormattedMessage id='admin_nav.registration' defaultMessage='Registration' />

app/soapbox/features/admin/components/registration_mode_picker.js

@@ -8,37 +8,67 @@ import {
   RadioGroup,
   RadioItem,
 } from 'soapbox/features/forms';
+import { updateConfig } from 'soapbox/actions/admin';
 
 const mapStateToProps = (state, props) => ({
-  instance: state.get('instance'),
+  mode: modeFromInstance(state.get('instance')),
   openReportCount: state.getIn(['admin', 'open_report_count']),
 });
 
+const generateConfig = mode => {
+  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 => {
+  if (instance.get('approval_required') && instance.get('registrations')) return 'approval';
+  return instance.get('registrations') ? 'open' : 'closed';
+};
+
 export default @connect(mapStateToProps)
 class RegistrationModePicker extends ImmutablePureComponent {
 
+  onChange = e => {
+    const { dispatch } = this.props;
+    const config = generateConfig(e.target.value);
+    dispatch(updateConfig(config));
+  }
+
   render() {
+    const { mode } = this.props;
+
     return (
       <SimpleForm>
         <FieldsGroup>
           <RadioGroup
             label={<FormattedMessage id='admin.dashboard.registration_mode_label' defaultMessage='Registrations' />}
-            checked
             onChange={this.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>

app/soapbox/features/admin/index.js

@@ -67,11 +67,11 @@ class Dashboard extends ImmutablePureComponent {
         </div>
         <RegistrationModePicker />
         <div className='dashwidgets'>
-          <div class='dashwidget'>
+          <div className='dashwidget'>
             <h4><FormattedMessage id='admin.dashwidgets.software_header' defaultMessage='Software' /></h4>
             <ul>
-              <li>Soapbox FE <span class='pull-right'>1.1.0</span></li>
+              <li>Soapbox FE <span className='pull-right'>1.1.0</span></li>
-              <li>{v.software} <span class='pull-right'>{v.version}</span></li>
+              <li>{v.software} <span className='pull-right'>{v.version}</span></li>
             </ul>
           </div>
         </div>

app/soapbox/features/soapbox_config/index.js

@@ -14,7 +14,7 @@ import {
   FormPropTypes,
 } from 'soapbox/features/forms';
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
-import { updateAdminConfig } from 'soapbox/actions/admin';
+import { updateConfig } from 'soapbox/actions/admin';
 import Icon from 'soapbox/components/icon';
 import { defaultConfig } from 'soapbox/actions/soapbox';
 import { uploadMedia } from 'soapbox/actions/media';
@@ -82,20 +82,18 @@ class SoapboxConfig extends ImmutablePureComponent {
 
   getParams = () => {
     const { soapbox } = this.state;
-    return {
+    return [{
-      configs: [{
+      group: ':pleroma',
-        group: ':pleroma',
+      key: ':frontend_configurations',
-        key: ':frontend_configurations',
+      value: [{
-        value: [{
+        tuple: [':soapbox_fe', soapbox.toJS()],
-          tuple: [':soapbox_fe', soapbox.toJS()],
-        }],
       }],
-    };
+    }];
   }
 
   handleSubmit = (event) => {
     const { dispatch } = this.props;
-    dispatch(updateAdminConfig(this.getParams())).then(() => {
+    dispatch(updateConfig(this.getParams())).then(() => {
       this.setState({ isLoading: false });
     }).catch((error) => {
       this.setState({ isLoading: false });

app/soapbox/reducers/instance.js

@@ -3,7 +3,9 @@ import {
   NODEINFO_FETCH_SUCCESS,
 } from '../actions/instance';
 import { PRELOAD_IMPORT } from 'soapbox/actions/preload';
-import { Map as ImmutableMap, fromJS } from 'immutable';
+import { ADMIN_CONFIG_UPDATE_SUCCESS } from 'soapbox/actions/admin';
+import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
+import { ConfigDB } from 'soapbox/utils/config_db';
 
 const nodeinfoToInstance = nodeinfo => {
   // Match Pleroma's develop branch
@@ -37,6 +39,27 @@ const preloadImport = (state, action, path) => {
   return data ? initialState.mergeDeep(fromJS(data)) : state;
 };
 
+const getConfigValue = (instanceConfig, key) => {
+  return instanceConfig
+    .find(value => value.getIn(['tuple', 0]) === key)
+    .getIn(['tuple', 1]);
+};
+
+const importConfigs = (state, configs) => {
+  // FIXME: This is pretty hacked together. Need to make a cleaner map.
+  const config = ConfigDB.find(configs, ':pleroma', ':instance');
+  if (!config) return state;
+  const value = config.get('value', ImmutableList());
+
+  return state.withMutations(state => {
+    const registrationsOpen = getConfigValue(value, ':registrations_open');
+    const approvalRequired = getConfigValue(value, ':account_approval_required');
+
+    state.update('registrations', c => typeof registrationsOpen === 'boolean' ? registrationsOpen : c);
+    state.update('approval_required', c => typeof approvalRequired === 'boolean' ? approvalRequired : c);
+  });
+};
+
 export default function instance(state = initialState, action) {
   switch(action.type) {
   case PRELOAD_IMPORT:
@@ -45,6 +68,8 @@ export default function instance(state = initialState, action) {
     return initialState.mergeDeep(fromJS(action.instance));
   case NODEINFO_FETCH_SUCCESS:
     return nodeinfoToInstance(fromJS(action.nodeinfo)).mergeDeep(state);
+  case ADMIN_CONFIG_UPDATE_SUCCESS:
+    return importConfigs(state, fromJS(action.configs));
   default:
     return state;
   }

app/soapbox/reducers/soapbox.js

@@ -4,7 +4,7 @@ import {
   SOAPBOX_CONFIG_REQUEST_FAIL,
 } from '../actions/soapbox';
 import { PRELOAD_IMPORT } from 'soapbox/actions/preload';
-import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
+import { Map as ImmutableMap, fromJS } from 'immutable';
 import { ConfigDB } from 'soapbox/utils/config_db';
 
 const initialState = ImmutableMap();
@@ -13,9 +13,7 @@ const fallbackState = ImmutableMap({
   brandColor: '#0482d8', // Azure
 });
 
-const updateFromAdmin = (state, config) => {
+const updateFromAdmin = (state, configs) => {
-  const configs = config.get('configs', ImmutableList());
-
   try {
     return ConfigDB.find(configs, ':pleroma', ':frontend_configurations')
       .get('value')
@@ -47,7 +45,7 @@ export default function soapbox(state = initialState, action) {
   case SOAPBOX_CONFIG_REQUEST_FAIL:
     return fallbackState.mergeDeep(state);
   case ADMIN_CONFIG_UPDATE_SUCCESS:
-    return updateFromAdmin(state, fromJS(action.config));
+    return updateFromAdmin(state, fromJS(action.configs));
   default:
     return state;
   }