diff options
author | 2018-06-16 21:37:35 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:52 +0300 | |
commit | 9177719daf40ca63b73f78602283902b3c615bae (patch) | |
tree | 67d5abf09069c62b77f1d27c2f5500dcdd348a05 /vnext/src/components | |
parent | 445f9d694df84bf6a4aedbeae47f8df7baa55c29 (diff) |
real login
Diffstat (limited to 'vnext/src/components')
-rw-r--r-- | vnext/src/components/Discover.js | 37 | ||||
-rw-r--r-- | vnext/src/components/LoginButton.js | 55 | ||||
-rw-r--r-- | vnext/src/components/Thread.js | 12 |
3 files changed, 79 insertions, 25 deletions
diff --git a/vnext/src/components/Discover.js b/vnext/src/components/Discover.js index fc1ab707..a0e51160 100644 --- a/vnext/src/components/Discover.js +++ b/vnext/src/components/Discover.js @@ -1,6 +1,7 @@ import 'whatwg-fetch'; import React from 'react'; import PropTypes from 'prop-types'; +import * as qs from 'query-string'; import Message from './Message'; import Spinner from './Spinner'; @@ -9,9 +10,7 @@ export default class Discover extends React.Component { constructor(props) { super(props); this.state = { - msgs: [], - loading: false, - search: this.props.location.search + msgs: [] }; this.loadMessages = this.loadMessages.bind(this); } @@ -19,27 +18,35 @@ export default class Discover extends React.Component { this.loadMessages(); } componentWillReceiveProps(nextProps) { - if (this.props.location.search != nextProps.location.search) { + if (this.props.location.search != nextProps.location.search + || this.props.visitor != nextProps.visitor) { this.loadMessages(nextProps.location.search) } } loadMessages(filter = '') { - this.setState({ msgs: []}) - const url = 'https://api.juick.com/messages' + filter; + this.setState({ msgs: [] }) + let params = qs.parse(filter) || {} + let url = 'https://api.juick.com/messages'; + if (this.props.visitor && this.props.visitor.hash) { + params.hash = this.props.visitor.hash; + } + if (Object.keys(params).length > 0) { + url = `${url}?${qs.stringify(params)}`; + } fetch(url) - .then(response => { - return response.json() - }) - .then(data => - this.setState({ msgs: data }) - ).catch(ex => { - console.log(ex); - }); + .then(response => { + return response.json() + }) + .then(data => + this.setState({ msgs: data }) + ).catch(ex => { + console.log(ex); + }); } render() { var nodes = this.state.msgs.map(msg => { - return (<Message key={msg.mid} data={msg}/>); + return (<Message key={msg.mid} data={msg} />); }); return this.state.msgs.length > 0 ? ( <div className="msgs" id="content">{nodes}</div> diff --git a/vnext/src/components/LoginButton.js b/vnext/src/components/LoginButton.js index c332de14..2016e853 100644 --- a/vnext/src/components/LoginButton.js +++ b/vnext/src/components/LoginButton.js @@ -7,29 +7,70 @@ import Modal from './Modal'; export default class LoginButton extends React.Component { constructor(props) { super(props); - this.state = { isOpen: false }; + this.state = { + isOpen: false, + username: '', + password: '' + }; + this.toggleModal = this.toggleModal.bind(this); } toggleModal(event) { - event.preventDefault() + 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 + }) + } + login(event) { + event.preventDefault(); + let headers = new Headers(); + headers.append('Authorization', 'Basic ' + window.btoa(this.state.username + ":" + this.state.password)); + fetch('https://api.juick.com/auth', { + method: 'GET', + credentials: 'omit', + headers: headers + }).then(response => { + return response.text() + }) + .then(data => { + this.toggleModal(); + this.props.onAuth(data); + } + ).catch(ex => { + console.log(ex); + }); + } render() { return ( <React.Fragment> - <a onClick={this.toggleModal.bind(this)}><Icon name="ei-user" size="s" />{this.props.title}</a> + <a onClick={this.toggleModal}><Icon name="ei-user" size="s" />{this.props.title}</a> <Modal show={this.state.isOpen} - onClose={this.toggleModal.bind(this)}> + onClose={this.toggleModal}> <div className="dialoglogin"> <p>Please, introduce yourself:</p> <a href="/_fblogin" id="signfb"><Icon name="ei-sc-facebook" size="s" />Login with facebook</a> <a href="/_vklogin" id="signvk"><Icon name="ei-sc-vk" size="s" />Login with VK</a> <p>Already registered?</p> - <form action="/login" method="POST"> - <input className="signinput" type="text" name="username" placeholder="Username..." /><br /> - <input className="signinput" type="password" name="password" placeholder="Password..." /><br /> + <form onSubmit={this.login.bind(this)}> + <input className="signinput" + type="text" + name="username" + placeholder="Username..." + value={this.state.username} onChange={this.usernameChanged.bind(this)} /><br /> + <input className="signinput" + type="password" name="password" + placeholder="Password..." + value={this.state.password} onChange={this.passwordChanged.bind(this)} /><br /> <input className="signsubmit" type="submit" value="OK" /> </form> </div> diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js index 5393d7d3..1a3ac862 100644 --- a/vnext/src/components/Thread.js +++ b/vnext/src/components/Thread.js @@ -1,5 +1,6 @@ import 'whatwg-fetch'; import React from 'react'; +import * as qs from 'query-string'; import Message from './Message'; import Spinner from './Spinner'; @@ -8,8 +9,7 @@ export default class Thread extends React.Component { constructor(props) { super(props); this.state = { - replies: [], - loading: false + replies: [] }; } componentDidMount() { @@ -18,7 +18,13 @@ export default class Thread extends React.Component { loadReplies() { this.setState({ replies: []}) const { mid } = this.props.match.params; - const url = `https://api.juick.com/thread?mid=${mid}`; + let params = { + mid: mid + } + if (this.props.visitor && this.props.visitor.hash) { + params.hash = this.props.visitor.hash + }; + const url = `https://api.juick.com/thread?${qs.stringify(params)}`; fetch(url) .then(response => { return response.json() |