diff options
author | Vitaly Takmazov | 2019-07-10 18:58:52 +0300 |
---|---|---|
committer | Vitaly Takmazov | 2023-01-13 10:37:55 +0300 |
commit | c766a3aabba6fda6d9e7e13e39f8780226989fe6 (patch) | |
tree | 2233407d79bea2609a321c40b1843dae261eff2b /vnext/src/ui/Login.js | |
parent | cf9050f7d6fb61e0743bc9bc3ba2c26b2109cd33 (diff) |
login wip
Diffstat (limited to 'vnext/src/ui/Login.js')
-rw-r--r-- | vnext/src/ui/Login.js | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/vnext/src/ui/Login.js b/vnext/src/ui/Login.js new file mode 100644 index 00000000..649fadd4 --- /dev/null +++ b/vnext/src/ui/Login.js @@ -0,0 +1,92 @@ +import React, { useState, useEffect } from 'react'; +import PropTypes from 'prop-types'; + +import ReactRouterPropTypes from 'react-router-prop-types'; +import { withRouter } from 'react-router-dom'; + +import { UserType } from './Types'; +import Icon from './Icon'; +import Button from './Button'; +import Input from './Input'; +import { useFormState } from 'react-use-form-state'; + +import { me, facebookLink, vkLink } from '../api'; + +import './Login.css'; + +function Login({ visitor, history, location, onAuth }) { + + useEffect(() => { + if (visitor.hash) { + const {retpath } = location.state; + console.log(retpath); + history.push(retpath || '/'); + } + }, [history, location.state, visitor]); + + const [formState, { text, password }] = useFormState(); + + let onSubmit = (event) => { + event.preventDefault(); + me(formState.values.username, formState.values.password) + .then(response => { + onAuth(response); + } + ).catch(ex => { + console.log(ex); + }); + }; + return ( + <div className="msg-cont"> + <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> + </div> + ); +} + +export default withRouter(Login); + +Login.propTypes = { + visitor: UserType, + history: ReactRouterPropTypes.history.isRequired, + location: ReactRouterPropTypes.location, + onAuth: PropTypes.func +}; + +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' +}; |