Components -> UI

1 files changed, 90 insertions, 0 deletions

diff --git a/vnext/src/ui/LoginButton.js b/vnext/src/ui/LoginButton.js
new file mode 100644
index 00000000..cd26252e
--- /dev/null
+++ b/vnext/src/ui/LoginButton.js
@@ -0,0 +1,90 @@
+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;