diff --git a/client/coral-admin/src/containers/Configure/CommentSettings.js b/client/coral-admin/src/containers/Configure/CommentSettings.js new file mode 100644 index 000000000..194af720c --- /dev/null +++ b/client/coral-admin/src/containers/Configure/CommentSettings.js @@ -0,0 +1,79 @@ +import React from 'react'; +import I18n from 'coral-framework/modules/i18n/i18n'; +import translations from '../../translations.json'; +import styles from './Configure.css'; +import { + List, + ListItem, + ListItemContent, + ListItemAction, + Textfield, + Checkbox +} from 'react-mdl'; + +const updateModeration = (updateSettings, mod) => () => { + const moderation = mod === 'pre' ? 'post' : 'pre'; + updateSettings({moderation}); +}; + +const updateInfoBoxEnable = (updateSettings, infoBox) => () => { + const infoBoxEnable = !infoBox; + updateSettings({infoBoxEnable}); +}; + +const updateInfoBoxContent = (updateSettings) => (event) => { + const infoBoxContent = event.target.value; + updateSettings({infoBoxContent}); +}; + +const updateClosedMessage = (updateSettings) => (event) => { + const closedMessage = event.target.value; + updateSettings({closedMessage}); +}; + +const CommentSettings = (props) => + + + + + {lang.t('configure.enable-pre-moderation')} + + + + + + + {lang.t('configure.include-comment-stream')} +

+ {lang.t('configure.include-comment-stream-desc')} +

+
+
+ + + + + + + + {lang.t('configure.closed-comments-desc')} + + + +
; + +export default CommentSettings; + +const lang = new I18n(translations); diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css index 8d1fc49a2..388813a64 100644 --- a/client/coral-admin/src/containers/Configure/Configure.css +++ b/client/coral-admin/src/containers/Configure/Configure.css @@ -45,6 +45,10 @@ display: block; } +.changedSave { + background-color:#4caf50; +} + .copiedText { color: #008000; float: right; @@ -69,6 +73,19 @@ letter-spacing: 0.03em; } +#bannedWordlist { + width: 100%; + padding: 10px; +} + +.bannedWordHeader { + font-weight: bold; + font-size:18px; + margin-bottom:3px; +} + + + .hidden { display: none; } diff --git a/client/coral-admin/src/containers/Configure/Configure.js b/client/coral-admin/src/containers/Configure/Configure.js index e171fc27d..db3bf6f20 100644 --- a/client/coral-admin/src/containers/Configure/Configure.js +++ b/client/coral-admin/src/containers/Configure/Configure.js @@ -5,142 +5,94 @@ import { List, ListItem, ListItemContent, - ListItemAction, - Textfield, - Checkbox, Button, Icon } from 'react-mdl'; import styles from './Configure.css'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../../translations.json'; +import EmbedLink from './EmbedLink'; +import CommentSettings from './CommentSettings'; +import Wordlist from './Wordlist'; class Configure extends React.Component { constructor (props) { super(props); - this.state = {activeSection: 'comments', copied: false}; - - this.copyToClipBoard = this.copyToClipBoard.bind(this); - - // Update settings - this.updateModeration = this.updateModeration.bind(this); - // InfoBox has two settings. Enable or not and the content of it if it is enable. - this.updateInfoBoxEnable = this.updateInfoBoxEnable.bind(this); - this.updateInfoBoxContent = this.updateInfoBoxContent.bind(this); - this.updateClosedMessage = this.updateClosedMessage.bind(this); - - this.saveSettings = this.saveSettings.bind(this); + this.state = { + activeSection: 'comments', + wordlist: [], + changed: false + }; } - componentWillMount () { + componentWillMount = () => { this.props.dispatch(fetchSettings()); } - updateModeration () { - const moderation = this.props.settings.moderation === 'pre' ? 'post' : 'pre'; - this.props.dispatch(updateSettings({moderation})); - } - - updateInfoBoxEnable () { - const infoBoxEnable = !this.props.settings.infoBoxEnable; - this.props.dispatch(updateSettings({infoBoxEnable})); - } - - updateInfoBoxContent (event) { - const infoBoxContent = event.target.value; - this.props.dispatch(updateSettings({infoBoxContent})); - } - - updateClosedMessage (event) { - const closedMessage = event.target.value; - this.props.dispatch(updateSettings({closedMessage})); - } - - saveSettings () { - this.props.dispatch(saveSettingsToServer()); - } - - getCommentSettings () { - return - - - - - {lang.t('configure.enable-pre-moderation')} - - - - - - - {lang.t('configure.include-comment-stream')} -

- {lang.t('configure.include-comment-stream-desc')} -

-
-
- - - {lang.t('configure.closed-comments-desc')} - - - - - - - - -
; - } - - copyToClipBoard () { - const copyTextarea = document.querySelector(`.${ styles.embedInput}`); - copyTextarea.select(); - - try { - document.execCommand('copy'); - this.setState({copied: true}); - } catch (err) { - console.error('Unable to copy', err); + componentWillUpdate = (newProps) => { + if ((!this.props.settings + || !this.props.settings.wordlist) + && newProps.settings.wordlist + && newProps.settings.wordlist.length !== 0 ) { + this.setState({wordlist: newProps.settings.wordlist.join(', ')}); } } - getEmbed () { - const embedText = `
`; - - return - -

{lang.t('configure.copy-and-paste')}

-