diff --git a/src/components/App.js b/src/components/App.js index 52bbf55d..0c514e36 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,12 +1,12 @@ +import { ThemeProvider } from '@mui/styles'; import React from 'react'; -import { BrowserRouter, HashRouter, Routes, Route } from 'react-router-dom'; -import RequestBuilder from '../containers/RequestBuilder'; +import { BrowserRouter, HashRouter, Route, Routes } from 'react-router-dom'; +import Gateway from '../containers/Gateway/Gateway'; +import Index from '../containers/Index'; +import Launch from '../containers/Launch'; import PatientPortal from '../containers/PatientPortal'; +import RegisterPage from '../containers/register/RegisterPage'; import theme from '../containers/styles/theme'; -import { ThemeProvider } from '@mui/styles'; -import Launch from '../containers/Launch'; -import Index from '../containers/Index'; -import Gateway from '../containers/Gateway/Gateway'; const isGhPages = process.env.REACT_APP_GH_PAGES === 'true'; const Router = isGhPages ? HashRouter : BrowserRouter; const redirect = isGhPages ? '/#/index' : '/index'; @@ -16,6 +16,7 @@ const App = () => { } /> } /> + } /> { - useEffect(() => { - // this is a workaround for the fhir client not being able to pull values out of the - // hash. Regex will look for different permutations of a hashrouter url /#/launch /#launch #launch /#launch - const params = queryString.parse((window.location.hash || '').replace(/\/?#\/?launch\?/, '')); - - // if these are null then the client will pull them out of the browsers query string - // so we don't need to do that here. - const iss = params.iss; - const launch = params.launch; - - FHIR.oauth2.authorize({ - clientId: env.get('REACT_APP_CLIENT').asString(), - scope: env.get('REACT_APP_CLIENT_SCOPES').asString(), - redirectUri: props.redirect, - iss: iss, - launch: launch - }); - }, []); - - return ( + const [content, setContent] = useState(

Launching...

); + + useEffect(() => { + smartLaunch(); + }, []); + + const smartLaunch = () => { + let clients = JSON.parse(localStorage.getItem('clients') || '[]'); + if (clients.length === 0) { + const defaultClient = env.get('REACT_APP_CLIENT').asString(); + const defaultIss = env.get('REACT_APP_EHR_BASE').asString(); + if (defaultClient && defaultIss) { + clients = [{ client: defaultClient, name: defaultIss }]; + localStorage.setItem('clients', JSON.stringify(clients)); + } + } + const urlSearchString = window.location.search; + const params = new URLSearchParams(urlSearchString); + const iss = params.get('iss'); + if (iss) { + const storedClient = clients.find(e => { + return e.name == iss; + }); + + if (storedClient) { + // found matching iss + const clientId = storedClient.client; + FHIR.oauth2 + .authorize({ + clientId: clientId, + scope: env.get('REACT_APP_CLIENT_SCOPES').asString(), + redirectUri: '/index' + }) + .catch(e => { + console.log(e); + }); + } else { + setContent(); + } + } else { + setContent(
iss not found
); + } + }; + + return
{content}
; }; export default memo(Launch); diff --git a/src/containers/register/RegisterPage.js b/src/containers/register/RegisterPage.js new file mode 100644 index 00000000..a38d4327 --- /dev/null +++ b/src/containers/register/RegisterPage.js @@ -0,0 +1,122 @@ +import CloseIcon from '@mui/icons-material/Close'; +import { + Box, + Button, + Card, + CardContent, + FormControl, + FormHelperText, + IconButton, + TextField, + Typography +} from '@mui/material'; +import React, { useState } from 'react'; +import './RegisterPageStyle.css'; + +export default function RegisterPage(props) { + const [clientId, setClientId] = useState(''); + const [fhirUrl, setFhirUrl] = useState(props.fhirUrl || ''); + + const [currentClients, setCurrentClients] = useState( + JSON.parse(localStorage.getItem('clients') || '[]') + ); + + function deleteClient(client) { + const newClients = currentClients.filter( + c => !(c.name === client.name && c.client === client.client) + ); + localStorage.setItem('clients', JSON.stringify(newClients)); + setCurrentClients(newClients); + } + + function submit(event) { + console.log('new selection add to LS'); + const newClients = [...currentClients, { name: fhirUrl, client: clientId }]; + setCurrentClients(newClients); + localStorage.setItem('clients', JSON.stringify(newClients)); + if (props.callback) { + event.preventDefault(); + props.callback(); // try launching again + } + return false; + } + + return ( + <> + + + +

Client ID Registration

+ {props.callback ?
Client ID not found. Please register the client ID.
: ''} + + Request Generator + +

+

+
+ + { + setClientId(e.target.value); + }} + /> + + Clients must be registered with the FHIR server out of band. + + + + { + setFhirUrl(e.target.value); + }} + /> + + The ISS is the base url of the FHIR server. + + + +
+
+
+

+ + + Existing Client Ids: + + + {currentClients.map((client, index) => { + return ( +
+ + {client.name}: {client.client} + + { + deleteClient(client); + }} + > + + +
+ ); + })} +
+
+ + ); +} diff --git a/src/containers/register/RegisterPageStyle.css b/src/containers/register/RegisterPageStyle.css new file mode 100644 index 00000000..ad715639 --- /dev/null +++ b/src/containers/register/RegisterPageStyle.css @@ -0,0 +1,19 @@ +body { + background-color: #F5F5F7; +} + +.registerContainer { + max-width:800px; + margin: 0; + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -40%); +} + +.clientIds { + text-align: center; +} +.clientIdList { + text-align: center; +} \ No newline at end of file