diff --git a/client/coral-admin/src/containers/Configure/CommentSettings.js b/client/coral-admin/src/containers/Configure/CommentSettings.js index f33b7204f..9e162fc30 100644 --- a/client/coral-admin/src/containers/Configure/CommentSettings.js +++ b/client/coral-admin/src/containers/Configure/CommentSettings.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {Component, PropTypes} from 'react'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../../translations.json'; import styles from './Configure.css'; @@ -8,108 +8,136 @@ import { ListItemContent, ListItemAction, Textfield, - Checkbox + Checkbox, + Icon } from 'react-mdl'; -const updateCharCountEnable = (updateSettings, charCountChecked) => () => { - const charCountEnable = !charCountChecked; - updateSettings({charCountEnable}); -}; +class CommentSettings extends Component { -const updateCharCount = (updateSettings) => (event) => { - const charCount = event.target.value; - if (charCount.match(/[^0-9]/)) { - //Show error + state = { + charCountError: false } - updateSettings({charCount: charCount}); -}; -const updateModeration = (updateSettings, mod) => () => { - const moderation = mod === 'pre' ? 'post' : 'pre'; - updateSettings({moderation}); -}; + static propTypes = { + updateSettings: PropTypes.func.isRequired, + settings: PropTypes.object.isRequired + } -const updateInfoBoxEnable = (updateSettings, infoBox) => () => { - const infoBoxEnable = !infoBox; - updateSettings({infoBoxEnable}); -}; + updateCharCountEnable = (updateSettings, charCountChecked) => () => { + const charCountEnable = !charCountChecked; + updateSettings({charCountEnable}); + }; -const updateInfoBoxContent = (updateSettings) => (event) => { - const infoBoxContent = event.target.value; - updateSettings({infoBoxContent}); -}; + updateCharCount = (updateSettings) => (event) => { + const charCount = event.target.value; + if (charCount.match(/[^0-9]/)) { + this.setState({charCountError: true}); + } else { + this.setState({charCountError: false}); + } + updateSettings({charCount: charCount}); + }; -const updateClosedMessage = (updateSettings) => (event) => { - const closedMessage = event.target.value; - updateSettings({closedMessage}); -}; + updateModeration = (updateSettings, mod) => () => { + const moderation = mod === 'pre' ? 'post' : 'pre'; + updateSettings({moderation}); + }; -const CommentSettings = (props) => - - - - - -
{lang.t('configure.enable-pre-moderation')}
-

- {lang.t('configure.enable-pre-moderation-text')} -

-
-
- - - - - -
{lang.t('configure.comment-count-header')}
-

- {lang.t('configure.comment-count-text-pre')} - - {lang.t('configure.comment-count-text-post')} -

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

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

-
-
- - - - - - - - {lang.t('configure.closed-comments-desc')} - - - -
; + updateInfoBoxEnable = (updateSettings, infoBox) => () => { + const infoBoxEnable = !infoBox; + updateSettings({infoBoxEnable}); + }; + + updateInfoBoxContent = (updateSettings) => (event) => { + const infoBoxContent = event.target.value; + updateSettings({infoBoxContent}); + }; + + updateClosedMessage = (updateSettings) => (event) => { + const closedMessage = event.target.value; + updateSettings({closedMessage}); + }; + + render() { + + const {updateSettings, settings} = this.props; + + return + + + + + +
{lang.t('configure.enable-pre-moderation')}
+

+ {lang.t('configure.enable-pre-moderation-text')} +

+
+
+ + + + + +
{lang.t('configure.comment-count-header')}
+

+ {lang.t('configure.comment-count-text-pre')} + + {lang.t('configure.comment-count-text-post')} + { + this.state.charCountError && + +
+ + {lang.t('configure.comment-count-error')} +
+ } +

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

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

+
+
+ + + + + + + + {lang.t('configure.closed-comments-desc')} + + + +
; + } +} export default CommentSettings; diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css index ad811a351..4788110de 100644 --- a/client/coral-admin/src/containers/Configure/Configure.css +++ b/client/coral-admin/src/containers/Configure/Configure.css @@ -18,11 +18,20 @@ .configSetting { border: 1px solid #ccc; border-radius: 4px; - height: 90px; + height: 95px; margin-bottom: 10px; align-items: flex-start; } +.settingsError { + color: #d50000; +} + +.settingsError i { + font-size: 14px; + margin-right: 3px; +} + .settingsHeader { margin-top: 3px; margin-bottom: 10px; diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json index 743380621..1780bc133 100644 --- a/client/coral-admin/src/translations.json +++ b/client/coral-admin/src/translations.json @@ -59,7 +59,8 @@ "closed-comments-label": "Write a message...", "comment-count-header": "Limit Content Length", "comment-count-text-pre": "Comments will be limited to ", - "comment-count-text-post": " characters." + "comment-count-text-post": " characters.", + "comment-count-error": "Please enter a valid number." }, "bandialog": { "ban_user": "Ban User?",