diff options
author | 2019-05-04 21:13:12 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | f470636a70943a8ecad8bddc791a1c2dddd28e1e (patch) | |
tree | c43d109d88adbde9a696084070cdd92c6b9a004b /vnext/src/ui/LoginButton.js | |
parent | 3d7d213e3ddc5bf4f71d536f31677b768aa3b7c0 (diff) |
Components -> UI
Diffstat (limited to 'vnext/src/ui/LoginButton.js')
-rw-r--r-- | vnext/src/ui/LoginButton.js | 90 |
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; |