real login

4 files changed, 100 insertions, 31 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()
diff --git a/vnext/src/index.js b/vnext/src/index.js
index 963aa968..3a4fe494 100644
--- a/vnext/src/index.js
+++ b/vnext/src/index.js
@@ -11,9 +11,11 @@ import Footer from './components/Footer';
 class App extends React.Component {
   constructor(props) {
     super(props);
+    this.auth = this.auth.bind(this);
     this.state = {
       visitor: { uid: 0 }
     };
+    this.auth(window.localStorage.hash || '')
   }
   render() {
     return (
@@ -24,8 +26,8 @@ class App extends React.Component {
               <div id="header_wrapper">
                 {this.state.visitor.uid > 0 ?
                   <div id="ctitle">
-                    <a href="/{this.state.visitor.name}">
-                      <img src="//i.juick.com/a/{this.state.visitor.uid}.png" alt="" />{this.state.visitor.name}
+                    <a href={`/${this.state.visitor.uname}`}>
+                      <img src={`//i.juick.com/a/${this.state.visitor.uid}.png`} alt="" />{this.state.visitor.uname}
                     </a>
                   </div>
                   :
@@ -56,9 +58,9 @@ class App extends React.Component {
                 </nav>
               </div>
             </header>
-            <Route exact path="/" component={Discover} />
-            <Route path="/:user/:mid" component={Thread} />
-            <Route path="/post" component={Post} />
+            <Route exact path="/" render={(props) => <Discover visitor={this.state.visitor} {...props} />} />
+            <Route path="/:user/:mid" render={(props) => <Thread visitor={this.state.visitor} {...props} />} />
+            <Route path="/post" render={(props) => <Post visitor={this.state.visitor} {...props} />} />
           </div>
         </Router>
         <Footer />
@@ -66,7 +68,20 @@ class App extends React.Component {
     )
   }
   auth(data) {
-    console.log(data)
+    if (data) {
+      window.localStorage.hash = data;
+      fetch(`https://api.juick.com/users?hash=${data}`)
+        .then(response => {
+          return response.json()
+        })
+        .then(users => {
+          let visitor = users[0]
+          visitor.hash = data
+          this.setState({
+            visitor: visitor
+          })
+        })
+    }
   }
 }