diff options
| -rw-r--r-- | vnext/src/App.js | 11 | ||||
| -rw-r--r-- | vnext/src/ui/Login.css (renamed from vnext/src/ui/Modal.css) | 8 | ||||
| -rw-r--r-- | vnext/src/ui/Login.js | 92 | ||||
| -rw-r--r-- | vnext/src/ui/LoginButton.js | 90 | ||||
| -rw-r--r-- | vnext/src/ui/Modal.js | 29 |
5 files changed, 108 insertions, 122 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js index bad57fc4..ea63ae18 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -10,7 +10,7 @@ import Contacts from './ui/Contacts'; import Chat from './ui/Chat'; import Post from './ui/Post'; import Thread from './ui/Thread'; -import LoginButton from './ui/LoginButton'; +import Login from './ui/Login'; import { UserLink } from './ui/UserInfo'; import SearchBox from './ui/SearchBox'; @@ -22,7 +22,8 @@ export default function App() { let params = qs.parse(window.location.search.substring(1)); if (params.hash) { cookie.save('hash', params.hash, { path: '/' }); - window.history.replaceState({}, document.title, `${window.location.protocol}//${window.location.host}${window.location.pathname}`); + let retpath = params.retpath || `${window.location.protocol}//${window.location.host}${window.location.pathname}`; + window.history.replaceState({}, document.title, retpath); } const [visitor, setVisitor] = useState({ uid: 0 @@ -121,7 +122,10 @@ export default function App() { <span className="desktop">Post</span> </Link> : - <LoginButton title="Login" onAuth={auth} /> + <Link to={{ pathname: '/login', state: { retpath: window.location.pathname } }}> + <Icon name="ei-user" size="s" /> + <span className="desktop">Login</span> + </Link> } </nav> </div> @@ -136,6 +140,7 @@ export default function App() { <Route exact path="/settings" render={(props) => <Settings visitor={visitor} {...props} onChange={auth} /> } /> + <Route exact path="/login" render={(props) => <Login visitor={visitor} {...props} onAuth={auth} />} /> <Route exact path="/post" render={(props) => <Post visitor={visitor} {...props} />} /> <Route exact path="/pm" render={(props) => <Contacts visitor={visitor} {...props} />} /> <Route exact path="/pm/:user" render={(props) => <Chat connection={eventSource} visitor={visitor} {...props} />} /> diff --git a/vnext/src/ui/Modal.css b/vnext/src/ui/Login.css index 931b9d81..30f107f5 100644 --- a/vnext/src/ui/Modal.css +++ b/vnext/src/ui/Login.css @@ -1,3 +1,5 @@ +@custom-media --viewport-desktop (width >=62.5rem); + #dialogt { height: 100%; left: 0; @@ -42,6 +44,12 @@ .dialoglogin { background: #fff; padding: 25px; + margin: 0 auto; +} +@media (--viewport-desktop) { + .dialoglogin { + width: 300px; + } } .dialog-opened { overflow: hidden; 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' +}; diff --git a/vnext/src/ui/LoginButton.js b/vnext/src/ui/LoginButton.js deleted file mode 100644 index cd26252e..00000000 --- a/vnext/src/ui/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; diff --git a/vnext/src/ui/Modal.js b/vnext/src/ui/Modal.js deleted file mode 100644 index 799a6f35..00000000 --- a/vnext/src/ui/Modal.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import Icon from './Icon'; - -import './Modal.css'; - -function Modal(props) { - return props.show ? ( - <div id="dialogt"> - <div id="dialogw"> - <div id="dialog_header"> - <div id="dialogc" onClick={props.onClose}> - <Icon name="ei-close" size="s" /> - </div> - </div> - {props.children} - </div> - </div> - ) : (null); -} - -export default React.memo(Modal); - -Modal.propTypes = { - onClose: PropTypes.func.isRequired, - show: PropTypes.bool, - children: PropTypes.node -}; |