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')}
-
-
;
+ saveSettings = () => {
+ this.props.dispatch(saveSettingsToServer());
+ this.setState({changed: false});
}
- changeSection (activeSection) {
+ changeSection = (activeSection) => () => {
this.setState({activeSection});
}
+ onChangeWordlist = (event) => {
+ event.preventDefault();
+ const newlist = event.target.value;
+ this.setState({wordlist: newlist.toLowerCase(), changed: true});
+ this.props.dispatch(updateSettings({
+ wordlist: newlist.toLowerCase()
+ .split(',')
+ .map((word) => word.trim())
+ }));
+ }
+
+ onSettingUpdate = (setting) => {
+ this.setState({changed: true});
+ this.props.dispatch(updateSettings(setting));
+ }
+
+ getSection = (section) => {
+ switch(section){
+ case 'comments':
+ return ;
+ case 'embed':
+ return ;
+ case 'wordlist':
+ return ;
+ }
+ }
+
+ getPageTitle = (section) => {
+ switch(section) {
+ case 'comments':
+ return lang.t('configure.comment-settings');
+ case 'embed':
+ return lang.t('configure.embed-comment-stream');
+ case 'wordlist':
+ return lang.t('configure.wordlist');
+ }
+ }
+
render () {
- let pageTitle = this.state.activeSection === 'comments'
- ? lang.t('configure.comment-settings')
- : lang.t('configure.embed-comment-stream');
+ let pageTitle = this.getPageTitle(this.state.activeSection);
+ const section = this.getSection(this.state.activeSection);
if (this.props.fetchingSettings) {
pageTitle += ' - Loading...';
@@ -152,28 +104,41 @@ class Configure extends React.Component {
{lang.t('configure.comment-settings')}
{lang.t('configure.embed-comment-stream')}
+
+ {lang.t('configure.wordlist')}
+
-