now user can login

src/components/panels/EditorPanel.jsx

@@ -39,16 +39,6 @@ export class EditorPanel extends React.PureComponent {
 
         <LogoPreview logo={logo} />
 
-        <div className="panel">
-          <div className="control-bar">
-            <button
-              onClick={this.startShotterMode}
-            >
-              <span>РЕДАКТОР</span>
-            </button>
-          </div>
-        </div>
-
         <div className="panel right">
           <div className="control-dist">
             {totalDistance} км

src/components/panels/UserPanel.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+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';
+
+export class UserPanel extends React.PureComponent {
+  componentDidMount() {
+    window.doLogin = console.log;
+
+    window.addEventListener('message', e => {
+      const { data } = e;
+
+      if (!data || !data.type || data.type !== 'oauth_login' || !data.user || !data.user.id || !data.user.token) return;
+
+      const {
+        id, token, role = 'vk', name = '', ip = '', photo = '', agent = '',
+      } = data.user;
+
+      const user = {
+        ...DEFAULT_USER,
+        role,
+        id,
+        token,
+        userdata: {
+          name,
+          ip,
+          agent,
+          photo,
+        }
+      };
+
+      this.props.setUser(user);
+    });
+  }
+
+  openOauthFrame = () => {
+    const width = parseInt(window.innerWidth, 10);
+    const height = parseInt(window.innerHeight, 10);
+    const top = (height - 370) / 2;
+    const left = (width - 700) / 2;
+
+    window.open(
+      `https://oauth.vk.com/authorize?client_id=5987644&scope=&redirect_uri=${SERVER}/engine/oauthOrchid.php&response_type=code`,
+      'socialPopupWindow',
+      `location=no,width=700,height=370,scrollbars=no,top=${top},left=${left},resizable=no`
+    );
+  };
+
+  render() {
+    const {
+      user
+    } = this.props;
+
+    return (
+      <div>
+        <div className="panel">
+          <div className="control-bar">
+            <button
+              onClick={this.startShotterMode}
+            >
+              <Icon icon="icon-poly" />
+            </button>
+          </div>
+
+          <div className="control-sep" />
+
+          {
+            !user || user.role === ROLES.guest
+            ? <GuestButton onClick={this.openOauthFrame} />
+            : <UserButton user={user} />
+          }
+        </div>
+      </div>
+    );
+  }
+}

src/components/user/GuestButton.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const GuestButton = ({ onClick }) => (
+  <div className="control-bar user-bar">
+    <button
+      onClick={onClick}
+    >
+      <span>ВОЙТИ</span>
+    </button>
+  </div>
+);

src/components/user/UserButton.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { UserPicture } from '$components/user/UserPicture';
+
+export const UserButton = ({
+   user: {
+     id,
+     userdata: {
+       name,
+       photo,
+     }
+   }
+}) => (
+  <div className="control-bar user-bar">
+    <div className="user-button">
+      <UserPicture photo={photo} />
+
+      <div className="user-button-fields">
+        <div className="user-button-name">{(name || id || '...')}</div>
+        <div className="user-button-text">{(id || 'пользователь')}</div>
+      </div>
+    </div>
+  </div>
+);

src/components/user/UserPicture.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const UserPicture = ({ photo }) => (
+  <div
+    className="user-button-picture"
+    style={{
+      backgroundImage: `url(${photo})`
+    }}
+  />
+);