From 388d85232fd575c164e5d33e1b23418f6367ea11 Mon Sep 17 00:00:00 2001
From: igoradamenko <mail@igoradamenko.com>
Date: Mon, 12 Mar 2018 21:43:46 +0300
Subject: [PATCH] show user id on click on username in auth panel

---
 .../__user-id/auth-panel__user-id.scss        |  3 +++
 .../__username/auth-panel__username.scss      |  3 +++
 web/app/components/auth-panel/auth-panel.jsx  | 21 +++++++++++++++++--
 web/app/components/auth-panel/index.js        |  2 ++
 4 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 web/app/components/auth-panel/__user-id/auth-panel__user-id.scss
 create mode 100644 web/app/components/auth-panel/__username/auth-panel__username.scss

diff --git a/web/app/components/auth-panel/__user-id/auth-panel__user-id.scss b/web/app/components/auth-panel/__user-id/auth-panel__user-id.scss
new file mode 100644
index 00000000..ed32e370
--- /dev/null
+++ b/web/app/components/auth-panel/__user-id/auth-panel__user-id.scss
@@ -0,0 +1,3 @@
+.auth-panel__user-id {
+  color: #888;
+}
diff --git a/web/app/components/auth-panel/__username/auth-panel__username.scss b/web/app/components/auth-panel/__username/auth-panel__username.scss
new file mode 100644
index 00000000..0c53cf67
--- /dev/null
+++ b/web/app/components/auth-panel/__username/auth-panel__username.scss
@@ -0,0 +1,3 @@
+.auth-panel__username {
+  cursor: default;
+}
diff --git a/web/app/components/auth-panel/auth-panel.jsx b/web/app/components/auth-panel/auth-panel.jsx
index 2df23770..0ba4b09b 100644
--- a/web/app/components/auth-panel/auth-panel.jsx
+++ b/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>
           )
         }
 
diff --git a/web/app/components/auth-panel/index.js b/web/app/components/auth-panel/index.js
index 974fbc18..a5718048 100644
--- a/web/app/components/auth-panel/index.js
+++ b/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');