show user id on click on username in auth panel

web/app/components/auth-panel/__user-id/auth-panel__user-id.scss

@@ -0,0 +1,3 @@
+.auth-panel__user-id {
+  color: #888;
+}

web/app/components/auth-panel/__username/auth-panel__username.scss

@@ -0,0 +1,3 @@
+.auth-panel__username {
+  cursor: default;
+}

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

@@ -1,14 +1,31 @@
 import { h, Component } from 'preact';
 
 export default class AuthPanel extends Component {
-  render(props, state) {
+  constructor(props) {
+    super(props);
+
+    this.toggleUserId = this.toggleUserId.bind(this);
+  }
+
+  toggleUserId() {
+    this.setState({ isUserIdVisible: !this.state.isUserIdVisible });
+  }
+
+  render(props, { isUserIdVisible }) {
     const { user, providers = [] } = props;
 
     return (
       <div className={b('auth-panel', props)}>
         {
           !!user.name && (
-            <span>You signed in as <strong>{user.name}</strong>. <span className="auth-panel__pseudo-link" onClick={props.onSignOut}>Sign out?</span></span>
+            <span>
+              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>
           )
         }
 

web/app/components/auth-panel/index.js

@@ -3,3 +3,5 @@ export { default } from './auth-panel';
 require('./auth-panel.scss');
 
 require('./__pseudo-link/auth-panel__pseudo-link.scss');
+require('./__username/auth-panel__username.scss');
+require('./__user-id/auth-panel__user-id.scss');