show user id on username click

web/app/components/comment/__user-id/comment__user-id.scss

@@ -0,0 +1,4 @@
+.comment__user-id {
+  color: #888;
+  font-weight: 400;
+}

web/app/components/comment/__username/comment__username.scss

@@ -3,10 +3,9 @@
   font-weight: 700;
   text-decoration: none;
   color: #777;
+  cursor: pointer;
 
-  &:link {
-    &:hover {
-      text-decoration: underline;
-    }
+  &:hover {
+    opacity: .75;
   }
 }

web/app/components/comment/comment.jsx

@@ -13,6 +13,7 @@ export default class Comment extends Component {
 
     this.state = {
       isInputVisible: false,
+      isUserIdVisible: false,
     };
 
     this.updateState(props);
@@ -20,6 +21,7 @@ export default class Comment extends Component {
     this.decreaseScore = this.decreaseScore.bind(this);
     this.increaseScore = this.increaseScore.bind(this);
     this.toggleInputVisibility = this.toggleInputVisibility.bind(this);
+    this.toggleUserIdVisibility = this.toggleUserIdVisibility.bind(this);
     this.onReply = this.onReply.bind(this);
     this.onPinClick = this.onPinClick.bind(this);
     this.onUnpinClick = this.onUnpinClick.bind(this);
@@ -73,6 +75,10 @@ export default class Comment extends Component {
     }
   }
 
+  toggleUserIdVisibility() {
+    this.setState({ isUserIdVisible: !this.state.isUserIdVisible });
+  }
+
   onPinClick() {
     const { id } = this.props.data;
 
@@ -175,7 +181,7 @@ export default class Comment extends Component {
     });
   }
 
-  render(props, { guest, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted, isInputVisible }) {
+  render(props, { guest, isUserIdVisible, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted, isInputVisible }) {
     const { data, mix, mods = {} } = props;
     const isAdmin = !guest && store.get('user').admin;
     const isGuest = guest || !Object.keys(store.get('user')).length;
@@ -242,7 +248,15 @@ export default class Comment extends Component {
               alt=""
             />
 
-            <span className="comment__username" title={o.user.id}>{o.user.name}</span>
+            <span
+              className="comment__username"
+              title={o.user.id}
+              onClick={this.toggleUserIdVisibility}
+            >{o.user.name}</span>
+
+            {
+              isUserIdVisible && <span className="comment__user-id"> ({o.user.id})</span>
+            }
 
             <span className="comment__time">{o.time}</span>
 

web/app/components/comment/index.js

@@ -22,6 +22,7 @@ require('./__score-value/comment__score-value.scss');
 require('./__status/comment__status.scss');
 require('./__text/comment__text.scss');
 require('./__time/comment__time.scss');
+require('./__user-id/comment__user-id.scss');
 require('./__username/comment__username.scss');
 
 require('./__vote/comment__vote.scss');