mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

SoapboxConfig: convert to TSX

Browse Source
api-accept
Alex Gleason 2 years ago
parent 748d1f6c21
commit eaeeed29c0
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
3 changed files with 486 additions and 459 deletions
Show Stats Download Patch File Download Diff File

23
app/soapbox/features/forms/index.tsx
Unescape View File

@ -79,6 +79,12 @@ interface ISimpleInput {
hint?: React.ReactNode,
error?: boolean,
onChange?: React.ChangeEventHandler,
min?: number,
max?: number,
pattern?: string,
name?: string,
placeholder?: string,
value?: string | number,
}
export const SimpleInput: React.FC<ISimpleInput> = (props) => {
@ -95,6 +101,9 @@ export const SimpleInput: React.FC<ISimpleInput> = (props) => {
interface ISimpleTextarea {
label?: React.ReactNode,
hint?: React.ReactNode,
value?: string,
onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,
rows?: number,
}
export const SimpleTextarea: React.FC<ISimpleTextarea> = (props) => {
@ -149,6 +158,7 @@ export const FieldsGroup: React.FC = ({ children }) => (
interface ICheckbox {
label?: React.ReactNode,
hint?: React.ReactNode,
name?: string,
checked?: boolean,
onChange?: React.ChangeEventHandler<HTMLInputElement>,
}
@ -227,8 +237,11 @@ export const SelectDropdown: React.FC<ISelectDropdown> = (props) => {
};
interface ITextInput {
name?: string,
onChange?: React.ChangeEventHandler,
label?: React.ReactNode,
placeholder?: string,
value?: string,
}
export const TextInput: React.FC<ITextInput> = props => (
@ -243,7 +256,15 @@ FileChooser.defaultProps = {
accept: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
};
export const FileChooserLogo: React.FC = props => (
interface IFileChooserLogo {
label?: React.ReactNode,
hint?: React.ReactNode,
name?: string,
accept?: string[],
onChange: React.ChangeEventHandler<HTMLInputElement>,
}
export const FileChooserLogo: React.FC<IFileChooserLogo> = props => (
<SimpleInput type='file' {...props} />
);

458
app/soapbox/features/soapbox_config/index.js
Unescape View File

@ -1,458 +0,0 @@
import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { updateConfig } from 'soapbox/actions/admin';
import { uploadMedia } from 'soapbox/actions/media';
import snackbar from 'soapbox/actions/snackbar';
import Icon from 'soapbox/components/icon';
import { Column } from 'soapbox/components/ui';
import {
SimpleForm,
FieldsGroup,
TextInput,
SimpleInput,
SimpleTextarea,
FileChooserLogo,
Checkbox,
} from 'soapbox/features/forms';
import ThemeToggle from 'soapbox/features/ui/components/theme-toggle';
import { normalizeSoapboxConfig } from 'soapbox/normalizers';
import Accordion from '../ui/components/accordion';
import ColorWithPicker from './components/color-with-picker';
import IconPicker from './components/icon-picker';
import SitePreview from './components/site-preview';
const messages = defineMessages({
heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
saved: { id: 'soapbox_config.saved', defaultMessage: 'Soapbox config saved!' },
copyrightFooterLabel: { id: 'soapbox_config.copyright_footer.meta_fields.label_placeholder', defaultMessage: 'Copyright footer' },
promoItemIcon: { id: 'soapbox_config.promo_panel.meta_fields.icon_placeholder', defaultMessage: 'Icon' },
promoItemLabel: { id: 'soapbox_config.promo_panel.meta_fields.label_placeholder', defaultMessage: 'Label' },
promoItemURL: { id: 'soapbox_config.promo_panel.meta_fields.url_placeholder', defaultMessage: 'URL' },
homeFooterItemLabel: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
homeFooterItemURL: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' },
cryptoAdressItemTicker: { id: 'soapbox_config.crypto_address.meta_fields.ticker_placeholder', defaultMessage: 'Ticker' },
cryptoAdressItemAddress: { id: 'soapbox_config.crypto_address.meta_fields.address_placeholder', defaultMessage: 'Address' },
cryptoAdressItemNote: { id: 'soapbox_config.crypto_address.meta_fields.note_placeholder', defaultMessage: 'Note (optional)' },
cryptoDonatePanelLimitLabel: { id: 'soapbox_config.crypto_donate_panel_limit.meta_fields.limit_placeholder', defaultMessage: 'Number of items to display in the crypto homepage widget' },
customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Advanced: Edit raw JSON data' },
rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Edit the settings data directly. Changes made directly to the JSON file will override the form fields above. Click "Save" to apply your changes.' },
verifiedCanEditNameLabel: { id: 'soapbox_config.verified_can_edit_name_label', defaultMessage: 'Allow verified users to edit their own display name.' },
displayFqnLabel: { id: 'soapbox_config.display_fqn_label', defaultMessage: 'Display domain (eg @user@domain) for local accounts.' },
greentextLabel: { id: 'soapbox_config.greentext_label', defaultMessage: 'Enable greentext support' },
promoPanelIconsLink: { id: 'soapbox_config.hints.promo_panel_icons.link', defaultMessage: 'Soapbox Icons List' },
authenticatedProfileLabel: { id: 'soapbox_config.authenticated_profile_label', defaultMessage: 'Profiles require authentication' },
authenticatedProfileHint: { id: 'soapbox_config.authenticated_profile_hint', defaultMessage: 'Users must be logged-in to view replies and media on user profiles.' },
singleUserModeLabel: { id: 'soapbox_config.single_user_mode_label', defaultMessage: 'Single user mode' },
singleUserModeHint: { id: 'soapbox_config.single_user_mode_hint', defaultMessage: 'Front page will redirect to a given user profile.' },
singleUserModeProfileLabel: { id: 'soapbox_config.single_user_mode_profile_label', defaultMessage: 'Main user handle' },
singleUserModeProfileHint: { id: 'soapbox_config.single_user_mode_profile_hint', defaultMessage: '@handle' },
});
const templates = {
promoPanelItem: ImmutableMap({ icon: '', text: '', url: '' }),
footerItem: ImmutableMap({ title: '', url: '' }),
cryptoAddress: ImmutableMap({ ticker: '', address: '', note: '' }),
};
const mapStateToProps = state => {
return {
initialData: state.soapbox,
};
};
export default @connect(mapStateToProps)
@injectIntl
class SoapboxConfig extends ImmutablePureComponent {
static propTypes = {
initialData: ImmutablePropTypes.map.isRequired,
dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
state = {
isLoading: false,
data: this.props.initialData,
jsonEditorExpanded: false,
rawJSON: JSON.stringify(this.props.soapbox, null, 2),
jsonValid: true,
}
setConfig = (path, value) => {
const { data } = this.state;
const newData = data.setIn(path, value);
this.setState({ data: newData, jsonValid: true });
};
putConfig = data => {
this.setState({ data, jsonValid: true });
};
getParams = () => {
const { data } = this.state;
return [{
group: ':pleroma',
key: ':frontend_configurations',
value: [{
tuple: [':soapbox_fe', data.toJS()],
}],
}];
}
handleSubmit = (event) => {
const { dispatch, intl } = this.props;
dispatch(updateConfig(this.getParams())).then(() => {
this.setState({ isLoading: false });
dispatch(snackbar.success(intl.formatMessage(messages.saved)));
}).catch((error) => {
this.setState({ isLoading: false });
});
this.setState({ isLoading: true });
event.preventDefault();
}
handleChange = (path, getValue) => {
return e => {
this.setConfig(path, getValue(e));
};
};
handleFileChange = path => {
return e => {
const data = new FormData();
data.append('file', e.target.files[0]);
this.props.dispatch(uploadMedia(data)).then(({ data }) => {
this.handleChange(path, e => data.url)(e);
}).catch(() => {});
};
};
handleAddItem = (path, template) => {
return e => {
this.setConfig(
path,
this.getSoapboxConfig().getIn(path, ImmutableList()).push(template),
);
};
};
handleDeleteItem = path => {
return e => {
const data = this.state.data.deleteIn(path);
this.setState({ data });
};
};
handleItemChange = (path, key, field, template, getValue = e => e.target.value) => {
return this.handleChange(
path, (e) =>
template
.merge(field)
.set(key, getValue(e)),
);
};
handlePromoItemChange = (index, key, field, getValue) => {
return this.handleItemChange(
['promoPanel', 'items', index], key, field, templates.promoPanelItem, getValue,
);
};
handleHomeFooterItemChange = (index, key, field, getValue) => {
return this.handleItemChange(
['navlinks', 'homeFooter', index], key, field, templates.footerItem, getValue,
);
};
handleCryptoAdressItemChange = (index, key, field, getValue) => {
return this.handleItemChange(
['cryptoAddresses', index], key, field, templates.cryptoAddress, getValue,
);
};
handleEditJSON = e => {
this.setState({ rawJSON: e.target.value });
}
getSoapboxConfig = () => {
return normalizeSoapboxConfig(this.state.data);
}
toggleJSONEditor = (value) => this.setState({ jsonEditorExpanded: value });
componentDidUpdate(prevProps, prevState) {
if (prevProps.initialData !== this.props.initialData) {
this.putConfig(this.props.initialData);
}
if (prevState.data !== this.state.data) {
this.setState({ rawJSON: JSON.stringify(this.state.data, null, 2) });
}
if (prevState.rawJSON !== this.state.rawJSON) {
try {
const data = fromJS(JSON.parse(this.state.rawJSON));
this.putConfig(data);
} catch {
this.setState({ jsonValid: false });
}
}
}
render() {
const { intl } = this.props;
const soapbox = this.getSoapboxConfig();
return (
<Column label={intl.formatMessage(messages.heading)}>
<SimpleForm onSubmit={this.handleSubmit}>
<fieldset disabled={this.state.isLoading}>
<SitePreview soapbox={soapbox} />
<FieldsGroup>
<div className='fields-row file-picker'>
<div className='fields-row__column fields-row__column-6'>
<ColorWithPicker
buttonId='brand_color'
label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
value={soapbox.get('brandColor')}
onChange={this.handleChange(['brandColor'], (e) => e.hex)}
/>
<ColorWithPicker
buttonId='accent_color'
label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}
value={soapbox.get('accentColor')}
onChange={this.handleChange(['accentColor'], (e) => e.hex)}
/>
<div className='input with_label toggle'>
<div className='label_input'>
<label><FormattedMessage id='soapbox_config.fields.theme_label' defaultMessage='Default theme' /></label>
<ThemeToggle
onToggle={this.handleChange(['defaultSettings', 'themeMode'], value => value)}
themeMode={soapbox.getIn(['defaultSettings', 'themeMode'])}
intl={intl}
/>
</div>
</div>
</div>
<div className='fields-row__column fields-group fields-row__column-6'>
<FileChooserLogo
label={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
name='logo'
hint={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' />}
onChange={this.handleFileChange(['logo'])}
/>
</div>
</div>
</FieldsGroup>
<FieldsGroup>
<TextInput
name='copyright'
label={intl.formatMessage(messages.copyrightFooterLabel)}
placeholder={intl.formatMessage(messages.copyrightFooterLabel)}
value={soapbox.get('copyright')}
onChange={this.handleChange(['copyright'], (e) => e.target.value)}
/>
</FieldsGroup>
<FieldsGroup>
<Checkbox
name='verifiedCanEditName'
label={intl.formatMessage(messages.verifiedCanEditNameLabel)}
checked={soapbox.get('verifiedCanEditName') === true}
onChange={this.handleChange(['verifiedCanEditName'], (e) => e.target.checked)}
/>
<Checkbox
name='displayFqn'
label={intl.formatMessage(messages.displayFqnLabel)}
checked={soapbox.get('displayFqn') === true}
onChange={this.handleChange(['displayFqn'], (e) => e.target.checked)}
/>
<Checkbox
name='greentext'
label={intl.formatMessage(messages.greentextLabel)}
checked={soapbox.get('greentext') === true}
onChange={this.handleChange(['greentext'], (e) => e.target.checked)}
/>
<Checkbox
name='authenticatedProfile'
label={intl.formatMessage(messages.authenticatedProfileLabel)}
hint={intl.formatMessage(messages.authenticatedProfileHint)}
checked={soapbox.get('authenticatedProfile') === true}
onChange={this.handleChange(['authenticatedProfile'], (e) => e.target.checked)}
/>
<Checkbox
name='singleUserMode'
label={intl.formatMessage(messages.singleUserModeLabel)}
hint={intl.formatMessage(messages.singleUserModeHint)}
checked={soapbox.get('singleUserMode') === true}
onChange={this.handleChange(['singleUserMode'], (e) => e.target.checked)}
/>
{soapbox.get('singleUserMode') && (
<TextInput
name='singleUserModeProfile'
label={intl.formatMessage(messages.singleUserModeProfileLabel)}
placeholder={intl.formatMessage(messages.singleUserModeProfileHint)}
value={soapbox.get('singleUserModeProfile')}
onChange={this.handleChange(['singleUserModeProfile'], (e) => e.target.value)}
/>
)}
</FieldsGroup>
<FieldsGroup>
<div className='input with_block_label popup'>
<label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
<span className='hint'>
<FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the right panel of the timelines page.' />
</span>
<span className='hint'>
<FormattedMessage id='soapbox_config.hints.promo_panel_icons' defaultMessage='{ link }' values={{ link: <a target='_blank' href='https://icons8.com/line-awesome'>{intl.formatMessage(messages.promoPanelIconsLink)}</a> }} />
</span>
{
soapbox.getIn(['promoPanel', 'items']).map((field, i) => (
<div className='row' key={i}>
<IconPicker
label={intl.formatMessage(messages.promoItemIcon)}
value={field.get('icon')}
onChange={this.handlePromoItemChange(i, 'icon', field, val => val.id)}
/>
<TextInput
label={intl.formatMessage(messages.promoItemLabel)}
placeholder={intl.formatMessage(messages.promoItemLabel)}
value={field.get('text')}
onChange={this.handlePromoItemChange(i, 'text', field)}
/>
<TextInput
label={intl.formatMessage(messages.promoItemURL)}
placeholder={intl.formatMessage(messages.promoItemURL)}
value={field.get('url')}
onChange={this.handlePromoItemChange(i, 'url', field)}
/>
<Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={this.handleDeleteItem(['promoPanel', 'items', i])} />
</div>
))
}
<div className='actions add-row'>
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['promoPanel', 'items'], templates.promoPanelItem)}>
<Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
<FormattedMessage id='soapbox_config.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
</div>
</div>
</div>
</FieldsGroup>
<FieldsGroup>
<div className='input with_block_label'>
<label><FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' /></label>
<span className='hint'>
<FormattedMessage id='soapbox_config.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />
</span>
{
soapbox.getIn(['navlinks', 'homeFooter']).map((field, i) => (
<div className='row' key={i}>
<TextInput
label={intl.formatMessage(messages.homeFooterItemLabel)}
placeholder={intl.formatMessage(messages.homeFooterItemLabel)}
value={field.get('title')}
onChange={this.handleHomeFooterItemChange(i, 'title', field)}
/>
<TextInput
label={intl.formatMessage(messages.homeFooterItemURL)}
placeholder={intl.formatMessage(messages.homeFooterItemURL)}
value={field.get('url')}
onChange={this.handleHomeFooterItemChange(i, 'url', field)}
/>
<Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={this.handleDeleteItem(['navlinks', 'homeFooter', i])} />
</div>
))
}
<div className='actions add-row'>
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['navlinks', 'homeFooter'], templates.footerItem)}>
<Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
<FormattedMessage id='soapbox_config.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
</div>
</div>
</div>
</FieldsGroup>
<FieldsGroup>
<div className='input with_block_label'>
<label><FormattedMessage id='soapbox_config.fields.crypto_addresses_label' defaultMessage='Cryptocurrency addresses' /></label>
<span className='hint'>
<FormattedMessage id='soapbox_config.hints.crypto_addresses' defaultMessage='Add cryptocurrency addresses so users of your site can donate to you. Order matters, and you must use lowercase ticker values.' />
</span>
{
soapbox.get('cryptoAddresses').map((address, i) => (
<div className='row' key={i}>
<TextInput
label={intl.formatMessage(messages.cryptoAdressItemTicker)}
placeholder={intl.formatMessage(messages.cryptoAdressItemTicker)}
value={address.get('ticker')}
onChange={this.handleCryptoAdressItemChange(i, 'ticker', address)}
/>
<TextInput
label={intl.formatMessage(messages.cryptoAdressItemAddress)}
placeholder={intl.formatMessage(messages.cryptoAdressItemAddress)}
value={address.get('address')}
onChange={this.handleCryptoAdressItemChange(i, 'address', address)}
/>
<TextInput
label={intl.formatMessage(messages.cryptoAdressItemNote)}
placeholder={intl.formatMessage(messages.cryptoAdressItemNote)}
value={address.get('note')}
onChange={this.handleCryptoAdressItemChange(i, 'note', address)}
/>
<Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={this.handleDeleteItem(['cryptoAddresses', i])} />
</div>
))
}
<div className='actions add-row'>
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['cryptoAddresses'], templates.cryptoAddress)}>
<Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
<FormattedMessage id='soapbox_config.fields.crypto_address.add' defaultMessage='Add new crypto address' />
</div>
</div>
</div>
</FieldsGroup>
<FieldsGroup>
<SimpleInput
type='number'
min={0}
pattern='[0-9]+'
name='cryptoDonatePanelLimit'
label={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}
placeholder={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}
value={soapbox.getIn(['cryptoDonatePanel', 'limit'])}
onChange={this.handleChange(['cryptoDonatePanel', 'limit'], (e) => Number(e.target.value))}
/>
</FieldsGroup>
<Accordion
headline={intl.formatMessage(messages.rawJSONLabel)}
expanded={this.state.jsonEditorExpanded}
onToggle={this.toggleJSONEditor}
>
<div className={this.state.jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
<SimpleTextarea
hint={intl.formatMessage(messages.rawJSONHint)}
value={this.state.rawJSON}
onChange={this.handleEditJSON}
rows={12}
/>
</div>
</Accordion>
</fieldset>
<div className='actions'>
<button name='button' type='submit' className='btn button button-primary'>
<FormattedMessage id='soapbox_config.save' defaultMessage='Save' />
</button>
</div>
</SimpleForm>
</Column>
);
}
}

464
app/soapbox/features/soapbox_config/index.tsx
Unescape View File

@ -0,0 +1,464 @@
import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
import React, { useState, useEffect, useMemo } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { updateConfig } from 'soapbox/actions/admin';
import { uploadMedia } from 'soapbox/actions/media';
import snackbar from 'soapbox/actions/snackbar';
import Icon from 'soapbox/components/icon';
import { Column } from 'soapbox/components/ui';
import {
SimpleForm,
FieldsGroup,
TextInput,
SimpleInput,
SimpleTextarea,
FileChooserLogo,
Checkbox,
} from 'soapbox/features/forms';
import ThemeToggle from 'soapbox/features/ui/components/theme-toggle';
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
import { normalizeSoapboxConfig } from 'soapbox/normalizers';
import Accordion from '../ui/components/accordion';
import ColorWithPicker from './components/color-with-picker';
import IconPicker from './components/icon-picker';
import SitePreview from './components/site-preview';
import type { ColorChangeHandler, ColorResult } from 'react-color';
const messages = defineMessages({
heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
saved: { id: 'soapbox_config.saved', defaultMessage: 'Soapbox config saved!' },
copyrightFooterLabel: { id: 'soapbox_config.copyright_footer.meta_fields.label_placeholder', defaultMessage: 'Copyright footer' },
promoItemIcon: { id: 'soapbox_config.promo_panel.meta_fields.icon_placeholder', defaultMessage: 'Icon' },
promoItemLabel: { id: 'soapbox_config.promo_panel.meta_fields.label_placeholder', defaultMessage: 'Label' },
promoItemURL: { id: 'soapbox_config.promo_panel.meta_fields.url_placeholder', defaultMessage: 'URL' },
homeFooterItemLabel: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
homeFooterItemURL: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' },
cryptoAdressItemTicker: { id: 'soapbox_config.crypto_address.meta_fields.ticker_placeholder', defaultMessage: 'Ticker' },
cryptoAdressItemAddress: { id: 'soapbox_config.crypto_address.meta_fields.address_placeholder', defaultMessage: 'Address' },
cryptoAdressItemNote: { id: 'soapbox_config.crypto_address.meta_fields.note_placeholder', defaultMessage: 'Note (optional)' },
cryptoDonatePanelLimitLabel: { id: 'soapbox_config.crypto_donate_panel_limit.meta_fields.limit_placeholder', defaultMessage: 'Number of items to display in the crypto homepage widget' },
customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Advanced: Edit raw JSON data' },
rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Edit the settings data directly. Changes made directly to the JSON file will override the form fields above. Click "Save" to apply your changes.' },
verifiedCanEditNameLabel: { id: 'soapbox_config.verified_can_edit_name_label', defaultMessage: 'Allow verified users to edit their own display name.' },
displayFqnLabel: { id: 'soapbox_config.display_fqn_label', defaultMessage: 'Display domain (eg @user@domain) for local accounts.' },
greentextLabel: { id: 'soapbox_config.greentext_label', defaultMessage: 'Enable greentext support' },
promoPanelIconsLink: { id: 'soapbox_config.hints.promo_panel_icons.link', defaultMessage: 'Soapbox Icons List' },
authenticatedProfileLabel: { id: 'soapbox_config.authenticated_profile_label', defaultMessage: 'Profiles require authentication' },
authenticatedProfileHint: { id: 'soapbox_config.authenticated_profile_hint', defaultMessage: 'Users must be logged-in to view replies and media on user profiles.' },
singleUserModeLabel: { id: 'soapbox_config.single_user_mode_label', defaultMessage: 'Single user mode' },
singleUserModeHint: { id: 'soapbox_config.single_user_mode_hint', defaultMessage: 'Front page will redirect to a given user profile.' },
singleUserModeProfileLabel: { id: 'soapbox_config.single_user_mode_profile_label', defaultMessage: 'Main user handle' },
singleUserModeProfileHint: { id: 'soapbox_config.single_user_mode_profile_hint', defaultMessage: '@handle' },
});
type ValueGetter<T = Element> = (e: React.ChangeEvent<T>) => any;
type ColorValueGetter = (color: ColorResult, event: React.ChangeEvent<HTMLInputElement>) => any;
type Template = ImmutableMap<string, any>;
type ConfigPath = Array<string | number>;
const templates: Record<string, Template> = {
promoPanelItem: ImmutableMap({ icon: '', text: '', url: '' }),
footerItem: ImmutableMap({ title: '', url: '' }),
cryptoAddress: ImmutableMap({ ticker: '', address: '', note: '' }),
};
const SoapboxConfig: React.FC = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const initialData = useAppSelector(state => state.soapbox);
const [isLoading, setLoading] = useState(false);
const [data, setData] = useState(initialData);
const [jsonEditorExpanded, setJsonEditorExpanded] = useState(false);
const [rawJSON, setRawJSON] = useState<string>(JSON.stringify(initialData, null, 2));
const [jsonValid, setJsonValid] = useState(true);
const soapbox = useMemo(() => {
return normalizeSoapboxConfig(data);
}, [data]);
const setConfig = (path: ConfigPath, value: any) => {
const newData = data.setIn(path, value);
setData(newData);
setJsonValid(true);
};
const putConfig = (newData: any) => {
setData(newData);
setJsonValid(true);
};
const getParams = () => {
return [{
group: ':pleroma',
key: ':frontend_configurations',
value: [{
tuple: [':soapbox_fe', data.toJS()],
}],
}];
};
const handleSubmit: React.FormEventHandler = (e) => {
dispatch(updateConfig(getParams())).then(() => {
setLoading(false);
dispatch(snackbar.success(intl.formatMessage(messages.saved)));
}).catch(() => {
setLoading(false);
});
setLoading(true);
e.preventDefault();
};
const handleChange = (path: ConfigPath, getValue: ValueGetter<any>): React.ChangeEventHandler => {
return e => {
setConfig(path, getValue(e));
};
};
const handleColorChange = (path: ConfigPath, getValue: ColorValueGetter): ColorChangeHandler => {
return (color, event) => {
setConfig(path, getValue(color, event));
};
};
const handleFileChange = (path: ConfigPath): React.ChangeEventHandler<HTMLInputElement> => {
return e => {
const data = new FormData();
const file = e.target.files?.item(0);
if (file) {
data.append('file', file);
dispatch(uploadMedia(data)).then(({ data }: any) => {
handleChange(path, () => data.url)(e);
}).catch(console.error);
}
};
};
const handleAddItem = (path: ConfigPath, template: ImmutableMap<string, any>) => {
const value = (soapbox.getIn(path) || ImmutableList()) as ImmutableList<any>;
return () => {
setConfig(
path,
value.push(template),
);
};
};
const handleDeleteItem = (path: ConfigPath) => {
return () => {
const newData = data.deleteIn(path);
setData(newData);
};
};
const handleItemChange = (
path: Array<string | number>,
key: string,
field: ImmutableMap<string, any>,
template: Template,
getValue: ValueGetter<HTMLInputElement> = e => e.target.value,
) => {
return handleChange(
path, (e) =>
template
.merge(field)
.set(key, getValue(e)),
);
};
const handlePromoItemChange = (index: number, key: string, field: any, getValue?: ValueGetter) => {
return handleItemChange(
['promoPanel', 'items', index], key, field, templates.promoPanelItem, getValue,
);
};
const handleHomeFooterItemChange = (index: number, key: string, field: any, getValue?: ValueGetter) => {
return handleItemChange(
['navlinks', 'homeFooter', index], key, field, templates.footerItem, getValue,
);
};
const handleCryptoAdressItemChange = (index: number, key: string, field: any, getValue?: ValueGetter) => {
return handleItemChange(
['cryptoAddresses', index], key, field, templates.cryptoAddress, getValue,
);
};
const handleEditJSON: React.ChangeEventHandler<HTMLTextAreaElement> = e => {
setRawJSON(e.target.value);
};
const toggleJSONEditor = (expanded: boolean) => setJsonEditorExpanded(expanded);
useEffect(() => {
putConfig(initialData);
}, [initialData]);
useEffect(() => {
setRawJSON(JSON.stringify(data, null, 2));
}, [data]);
useEffect(() => {
try {
const data = fromJS(JSON.parse(rawJSON));
putConfig(data);
} catch {
setJsonValid(false);
}
}, [rawJSON]);
return (
<Column label={intl.formatMessage(messages.heading)}>
<SimpleForm onSubmit={handleSubmit}>
<fieldset disabled={isLoading}>
<SitePreview soapbox={soapbox} />
<FieldsGroup>
<div className='fields-row file-picker'>
<div className='fields-row__column fields-row__column-6'>
<ColorWithPicker
buttonId='brand_color'
label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
value={soapbox.brandColor}
onChange={handleColorChange(['brandColor'], (color) => color.hex)}
/>
<ColorWithPicker
buttonId='accent_color'
label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}
value={soapbox.accentColor}
onChange={handleColorChange(['accentColor'], (color) => color.hex)}
/>
<div className='input with_label toggle'>
<div className='label_input'>
<label><FormattedMessage id='soapbox_config.fields.theme_label' defaultMessage='Default theme' /></label>
<ThemeToggle />
{/* <ThemeToggle
onToggle={handleChange(['defaultSettings', 'themeMode'], value => value)}
themeMode={soapbox.defaultSettings.get('themeMode')}
intl={intl}
/> */}
</div>
</div>
</div>
<div className='fields-row__column fields-group fields-row__column-6'>
<FileChooserLogo
label={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
name='logo'
hint={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' />}
onChange={handleFileChange(['logo'])}
/>
</div>
</div>
</FieldsGroup>
<FieldsGroup>
<TextInput
name='copyright'
label={intl.formatMessage(messages.copyrightFooterLabel)}
placeholder={intl.formatMessage(messages.copyrightFooterLabel)}
value={soapbox.copyright}
onChange={handleChange(['copyright'], (e) => e.target.value)}
/>
</FieldsGroup>
<FieldsGroup>
<Checkbox
name='verifiedCanEditName'
label={intl.formatMessage(messages.verifiedCanEditNameLabel)}
checked={soapbox.verifiedCanEditName === true}
onChange={handleChange(['verifiedCanEditName'], (e) => e.target.checked)}
/>
<Checkbox
name='displayFqn'
label={intl.formatMessage(messages.displayFqnLabel)}
checked={soapbox.displayFqn === true}
onChange={handleChange(['displayFqn'], (e) => e.target.checked)}
/>
<Checkbox
name='greentext'
label={intl.formatMessage(messages.greentextLabel)}
checked={soapbox.greentext === true}
onChange={handleChange(['greentext'], (e) => e.target.checked)}
/>
<Checkbox
name='authenticatedProfile'
label={intl.formatMessage(messages.authenticatedProfileLabel)}
hint={intl.formatMessage(messages.authenticatedProfileHint)}
checked={soapbox.authenticatedProfile === true}
onChange={handleChange(['authenticatedProfile'], (e) => e.target.checked)}
/>
<Checkbox
name='singleUserMode'
label={intl.formatMessage(messages.singleUserModeLabel)}
hint={intl.formatMessage(messages.singleUserModeHint)}
checked={soapbox.singleUserMode === true}
onChange={handleChange(['singleUserMode'], (e) => e.target.checked)}
/>
{soapbox.get('singleUserMode') && (
<TextInput
name='singleUserModeProfile'
label={intl.formatMessage(messages.singleUserModeProfileLabel)}
placeholder={intl.formatMessage(messages.singleUserModeProfileHint)}
value={soapbox.singleUserModeProfile}
onChange={handleChange(['singleUserModeProfile'], (e) => e.target.value)}
/>
)}
</FieldsGroup>
<FieldsGroup>
<div className='input with_block_label popup'>
<label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
<span className='hint'>
<FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the right panel of the timelines page.' />
</span>
<span className='hint'>
<FormattedMessage id='soapbox_config.hints.promo_panel_icons' defaultMessage='{ link }' values={{ link: <a target='_blank' href='https://icons8.com/line-awesome'>{intl.formatMessage(messages.promoPanelIconsLink)}</a> }} />
</span>
{
soapbox.promoPanel.items.map((field, i) => (
<div className='row' key={i}>
<IconPicker
label={intl.formatMessage(messages.promoItemIcon)}
value={field.icon}
// @ts-ignore
onChange={handlePromoItemChange(i, 'icon', field, val => val.id)}
/>
<TextInput
label={intl.formatMessage(messages.promoItemLabel)}
placeholder={intl.formatMessage(messages.promoItemLabel)}
value={field.text}
onChange={handlePromoItemChange(i, 'text', field)}
/>
<TextInput
label={intl.formatMessage(messages.promoItemURL)}
placeholder={intl.formatMessage(messages.promoItemURL)}
value={field.url}
onChange={handlePromoItemChange(i, 'url', field)}
/>
<Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={handleDeleteItem(['promoPanel', 'items', i])} />
</div>
))
}
<div className='actions add-row'>
<div role='presentation' className='btn button button-secondary' onClick={handleAddItem(['promoPanel', 'items'], templates.promoPanelItem)}>
<Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
<FormattedMessage id='soapbox_config.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
</div>
</div>
</div>
</FieldsGroup>
<FieldsGroup>
<div className='input with_block_label'>
<label><FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' /></label>
<span className='hint'>
<FormattedMessage id='soapbox_config.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />
</span>
{
soapbox.navlinks.get('homeFooter')?.map((field, i) => (
<div className='row' key={i}>
<TextInput
label={intl.formatMessage(messages.homeFooterItemLabel)}
placeholder={intl.formatMessage(messages.homeFooterItemLabel)}
value={field.title}
onChange={handleHomeFooterItemChange(i, 'title', field)}
/>
<TextInput
label={intl.formatMessage(messages.homeFooterItemURL)}
placeholder={intl.formatMessage(messages.homeFooterItemURL)}
value={field.url}
onChange={handleHomeFooterItemChange(i, 'url', field)}
/>
<Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={handleDeleteItem(['navlinks', 'homeFooter', i])} />
</div>
))
}
<div className='actions add-row'>
<div role='presentation' className='btn button button-secondary' onClick={handleAddItem(['navlinks', 'homeFooter'], templates.footerItem)}>
<Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
<FormattedMessage id='soapbox_config.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
</div>
</div>
</div>
</FieldsGroup>
<FieldsGroup>
<div className='input with_block_label'>
<label><FormattedMessage id='soapbox_config.fields.crypto_addresses_label' defaultMessage='Cryptocurrency addresses' /></label>
<span className='hint'>
<FormattedMessage id='soapbox_config.hints.crypto_addresses' defaultMessage='Add cryptocurrency addresses so users of your site can donate to you. Order matters, and you must use lowercase ticker values.' />
</span>
{
soapbox.cryptoAddresses.map((address, i) => (
<div className='row' key={i}>
<TextInput
label={intl.formatMessage(messages.cryptoAdressItemTicker)}
placeholder={intl.formatMessage(messages.cryptoAdressItemTicker)}
value={address.ticker}
onChange={handleCryptoAdressItemChange(i, 'ticker', address)}
/>
<TextInput
label={intl.formatMessage(messages.cryptoAdressItemAddress)}
placeholder={intl.formatMessage(messages.cryptoAdressItemAddress)}
value={address.address}
onChange={handleCryptoAdressItemChange(i, 'address', address)}
/>
<TextInput
label={intl.formatMessage(messages.cryptoAdressItemNote)}
placeholder={intl.formatMessage(messages.cryptoAdressItemNote)}
value={address.note}
onChange={handleCryptoAdressItemChange(i, 'note', address)}
/>
<Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={handleDeleteItem(['cryptoAddresses', i])} />
</div>
))
}
<div className='actions add-row'>
<div role='presentation' className='btn button button-secondary' onClick={handleAddItem(['cryptoAddresses'], templates.cryptoAddress)}>
<Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
<FormattedMessage id='soapbox_config.fields.crypto_address.add' defaultMessage='Add new crypto address' />
</div>
</div>
</div>
</FieldsGroup>
<FieldsGroup>
<SimpleInput
type='number'
min={0}
pattern='[0-9]+'
name='cryptoDonatePanelLimit'
label={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}
placeholder={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}
value={soapbox.cryptoDonatePanel.get('limit')}
onChange={handleChange(['cryptoDonatePanel', 'limit'], (e) => Number(e.target.value))}
/>
</FieldsGroup>
<Accordion
headline={intl.formatMessage(messages.rawJSONLabel)}
expanded={jsonEditorExpanded}
onToggle={toggleJSONEditor}
>
<div className={jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
<SimpleTextarea
hint={intl.formatMessage(messages.rawJSONHint)}
value={rawJSON}
onChange={handleEditJSON}
rows={12}
/>
</div>
</Accordion>
</fieldset>
<div className='actions'>
<button name='button' type='submit' className='btn button button-primary'>
<FormattedMessage id='soapbox_config.save' defaultMessage='Save' />
</button>
</div>
</SimpleForm>
</Column>
);
};
export default SoapboxConfig;
Write Preview
Loading…
Cancel
Save