diff options
author | Vitaly Takmazov | 2019-05-04 21:13:12 +0300 |
---|---|---|
committer | Vitaly Takmazov | 2023-01-13 10:37:54 +0300 |
commit | f470636a70943a8ecad8bddc791a1c2dddd28e1e (patch) | |
tree | c43d109d88adbde9a696084070cdd92c6b9a004b /vnext/src/components/LoginButton.js | |
parent | 3d7d213e3ddc5bf4f71d536f31677b768aa3b7c0 (diff) |
Components -> UI
Diffstat (limited to 'vnext/src/components/LoginButton.js')
-rw-r--r-- | vnext/src/components/LoginButton.js | 90 |
1 files changed, 0 insertions, 90 deletions
diff --git a/vnext/src/components/LoginButton.js b/vnext/src/components/LoginButton.js deleted file mode 100644 index cd26252e..00000000 --- a/vnext/src/components/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; |