aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/ui/LoginButton.js
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/ui/LoginButton.js')
-rw-r--r--vnext/src/ui/LoginButton.js90
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;