\n
\n
\n
\n XR Content Management Portal
\n \n \n
\n);\n\n\n\nconst Footer = ({ style }) =>\n
\n \n ARQTEN © 2024 Real Serious Games
\n Unauthorised access prohibited.
\n \n ;\n\n\n\n\n\n\nclass HomeBase extends Component {\n\n constructor(props) {\n super(props);\n\n this.state = { user: null, isLoading: false };\n\n this.load = this.load.bind(this);\n }\n\n componentDidMount() {\n this.mounted = true;\n this.load();\n }\n\n componentDidUpdate(prevProps, prevState, snapshot) {\n const { tendrilApi } = this.props;\n const { claims } = tendrilApi;\n if (claims && claims !== prevProps.tendrilApi.claims) {\n this.load();\n }\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n\n\n async load() {\n const { tendrilApi } = this.props;\n const { claims, functions } = tendrilApi;\n\n try {\n this.setState({ user: null, isLoading: true });\n const userId = claims[\"http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier\"];\n const user = await functions.fetch(`/api/user/${userId}`);\n if (this.mounted) {\n this.setState({ user });\n }\n }\n catch (e) {\n console.log(e);\n }\n if (this.mounted) { this.setState({ isLoading: false }); }\n }\n\n\n\n\n render() {\n\n const { tendrilApi, history } = this.props;\n const { claims, functions } = tendrilApi;\n const { user, isLoading } = this.state;\n\n return (\n
\n\n
\n\n {!claims &&\n
\n \n \n \n }\n\n\n {claims && !isLoading && user &&\n
\n\n \n\n
\n
\n
\n\n {!(user.isRsgUser || user.customers.length > 0) &&\n \n Although you have a Tendril account, you have not been granted access to any areas.
\n Please contact your administrator or Real Serious Games.
\n Once access has been granted, either reload this page or log out and log in for changes to take effect.
\n }\n />}\n\n\n\n\n {user.isRsgUser &&\n history.push(\"/admin\")} padded='very'>\n \n \n }\n\n {user.customers.map(c => (\n history.push(`/customer/${c.customerOrgCode}`)} padded='very'>\n \n ))}\n\n \n
\n }\n
\n );\n }\n}\n\nexport const Home = withTendrilApi(HomeBase);\n","import React, { Component } from 'react';\nimport Loadable from 'react-loadable';\nimport { NotFound } from '../../components/NotFound';\nimport { BrowserRouter, Router, Switch, Route } from 'react-router-dom';\n\n\nconst Loading = () =>
Loading...
;\n\n\nconst EmailConfirmation = Loadable({ loader: () => import('./EmailConfirmation').then(module => module.EmailConfirmation), loading: Loading });\nconst PasswordReset = Loadable({ loader: () => import('./PasswordReset').then(module => module.PasswordReset), loading: Loading });\n\nconst RegistrationExtEmailConfirmation = Loadable({ loader: () => import('./registrationext/RegistrationExtEmailConfirmation').then(module => module.RegistrationExtEmailConfirmation), loading: Loading });\n\nexport default class User extends Component {\n\n render() {\n return (\n
\n \n \n \n \n \n );\n }\n}\n\n\n","import React, { Component } from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport Loadable from 'react-loadable';\nimport { TendrilApiProvider } from './components/TendrilApi';\nimport { NotFound } from './components/NotFound';\nimport { Home } from './areas/home/Home';\nimport User from './areas/user/User';\n\n\nconst Loading = () =>
Loading...
;\n\nconst Admin = Loadable({\n loader: () => import('./areas/admin/Admin').then(module => module.Admin),\n loading: Loading\n});\n\nconst Customer = Loadable({\n loader: () => import('./areas/customer/Customer').then(module => module.Customer),\n loading: Loading\n});\n\n\n\n\nexport default class App extends Component {\n displayName = App.name;\n\n constructor(props) {\n super(props);\n }\n\n\n render() {\n\n return (\n
\n \n \n\n \n\n \n \n {/* Also don't forget to route by customer name, not just id... eg /customer/Coates_Hire/... */}\n\n \n \n \n );\n }\n}\n","import 'semantic-ui-react';\nimport 'semantic-ui-css/semantic.min.css';\nimport './index.css';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { BrowserRouter, Switch, Route } from 'react-router-dom';\n//import registerServiceWorker from './registerServiceWorker';\n\n\n\n\nimport App from './App';\n\n\n//const Page = Loadable({\n// loader: () => import('./Page'),\n// loading: Loading,\n//});\n\n\nconst baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');\nconst rootElement = document.getElementById('root');\n\nReactDOM.render(\n
\n \n \n \n \n ,\n rootElement);\n\n// DJB disabled this\n//registerServiceWorker();\n","import React, { Component } from 'react';\nimport decode from 'jwt-decode';\nimport 'whatwg-fetch';\nimport _ from 'lodash';\n\n\nexport class FetchError extends Error {\n\n constructor(message, status = null, data = null) {\n //console.log(`FetchError ctor: ${message} ${status} ${data}`);\n super(message);\n this.status = status;\n this.data = data;\n this.name = \"FetchError\";\n }\n}\n\nexport const NoneVerbBit = 0;\nexport const DeleteVerbBit = 1;\nexport const GetVerbBit = 2;\nexport const PatchVerbBit = 4;\nexport const PostVerbBit = 8;\nexport const PutVerbBit = 16;\nexport const AllVerbBits = DeleteVerbBit | GetVerbBit | PatchVerbBit | PostVerbBit | PutVerbBit;\n\n\n// https://stackoverflow.com/questions/10593013/delete-cookie-by-name\nfunction delete_cookie(name) {\n document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';\n}\n\n\n// Auth token will be refreshed at this interval, which is a network call and full UI redraw / reload, so don't make it too short.\n// However too long and the UI won't reflect user permission changes (ie granted or revoked access to areas).\n\nconst claimsCheckIntervalMs = 60 * 60 * 1000;\n\n\n\n// https://daveceddia.com/context-api-vs-redux/\n\nexport const TendrilApiContext = React.createContext();\n\nexport class TendrilApiProvider extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.timerId = null;\n\n // usual js bind garbage\n this.checkClaimsAndReschedule = this.checkClaimsAndReschedule.bind(this);\n\n // Functions available to consumers\n\n this.functions = {\n fetch: this.fetch.bind(this),\n login: this.login.bind(this),\n logout: this.logout.bind(this),\n setToken: this.setToken.bind(this),\n accessAny: this.accessAny.bind(this),\n accessAll: this.accessAll.bind(this),\n refresh: this.refresh.bind(this)\n };\n\n this.state = {\n value: {\n token: null,\n claims: null,\n user: null,\n functions: this.functions\n },\n };\n }\n\n componentDidMount() {\n\n try {\n const token = localStorage.getItem('tendril_token');\n const userString = localStorage.getItem('tendril_user');\n const claims = token ? decode(token) : null;\n const user = userString ? JSON.parse(userString) : null;\n\n if ((claims && this.claimsHaveExpired(claims)) || !user) {\n this.deleteStoredData();\n this.setState({ value: { token: null, claims: null, user: null, functions: this.functions } });\n } else {\n // We have valid claims and user\n // But immediately refresh and get user data, so the UI shows latest state\n this.setState({ value: { token: token, claims: claims, user: user, functions: this.functions } },\n this.refresh);\n }\n }\n catch (e) {\n // something bad has happened, just reset everything, make user log in again\n console.log(e);\n this.deleteStoredData();\n this.setState({ value: { token: null, claims: null, user: null, functions: this.functions } });\n }\n\n this.timerId = setTimeout(this.checkClaimsAndReschedule, claimsCheckIntervalMs);\n }\n\n\n componentWillUnmount() {\n clearTimeout(this.timerId);\n }\n\n\n checkClaimsAndReschedule() {\n\n const { claims } = this.state.value;\n\n if (claims) {\n if (this.claimsHaveExpired(claims)) {\n console.log(\"claims have expired\");\n this.deleteStoredData();\n this.setState({ value: { token: null, claims: null, user: null, functions: this.functions } });\n }\n else {\n // Just do the refresh, this makes sure that UI will fairly quickly reflect any role changes.\n // Make sure we set a reasonable refresh interval.\n this.refresh();\n }\n }\n this.timerId = setTimeout(this.checkClaimsAndReschedule, claimsCheckIntervalMs);\n }\n\n claimsHaveExpired(claims) {\n if (!claims) return false;\n if (!claims.exp) return false;\n if (claims.exp > Date.now() / 1000) return false; // CHECK ME\n return true;\n }\n\n\n deleteStoredData() {\n localStorage.removeItem('tendril_token');\n localStorage.removeItem('tendril_user');\n delete_cookie('tendril_token');\n }\n\n\n\n\n render() {\n // NOTE\n // For consumers to re-render, we have to actually change the value of 'value'\n // I wanted to just pass down 'this', and maybe that's possible, but this follows the React docs: https://reactjs.org/docs/context.html#caveats\n return (\n
\n {this.props.children}\n \n );\n }\n\n\n // General purpose fetch, parsing json on success and error\n //\n // On success (HTTP status code 200-299):\n // - JSON-deserialised response body is returned, or null if no body\n //\n // On network error:\n // - FetchError is thrown, with generic error message and no status code, no data\n //\n // On error returned by server\n // - FetchError is thrown, with status code and data object of form { key : [values ...], ... }\n //\n\n\n async fetch(url, body, method = (body ? \"POST\" : \"GET\"), options) {\n // performs api calls sending the required authentication headers\n const headers = {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json'\n }\n\n // Setting Authorization header\n // Authorization: Bearer xxxxxxx.xxxxxxxx.xxxxxx\n if (this.state.value.token) {\n headers['Authorization'] = 'Bearer ' + this.state.value.token;\n }\n\n let opts = {\n method,\n headers,\n body: JSON.stringify(body),\n ...options\n };\n\n let response = null;\n let json = null;\n try {\n response = await fetch(url, opts);\n const text = await response.text();\n if (text !== '')\n json = JSON.parse(text);\n }\n catch (e) {\n console.log(e);\n throw new FetchError(\"Error fetching data from server.\");\n }\n\n if (response.ok)\n return json;\n\n throw new FetchError(json ? json.message : \"Error fetching data from server.\", response.status, json ? json.data : null);\n }\n\n\n setToken(token) {\n // Using jwt-decode npm package to decode the token\n const claims = decode(token);\n\n localStorage.setItem('tendril_token', token);\n this.setState(prevState => ({ value: { token: token, claims: claims, user: prevState.value.user, functions: this.functions } }));\n }\n\n\n async login(identifier, password) {\n try {\n const result = await this.fetch('/api/user/authenticate', { identifier, password });\n\n if (!result.token)\n throw new Error(\"Expected token in login result\");\n\n if (!result.user)\n throw new Error(\"Expected user in login result\");\n\n const claims = decode(result.token);\n\n localStorage.setItem('tendril_token', result.token);\n localStorage.setItem('tendril_user', JSON.stringify(result.user));\n this.setState(prevState => ({ value: { token: result.token, claims: claims, user: result.user, functions: this.functions } }));\n }\n catch (e) {\n console.log(e);\n this.deleteStoredData();\n this.setState({ value: { token: null, claims: null, user: null, functions: this.functions } });\n if (e.status === 401)\n throw new Error(\"Invalid username or password.\");\n throw new Error(\"An error occurred during login.\");\n }\n }\n\n\n logout() {\n console.log(\"logging out\");\n // Clear user token and profile data from localStorage\n this.deleteStoredData();\n\n this.setState({ value: { token: null, claims: null, user: null, functions: this.functions } });\n }\n\n\n async refresh() {\n try {\n console.log(\"Refreshing auth token\");\n\n const result = await this.fetch('/api/user/refresh', null, 'POST');\n\n if (!result.token)\n throw new Error(\"Expected token in refresh result\");\n\n if (!result.user)\n throw new Error(\"Expected user in refresh result\");\n\n const claims = decode(result.token);\n\n localStorage.setItem('tendril_token', result.token);\n localStorage.setItem('tendril_user', JSON.stringify(result.user));\n this.setState(prevState => ({ value: { token: result.token, claims: claims, user: result.user, functions: this.functions } }));\n }\n catch (e) {\n console.log(e);\n // don't throw an error. let the claims check retry, and eventually the auth token will expire\n }\n }\n\n\n\n\n\n // --- Check access to server resources by path \n\n\n allowedVerbs(resource) {\n\n const { claims } = this.state.value;\n if (!claims) return 0;\n\n // keep resources on the claims object so it is forced to refresh when claims change\n if (!claims.resources) {\n // lazy init\n let resourceClaims = claims.Resource;\n if (!resourceClaims) return 0;\n if (!Array.isArray(resourceClaims)) resourceClaims = [resourceClaims];\n let resources = resourceClaims.map(c => {\n const parts = c.split('|');\n const path = parts[0];\n const verbs = parseInt(parts[1]);\n return { path, verbs };\n });\n resources = _.sortBy(resources, 'path').reverse();\n claims.resources = resources;\n }\n\n const { resources } = claims;\n\n let match = resources.find(r => resource.startsWith(r.path));\n \n if (!match) return 0;\n\n return match.verbs;\n }\n\n\n accessAny(resource, verbs = AllVerbBits) {\n const v = this.allowedVerbs(resource);\n //console.log(`allowedVerbs(${resource}) => ${v}`);\n\n return !!(v & verbs);\n }\n\n accessAll(resource, verbs = AllVerbBits) {\n const v = this.allowedVerbs(resource);\n //console.log(`allowedVerbs(${resource}) => ${v}`);\n\n return (v & verbs) === verbs;\n }\n}\n\n\n\n\nexport function withTendrilApi(Component) {\n // ...and returns another component...\n return (props) => {\n // ... and renders the wrapped component with the context theme!\n // Notice that we pass through any additional props as well\n return (\n \n {value => }\n\n \n );\n };\n}\n\n","import React from 'react';\nimport { Message } from 'semantic-ui-react';\n\nconst flatMap = (f, arr) => arr.reduce((x, y) => [...x, ...f(y)], []);\n\n\n/*\n * Props:\n * error: object, or null to not show the error box\n * fields are\n * {\n * \"message\" : \"An error happened\",\n * \"data\" : { \"email\" : [\"Email address was invalid\"] }\n * \"status\" : 400\n * }\n * \n */\n\nexport function ErrorMessage(props) {\n\n const { error } = props;\n\n if (!error)\n return null;\n\n let { data, message, status } = error;\n\n if (!(data || message || status))\n return ;\n\n if (!(data || message)) {\n switch (status) {\n case 400: message = 'A bad request was sent to the server.'; break;\n case 401: message = 'You need to log in to perform this action.'; break;\n case 403: message = 'You are not authorised to perform this action.'; break;\n case 404: message = 'The requested data could not be found.'; break;\n case 409: message = \"Could not create or update as there's a conflict with existing data.\"; break;\n default: message = `The server returned an error (code ${status})`; break;\n }\n }\n\n if (!data)\n return (\n \n );\n\n const list = flatMap(k => data[k], Object.keys(data));\n switch (list.length) {\n case 0: return (\n \n );\n case 1: return (\n \n );\n default: return (\n \n );\n }\n}\n\n"],"sourceRoot":""}