Add token viewer and http fetcher. add logout and make callback work.

src/actions/index.js

@@ -7,6 +7,9 @@ const actionCreators = createActions({
   },
   serverConfig: {
     save: config => (config)
+  },
+  tokens: {
+    save: x => (x)
   }
 });
 

src/components/HTTPFetchView.jsx

+import React, { PureComponent } from 'react'
+import {Navbar, Nav, NavItem, NavDropdown, MenuItem, Glyphicon, Jumbotron, Button} from 'react-bootstrap'
+import {Row, Col, Collapse, FormControl, FormGroup, ControlLabel, HelpBlock, PanelGroup, Panel} from 'react-bootstrap'
+import FontAwesome from 'react-fontawesome'
+
+import HostnameController from '../containers/HostnameController'
+import ServerConfigController from '../containers/ServerConfigController'
+import WhiteBox from './WhiteBox'
+
+
+import moment from 'moment'
+import 'moment/locale/nb';
+// import 'moment/locale/en';
+
+moment.locale("en");
+
+
+export function expiresText(expires) {
+  var expiresM = moment.unix(expires)
+  return expiresM.fromNow()
+}
+
+class Component extends PureComponent {
+
+  updateAPIendpoint() {
+
+
+  }
+
+  fetchUserinfo() {
+    let endpoint = "";
+
+  }
+
+  fetchCustom() {
+
+  }
+
+  render() {
+    console.error("Component", this.props)
+
+    if (!this.props.token) {
+      return (
+        <p>Not ready. No token found.</p>
+      )
+    }
+
+
+
+    let userinfo = null
+    if (this.props.serverConfig.userinfo_endpoint) {
+      userinfo = (
+        <div>
+          <p>Fetch userinfo from <code>{this.props.serverConfig.userinfo_endpoint}</code></p>
+          <Button onClick={this.fetchUserinfo.bind(this)} bsStyle="default">
+            <FontAwesome name='arrow-circle-o-right' /> Get userinfo
+          </Button>
+        </div>
+      )
+    }
+
+    return (
+      <Panel header="HTTP Client using OAuth Access Token" eventKey="1" collapsible={true} expanded={true}>
+
+        {userinfo}
+
+        <div>
+          <p>Fetch userinfo from</p>
+          <FormGroup
+            className="gutter"
+            controlId="formBasicText"
+          >
+            <FormControl
+              type="text"
+              bsSize="large"
+              placeholder="http://httpjs.net/foo"
+              onChange={this.updateAPIendpoint.bind(this)}
+            />
+            <HelpBlock>Fill out the hostname of your OAuth server. Will only work if your OAuth server support OpenID Connect Discovery. If not, please enter configuration manually.</HelpBlock>
+          </FormGroup>
+
+          <Button onClick={this.fetchCustom.bind(this)} bsStyle="default">
+            <FontAwesome name='arrow-circle-o-right' /> Perform HTTP call
+          </Button>
+        </div>
+
+      </Panel>
+    )
+  }
+
+
+}
+
+export default Component

src/components/HostnameInput.jsx

@@ -50,7 +50,6 @@ class Component extends PureComponent {
   }
 
   render() {
-    console.log("This state", this.props)
     let errorMessage = null
     if (this.props.serverError) {
       errorMessage = (

src/components/MainContent.jsx

@@ -4,6 +4,8 @@ import {Row, Col, Collapse, FormControl, FormGroup, ControlLabel, HelpBlock, Pan
 
 import HostnameController from '../containers/HostnameController'
 import ServerConfigController from '../containers/ServerConfigController'
+import TokenViewContainer from '../containers/TokenViewContainer'
+import HTTPFetchContainer from '../containers/HTTPFetchContainer'
 import WhiteBox from './WhiteBox'
 
 
@@ -24,9 +26,9 @@ const MainContent = () => (
       <WhiteBox>
 
         <HostnameController />
-
         <ServerConfigController />
-
+        <TokenViewContainer />
+        <HTTPFetchContainer />
 
       </WhiteBox>
 

src/components/ServerConfigInput.jsx

@@ -20,10 +20,14 @@ class Component extends PureComponent {
   authenticateStart() {
 
     let config = Object.assign({}, this.props.serverConfig, this.state)
-    console.error("Authenticate", config)
+    console.error("Authenticate", config, this.props.serverConfig, this.state)
     this.props.authenticateStart(config)
   }
 
+  logoutStart() {
+    this.props.logoutStart()
+  }
+
   updateFieldHandler(field) {
     return (e) => {
       this.setState({
@@ -34,7 +38,7 @@ class Component extends PureComponent {
 
 
   render() {
-    console.log("X This state", this.props)
+    console.log("X This props", this.props)
     console.log("X This state", this.state)
 
     let authorizationEndpoint = ''
@@ -84,6 +88,10 @@ class Component extends PureComponent {
             <Button onClick={this.authenticateStart.bind(this)} bsStyle="primary">
               <FontAwesome name='sign-in' /> Authenticate
             </Button>
+            &nbsp;
+            <Button onClick={this.logoutStart.bind(this)} bsStyle="danger">
+              <FontAwesome name='sign-out' /> Wipe token
+            </Button>
           </div>
         </form>
       </Panel>

src/components/TokenView.jsx

+import React, { PureComponent } from 'react'
+import {Navbar, Nav, NavItem, NavDropdown, MenuItem, Glyphicon, Jumbotron, Button} from 'react-bootstrap'
+import {Row, Col, Collapse, FormControl, FormGroup, ControlLabel, HelpBlock, PanelGroup, Panel} from 'react-bootstrap'
+
+import HostnameController from '../containers/HostnameController'
+import ServerConfigController from '../containers/ServerConfigController'
+import WhiteBox from './WhiteBox'
+
+
+import moment from 'moment'
+import 'moment/locale/nb';
+// import 'moment/locale/en';
+
+moment.locale("en");
+
+
+export function expiresText(expires) {
+  var expiresM = moment.unix(expires)
+  return expiresM.fromNow()
+}
+
+class Component extends PureComponent {
+
+  render() {
+    console.error("Component", this.props)
+
+    if (!this.props.token) {
+      return (
+        <p>No token</p>
+      )
+    }
+
+    let extxt = expiresText(this.props.token.expires)
+
+    return (
+      <Panel header="Access Token" eventKey="1" collapsible={true} expanded={true}>
+
+        <p>This access token expires {extxt}</p>
+        <pre>{this.props.tokenstring}</pre>
+
+      </Panel>
+    )
+  }
+
+
+}
+
+export default Component

src/containers/HTTPFetchContainer.js

+import { connect } from 'react-redux'
+import Component from '../components/HTTPFetchView'
+// import { discoveryStart } from '../actions/'
+// import API from '../utils/API'
+import API from '../utils/API'
+
+const mapStateToProps = (state) => ({
+  serverConfig: state.serverConfig,
+  token: state.token
+})
+
+const mapDispatchToProps = {
+  httpRequest: API.httpRequest,
+}
+
+const Controller = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Component)
+
+export default Controller

src/containers/ServerConfigController.js

@@ -9,6 +9,7 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = {
   authenticateStart: API.authenticate,
+  logoutStart: API.logout
 }
 
 const Controller = connect(

src/containers/TokenViewContainer.js

+import { connect } from 'react-redux'
+import TokenView from '../components/TokenView'
+// import { discoveryStart } from '../actions/'
+// import API from '../utils/API'
+
+const mapStateToProps = (state) => ({
+  token: state.token,
+  tokenstring: JSON.stringify(state.token, undefined, 2)
+})
+
+const mapDispatchToProps = {
+}
+
+const Controller = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TokenView)
+
+export default Controller

src/index.js

@@ -37,7 +37,7 @@ let store = createStore(
   )
 )
 
-store.dispatch(API.callback())
+
 
 // const state = store.getState()
 // if (!state.auth.user.token) {
@@ -71,3 +71,5 @@ ReactDOM.render((
   ),
   document.getElementById('app')
 )
+
+store.dispatch(API.callback())

src/reducers/index.js

@@ -19,10 +19,16 @@ const reducer = handleActions({
     }
   },
   serverConfig: {
-    save: (config) => ({
-      serverConfig: config.serverConfig,
+    save: (state, action) => ({
+      serverConfig: action.payload,
       serverError: null
     })
+  },
+  tokens: {
+    save: (state, action) => ({
+      token: action.payload,
+      ...state
+    })
   }
 },
 {

src/utils/API.js

@@ -35,6 +35,35 @@ const API = {
     }
   },
 
+  "httpRequest": function() {
+    return dispatch => {
+      dispatch(actions.discovery.start(null))
+
+      let url = '/.well-known/openid-configuration'
+      let config = {"headers": {}}
+      // config.headers.Authorization = 'Bearer ' + token.access_token
+      // config.headers["original-token"] = token.access_token
+      config.method = "GET"
+      config.mode = "cors"
+      console.log("About to fetch", config)
+
+      return fetch(url, config).then((response) => {
+        if (response.ok) {
+          return response.json()
+        }
+        throw Error(response.statusText)
+      })
+        .then((data) => {
+          console.log("DATA", data)
+          dispatch(actions.discovery.completed(data))
+        })
+        .catch((err) => {
+          console.error("ERROR Fetching API Discovery", err)
+          dispatch(actions.discovery.completed(err))
+        })
+    }
+  },
+
   "authenticate": function(config) {
     return dispatch => {
       console.error("About to save config", JSON.stringify(config, undefined, 3))
@@ -53,17 +82,52 @@ const API = {
         appJSO = new jso(jsoconfig)
         appJSO.getToken((token) => {
           console.error("Got token, ayay", token)
+          dispatch(actions.tokens.save(token))
         })
       }, 1000)
 
     }
   },
 
+  "logout": function() {
+    return (dispatch, getState) => {
+      var state = getState()
+      const jsoconfig = {
+        providerID: "oauthPlay",
+        client_id: state.serverConfig.clientId,
+        redirect_uri: state.serverConfig.redirectURL,
+        authorization: state.serverConfig.authorization_endpoint
+        // scopes: { request: ["userinfo"]}
+      }
+      console.error("About to logout with ", jsoconfig)
+      appJSO = new jso(jsoconfig)
+      appJSO.wipeTokens()
+      dispatch(actions.tokens.save(null))
+    }
+  },
+
   "callback": function() {
     return (dispatch, getState) => {
       var state = getState()
-      console.error("Callback", state)
-      // appJSO.callback()
+
+      if (!state || !state.serverConfig || !state.serverConfig.clientId) {
+        console.error("CANNOT DO CALLBACK BECAUSE CLIENDIT is missing...", state)
+        return
+      }
+      console.error(". STATE STATE STATE ", state)
+      const jsoconfig = {
+        providerID: "oauthPlay",
+        client_id: state.serverConfig.clientId,
+        redirect_uri: state.serverConfig.redirectURL,
+        authorization: state.serverConfig.authorization_endpoint
+        // scopes: { request: ["userinfo"]}
+      }
+      console.error(". Initialising oauth callback", jsoconfig)
+      appJSO = new jso(jsoconfig)
+      appJSO.callback(undefined, (token) => {
+        console.error(" ====) (===== Got token, ayay", token)
+        dispatch(actions.tokens.save(token))
+      })
     }
   }