aboutsummaryrefslogtreecommitdiff
path: root/vnext
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-04-04 15:52:11 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commit7f5b0fcb8dea585c79d23e27b1e21e72456029e5 (patch)
tree2bcc70363eea3d67764a674d0d6f30850a982457 /vnext
parentbd144e40af14a6cb8206b67412d0658257b0c049 (diff)
LoginButton using hooks, Input component
Diffstat (limited to 'vnext')
-rw-r--r--vnext/src/components/Input.css8
-rw-r--r--vnext/src/components/Input.js9
-rw-r--r--vnext/src/components/LoginButton.js112
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