From 44e397b86c17aa8f799902d3ba2f52f96b8e62b6 Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Mon, 12 Dec 2016 19:36:32 -0500
Subject: [PATCH 1/4] Passing character count into commentbox.

---
 .../coral-embed-stream/src/CommentStream.js   |  6 ++--
 client/coral-plugin-commentbox/CommentBox.js  | 29 +++++++++++++++++--
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index b53832ce5..c052e5aa1 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/client/coral-embed-stream/src/CommentStream.js
@@ -90,7 +90,7 @@ class CommentStream extends Component {
     const rootItemId = this.props.items.assets && Object.keys(this.props.items.assets)[0];
     const rootItem = this.props.items.assets && this.props.items.assets[rootItemId];
     const {actions, users, comments} = this.props.items;
-    const {status, moderation, closedMessage} = this.props.config;
+    const {status, moderation, closedMessage, charCount, charCountEnable} = this.props.config;
     const {loggedIn, isAdmin, user, showSignInDialog, signInOffset} = this.props.auth;
     const {activeTab} = this.state;
     const banned = (this.props.userData.status === 'banned');
@@ -128,7 +128,7 @@ class CommentStream extends Component {
                         currentUser={this.props.auth.user}
                         banned={banned}
                         author={user}
-                      />
+                        charCount={charCountEnable && charCount}/>
                     </RestrictedContent>
                     </div>
                   : <p>{closedMessage}</p>
@@ -198,6 +198,7 @@ class CommentStream extends Component {
                         parent_id={commentId}
                         premod={moderation}
                         currentUser={user}
+                        charCount={charCountEnable && charCount}
                         showReply={comment.showReply}/>
                       {
                         comment.children &&
@@ -257,6 +258,7 @@ class CommentStream extends Component {
                               premod={moderation}
                               banned={banned}
                               currentUser={user}
+                              charCount={charCountEnable && charCount}
                               showReply={reply.showReply}/>
                           </div>;
                         })
diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js
index 0167d517f..078aba201 100644
--- a/client/coral-plugin-commentbox/CommentBox.js
+++ b/client/coral-plugin-commentbox/CommentBox.js
@@ -23,7 +23,18 @@ class CommentBox extends Component {
   }
 
   postComment = () => {
-    const {postItem, updateItem, id, parent_id, child_id, addNotification, appendItemArray, premod, author} = this.props;
+    const {
+      postItem,
+      updateItem,
+      id,
+      parent_id,
+      child_id,
+      addNotification,
+      appendItemArray,
+      premod,
+      author
+    } = this.props;
+
     let comment = {
       body: this.state.body,
       asset_id: id,
@@ -59,8 +70,16 @@ class CommentBox extends Component {
     this.setState({body: ''});
   }
 
+  onUpdateComment = (e) => {
+    const body = e.target.value;
+    if (!this.props.charCount || body.length > this.props.charCount) {
+      this.setState({body});
+    }
+  }
+
   render () {
-    const {styles, reply, author} = this.props;
+    const {styles, reply, author, charCount} = this.props;
+    const length = this.state.body.length;
     // How to handle language in plugins? Should we have a dependency on our central translation file?
     return <div>
       <div
@@ -80,6 +99,12 @@ class CommentBox extends Component {
             onChange={(e) => this.setState({body: e.target.value})}
             rows={3}/>
         </div>
+        <div className={`${name}-char-count ${length > charCount && `${name}-char-max`}`}>
+          {
+            charCount &&
+            `${length}/${charCount}`
+          }
+        </div>
         <div className={`${name}-button-container`}>
           { author && (
               <Button

From 87a5c4b2d6b4f0c1e0f70e2a988dd517546457ce Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Mon, 12 Dec 2016 20:29:54 -0500
Subject: [PATCH 2/4] Displaying character count and preventing user from
 posting when count is too high.

---
 client/coral-embed-stream/style/default.css    | 12 +++++++++++-
 client/coral-plugin-commentbox/CommentBox.js   | 18 +++++++-----------
 .../coral-plugin-commentbox/translations.json  |  6 ++++--
 client/coral-ui/components/Button.css          | 11 +++++++++++
 4 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index c27baf406..463c8dc68 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -95,7 +95,7 @@ hr {
   margin-top: 10px;
 }
 
-#coralStream .coral-plugin-commentbox-button {
+.coral-plugin-commentbox-button {
   float: right;
   margin-top: 10px;
   padding: 5px 10px;
@@ -111,6 +111,16 @@ hr {
   margin-bottom: 5px;
 }
 
+.coral-plugin-commentbox-char-count {
+  color: #ccc;
+  text-align: right;
+  font-size: 12px;
+}
+
+.coral-plugin-commentbox-char-max {
+  color: #d50000;
+}
+
 /* Comment styles */
 .comment {
   margin-bottom: 10px;
diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js
index 078aba201..d5df14e3d 100644
--- a/client/coral-plugin-commentbox/CommentBox.js
+++ b/client/coral-plugin-commentbox/CommentBox.js
@@ -53,6 +53,10 @@ class CommentBox extends Component {
     if (child_id || parent_id) {
       updateItem(child_id || parent_id, 'showReply', false, 'comments');
     }
+
+    if (this.props.charCount && this.state.body.length > this.props.charCount) {
+      return;
+    }
     postItem(comment, 'comments')
       .then((postedComment) => {
         const commentId = postedComment.id;
@@ -70,17 +74,9 @@ class CommentBox extends Component {
     this.setState({body: ''});
   }
 
-  onUpdateComment = (e) => {
-    const body = e.target.value;
-    if (!this.props.charCount || body.length > this.props.charCount) {
-      this.setState({body});
-    }
-  }
-
   render () {
     const {styles, reply, author, charCount} = this.props;
     const length = this.state.body.length;
-    // How to handle language in plugins? Should we have a dependency on our central translation file?
     return <div>
       <div
         className={`${name}-container`}>
@@ -99,16 +95,16 @@ class CommentBox extends Component {
             onChange={(e) => this.setState({body: e.target.value})}
             rows={3}/>
         </div>
-        <div className={`${name}-char-count ${length > charCount && `${name}-char-max`}`}>
+        <div className={`${name}-char-count ${length > charCount ? `${name}-char-max` : ''}`}>
           {
             charCount &&
-            `${length}/${charCount}`
+            `${charCount - length} ${lang.t('characters-remaining')}`
           }
         </div>
         <div className={`${name}-button-container`}>
           { author && (
               <Button
-                cStyle='darkGrey'
+                cStyle={length > charCount ? 'lightGrey' : 'darkGrey'}
                 className={`${name}-button`}
                 onClick={this.postComment}>
                 {lang.t('post')}
diff --git a/client/coral-plugin-commentbox/translations.json b/client/coral-plugin-commentbox/translations.json
index 73bef0079..93910f008 100644
--- a/client/coral-plugin-commentbox/translations.json
+++ b/client/coral-plugin-commentbox/translations.json
@@ -6,7 +6,8 @@
     "name": "Name",
     "comment-post-notif": "Your comment has been posted.",
     "comment-post-notif-premod": "Thank you for posting. Our moderation team will review your comment shortly.",
-    "comment-post-banned-word":  "Your comment contains one or more words that are not permitted, so it will not be published. If you think this message is incorrect, please contact our moderation team."
+    "comment-post-banned-word":  "Your comment contains one or more words that are not permitted, so it will not be published. If you think this message is incorrect, please contact our moderation team.",
+    "characters-remaining": " characters remaining"
   },
   "es": {
     "post": "Publicar",
@@ -15,6 +16,7 @@
     "name": "Nombre",
     "comment-post-notif": "Tu comentario ha sido publicado.",
     "comment-post-notif-premod": "Gracias por comentar. Nuestro equipo de moderación va a revisarlo muy pronto.",
-    "comment-post-banned-word":  "Tu comentario contiene una o más palabras que no estan permitidasen nuestro espacio, por lo que no será publicado. Si crees que es un error, por favor contacta a nuestro equipo de moderación."
+    "comment-post-banned-word":  "Tu comentario contiene una o más palabras que no estan permitidasen nuestro espacio, por lo que no será publicado. Si crees que es un error, por favor contacta a nuestro equipo de moderación.",
+    "characters-remaining": "tracundeme"
   }
 }
diff --git a/client/coral-ui/components/Button.css b/client/coral-ui/components/Button.css
index 6cf13c739..3a624463c 100644
--- a/client/coral-ui/components/Button.css
+++ b/client/coral-ui/components/Button.css
@@ -77,6 +77,17 @@
   background: #696969;
 }
 
+.type--lightGrey {
+  color: white;
+  background: #ccc;
+  cursor: default;
+}
+
+.type--lightGrey:hover {
+  color: white;
+  background: #ccc;
+}
+
 .type--green {
   color: white;
   background: #00897B;

From 4dca9ff0616ea521143373a6bba96fc2e95b5c87 Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Tue, 13 Dec 2016 12:02:00 -0500
Subject: [PATCH 3/4] Updating translation.

---
 client/coral-plugin-commentbox/translations.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-plugin-commentbox/translations.json b/client/coral-plugin-commentbox/translations.json
index 93910f008..49f3314d3 100644
--- a/client/coral-plugin-commentbox/translations.json
+++ b/client/coral-plugin-commentbox/translations.json
@@ -17,6 +17,6 @@
     "comment-post-notif": "Tu comentario ha sido publicado.",
     "comment-post-notif-premod": "Gracias por comentar. Nuestro equipo de moderación va a revisarlo muy pronto.",
     "comment-post-banned-word":  "Tu comentario contiene una o más palabras que no estan permitidasen nuestro espacio, por lo que no será publicado. Si crees que es un error, por favor contacta a nuestro equipo de moderación.",
-    "characters-remaining": "tracundeme"
+    "characters-remaining": "carácteres restantes"
   }
 }

From 643373e22497e2f4276cfc24da9636b44ea482a7 Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Tue, 13 Dec 2016 13:36:54 -0500
Subject: [PATCH 4/4] Rejecting comments on the server if the character count
 is too long.

---
 routes/api/comments/index.js       |  8 +++++++-
 tests/routes/api/comments/index.js | 22 ++++++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/routes/api/comments/index.js b/routes/api/comments/index.js
index 168b89fc3..3ca2f4877 100644
--- a/routes/api/comments/index.js
+++ b/routes/api/comments/index.js
@@ -97,7 +97,13 @@ router.post('/', wordlist.filter('body'), (req, res, next) => {
 
       // Return `premod` if pre-moderation is enabled and an empty "new" status
       // in the event that it is not in pre-moderation mode.
-      .then(({moderation}) => moderation === 'pre' ? 'premod' : '');
+      .then(({moderation, charCountEnable, charCount}) => {
+        // Reject if the comment is too long
+        if (charCountEnable && body.length > charCount) {
+          return 'rejected';
+        }
+        return moderation === 'pre' ? 'premod' : '';
+      });
   }
 
   status.then((status) => Comment.publicCreate({
diff --git a/tests/routes/api/comments/index.js b/tests/routes/api/comments/index.js
index b3e4e2675..fdd4e4bbe 100644
--- a/tests/routes/api/comments/index.js
+++ b/tests/routes/api/comments/index.js
@@ -197,6 +197,28 @@ describe('/api/v1/comments', () => {
         });
     });
 
+    it('should create a rejected comment if the body is above the character count', () => {
+      return Asset
+        .findOrCreateByUrl('https://coralproject.net/article1')
+        .then((asset) => {
+          return Asset
+            .overrideSettings(asset.id, {charCountEnable: true, charCount: 10})
+            .then(() => asset);
+        })
+        .then((asset) => {
+          return chai.request(app)
+            .post('/api/v1/comments')
+            .set(passport.inject({roles: []}))
+            .send({'body': 'This is way way way way way too long.', 'author_id': '123', 'asset_id': asset.id, 'parent_id': ''});
+        })
+        .then((res) => {
+          expect(res).to.have.status(201);
+          expect(res.body).to.have.property('id');
+          expect(res.body).to.have.property('asset_id');
+          expect(res.body).to.have.property('status', 'rejected');
+        });
+    });
+
     it('shouldn\'t create a comment when the asset has expired commenting', () => {
       return Asset.create({
         closedAt: new Date().setDate(0),