add verification check to comment block

closes #60

web/app/components/comment/__verification/_active/comment__verification_active.scss

@@ -0,0 +1,3 @@
+.comment__verification_active {
+  background-image: url('comment__verification_active.svg');
+}

web/app/components/comment/__verification/_clickable/comment__verification_clickable.scss

@@ -0,0 +1,3 @@
+.comment__verification_clickable {
+  cursor: pointer;
+}

web/app/components/comment/__verification/comment__verification.scss

@@ -0,0 +1,13 @@
+.comment__verification {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-left: 4px;
+  vertical-align: middle;
+  background: url('comment__verification.svg') center no-repeat;
+  background-size: cover;
+
+  &:hover {
+    opacity: .75;
+  }
+}

web/app/components/comment/comment.jsx

@@ -15,6 +15,7 @@ export default class Comment extends Component {
       isReplying: false,
       isEditing: false,
       isUserIdVisible: false,
+      isUserVerified: false,
       editTimeLeft: null,
     };
 
@@ -33,6 +34,8 @@ export default class Comment extends Component {
     this.onReply = this.onReply.bind(this);
     this.onPinClick = this.onPinClick.bind(this);
     this.onUnpinClick = this.onUnpinClick.bind(this);
+    this.onVerifyClick = this.onVerifyClick.bind(this);
+    this.onUnverifyClick = this.onUnverifyClick.bind(this);
     this.onBlockClick = this.onBlockClick.bind(this);
     this.onUnblockClick = this.onUnblockClick.bind(this);
     this.onDeleteClick = this.onDeleteClick.bind(this);
@@ -151,6 +154,30 @@ export default class Comment extends Component {
     }
   }
 
+  onVerifyClick() {
+    const { id, user: { id: userId } } = this.props.data;
+
+    if (confirm('Do you want to verify this user?')) {
+      this.setState({ isUserVerified: true });
+
+      api.verify({ id: userId }).then(() => {
+        api.getComment({ id }).then(comment => store.replaceComment(comment));
+      });
+    }
+  }
+
+  onUnverifyClick() {
+    const { id, user: { id: userId } } = this.props.data;
+
+    if (confirm('Do you want to unverify this user?')) {
+      this.setState({ isUserVerified: false });
+
+      api.unverify({ id: userId }).then(() => {
+        api.getComment({ id }).then(comment => store.replaceComment(comment));
+      });
+    }
+  }
+
   onBlockClick() {
     const { id, user: { id: userId } } = this.props.data;
 
@@ -272,7 +299,20 @@ export default class Comment extends Component {
     }
   }
 
-  render(props, { guest, isUserIdVisible, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted, isReplying, isEditing, editTimeLeft }) {
+  render(props, {
+    guest,
+    isUserIdVisible,
+    userBlocked,
+    pinned,
+    score,
+    scoreIncreased,
+    scoreDecreased,
+    deleted,
+    isReplying,
+    isEditing,
+    isUserVerified,
+    editTimeLeft,
+  }) {
     const { data, mods = {} } = props;
     const isAdmin = !guest && store.get('user').admin;
     const isGuest = guest || !Object.keys(store.get('user')).length;
@@ -314,6 +354,7 @@ export default class Comment extends Component {
         ...data.user,
         picture: data.user.picture.indexOf(API_BASE) === 0 ? `${BASE_URL}${data.user.picture}` : data.user.picture,
         isDefaultPicture: !data.user.picture.length,
+        verified: data.user.verified || isUserVerified,
       },
     };
 
@@ -364,6 +405,26 @@ export default class Comment extends Component {
               isUserIdVisible && <span className="comment__user-id"> ({o.user.id})</span>
             }
 
+            {
+              isAdmin && (
+                <span
+                  onClick={o.user.verified ? this.onUnverifyClick : this.onVerifyClick}
+                  aria-label="Toggle verification"
+                  title={o.user.verified ? 'Verified user' : 'Unverified user'}
+                  className={b('comment__verification', {}, { active: o.user.verified, clickable: true })}
+                />
+              )
+            }
+
+            {
+              !isAdmin && !!o.user.verified && (
+                <span
+                  title="Verified user"
+                  className={b('comment__verification', {}, { active: true })}
+                />
+              )
+            }
+
             <a href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`} className="comment__time">{o.time}</a>
 
             {

web/app/components/comment/index.js

@@ -28,6 +28,10 @@ require('./__time/comment__time.scss');
 require('./__user-id/comment__user-id.scss');
 require('./__username/comment__username.scss');
 
+require('./__verification/comment__verification.scss');
+require('./__verification/_active/comment__verification_active.scss');
+require('./__verification/_clickable/comment__verification_clickable.scss');
+
 require('./__vote/comment__vote.scss');
 require('./__vote/_disabled/comment__vote_disabled.scss');
 require('./__vote/_selected/comment__vote_selected.scss');

web/app/components/root/root.jsx

@@ -1,3 +1,5 @@
+import 'mimic';
+
 import { h, Component } from 'preact';
 import api from 'common/api';