finish rudimentary auth flow

Server/api/auth.js

@@ -51,6 +51,10 @@ module.exports = (R, $) => {
   })
 
   R.get('/api/auth/redirect', ctx => {
-    ctx.redirect($.discord.getAuthUrl())
+    ctx.body = { url: $.discord.getAuthUrl() }
+  })
+
+  R.post('/api/auth/logout', ctx => {
+    ctx.session = null
   })
 }

Server/services/discord.js

@@ -92,6 +92,10 @@ class DiscordService extends Service {
   async getUser (authToken) {
     const url = 'https://discordapp.com/api/v6/users/@me'
     try {
+      if (authToken == null || authToken === '') {
+        throw new Error('not logged in')
+      }
+
       const rsp =
         await superagent
           .get(url)

UI/src/actions/index.js

@@ -20,6 +20,18 @@ export const userInit = async dispatch => {
 
     dispatch(fetchServers)
   } catch (e) {
-    console.log(e)
+    if (!window.location.pathname.startsWith('/oauth')) {
+      window.location.href = '/oauth/flow'
     }
   }
+}
+
+export const userLogout = async dispatch => {
+  await superagent.post('/api/auth/logout')
+
+  dispatch({
+    type: Symbol.for('reset user')
+  })
+
+  window.location.href = '/'
+}

UI/src/components/oauth-callback/index.js

@@ -1,7 +1,10 @@
 import React, { Component } from 'react'
 import { Redirect } from 'react-router-dom'
 import superagent from 'superagent'
+import { connect } from 'react-redux'
+import { fetchServers } from '../../actions'
 
+@connect()
 class OauthCallback extends Component {
   state = {
     notReady: true,
@@ -18,14 +21,35 @@ class OauthCallback extends Component {
       return
     } 
 
-
     this.props.history.replace(this.props.location.pathname)
     
+    let counter = 0    
+    const retry = async () => {
+      try {
+        const rsp = await superagent.get('/api/auth/user')
+        this.setState({ notReady: false })
+        this.props.dispatch({
+          type: Symbol.for('set user'),
+          data: rsp.body
+        })
+        this.props.dispatch(fetchServers)
+      } catch (e) {
+        counter++
+        if (counter > 12) {
+          this.setState({ message: "i couldn't log you in. :c" })
+        } else {
+          setTimeout(() => { retry() }, 250) 
+        }
+      }
+    }
+
     // pass token to backend, await it to finish it's business.
     try {
-      const rsp = await superagent.post('/api/auth/token').send({ token })
+      await superagent.post('/api/auth/token').send({ token })
-      this.setState({ notReady: false })
+      // this.props.onLogin(rsp.body)
-      this.props.onLogin(rsp.body)
+      
+      retry()
+
     } catch (e) {
       console.error('token pass error', e)
       this.setState({ message: 'g-gomen nasai... i broke it...' })

UI/src/components/oauth-flow/index.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import { Redirect } from 'react-router-dom'
+import superagent from 'superagent'
+import { connect } from 'react-redux'
+import { fetchServers } from '../../actions'
+
+@connect()
+class OauthCallback extends Component {
+  state = {
+    notReady: true,
+    message: 'chotto matte kudasai...'
+  }
+
+  async componentDidMount () {
+    const { body: { url } } = await superagent.get('/api/auth/redirect')
+    try {
+      const rsp = await superagent.get('/api/auth/user')
+      this.props.dispatch({
+        type: Symbol.for('set user'),
+        data: rsp.body
+      })
+      this.props.dispatch(fetchServers)
+      this.setState({ notReady: false })
+    } catch (e) {
+      window.location.href = url
+    }
+  }
+
+  render () {
+    return (this.state.notReady) ? this.state.message : <Redirect to='/s' />
+  }
+}
+
+export default OauthCallback

UI/src/components/servers/UserCard.js

@@ -1,8 +1,11 @@
 import React, { Component } from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { NavLink } from 'react-router-dom'
+import { connect } from 'react-redux'
+import * as Actions from '../../actions'
 import './UserCard.sass'
 
+@connect()
 class UserCard extends Component {
   static propTypes = {
     user: ImmutablePropTypes.map
@@ -33,7 +36,7 @@ class UserCard extends Component {
       </div>
       <div className='user-card__actions'>
         <ul className='uk-iconnav uk-iconnav-vertical'>
-          <li><NavLink uk-tooltip='' title='Sign out' uk-icon='icon: sign-out' to='/auth/signout' activeClassName='uk-active' /></li>
+          <li><a uk-tooltip='' title='Sign out' uk-icon='icon: sign-out' onClick={() => { this.props.dispatch(Actions.userLogout) }} /></li>
           {
             (this.props.user.isRoot === true)
               ? <li><NavLink uk-tooltip='' title='Root' uk-icon='icon: bolt' to='/root/' activeClassName='uk-active' /></li>

UI/src/components/servers/index.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import { Route } from 'react-router-dom'
 import { connect } from 'react-redux'
-import superagent from 'superagent'
 import './index.sass'
 
 import Navigation from './Navigation'

UI/src/components/wrapper/index.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
-import Radium from 'radium'
 import Logotype from '../logotype'
 import styles from './styles'
 import './wrapper.css'
@@ -22,11 +21,13 @@ class Wrapper extends Component {
           </div>
         </nav>
         <main>
-          {this.props.children}
+          {
+            this.props.children
+          }
         </main>
       </div>
     </div>
   }
 }
 
-export default Radium(Wrapper)
+export default Wrapper

UI/src/reducers/user.js

@@ -1,6 +1,7 @@
 import { Map } from 'immutable'
 
 const initialState = Map({
+  isLoggedIn: false,
   username: 'あたし',
   discriminator: '0001',
   id: '',
@@ -9,9 +10,11 @@ const initialState = Map({
 
 export default (state = initialState, { type, data }) => {
   switch (type) {
-
     case Symbol.for('set user'):
-      return Map(data)
+      return Map({...data, isLoggedIn: true})
+
+    case Symbol.for('reset user'):
+      return initialState
     
     default:
       return state

UI/src/router/index.js

@@ -3,6 +3,7 @@ import { Route } from 'react-router-dom'
 
 import Servers from '../components/servers'
 import OauthCallback from '../components/oauth-callback'
+import OauthFlow from '../components/oauth-flow'
 
 const aaa = (props) => (<div>{ JSON.stringify(props) }</div>)
 
@@ -13,6 +14,7 @@ export default class AppRouter extends Component {
       <Route path='/s' component={Servers} />
       <Route path='/root' component={aaa} />
       <Route path='/oauth/callback' component={OauthCallback} />
+      <Route path='/oauth/flow' component={OauthFlow} />
     </Fragment>
   }
 }