user can logout

src/components/panels/UserPanel.jsx

@@ -4,12 +4,14 @@ import { GuestButton } from '$components/user/GuestButton';
 import { SERVER } from '$constants/api';
 import { DEFAULT_USER, ROLES } from '$constants/auth';
 import { UserButton } from '$components/user/UserButton';
-import { Icon } from '$components/panels/Icon';
+import { UserMenu } from '$components/user/UserMenu';
 
 export class UserPanel extends React.PureComponent {
-  componentDidMount() {
-    window.doLogin = console.log;
+  state = {
+    menuOpened: false,
+  };
 
+  componentDidMount() {
     window.addEventListener('message', e => {
       const { data } = e;
 
@@ -32,10 +34,13 @@ export class UserPanel extends React.PureComponent {
         }
       };
 
+      this.setState({ menuOpened: false });
       this.props.setUser(user);
     });
   }
 
+  setMenuOpened = () => this.setState({ menuOpened: !this.state.menuOpened });
+
   openOauthFrame = () => {
     const width = parseInt(window.innerWidth, 10);
     const height = parseInt(window.innerHeight, 10);
@@ -51,27 +56,24 @@ export class UserPanel extends React.PureComponent {
 
   render() {
     const {
-      user
-    } = this.props;
+      props: { user, userLogout },
+      state: { menuOpened },
+    } = this;
 
     return (
       <div>
         <div className="panel">
-          <div className="control-bar">
-            <button
-              onClick={this.startShotterMode}
-            >
-              <Icon icon="icon-poly" />
-            </button>
+          <div className="user-panel">
+            {
+              !user || user.role === ROLES.guest
+              ? <GuestButton onClick={this.openOauthFrame} />
+              : <UserButton user={user} setMenuOpened={this.setMenuOpened} />
+            }
+            {
+              (user && user.role && user.role !== 'guest' && menuOpened) &&
+              <UserMenu user={user} userLogout={userLogout} />
+            }
           </div>
-
-          <div className="control-sep" />
-
-          {
-            !user || user.role === ROLES.guest
-            ? <GuestButton onClick={this.openOauthFrame} />
-            : <UserButton user={user} />
-          }
         </div>
       </div>
     );

src/components/user/UserButton.jsx

@@ -2,16 +2,17 @@ import React from 'react';
 import { UserPicture } from '$components/user/UserPicture';
 
 export const UserButton = ({
-   user: {
-     id,
-     userdata: {
-       name,
-       photo,
-     }
+  setMenuOpened,
+  user: {
+   id,
+   userdata: {
+     name,
+     photo,
    }
+  }
 }) => (
   <div className="control-bar user-bar">
-    <div className="user-button">
+    <div className="user-button" onClick={setMenuOpened}>
       <UserPicture photo={photo} />
 
       <div className="user-button-fields">

src/components/user/UserMenu.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const UserMenu = ({ userLogout, user: { id, userdata: { agent, ip } } }) => (
+  <div className="user-panel-menu">
+    <div className="user-panel-text small">
+      <div>Мы храним следующие данные о вас:</div>
+      { id && <div><u>ID:</u> {id}</div> }
+      { agent && <div><u>Браузер:</u> {agent}</div> }
+      { ip && <div><u>Адрес:</u> {ip}</div> }
+      <div>Мы используем их для авторизации и исправления ошибок.</div>
+    </div>
+    <a className="user-panel-item gray" href="https://github.com/muerwre/orchidMap" target="_blank" rel="noopener noreferrer">
+      Проект на github
+    </a>
+    <div className="user-panel-item" onClick={userLogout}>
+      Выйти
+    </div>
+  </div>
+);