edited features/configuration
This commit is contained in:
Curtis ROck
parent
de917da39e
commit
2af5149ed3
1 changed files with 261 additions and 158 deletions
|
|
@ -4,193 +4,296 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import { changeSetting } from 'soapbox/actions/settings';
|
|
||||||
import Column from '../ui/components/column';
|
import Column from '../ui/components/column';
|
||||||
import {
|
import {
|
||||||
SimpleForm,
|
SimpleForm,
|
||||||
FieldsGroup,
|
FieldsGroup,
|
||||||
RadioGroup,
|
TextInput,
|
||||||
RadioItem,
|
Checkbox,
|
||||||
SelectDropdown,
|
FileChooser,
|
||||||
} from 'soapbox/features/forms';
|
} from 'soapbox/features/forms';
|
||||||
import SettingsCheckbox from 'soapbox/components/settings_checkbox';
|
import {
|
||||||
|
Map as ImmutableMap,
|
||||||
const languages = {
|
List as ImmutableList,
|
||||||
en: 'English',
|
} from 'immutable';
|
||||||
ar: 'العربية',
|
import { patchMe } from 'soapbox/actions/me';
|
||||||
ast: 'Asturianu',
|
import { unescape } from 'lodash';
|
||||||
bg: 'Български',
|
|
||||||
bn: 'বাংলা',
|
|
||||||
ca: 'Català',
|
|
||||||
co: 'Corsu',
|
|
||||||
cs: 'Čeština',
|
|
||||||
cy: 'Cymraeg',
|
|
||||||
da: 'Dansk',
|
|
||||||
de: 'Deutsch',
|
|
||||||
el: 'Ελληνικά',
|
|
||||||
eo: 'Esperanto',
|
|
||||||
es: 'Español',
|
|
||||||
eu: 'Euskara',
|
|
||||||
fa: 'فارسی',
|
|
||||||
fi: 'Suomi',
|
|
||||||
fr: 'Français',
|
|
||||||
ga: 'Gaeilge',
|
|
||||||
gl: 'Galego',
|
|
||||||
he: 'עברית',
|
|
||||||
hi: 'हिन्दी',
|
|
||||||
hr: 'Hrvatski',
|
|
||||||
hu: 'Magyar',
|
|
||||||
hy: 'Հայերեն',
|
|
||||||
id: 'Bahasa Indonesia',
|
|
||||||
io: 'Ido',
|
|
||||||
it: 'Italiano',
|
|
||||||
ja: '日本語',
|
|
||||||
ka: 'ქართული',
|
|
||||||
kk: 'Қазақша',
|
|
||||||
ko: '한국어',
|
|
||||||
lt: 'Lietuvių',
|
|
||||||
lv: 'Latviešu',
|
|
||||||
ml: 'മലയാളം',
|
|
||||||
ms: 'Bahasa Melayu',
|
|
||||||
nl: 'Nederlands',
|
|
||||||
no: 'Norsk',
|
|
||||||
oc: 'Occitan',
|
|
||||||
pl: 'Polski',
|
|
||||||
pt: 'Português',
|
|
||||||
'pt-BR': 'Português do Brasil',
|
|
||||||
ro: 'Română',
|
|
||||||
ru: 'Русский',
|
|
||||||
sk: 'Slovenčina',
|
|
||||||
sl: 'Slovenščina',
|
|
||||||
sq: 'Shqip',
|
|
||||||
sr: 'Српски',
|
|
||||||
'sr-Latn': 'Srpski (latinica)',
|
|
||||||
sv: 'Svenska',
|
|
||||||
ta: 'தமிழ்',
|
|
||||||
te: 'తెలుగు',
|
|
||||||
th: 'ไทย',
|
|
||||||
tr: 'Türkçe',
|
|
||||||
uk: 'Українська',
|
|
||||||
zh: '中文',
|
|
||||||
'zh-CN': '简体中文',
|
|
||||||
'zh-HK': '繁體中文（香港）',
|
|
||||||
'zh-TW': '繁體中文（臺灣）',
|
|
||||||
};
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
heading: { id: 'column.preferences', defaultMessage: 'Preferences' },
|
heading: { id: 'column.edit_profile', defaultMessage: 'Edit profile' },
|
||||||
|
metaFieldLabel: { id: 'edit_profile.fields.meta_fields.label_placeholder', defaultMessage: 'Label' },
|
||||||
|
metaFieldContent: { id: 'edit_profile.fields.meta_fields.content_placeholder', defaultMessage: 'Content' },
|
||||||
});
|
});
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => {
|
||||||
settings: state.get('settings'),
|
const soapbox = state.get('soapbox');
|
||||||
});
|
return {
|
||||||
|
themeCss: generateThemeCss(state.getIn(['soapbox', 'brandColor'])),
|
||||||
|
customCss: state.getIn(['soapbox', 'customCss']),
|
||||||
|
logo: state.getIn(['soapbox', 'logo']),
|
||||||
|
logo: state.getIn(['soapbox', 'logo']),
|
||||||
|
promoPanel: state.getIn(['soapbox', 'promoPanel', 'items']),
|
||||||
|
patronEnabled: state.getIn(['soapbox', 'extensions', 'patron', 'enabled']),
|
||||||
|
displayMode: state.getIn(['soapbox', 'defaultSettings', 'mode']),
|
||||||
|
copyright: state.getIn(['soapbox', 'copyright']),
|
||||||
|
homeFooter: state.getIn(['soapbox', 'navLinks', 'homeFooter']),
|
||||||
|
|
||||||
|
// {
|
||||||
|
// soapbox: {
|
||||||
|
// brandColor: '#1ca82b',
|
||||||
|
// logo: '/favicon.png',
|
||||||
|
// promoPanel: {
|
||||||
|
// items: [
|
||||||
|
// {
|
||||||
|
// icon: 'area-chart',
|
||||||
|
// text: 'Gleasonator stats',
|
||||||
|
// url: 'https://fediverse.network/gleasonator.com'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// icon: 'comment-o',
|
||||||
|
// text: 'Gleasonator theme song',
|
||||||
|
// url: 'https://media.gleasonator.com/custom/261905_gleasonator_song.mp3'
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// extensions: {
|
||||||
|
// patron: {
|
||||||
|
// enabled: true
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// defaultSettings: {
|
||||||
|
// mode: 'light'
|
||||||
|
// },
|
||||||
|
// copyright: '♡2020. Copying is an act of love. Please copy and share.',
|
||||||
|
// navlinks: {
|
||||||
|
// homeFooter: [
|
||||||
|
// {
|
||||||
|
// title: 'About',
|
||||||
|
// url: '/about'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: 'Terms of Service',
|
||||||
|
// url: '/about/tos'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: 'Privacy Policy',
|
||||||
|
// url: '/about/privacy'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: 'DMCA',
|
||||||
|
// url: '/about/dmca'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: 'Source Code',
|
||||||
|
// url: '/about#opensource'
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// HTML unescape for special chars, eg <br>
|
||||||
|
const unescapeParams = (map, params) => (
|
||||||
|
params.reduce((map, param) => (
|
||||||
|
map.set(param, unescape(map.get(param)))
|
||||||
|
), map)
|
||||||
|
);
|
||||||
|
|
||||||
export default @connect(mapStateToProps)
|
export default @connect(mapStateToProps)
|
||||||
@injectIntl
|
@injectIntl
|
||||||
class Preferences extends ImmutablePureComponent {
|
class ConfigSoapbox extends ImmutablePureComponent {
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
dispatch: PropTypes.func.isRequired,
|
dispatch: PropTypes.func.isRequired,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
settings: ImmutablePropTypes.map,
|
account: ImmutablePropTypes.map,
|
||||||
};
|
};
|
||||||
|
|
||||||
onSelectChange = path => {
|
state = {
|
||||||
return e => {
|
isLoading: false,
|
||||||
this.props.dispatch(changeSetting(path, e.target.value));
|
fields: normalizeFields(Array.from({ length: MAX_FIELDS })),
|
||||||
};
|
}
|
||||||
};
|
|
||||||
|
|
||||||
onDefaultPrivacyChange = e => {
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
const initialState = props.account.withMutations(map => {
|
||||||
|
map.merge(map.get('source'));
|
||||||
|
map.delete('source');
|
||||||
|
map.set('fields', normalizeFields(map.get('fields')));
|
||||||
|
unescapeParams(map, ['display_name', 'note']);
|
||||||
|
});
|
||||||
|
this.state = initialState.toObject();
|
||||||
|
}
|
||||||
|
|
||||||
|
makePreviewAccount = () => {
|
||||||
|
const { account } = this.props;
|
||||||
|
return account.merge(ImmutableMap({
|
||||||
|
header: this.state.header,
|
||||||
|
avatar: this.state.avatar,
|
||||||
|
display_name: this.state.display_name,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
getFieldParams = () => {
|
||||||
|
let params = ImmutableMap();
|
||||||
|
this.state.fields.forEach((f, i) =>
|
||||||
|
params = params
|
||||||
|
.set(`fields_attributes[${i}][name]`, f.get('name'))
|
||||||
|
.set(`fields_attributes[${i}][value]`, f.get('value'))
|
||||||
|
);
|
||||||
|
return params;
|
||||||
|
}
|
||||||
|
|
||||||
|
getParams = () => {
|
||||||
|
const { state } = this;
|
||||||
|
return Object.assign({
|
||||||
|
discoverable: state.discoverable,
|
||||||
|
bot: state.bot,
|
||||||
|
display_name: state.display_name,
|
||||||
|
note: state.note,
|
||||||
|
avatar: state.avatar_file,
|
||||||
|
header: state.header_file,
|
||||||
|
locked: state.locked,
|
||||||
|
}, this.getFieldParams().toJS());
|
||||||
|
}
|
||||||
|
|
||||||
|
getFormdata = () => {
|
||||||
|
const data = this.getParams();
|
||||||
|
let formData = new FormData();
|
||||||
|
for (let key in data) {
|
||||||
|
const shouldAppend = Boolean(data[key] || key.startsWith('fields_attributes'));
|
||||||
|
if (shouldAppend) formData.append(key, data[key] || '');
|
||||||
|
}
|
||||||
|
return formData;
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSubmit = (event) => {
|
||||||
const { dispatch } = this.props;
|
const { dispatch } = this.props;
|
||||||
dispatch(changeSetting(['defaultPrivacy'], e.target.value));
|
dispatch(patchMe(this.getFormdata())).then(() => {
|
||||||
|
this.setState({ isLoading: false });
|
||||||
|
}).catch((error) => {
|
||||||
|
this.setState({ isLoading: false });
|
||||||
|
});
|
||||||
|
this.setState({ isLoading: true });
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleCheckboxChange = e => {
|
||||||
|
this.setState({ [e.target.name]: e.target.checked });
|
||||||
|
}
|
||||||
|
|
||||||
|
handleTextChange = e => {
|
||||||
|
this.setState({ [e.target.name]: e.target.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
handleFieldChange = (i, key) => {
|
||||||
|
return (e) => {
|
||||||
|
this.setState({
|
||||||
|
fields: this.state.fields.setIn([i, key], e.target.value),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
handleFileChange = e => {
|
||||||
|
const { name } = e.target;
|
||||||
|
const [file] = e.target.files || [];
|
||||||
|
const url = file ? URL.createObjectURL(file) : this.state[name];
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
[name]: url,
|
||||||
|
[`${name}_file`]: file,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { settings, intl } = this.props;
|
const { intl } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Column icon='cog' heading={intl.formatMessage(messages.heading)} backBtnSlim>
|
<Column icon='user' heading={intl.formatMessage(messages.heading)} backBtnSlim>
|
||||||
<SimpleForm>
|
<SimpleForm onSubmit={this.handleSubmit}>
|
||||||
<FieldsGroup>
|
<fieldset disabled={this.state.isLoading}>
|
||||||
<SelectDropdown
|
<FieldsGroup>
|
||||||
label={<FormattedMessage id='preferences.fields.language_label' defaultMessage='Language' />}
|
<TextInput
|
||||||
items={languages}
|
label={<FormattedMessage id='edit_profile.fields.display_name_label' defaultMessage='Display name' />}
|
||||||
defaultValue={settings.get('locale')}
|
name='display_name'
|
||||||
onChange={this.onSelectChange(['locale'])}
|
value={this.state.display_name}
|
||||||
/>
|
onChange={this.handleTextChange}
|
||||||
</FieldsGroup>
|
|
||||||
|
|
||||||
<FieldsGroup>
|
|
||||||
<RadioGroup
|
|
||||||
label={<FormattedMessage id='preferences.fields.privacy_label' defaultMessage='Post privacy' />}
|
|
||||||
onChange={this.onDefaultPrivacyChange}
|
|
||||||
>
|
|
||||||
<RadioItem
|
|
||||||
label={<FormattedMessage id='preferences.options.privacy_public' defaultMessage='Public' />}
|
|
||||||
hint={<FormattedMessage id='preferences.hints.privacy_public' defaultMessage='Everyone can see' />}
|
|
||||||
checked={settings.get('defaultPrivacy') === 'public'}
|
|
||||||
value='public'
|
|
||||||
/>
|
/>
|
||||||
<RadioItem
|
<TextInput
|
||||||
label={<FormattedMessage id='preferences.options.privacy_unlisted' defaultMessage='Unlisted' />}
|
label={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
|
||||||
hint={<FormattedMessage id='preferences.hints.privacy_unlisted' defaultMessage='Everyone can see, but not listed on public timelines' />}
|
name='note'
|
||||||
checked={settings.get('defaultPrivacy') === 'unlisted'}
|
value={this.state.note}
|
||||||
value='unlisted'
|
onChange={this.handleTextChange}
|
||||||
/>
|
/>
|
||||||
<RadioItem
|
<div className='fields-row'>
|
||||||
label={<FormattedMessage id='preferences.options.privacy_followers_only' defaultMessage='Followers-only' />}
|
<div className='fields-row__column fields-row__column-6'>
|
||||||
hint={<FormattedMessage id='preferences.hints.privacy_followers_only' defaultMessage='Only show to followers' />}
|
<ProfilePreview account={this.makePreviewAccount()} />
|
||||||
checked={settings.get('defaultPrivacy') === 'private'}
|
</div>
|
||||||
value='private'
|
<div className='fields-row__column fields-group fields-row__column-6'>
|
||||||
|
<FileChooser
|
||||||
|
label={<FormattedMessage id='edit_profile.fields.header_label' defaultMessage='Header' />}
|
||||||
|
name='header'
|
||||||
|
hint={<FormattedMessage id='edit_profile.hints.header' defaultMessage='PNG, GIF or JPG. At most 2 MB. Will be downscaled to 1500x500px' />}
|
||||||
|
onChange={this.handleFileChange}
|
||||||
|
/>
|
||||||
|
<FileChooser
|
||||||
|
label={<FormattedMessage id='edit_profile.fields.avatar_label' defaultMessage='Avatar' />}
|
||||||
|
name='avatar'
|
||||||
|
hint={<FormattedMessage id='edit_profile.hints.avatar' defaultMessage='PNG, GIF or JPG. At most 2 MB. Will be downscaled to 400x400px' />}
|
||||||
|
onChange={this.handleFileChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Checkbox
|
||||||
|
label={<FormattedMessage id='edit_profile.fields.locked_label' defaultMessage='Lock account' />}
|
||||||
|
hint={<FormattedMessage id='edit_profile.hints.locked' defaultMessage='Requires you to manually approve followers' />}
|
||||||
|
name='locked'
|
||||||
|
checked={this.state.locked}
|
||||||
|
onChange={this.handleCheckboxChange}
|
||||||
/>
|
/>
|
||||||
</RadioGroup>
|
<Checkbox
|
||||||
</FieldsGroup>
|
label={<FormattedMessage id='edit_profile.fields.bot_label' defaultMessage='This is a bot account' />}
|
||||||
|
hint={<FormattedMessage id='edit_profile.hints.bot' defaultMessage='This account mainly performs automated actions and might not be monitored' />}
|
||||||
<FieldsGroup>
|
name='bot'
|
||||||
<SettingsCheckbox
|
checked={this.state.bot}
|
||||||
label={<FormattedMessage id='preferences.fields.unfollow_modal_label' defaultMessage='Show confirmation dialog before unfollowing someone' />}
|
onChange={this.handleCheckboxChange}
|
||||||
path={['unfollowModal']}
|
|
||||||
/>
|
|
||||||
<SettingsCheckbox
|
|
||||||
label={<FormattedMessage id='preferences.fields.boost_modal_label' defaultMessage='Show confirmation dialog before reposting' />}
|
|
||||||
path={['boostModal']}
|
|
||||||
/>
|
|
||||||
<SettingsCheckbox
|
|
||||||
label={<FormattedMessage id='preferences.fields.delete_modal_label' defaultMessage='Show confirmation dialog before deleting a post' />}
|
|
||||||
path={['deleteModal']}
|
|
||||||
/>
|
|
||||||
</FieldsGroup>
|
|
||||||
|
|
||||||
<FieldsGroup>
|
|
||||||
<SettingsCheckbox
|
|
||||||
label={<FormattedMessage id='preferences.fields.auto_play_gif_label' defaultMessage='Auto-play animated GIFs' />}
|
|
||||||
path={['autoPlayGif']}
|
|
||||||
/>
|
|
||||||
<SettingsCheckbox
|
|
||||||
label={<FormattedMessage id='preferences.fields.expand_spoilers_label' defaultMessage='Always expand posts marked with content warnings' />}
|
|
||||||
path={['expandSpoilers']}
|
|
||||||
/>
|
|
||||||
<SettingsCheckbox
|
|
||||||
label={<FormattedMessage id='preferences.fields.reduce_motion_label' defaultMessage='Reduce motion in animations' />}
|
|
||||||
path={['reduceMotion']}
|
|
||||||
/>
|
|
||||||
<SettingsCheckbox
|
|
||||||
label={<FormattedMessage id='preferences.fields.system_font_label' defaultMessage="Use system's default font" />}
|
|
||||||
path={['systemFont']}
|
|
||||||
/>
|
|
||||||
<div className='dyslexic'>
|
|
||||||
<SettingsCheckbox
|
|
||||||
label={<FormattedMessage id='preferences.fields.dyslexic_font_label' defaultMessage='Dyslexic mode' />}
|
|
||||||
path={['dyslexicFont']}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</FieldsGroup>
|
||||||
<SettingsCheckbox
|
<FieldsGroup>
|
||||||
label={<FormattedMessage id='preferences.fields.demetricator_label' defaultMessage='Use Demetricator' />}
|
<div className='fields-row__column fields-group'>
|
||||||
hint={<FormattedMessage id='preferences.hints.demetricator' defaultMessage='Decrease social media anxiety by hiding all numbers from the site.' />}
|
<div className='input with_block_label'>
|
||||||
path={['demetricator']}
|
<label><FormattedMessage id='edit_profile.fields.meta_fields_label' defaultMessage='Profile metadata' /></label>
|
||||||
/>
|
<span className='hint'>
|
||||||
</FieldsGroup>
|
<FormattedMessage id='edit_profile.hints.meta_fields' defaultMessage='You can have up to {count, plural, one {# item} other {# items}} displayed as a table on your profile' values={{ count: MAX_FIELDS }} />
|
||||||
|
</span>
|
||||||
|
{
|
||||||
|
this.state.fields.map((field, i) => (
|
||||||
|
<div className='row' key={i}>
|
||||||
|
<TextInput
|
||||||
|
placeholder={intl.formatMessage(messages.metaFieldLabel)}
|
||||||
|
value={field.get('name')}
|
||||||
|
onChange={this.handleFieldChange(i, 'name')}
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
placeholder={intl.formatMessage(messages.metaFieldContent)}
|
||||||
|
value={field.get('value')}
|
||||||
|
onChange={this.handleFieldChange(i, 'value')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FieldsGroup>
|
||||||
|
</fieldset>
|
||||||
|
<div className='actions'>
|
||||||
|
<button name='button' type='submit' className='btn button button-primary'>
|
||||||
|
<FormattedMessage id='edit_profile.save' defaultMessage='Save' />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</SimpleForm>
|
</SimpleForm>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue