SoapboxConfig: convert to TSX
This commit is contained in:
Alex Gleason
parent
748d1f6c21
commit
eaeeed29c0
|
|
@ -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} />
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue