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() {
+  state = {
-    window.doLogin = console.log;
+    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
+      props: { user, userLogout },
-    } = this.props;
+      state: { menuOpened },
+    } = this;
 
     return (
       <div>
         <div className="panel">
-          <div className="control-bar">
+          <div className="user-panel">
-            <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} />
+              : <UserButton user={user} setMenuOpened={this.setMenuOpened} />
             }
+            {
+              (user && user.role && user.role !== 'guest' && menuOpened) &&
+              <UserMenu user={user} userLogout={userLogout} />
+            }
+          </div>
         </div>
       </div>
     );

src/components/user/UserButton.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { UserPicture } from '$components/user/UserPicture';
 
 export const UserButton = ({
+  setMenuOpened,
   user: {
    id,
    userdata: {
@@ -11,7 +12,7 @@ export const UserButton = ({
   }
 }) => (
   <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>
+);

src/containers/App.jsx

@@ -66,7 +66,6 @@ export class App extends React.Component {
     const fallback = () => getGuestToken({ callback: this.setUser });
 
     if (id && token) {
-      console.log('checking');
       checkUserToken({
         callback: this.setUser,
         fallback,
@@ -79,11 +78,8 @@ export class App extends React.Component {
   };
 
   setUser = user => {
-    console.log('hup', user);
     if (!user.token || !user.id) return;
 
-    console.log('setting', user);
-
     this.setState({
       user: {
         ...DEFAULT_USER,
@@ -102,6 +98,16 @@ export class App extends React.Component {
     return getData('user') || null;
   };
 
+  userLogout = () => {
+    this.setState({
+      user: {
+        ...DEFAULT_USER,
+      }
+    });
+
+    this.storeUserData();
+  };
+
   render() {
     const {
       editor,
@@ -120,6 +126,7 @@ export class App extends React.Component {
         <UserPanel
           user={user}
           setUser={this.setUser}
+          userLogout={this.userLogout}
         />
 
         <EditorPanel

src/modules/Poly.js

@@ -41,7 +41,7 @@ export class Poly {
       const mid = middleCoord(latlngs[i], latlngs[i - 1]);
       const dist = findDistance(latlngs[i - 1].lat, latlngs[i - 1].lng, latlngs[i].lat, latlngs[i].lng);
 
-      if (dist <= 1.5) return;
+      if (dist <= 1) return;
 
       const slide = new L.Polyline(
         [

src/modules/Router.js

@@ -48,7 +48,6 @@ export class Router {
   //
   pushWaypointOnClick = ({ latlng: { lat, lng } }) => {
     const waypoints = this.router.getWaypoints().filter(({ latLng }) => !!latLng);
-    console.log('push', waypoints);
     this.router.setWaypoints([...waypoints, { lat, lng }]);
   };
 

src/sprites/icons_draft.svg

@@ -7,7 +7,6 @@
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="600"
@@ -26,9 +25,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:zoom="2.8284271"
+     inkscape:zoom="2"
-     inkscape:cx="-4.6277031"
+     inkscape:cx="-83.901329"
-     inkscape:cy="14.448652"
+     inkscape:cy="9.506994"
      inkscape:document-units="px"
      inkscape:current-layer="svg8"
      showgrid="false"
@@ -39,7 +38,7 @@
      inkscape:window-maximized="1"
      units="px"
      inkscape:showpageshadow="false"
-     inkscape:snap-global="true" />
+     inkscape:snap-global="false" />
   <metadata
      id="metadata5">
     <rdf:RDF>
@@ -57,59 +56,6 @@
      inkscape:groupmode="layer"
      id="layer1"
      transform="translate(0,-288.53332)" />
-  <image
-     sodipodi:absref="/Users/user/Desktop/Screen Shot 2018-08-24 at 10.18.53.png"
-     y="-102.07228"
-     x="-88.096359"
-     id="image4827"
-     xlink:href="file:///Users/user/Desktop/Screen%20Shot%202018-08-24%20at%2010.18.53.png"
-     preserveAspectRatio="none"
-     height="85.460419"
-     width="191.82292" />
-  <g
-     id="g4909"
-     transform="translate(-0.0543344,0.88815665)">
-    <path
-       sodipodi:nodetypes="ccccc"
-       inkscape:connector-curvature="0"
-       id="rect4855"
-       d="m 16.271875,-27.384377 h 4.266407 l -0.396875,4.29948 h -3.538803 z"
-       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.81110585;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
-    <rect
-       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.42985451;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647"
-       id="rect4857"
-       width="5.1924481"
-       height="0.99218786"
-       x="15.808854"
-       y="-28.938803" />
-    <path
-       inkscape:connector-curvature="0"
-       id="rect4879"
-       d="m 17.24555,-29.944984 v 1.122495 h 0.586422 v -0.659725 h 1.005136 v 0.659725 h 0.586422 v -1.122495 z"
-       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.50171793;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
-    <g
-       id="g4900">
-      <path
-         style="fill:#000000;fill-rule:evenodd;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 16.884753,-26.893092 0.187089,3.507912 h 0.537879 l -0.140315,-3.507912 z"
-         id="path4885"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="ccccc" />
-      <path
-         sodipodi:nodetypes="ccccc"
-         inkscape:connector-curvature="0"
-         id="path4887"
-         d="m 19.98341,-26.893092 -0.187089,3.507912 h -0.537879 l 0.140315,-3.507912 z"
-         style="fill:#000000;fill-rule:evenodd;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-      <rect
-         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.8209722;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647"
-         id="rect4889"
-         width="0.53787994"
-         height="3.4728332"
-         x="18.165142"
-         y="-26.881401" />
-    </g>
-  </g>
   <g
      id="icon-save"
      transform="translate(-64)">
@@ -494,7 +440,8 @@
        style="fill:#ececec;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
   </g>
   <g
-     id="icon-locate">
+     id="icon-locate"
+     transform="translate(-224)">
     <rect
        y="0"
        x="0"
@@ -529,4 +476,14 @@
        d="M 6.6291246,16.134291 H 10.871766"
        style="opacity:1;fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
   </g>
+  <g
+     id="g6048">
+    <rect
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647"
+       id="rect6036"
+       width="32"
+       height="32"
+       x="0"
+       y="0" />
+  </g>
 </svg>

src/styles/panel.less

@@ -176,3 +176,4 @@
     }
   }
 }
+

src/styles/user-button.less

@@ -1,5 +1,5 @@
 .user-bar {
-  width: 200px;
+  width: 240px;
 
   .button {
     width: 100%;
@@ -12,6 +12,7 @@
   display: flex;
 
   user-select: none;
+  cursor: pointer;
 }
 
 .user-button-picture {
@@ -41,7 +42,7 @@
 }
 
 .user-button-name {
-  font-size: 12px;
+  font-size: 14px;
 }
 
 .user-button-text {
@@ -50,3 +51,67 @@
   padding-top: 2px;
   font-weight: 200;
 }
+
+
+.user-panel {
+  position: relative;
+}
+
+.user-panel-menu {
+  position: absolute;
+  bottom: 45px;
+  left: 0;
+  width: 100%;
+  background: @dialog_background;
+  border-radius: 3px;
+  padding: 0 0 3px 0;
+  box-sizing: border-box;
+  z-index: -1
+}
+
+.user-panel-item {
+  padding: 10px 10px;
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+  transition: all 250ms;
+  color: white;
+  box-sizing: border-box;
+  user-select: none;
+  display: block;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  text-decoration: none;
+  font-weight: 200;
+
+  &:first-child::after {
+    border-radius: 3px 3px 0 0;
+  }
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(150deg, @blue_primary, @blue_secondary);
+    opacity: 0;
+    transition: opacity 0.3s;
+    z-index: -1;
+  }
+
+  &:hover::after {
+    opacity: 0.5;
+  }
+}
+
+.user-panel-text {
+  padding: 10px;
+  opacity: 0.5;
+  font-weight: 200;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+
+  div {
+    padding-top: 5px;
+  }
+}