aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--vnext/src/App.js11
-rw-r--r--vnext/src/ui/Login.css (renamed from vnext/src/ui/Modal.css)8
-rw-r--r--vnext/src/ui/Login.js92
-rw-r--r--vnext/src/ui/LoginButton.js90
-rw-r--r--vnext/src/ui/Modal.js29
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
-};