add sign in / out handlers

web/app/components/root/__auth-panel/root__auth-panel.scss

@@ -0,0 +1,3 @@
+.root__auth-panel {
+  margin-bottom: 4px;
+}

web/app/components/root/index.js

@@ -1,5 +1,6 @@
 export { default } from './root';
 
+require('./__auth-panel/root__auth-panel.scss');
 require('./__input/root__input.scss');
 require('./__pinned-comment/root__pinned-comment.scss');
 require('./__pinned-comments/root__pinned-comments.scss');

web/app/components/root/root.jsx

@@ -1,25 +1,26 @@
 import { h, Component } from 'preact';
 import api from 'common/api';
 
-import { url, id } from 'common/settings';
+import { baseUrl, url, id } from 'common/settings';
 import store from 'common/store';
 
+import AuthPanel from 'components/auth-panel';
 import Comment from 'components/comment';
 import Input from 'components/input';
 import Thread from 'components/thread';
 
-// api.getConfig().then(console.log.bind(console))
-// api.getUser().then(console.log.bind(console))
-
 export default class Root extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       loaded: false,
+      user: {},
     };
 
     this.addComment = this.addComment.bind(this);
+    this.onSignIn = this.onSignIn.bind(this);
+    this.onSignOut = this.onSignOut.bind(this);
   }
 
   componentWillMount() {
@@ -33,10 +34,46 @@ export default class Root extends Component {
       .finally(() => {
         api.find({ url })
           .then(({ comments } = {}) => store.set('comments', comments))
-          .finally(() => this.setState({ loaded: true }));
+          .finally(() => this.setState({
+            loaded: true,
+            user: store.get('user'),
+          }));
+
+        api.getConfig().then(config => {
+          store.set('config', config);
+          this.setState({ config });
+        })
       });
   }
 
+  onSignOut() {
+    api.logOut().then(() => {
+      store.set('user', {});
+      this.setState({ user: {} });
+    });
+  }
+
+  onSignIn(provider) {
+    const newWindow = window.open(`${baseUrl}/auth/${provider}/login?from=${location.href}`);
+
+    let secondsPass = 0;
+    const checkMsDelay = 200;
+    const checkInterval = setInterval(() => {
+      secondsPass += checkMsDelay;
+
+      if (newWindow.location.domain === location.domain || secondsPass > 30000) {
+        clearInterval(checkInterval);
+        newWindow.close();
+        api.getUser()
+          .then(data => {
+            store.set('user', data);
+            this.setState({ user });
+          })
+          .catch(() => {}) // TODO: we need to handle it and write error to user
+      }
+    }, checkMsDelay);
+  }
+
   addComment(data) {
     store.addComment(data);
     this.setState({ comments: store.get('comments') });
@@ -47,7 +84,7 @@ export default class Root extends Component {
     });
   }
 
-  render({}, { comments = [], user = {}, loaded }) {
+  render({}, { config, comments = [], user, loaded }) {
     if (!loaded) {
       return (
         <div id={id}>
@@ -62,6 +99,14 @@ export default class Root extends Component {
     return (
       <div id={id}>
         <div className="root root__loading" id={id}>
+          <AuthPanel
+            mix="root__auth-panel"
+            user={user}
+            providers={config.auth_providers}
+            onSignIn={this.onSignIn}
+            onSignOut={this.onSignOut}
+          />
+
           <Input
             mix="root__input"
             onSubmit={this.addComment}