Disabling save button on error and updating translations.

client/coral-admin/src/actions/settings.js

@@ -26,7 +26,10 @@ export const updateSettings = settings => {
 };
 
 export const saveSettingsToServer = () => (dispatch, getState) => {
-  const settings = getState().settings.toJS().settings;
+  let settings = getState().settings.toJS().settings;
+  if (settings.charCount) {
+    settings.charCount = parseInt(settings.charCount);
+  }
   dispatch({type: SAVE_SETTINGS_LOADING});
   coralApi('/settings', {method: 'PUT', body: settings})
     .then(() => {

client/coral-admin/src/containers/Configure/CommentSettings.js

@@ -12,132 +12,115 @@ import {
   Icon
 } from 'react-mdl';
 
-class CommentSettings extends Component {
+const updateCharCountEnable = (updateSettings, charCountChecked) => () => {
+  const charCountEnable = !charCountChecked;
+  updateSettings({charCountEnable});
+};
 
-  state = {
-    charCountError: false
+const updateCharCount = (updateSettings, settingsError) => (event) => {
+  const charCount = event.target.value;
+  if (charCount.match(/[^0-9]/)) {
+    settingsError('charCount', true);
+  } else {
+    settingsError('charCount', false);
   }
+  updateSettings({charCount: charCount});
+};
 
-  static propTypes = {
-    updateSettings: PropTypes.func.isRequired,
-    settings: PropTypes.object.isRequired
-  }
+const updateModeration = (updateSettings, mod) => () => {
+  const moderation = mod === 'pre' ? 'post' : 'pre';
+  updateSettings({moderation});
+};
 
-  updateCharCountEnable = (updateSettings, charCountChecked) => () => {
-    const charCountEnable = !charCountChecked;
-    updateSettings({charCountEnable});
-  };
+const updateInfoBoxEnable = (updateSettings, infoBox) => () => {
+  const infoBoxEnable = !infoBox;
+  updateSettings({infoBoxEnable});
+};
 
-  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 updateInfoBoxContent = (updateSettings) => (event) => {
+  const infoBoxContent =  event.target.value;
+  updateSettings({infoBoxContent});
+};
 
-  updateModeration = (updateSettings, mod) => () => {
-    const moderation = mod === 'pre' ? 'post' : 'pre';
-    updateSettings({moderation});
-  };
+const updateClosedMessage = (updateSettings) => (event) => {
+  const closedMessage = event.target.value;
+  updateSettings({closedMessage});
+};
 
-  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 <List>
-      <ListItem className={`${styles.configSetting} ${settings.moderation === 'pre' ? styles.enabledSetting : styles.disabledSetting}`}>
-        <ListItemAction>
-          <Checkbox
-            onClick={this.updateModeration(updateSettings, settings.moderation)}
-            checked={settings.moderation === 'pre'} />
-        </ListItemAction>
-        <ListItemContent>
-        <div className={styles.settingsHeader}>{lang.t('configure.enable-pre-moderation')}</div>
-        <p className={settings.moderation === 'pre' ? '' : styles.disabledSettingText}>
-          {lang.t('configure.enable-pre-moderation-text')}
+const CommentSettings = ({updateSettings, settingsError, settings, errors}) => <List>
+    <ListItem className={`${styles.configSetting} ${settings.moderation === 'pre' ? styles.enabledSetting : styles.disabledSetting}`}>
+      <ListItemAction>
+        <Checkbox
+          onClick={updateModeration(updateSettings, settings.moderation)}
+          checked={settings.moderation === 'pre'} />
+      </ListItemAction>
+      <ListItemContent>
+      <div className={styles.settingsHeader}>{lang.t('configure.enable-pre-moderation')}</div>
+      <p className={settings.moderation === 'pre' ? '' : styles.disabledSettingText}>
+        {lang.t('configure.enable-pre-moderation-text')}
+      </p>
+    </ListItemContent>
+    </ListItem>
+    <ListItem className={`${styles.configSetting} ${settings.charCountEnable ? styles.enabledSetting : styles.disabledSetting}`}>
+      <ListItemAction>
+        <Checkbox
+          onClick={updateCharCountEnable(updateSettings, settings.charCountEnable)}
+          checked={settings.charCountEnable} />
+      </ListItemAction>
+      <ListItemContent>
+        <div className={styles.settingsHeader}>{lang.t('configure.comment-count-header')}</div>
+        <p className={settings.charCountEnable ? '' : styles.disabledSettingText}>
+          <span>{lang.t('configure.comment-count-text-pre')}</span>
+          <input type='text'
+            className={`${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
+            htmlFor='charCount'
+            onChange={updateCharCount(updateSettings, settingsError)}
+            value={settings.charCount}/>
+          <span>{lang.t('configure.comment-count-text-post')}</span>
+            {
+              errors.charCount &&
+              <span className={styles.settingsError}>
+                <br/>
+                <Icon name="error_outline"/>
+                {lang.t('configure.comment-count-error')}
+              </span>
+            }
         </p>
       </ListItemContent>
-      </ListItem>
-      <ListItem className={`${styles.configSetting} ${settings.charCountEnable ? styles.enabledSetting : styles.disabledSetting}`}>
-        <ListItemAction>
-          <Checkbox
-            onClick={this.updateCharCountEnable(updateSettings, settings.charCountEnable)}
-            checked={settings.charCountEnable} />
-        </ListItemAction>
-        <ListItemContent>
-          <div className={styles.settingsHeader}>{lang.t('configure.comment-count-header')}</div>
-          <p className={settings.charCountEnable ? '' : styles.disabledSettingText}>
-            <span>{lang.t('configure.comment-count-text-pre')}</span>
-            <input type='text'
-              className={`${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
-              htmlFor='charCount'
-              onChange={this.updateCharCount(updateSettings)}
-              value={settings.charCount}/>
-            <span>{lang.t('configure.comment-count-text-post')}</span>
-              {
-                this.state.charCountError &&
-                <span className={styles.settingsError}>
-                  <br/>
-                  <Icon name="error_outline"/>
-                  {lang.t('configure.comment-count-error')}
-                </span>
-              }
-          </p>
-        </ListItemContent>
-      </ListItem>
-      <ListItem threeLine className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? styles.enabledSetting : styles.disabledSetting}`}>
-        <ListItemAction>
-          <Checkbox
-            onClick={this.updateInfoBoxEnable(updateSettings, settings.infoBoxEnable)}
-            checked={settings.infoBoxEnable} />
-        </ListItemAction>
-        <ListItemContent>
-          {lang.t('configure.include-comment-stream')}
-          <p>
-            {lang.t('configure.include-comment-stream-desc')}
-          </p>
-        </ListItemContent>
-      </ListItem>
-      <ListItem className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
-        <ListItemContent>
-          <Textfield
-            onChange={this.updateInfoBoxContent(updateSettings)}
-            value={settings.infoBoxContent}
-            label={lang.t('configure.include-text')}
-            rows={3}/>
-        </ListItemContent>
-      </ListItem>
-      <ListItem className={styles.configSettingInfoBox}>
-        <ListItemContent>
-          {lang.t('configure.closed-comments-desc')}
-          <Textfield
-            onChange={this.updateClosedMessage(updateSettings)}
-            value={settings.closedMessage}
-            label={lang.t('configure.closed-comments-label')}
-            rows={3}/>
-        </ListItemContent>
-      </ListItem>
-    </List>;
-  }
-}
+    </ListItem>
+    <ListItem threeLine className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? styles.enabledSetting : styles.disabledSetting}`}>
+      <ListItemAction>
+        <Checkbox
+          onClick={updateInfoBoxEnable(updateSettings, settings.infoBoxEnable)}
+          checked={settings.infoBoxEnable} />
+      </ListItemAction>
+      <ListItemContent>
+        {lang.t('configure.include-comment-stream')}
+        <p>
+          {lang.t('configure.include-comment-stream-desc')}
+        </p>
+      </ListItemContent>
+    </ListItem>
+    <ListItem className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
+      <ListItemContent>
+        <Textfield
+          onChange={updateInfoBoxContent(updateSettings)}
+          value={settings.infoBoxContent}
+          label={lang.t('configure.include-text')}
+          rows={3}/>
+      </ListItemContent>
+    </ListItem>
+    <ListItem className={styles.configSettingInfoBox}>
+      <ListItemContent>
+        {lang.t('configure.closed-comments-desc')}
+        <Textfield
+          onChange={updateClosedMessage(updateSettings)}
+          value={settings.closedMessage}
+          label={lang.t('configure.closed-comments-label')}
+          rows={3}/>
+      </ListItemContent>
+    </ListItem>
+  </List>;
 
 export default CommentSettings;
 

client/coral-admin/src/containers/Configure/Configure.js

@@ -22,7 +22,8 @@ class Configure extends React.Component {
     this.state = {
       activeSection: 'comments',
       wordlist: [],
-      changed: false
+      changed: false,
+      errors: {}
     };
   }
 
@@ -64,12 +65,23 @@ class Configure extends React.Component {
     this.props.dispatch(updateSettings(setting));
   }
 
+  // Sets an arbitrary error string and a boolean state.
+  // This allows the system to track multiple errors.
+  onSettingError = (error, state) => {
+    this.setState((prevState) => {
+      prevState.errors[error] = state;
+      return prevState;
+    });
+  }
+
   getSection = (section) => {
     switch(section){
     case 'comments':
       return <CommentSettings
         settings={this.props.settings}
-        updateSettings={this.onSettingUpdate}/>;
+        updateSettings={this.onSettingUpdate}
+        errors={this.state.errors}
+        settingsError={this.onSettingError}/>;
     case 'embed':
       return <EmbedLink/>;
     case 'wordlist':
@@ -94,6 +106,9 @@ class Configure extends React.Component {
     let pageTitle = this.getPageTitle(this.state.activeSection);
     const section = this.getSection(this.state.activeSection);
 
+    const showSave = Object.keys(this.state.errors).reduce(
+      (bool, error) => this.state.errors[error] ? false : bool, this.state.changed);
+
     if (this.props.fetchingSettings) {
       pageTitle += ' - Loading...';
     }
@@ -119,7 +134,7 @@ class Configure extends React.Component {
               </ListItem>
             </List>
             {
-              this.state.changed ?
+              showSave ?
               <Button
                 raised
                 onClick={this.saveSettings}

client/coral-admin/src/translations.json

@@ -57,7 +57,7 @@
       "community": "Community",
       "closed-comments-desc": "Write a message for closed threads",
       "closed-comments-label": "Write a message...",
-      "comment-count-header": "Limit Content Length",
+      "comment-count-header": "Limit Comment Length",
       "comment-count-text-pre":  "Comments will be limited to ",
       "comment-count-text-post": " characters.",
       "comment-count-error": "Please enter a valid number."
@@ -117,9 +117,10 @@
       "community": "Comunidad",
       "closed-comments-desc": "Escribe un mensaje para cuando los comentarios se encuentran cerrados",
       "closed-comments-label": "Escribe un mensaje...",
-      "comment-count-header": "tracundeme",
-      "comment-count-text-pre":  "tracundeme",
-      "comment-count-text-post": "tracundeme"
+      "comment-count-header": "Limitar el largo del comentario",
+      "comment-count-text-pre":  "El largo de comentarios será ",
+      "comment-count-text-post": " caracteres",
+      "comment-count-error": "Por favor escribe un número válido."
     },
     "bandialog": {
       "ban_user": "Quieres suspender el Usuario?",

models/setting.js

@@ -38,7 +38,15 @@ const SettingSchema = new Schema({
     type: String,
     default: ''
   },
-  wordlist: [String]
+  wordlist: [String],
+  charCount: {
+    type: Number,
+    default: 1000
+  },
+  charCountEnable: {
+    type: Boolean,
+    default: false
+  }
 }, {
   timestamps: {
     createdAt: 'created_at',