diff options
author | 2019-04-04 15:52:11 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | 7f5b0fcb8dea585c79d23e27b1e21e72456029e5 (patch) | |
tree | 2bcc70363eea3d67764a674d0d6f30850a982457 /vnext/src | |
parent | bd144e40af14a6cb8206b67412d0658257b0c049 (diff) |
LoginButton using hooks, Input component
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/components/Input.css | 8 | ||||
-rw-r--r-- | vnext/src/components/Input.js | 9 | ||||
-rw-r--r-- | vnext/src/components/LoginButton.js | 112 |
3 files changed, 64 insertions, 65 deletions
diff --git a/vnext/src/components/Input.css b/vnext/src/components/Input.css new file mode 100644 index 00000000..acb878d9 --- /dev/null +++ b/vnext/src/components/Input.css @@ -0,0 +1,8 @@ +.input { + background: #FFF; + border: 1px solid #ccc; + outline: none !important; + padding: 4px; + -webkit-appearance: none; + border-radius: 0; +}
\ No newline at end of file diff --git a/vnext/src/components/Input.js b/vnext/src/components/Input.js new file mode 100644 index 00000000..5c150ec3 --- /dev/null +++ b/vnext/src/components/Input.js @@ -0,0 +1,9 @@ +import React from 'react'; + +import './Input.css'; + +function Input({ name, value, ...rest }) { + return(<input class="input" name={name} value={value} {...rest} />) +} + +export default React.memo(Input);
\ No newline at end of file diff --git a/vnext/src/components/LoginButton.js b/vnext/src/components/LoginButton.js index c25b0e81..92be22b8 100644 --- a/vnext/src/components/LoginButton.js +++ b/vnext/src/components/LoginButton.js @@ -1,88 +1,68 @@ -import React from 'react'; +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'; -export default class LoginButton extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false, - username: '', - password: '' - }; - } - toggleModal = (event) => { +function LoginButton({ onAuth, title }) { + + const [open, setOpen] = useState(false); + const [formState, { text, password }] = useFormState(); + + let onToggle = (event) => { if (event) { event.preventDefault(); } - this.setState({ - isOpen: !this.state.isOpen - }); - } - usernameChanged = (event) => { - this.setState({ - username: event.target.value - }); - } - passwordChanged = (event) => { - this.setState({ - password: event.target.value - }); + setOpen(!open); } - login = (event) => { + let onSubmit = (event) => { event.preventDefault(); - me(this.state.username, this.state.password) + me(formState.values.username, formState.values.password) .then(response => { - this.toggleModal(); - this.props.onAuth(response); + onToggle(); + onAuth(response); } ).catch(ex => { console.log(ex); }); - } - - render() { - return ( - <> - <a onClick={this.toggleModal}> - <Icon name="ei-user" size="s" /> - <span className="desktop">{this.props.title}</span> - </a> - <Modal show={this.state.isOpen} - onClose={this.toggleModal}> - <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 + } + 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 href={vkLink()} style={vkButtonStyle}> + <Icon name="ei-sc-vk" size="s" noFill={true} /> + Log in </a> - </div> - <p>Already registered?</p> - <form onSubmit={this.login}> - <input className="signinput" - type="text" - name="username" - placeholder="Username..." - value={this.state.username} onChange={this.usernameChanged} /><br /> - <input className="signinput" - type="password" name="password" - placeholder="Password..." - value={this.state.password} onChange={this.passwordChanged} /><br /> - <Button onClick={this.login}>OK</Button> - </form> </div> - </Modal> - </> - ); - } + <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 = { @@ -107,3 +87,5 @@ const vkButtonStyle = { padding: '2px 14px', background: '#4c75a3' }; + +export default LoginButton;
\ No newline at end of file |