1 files changed, 92 insertions, 0 deletions
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'
+};