From c766a3aabba6fda6d9e7e13e39f8780226989fe6 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Wed, 10 Jul 2019 18:58:52 +0300
Subject: login wip

---
 vnext/src/App.js            |  11 +++--
 vnext/src/ui/Login.css      | 103 ++++++++++++++++++++++++++++++++++++++++++++
 vnext/src/ui/Login.js       |  92 +++++++++++++++++++++++++++++++++++++++
 vnext/src/ui/LoginButton.js |  90 --------------------------------------
 vnext/src/ui/Modal.css      |  95 ----------------------------------------
 vnext/src/ui/Modal.js       |  29 -------------
 6 files changed, 203 insertions(+), 217 deletions(-)
 create mode 100644 vnext/src/ui/Login.css
 create mode 100644 vnext/src/ui/Login.js
 delete mode 100644 vnext/src/ui/LoginButton.js
 delete mode 100644 vnext/src/ui/Modal.css
 delete mode 100644 vnext/src/ui/Modal.js

(limited to 'vnext/src')

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/Login.css b/vnext/src/ui/Login.css
new file mode 100644
index 00000000..30f107f5
--- /dev/null
+++ b/vnext/src/ui/Login.css
@@ -0,0 +1,103 @@
+@custom-media --viewport-desktop (width >=62.5rem);
+
+#dialogt {
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+#dialogw {
+    z-index: 11;
+    max-width: 96%;
+    max-height: calc(100% - 100px);
+    background-color: #fff;
+}
+#dialogw a {
+    display: block;
+}
+#dialogw img {
+    max-height: 100%;
+    max-height: 90vh;
+    max-width: 100%;
+}
+#dialog_header {
+    width: 100%;
+    height: 44px;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+}
+.header_image {
+    background: rgba(0, 0, 0, 0.28);
+}
+#dialogc {
+    cursor: pointer;
+    color: #ccc;
+    padding-right: 6px;
+}
+.dialoglogin {
+    background: #fff;
+    padding: 25px;
+    margin: 0 auto;
+}
+@media (--viewport-desktop) {
+    .dialoglogin {
+        width: 300px;
+    }
+}
+.dialog-opened {
+    overflow: hidden;
+}
+#signemail,
+#signfb,
+#signvk {
+    display: block;
+    line-height: 32px;
+    margin: 10px 0;
+    text-decoration: none;
+    width: 100%;
+}
+#signvk {
+    margin-bottom: 30px;
+}
+.dialoglogin form {
+    margin-top: 7px;
+}
+.signinput,
+.signsubmit {
+    border: 1px solid #CCC;
+    margin: 3px 0;
+    padding: 3px;
+}
+.signsubmit {
+    width: 70px;
+}
+.dialogshare {
+    background: #fff;
+    min-width: 300px;
+    overflow: auto;
+    padding: 20px;
+}
+.dialogl {
+    background: #fff;
+    border: 1px solid #DDD;
+    margin: 3px 0 20px;
+    padding: 5px;
+}
+.dialogshare li {
+    float: left;
+    margin: 5px 10px 0 0;
+}
+.dialogshare a {
+    display: block;
+}
+.dialogtxt {
+    background: #fff;
+    padding: 20px;
+}
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.css b/vnext/src/ui/Modal.css
deleted file mode 100644
index 931b9d81..00000000
--- a/vnext/src/ui/Modal.css
+++ /dev/null
@@ -1,95 +0,0 @@
-#dialogt {
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(0, 0, 0, 0.3);
-}
-#dialogw {
-    z-index: 11;
-    max-width: 96%;
-    max-height: calc(100% - 100px);
-    background-color: #fff;
-}
-#dialogw a {
-    display: block;
-}
-#dialogw img {
-    max-height: 100%;
-    max-height: 90vh;
-    max-width: 100%;
-}
-#dialog_header {
-    width: 100%;
-    height: 44px;
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: center;
-}
-.header_image {
-    background: rgba(0, 0, 0, 0.28);
-}
-#dialogc {
-    cursor: pointer;
-    color: #ccc;
-    padding-right: 6px;
-}
-.dialoglogin {
-    background: #fff;
-    padding: 25px;
-}
-.dialog-opened {
-    overflow: hidden;
-}
-#signemail,
-#signfb,
-#signvk {
-    display: block;
-    line-height: 32px;
-    margin: 10px 0;
-    text-decoration: none;
-    width: 100%;
-}
-#signvk {
-    margin-bottom: 30px;
-}
-.dialoglogin form {
-    margin-top: 7px;
-}
-.signinput,
-.signsubmit {
-    border: 1px solid #CCC;
-    margin: 3px 0;
-    padding: 3px;
-}
-.signsubmit {
-    width: 70px;
-}
-.dialogshare {
-    background: #fff;
-    min-width: 300px;
-    overflow: auto;
-    padding: 20px;
-}
-.dialogl {
-    background: #fff;
-    border: 1px solid #DDD;
-    margin: 3px 0 20px;
-    padding: 5px;
-}
-.dialogshare li {
-    float: left;
-    margin: 5px 10px 0 0;
-}
-.dialogshare a {
-    display: block;
-}
-.dialogtxt {
-    background: #fff;
-    padding: 20px;
-}
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
-};
-- 
cgit v1.2.3