muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 02:56:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

user can logout

Browse source
This commit is contained in:
muerwre 2018-08-28 17:52:32 +07:00
parent e19001ca82
commit 8da254ff9b
9 changed files with 144 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/components/panels/UserPanel.jsx
View file

@ -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>
);

15
src/components/user/UserButton.jsx
View file

@ -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">

19
src/components/user/UserMenu.jsx Normal file
View file

@ -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>
);

15
src/containers/App.jsx
View file

@ -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

2
src/modules/Poly.js
View file

@ -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(
[

1
src/modules/Router.js
View file

@ -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 }]);
};

75
src/sprites/icons_draft.svg
View file

@ -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:cx="-4.6277031"
inkscape:cy="14.448652"
inkscape:zoom="2"
inkscape:cx="-83.901329"
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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Before After
Before After

1
src/styles/panel.less
View file

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

69
src/styles/user-button.less
View file

@ -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;
}
}