Commit 6b0dcf8d authored by Andreas Åkre Solberg's avatar Andreas Åkre Solberg

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

parent 59278c1c
......@@ -7,6 +7,9 @@ const actionCreators = createActions({
},
serverConfig: {
save: config => (config)
},
tokens: {
save: x => (x)
}
});
......
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
......@@ -50,7 +50,6 @@ class Component extends PureComponent {
}
render() {
console.log("This state", this.props)
let errorMessage = null
if (this.props.serverError) {
errorMessage = (
......
......@@ -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>
......
......@@ -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>
......
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
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
......@@ -9,6 +9,7 @@ const mapStateToProps = (state) => ({
const mapDispatchToProps = {
authenticateStart: API.authenticate,
logoutStart: API.logout
}
const Controller = connect(
......
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
......@@ -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())
......@@ -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
})
}
},
{
......
......@@ -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))
})
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment