login wip

5 files changed, 108 insertions, 122 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index bad57fc4..ea63ae18 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -10,7 +10,7 @@ import Contacts from './ui/Contacts';
 import Chat from './ui/Chat';
 import Post from './ui/Post';
 import Thread from './ui/Thread';
-import LoginButton from './ui/LoginButton';
+import Login from './ui/Login';
 import { UserLink } from './ui/UserInfo';
 import SearchBox from './ui/SearchBox';
 
@@ -22,7 +22,8 @@ export default function App() {
   let params = qs.parse(window.location.search.substring(1));
   if (params.hash) {
     cookie.save('hash', params.hash, { path: '/' });
-    window.history.replaceState({}, document.title, `${window.location.protocol}//${window.location.host}${window.location.pathname}`);
+    let retpath = params.retpath || `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
+    window.history.replaceState({}, document.title, retpath);
   }
   const [visitor, setVisitor] = useState({
     uid: 0
@@ -121,7 +122,10 @@ export default function App() {
                   <span className="desktop">Post</span>
                 </Link>
                 :
-                <LoginButton title="Login" onAuth={auth} />
+                <Link to={{ pathname: '/login', state: { retpath: window.location.pathname } }}>
+                  <Icon name="ei-user" size="s" />
+                  <span className="desktop">Login</span>
+                </Link>
               }
             </nav>
           </div>
@@ -136,6 +140,7 @@ export default function App() {
             <Route exact path="/settings" render={(props) =>
               <Settings visitor={visitor} {...props} onChange={auth} />
             } />
+            <Route exact path="/login" render={(props) => <Login visitor={visitor} {...props} onAuth={auth} />} />
             <Route exact path="/post" render={(props) => <Post visitor={visitor} {...props} />} />
             <Route exact path="/pm" render={(props) => <Contacts visitor={visitor} {...props} />} />
             <Route exact path="/pm/:user" render={(props) => <Chat connection={eventSource} visitor={visitor} {...props} />} />
diff --git a/vnext/src/ui/Modal.css b/vnext/src/ui/Login.css
index 931b9d81..30f107f5 100644
--- a/vnext/src/ui/Modal.css
+++ b/vnext/src/ui/Login.css
@@ -1,3 +1,5 @@
+@custom-media --viewport-desktop (width >=62.5rem);
+
 #dialogt {
     height: 100%;
     left: 0;
@@ -42,6 +44,12 @@
 .dialoglogin {
     background: #fff;
     padding: 25px;
+    margin: 0 auto;
+}
+@media (--viewport-desktop) {
+    .dialoglogin {
+        width: 300px;
+    }
 }
 .dialog-opened {
     overflow: hidden;
diff --git a/vnext/src/ui/Login.js b/vnext/src/ui/Login.js
new file mode 100644
index 00000000..649fadd4
--- /dev/null
+++ b/vnext/src/ui/Login.js
@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import ReactRouterPropTypes from 'react-router-prop-types';
+import { withRouter } from 'react-router-dom';
+
+import { UserType } from './Types';
+import Icon from './Icon';
+import Button from './Button';
+import Input from './Input';
+import { useFormState } from 'react-use-form-state';
+
+import { me, facebookLink, vkLink } from '../api';
+
+import './Login.css';
+
+function Login({ visitor, history, location, onAuth }) {
+
+    useEffect(() => {
+        if (visitor.hash) {
+            const {retpath } = location.state;
+            console.log(retpath);
+            history.push(retpath || '/');
+        }
+    }, [history, location.state, visitor]);
+
+    const [formState, { text, password }] = useFormState();
+
+    let onSubmit = (event) => {
+        event.preventDefault();
+        me(formState.values.username, formState.values.password)
+            .then(response => {
+                onAuth(response);
+            }
+            ).catch(ex => {
+                console.log(ex);
+            });
+    };
+    return (
+        <div className="msg-cont">
+            <div className="dialoglogin">
+                <p>Please, introduce yourself:</p>
+                <div style={socialButtonsStyle}>
+                    <a href={facebookLink()} style={facebookButtonStyle}>
+                        <Icon name="ei-sc-facebook" size="s" noFill={true} />Log in
+              </a>
+                    <a href={vkLink()} style={vkButtonStyle}>
+                        <Icon name="ei-sc-vk" size="s" noFill={true} />
+                        Log in
+             </a>
+                </div>
+                <p>Already registered?</p>
+                <form onSubmit={onSubmit}>
+                    <Input name="username"
+                        placeholder="Username..."
+                        value={formState.values.username} {...text('username')} /><br />
+                    <Input name="password"
+                        placeholder="Password..."
+                        value={formState.values.password} {...password('password')} /><br />
+                    <Button onClick={onSubmit}>OK</Button>
+                </form>
+            </div>
+        </div>
+    );
+}
+
+export default withRouter(Login);
+
+Login.propTypes = {
+    visitor: UserType,
+    history: ReactRouterPropTypes.history.isRequired,
+    location: ReactRouterPropTypes.location,
+    onAuth: PropTypes.func
+};
+
+const socialButtonsStyle = {
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    padding: '4px'
+};
+
+const facebookButtonStyle = {
+    color: '#fff',
+    padding: '2px 14px',
+    background: '#3b5998'
+};
+
+const vkButtonStyle = {
+    color: '#fff',
+    padding: '2px 14px',
+    background: '#4c75a3'
+};
diff --git a/vnext/src/ui/LoginButton.js b/vnext/src/ui/LoginButton.js
deleted file mode 100644
index cd26252e..00000000
--- a/vnext/src/ui/LoginButton.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import Icon from './Icon';
-import Modal from './Modal';
-import Button from './Button';
-import Input from './Input';
-import { useFormState } from 'react-use-form-state';
-
-import { me, facebookLink, vkLink } from '../api';
-
-function LoginButton({ onAuth, title }) {
-  const [open, setOpen] = useState(false);
-  const [formState, { text, password }] = useFormState();
-
-  let onToggle = (event) => {
-    if (event) {
-      event.preventDefault();
-    }
-    setOpen(!open);
-  };
-  let onSubmit = (event) => {
-    event.preventDefault();
-    me(formState.values.username, formState.values.password)
-      .then(response => {
-        onToggle();
-        onAuth(response);
-      }
-      ).catch(ex => {
-        console.log(ex);
-      });
-  };
-  return (
-    <>
-      <a onClick={onToggle}>
-        <Icon name="ei-user" size="s" />
-        <span className="desktop">{title}</span>
-      </a>
-      <Modal show={open}
-        onClose={onToggle}>
-        <div className="dialoglogin">
-          <p>Please, introduce yourself:</p>
-          <div style={socialButtonsStyle}>
-            <a href={facebookLink()} style={facebookButtonStyle}>
-              <Icon name="ei-sc-facebook" size="s" noFill={true} />Log in
-              </a>
-            <a href={vkLink()} style={vkButtonStyle}>
-              <Icon name="ei-sc-vk" size="s" noFill={true} />
-              Log in
-             </a>
-          </div>
-          <p>Already registered?</p>
-          <form onSubmit={onSubmit}>
-            <Input name="username"
-              placeholder="Username..."
-              value={formState.values.username} {...text('username')} /><br />
-            <Input name="password"
-              placeholder="Password..."
-              value={formState.values.password} {...password('password')} /><br />
-            <Button onClick={onSubmit}>OK</Button>
-          </form>
-        </div>
-      </Modal>
-    </>
-  );
-}
-
-LoginButton.propTypes = {
-  title: PropTypes.string.isRequired,
-  onAuth: PropTypes.func.isRequired
-};
-
-const socialButtonsStyle = {
-  display: 'flex',
-  justifyContent: 'space-evenly',
-  padding: '4px'
-};
-
-const facebookButtonStyle = {
-  color: '#fff',
-  padding: '2px 14px',
-  background: '#3b5998'
-};
-
-const vkButtonStyle = {
-  color: '#fff',
-  padding: '2px 14px',
-  background: '#4c75a3'
-};
-
-export default LoginButton;
diff --git a/vnext/src/ui/Modal.js b/vnext/src/ui/Modal.js
deleted file mode 100644
index 799a6f35..00000000
--- a/vnext/src/ui/Modal.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Icon from './Icon';
-
-import './Modal.css';
-
-function Modal(props) {
-    return props.show ? (
-        <div id="dialogt">
-            <div id="dialogw">
-                <div id="dialog_header">
-                    <div id="dialogc" onClick={props.onClose}>
-                        <Icon name="ei-close" size="s" />
-                    </div>
-                </div>
-                {props.children}
-            </div>
-        </div>
-    ) : (null);
-}
-
-export default React.memo(Modal);
-
-Modal.propTypes = {
-    onClose: PropTypes.func.isRequired,
-    show: PropTypes.bool,
-    children: PropTypes.node
-};