login wip

4 files changed, 100 insertions, 119 deletions

diff --git a/vnext/src/ui/Modal.css b/vnext/src/ui/Login.css
index 931b9d819..30f107f5e 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 000000000..649fadd42
--- /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 cd26252e2..000000000
--- 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 799a6f357..000000000
--- 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
-};