add toggle for list of blocked users to auth-panel

web/app/components/auth-panel/auth-panel.jsx

@@ -5,33 +5,44 @@ export default class AuthPanel extends Component {
     super(props);
 
     this.toggleUserId = this.toggleUserId.bind(this);
+    this.toggleBlockedVisibility = this.toggleBlockedVisibility.bind(this);
   }
 
   toggleUserId() {
     this.setState({ isUserIdVisible: !this.state.isUserIdVisible });
   }
 
-  render(props, { isUserIdVisible }) {
+  toggleBlockedVisibility() {
+    if (!this.state.isBlockedVisible) {
+      if (this.props.onBlockedUsersShow) this.props.onBlockedUsersShow();
+    } else {
+      if (this.props.onBlockedUsersHide) this.props.onBlockedUsersHide();
+    }
+
+    this.setState({ isBlockedVisible: !this.state.isBlockedVisible });
+  }
+
+  render(props, { isUserIdVisible, isBlockedVisible }) {
     const { user, providers = [] } = props;
 
     return (
       <div className={b('auth-panel', props)}>
         {
           !!user.name && (
-            <span>
+            <div className="auth-panel__column">
               You signed in as
               {' '}
               <strong className="auth-panel__username" onClick={this.toggleUserId}>{user.name}</strong>
               {isUserIdVisible && <span className="auth-panel__user-id"> ({user.id})</span>}.
               {' '}
               <span className="auth-panel__pseudo-link" onClick={props.onSignOut}>Sign out?</span>
-            </span>
+            </div>
           )
         }
 
         {
           !user.name && (
-            <span>
+            <div className="auth-panel__column">
               Sign in to comment using
               {' '}
               {
@@ -50,7 +61,18 @@ export default class AuthPanel extends Component {
                 })
               }
               {'.'}
-            </span>
+            </div>
+          )
+        }
+
+        {
+          user.admin && (
+            <div className="auth-panel__column">
+              <span
+                className="auth-panel__pseudo-link"
+                onClick={this.toggleBlockedVisibility}
+              >{isBlockedVisible ? 'hide' : 'show'} blocked</span>
+            </div>
           )
         }
       </div>