From 2846e2b8aa4815cfe930989db6d6a804273b2c89 Mon Sep 17 00:00:00 2001
From: Zach Robin <zrobin144@gmail.com>
Date: Mon, 8 Jan 2024 03:28:24 -0800
Subject: [PATCH 1/6] Initial Page Layout

---
 src/components/App.js                      |   2 +
 src/components/views/RegisterPage.js       | 106 +++++++++++++++++++++
 src/components/views/RegisterPageStyle.css |  19 ++++
 3 files changed, 127 insertions(+)
 create mode 100644 src/components/views/RegisterPage.js
 create mode 100644 src/components/views/RegisterPageStyle.css

diff --git a/src/components/App.js b/src/components/App.js
index 52bbf55d..4cc8ba8e 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -7,6 +7,7 @@ import { ThemeProvider } from '@mui/styles';
 import Launch from '../containers/Launch';
 import Index from '../containers/Index';
 import Gateway from '../containers/Gateway/Gateway';
+import RegisterPage from './views/RegisterPage';
 const isGhPages = process.env.REACT_APP_GH_PAGES === 'true';
 const Router = isGhPages ? HashRouter : BrowserRouter;
 const redirect = isGhPages ? '/#/index' : '/index';
@@ -16,6 +17,7 @@ const App = () => {
       <Routes>
         <Route path="/launch" element={<Launch redirect={redirect} />} />
         <Route path="/index" element={<Index />} />
+        <Route path="/register" element={<RegisterPage />} />
         <Route
           path="/patient-portal"
           element={
diff --git a/src/components/views/RegisterPage.js b/src/components/views/RegisterPage.js
new file mode 100644
index 00000000..4272a47f
--- /dev/null
+++ b/src/components/views/RegisterPage.js
@@ -0,0 +1,106 @@
+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() {
+  const [clientId, setClientId] = useState('');
+  const [fhirUrl, setFhirUrl] = useState('');
+
+  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 (
+    <>
+      <Box className={'container'}>
+        <Card sx={{ minWidth: 275 }}>
+          <CardContent>
+            <h1>Client ID Registration</h1>
+            <Typography variant='h5' component='div' color='text.secondary'>
+              Request Generator
+            </Typography>
+            <br></br><br></br>
+            <form onSubmit={submit} autoComplete='off'>
+              <FormControl fullWidth={true} required={true} margin='normal'>
+                <TextField
+                  id='clientId'
+                  label='Client ID'
+                  aria-describedby='clientIdHelp'
+                  value={clientId}
+                  onChange={e => {
+                    setClientId(e.target.value);
+                  }}
+                />
+                <FormHelperText id='clientIdHelp'>
+                  Clients must be registered with the FHIR server out of band.
+                </FormHelperText>
+              </FormControl>
+              <FormControl fullWidth={true} required={true} margin='normal'>
+                <TextField
+                  id='fhirIss'
+                  label='ISS'
+                  aria-describedby='fhirIssHelp'
+                  value={fhirUrl}
+                  onChange={e => {
+                    setFhirUrl(e.target.value);
+                  }}
+                />
+                <FormHelperText id='fhirIssHelp'>
+                  The ISS is the base url of the FHIR server.
+                </FormHelperText>
+              </FormControl>
+              <Button type='submit' variant='contained' disabled={clientId === '' || fhirUrl === ''}>
+                Submit
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+        <br></br>
+        <Box className='clientIds'>
+          <Typography variant='h5' component='div' color='text.secondary'>
+            Existing Client Ids:
+          </Typography>
+
+          {currentClients.map((client, index) => {
+            return (
+              <div key={index} className='clientIdList'>
+                <span style={{ marginRight: '35px' }}>
+                  <b>{client.name}</b>: {client.client}
+                </span>
+                <IconButton
+                  style={{ marginRight: '5px' }}
+                  onClick={() => {
+                    deleteClient(client);
+                  }}
+                >
+                  <CloseIcon />
+                </IconButton>
+              </div>
+            );
+          })}
+        </Box>
+      </Box>
+    </>
+  );
+}
diff --git a/src/components/views/RegisterPageStyle.css b/src/components/views/RegisterPageStyle.css
new file mode 100644
index 00000000..383364ff
--- /dev/null
+++ b/src/components/views/RegisterPageStyle.css
@@ -0,0 +1,19 @@
+body {
+    background-color: #F5F5F7;
+}
+
+.container {
+    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

From 57d98710a48741e857df6aaab67034499e9cf079 Mon Sep 17 00:00:00 2001
From: Zach Robin <zrobin144@gmail.com>
Date: Tue, 9 Jan 2024 12:41:07 -0800
Subject: [PATCH 2/6] fixed styling

---
 src/components/views/RegisterPage.js       | 2 +-
 src/components/views/RegisterPageStyle.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/RegisterPage.js b/src/components/views/RegisterPage.js
index 4272a47f..1092e44d 100644
--- a/src/components/views/RegisterPage.js
+++ b/src/components/views/RegisterPage.js
@@ -33,7 +33,7 @@ export default function RegisterPage() {
 
   return (
     <>
-      <Box className={'container'}>
+      <Box className={'registerContainer'}>
         <Card sx={{ minWidth: 275 }}>
           <CardContent>
             <h1>Client ID Registration</h1>
diff --git a/src/components/views/RegisterPageStyle.css b/src/components/views/RegisterPageStyle.css
index 383364ff..ad715639 100644
--- a/src/components/views/RegisterPageStyle.css
+++ b/src/components/views/RegisterPageStyle.css
@@ -2,7 +2,7 @@ body {
     background-color: #F5F5F7;
 }
 
-.container {
+.registerContainer {
     max-width:800px;
     margin: 0;
     position: absolute;

From a8f3213f8bc21b0b7e3279ac843d7359c9d4d561 Mon Sep 17 00:00:00 2001
From: Zach Robin <zrobin144@gmail.com>
Date: Wed, 10 Jan 2024 11:41:16 -0800
Subject: [PATCH 3/6] added launch and moved register page in direcotory

---
 src/components/App.js                         |  2 +-
 src/containers/Launch.jsx                     | 53 +++++++++++++++++--
 .../register}/RegisterPage.js                 |  8 +--
 .../register}/RegisterPageStyle.css           |  0
 4 files changed, 53 insertions(+), 10 deletions(-)
 rename src/{components/views => containers/register}/RegisterPage.js (96%)
 rename src/{components/views => containers/register}/RegisterPageStyle.css (100%)

diff --git a/src/components/App.js b/src/components/App.js
index 4cc8ba8e..0d68b615 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -7,7 +7,7 @@ import { ThemeProvider } from '@mui/styles';
 import Launch from '../containers/Launch';
 import Index from '../containers/Index';
 import Gateway from '../containers/Gateway/Gateway';
-import RegisterPage from './views/RegisterPage';
+import RegisterPage from '../containers/register/registerPage';
 const isGhPages = process.env.REACT_APP_GH_PAGES === 'true';
 const Router = isGhPages ? HashRouter : BrowserRouter;
 const redirect = isGhPages ? '/#/index' : '/index';
diff --git a/src/containers/Launch.jsx b/src/containers/Launch.jsx
index 5db39527..0e28513e 100644
--- a/src/containers/Launch.jsx
+++ b/src/containers/Launch.jsx
@@ -2,6 +2,7 @@ import React, { memo, useState, useEffect } from 'react';
 import FHIR from 'fhirclient';
 import env from 'env-var';
 import queryString from 'querystring';
+import RegisterPage from './register/RegisterPage';
 
 const Launch = props => {
   useEffect(() => {
@@ -23,11 +24,53 @@ const Launch = props => {
     });
   }, []);
 
-  return (
-    <div className="loading">
-      <h1>Launching...</h1>
-    </div>
-  );
+  <div className="loading">
+    <h1>Launching...</h1>
+  </div>
+
+  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(<RegisterPage callback={smartLaunch} fhirUrl={iss} />);
+      }
+    } else {
+      setContent(<div>iss not found</div>);
+    }
+  };
+
+  return <div>{content}</div>;
 };
 
 export default memo(Launch);
diff --git a/src/components/views/RegisterPage.js b/src/containers/register/RegisterPage.js
similarity index 96%
rename from src/components/views/RegisterPage.js
rename to src/containers/register/RegisterPage.js
index 1092e44d..55c9ad13 100644
--- a/src/components/views/RegisterPage.js
+++ b/src/containers/register/RegisterPage.js
@@ -3,9 +3,9 @@ import { Box, Button, Card, CardContent, FormControl, FormHelperText, IconButton
 import React, { useState } from 'react';
 import './RegisterPageStyle.css';
 
-export default function RegisterPage() {
+export default function RegisterPage(props) {
   const [clientId, setClientId] = useState('');
-  const [fhirUrl, setFhirUrl] = useState('');
+  const [fhirUrl, setFhirUrl] = useState(props.fhirUrl || '');
 
   const [currentClients, setCurrentClients] = useState(
     JSON.parse(localStorage.getItem('clients') || '[]')
@@ -24,10 +24,10 @@ export default function RegisterPage() {
     const newClients = [...currentClients, { name: fhirUrl, client: clientId }];
     setCurrentClients(newClients);
     localStorage.setItem('clients', JSON.stringify(newClients));
-    /*if (props.callback) {
+    if (props.callback) {
       event.preventDefault();
        props.callback(); // try launching again
-    }*/
+    }
     return false;
   }
 
diff --git a/src/components/views/RegisterPageStyle.css b/src/containers/register/RegisterPageStyle.css
similarity index 100%
rename from src/components/views/RegisterPageStyle.css
rename to src/containers/register/RegisterPageStyle.css

From d6a878ae063f33df1d7d35209b08dddb619b9c28 Mon Sep 17 00:00:00 2001
From: Zach Robin <zrobin144@gmail.com>
Date: Wed, 10 Jan 2024 11:43:12 -0800
Subject: [PATCH 4/6] corrected props and app route

---
 src/components/App.js                   | 2 +-
 src/containers/register/RegisterPage.js | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 0d68b615..cd79e0d8 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -7,7 +7,7 @@ import { ThemeProvider } from '@mui/styles';
 import Launch from '../containers/Launch';
 import Index from '../containers/Index';
 import Gateway from '../containers/Gateway/Gateway';
-import RegisterPage from '../containers/register/registerPage';
+import RegisterPage from '../containers/register/RegisterPage';
 const isGhPages = process.env.REACT_APP_GH_PAGES === 'true';
 const Router = isGhPages ? HashRouter : BrowserRouter;
 const redirect = isGhPages ? '/#/index' : '/index';
diff --git a/src/containers/register/RegisterPage.js b/src/containers/register/RegisterPage.js
index 55c9ad13..507ec799 100644
--- a/src/containers/register/RegisterPage.js
+++ b/src/containers/register/RegisterPage.js
@@ -26,7 +26,7 @@ export default function RegisterPage(props) {
     localStorage.setItem('clients', JSON.stringify(newClients));
     if (props.callback) {
       event.preventDefault();
-       props.callback(); // try launching again
+      props.callback(); // try launching again
     }
     return false;
   }
@@ -37,6 +37,7 @@ export default function RegisterPage(props) {
         <Card sx={{ minWidth: 275 }}>
           <CardContent>
             <h1>Client ID Registration</h1>
+            {props.callback ? <h6>Client ID not found. Please register the client ID.</h6> : ''}
             <Typography variant='h5' component='div' color='text.secondary'>
               Request Generator
             </Typography>
@@ -71,7 +72,7 @@ export default function RegisterPage(props) {
                 </FormHelperText>
               </FormControl>
               <Button type='submit' variant='contained' disabled={clientId === '' || fhirUrl === ''}>
-                Submit
+                {props.callback ? 'Submit and Retry' : 'Submit'}
               </Button>
             </form>
           </CardContent>

From 2395127c927ab2aca6906619946d3b17620de8f8 Mon Sep 17 00:00:00 2001
From: Zach Robin <zrobin144@gmail.com>
Date: Wed, 10 Jan 2024 12:00:07 -0800
Subject: [PATCH 5/6] updated launch

---
 src/containers/Launch.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/containers/Launch.jsx b/src/containers/Launch.jsx
index 0e28513e..bec5ffaa 100644
--- a/src/containers/Launch.jsx
+++ b/src/containers/Launch.jsx
@@ -5,6 +5,12 @@ import queryString from 'querystring';
 import RegisterPage from './register/RegisterPage';
 
 const Launch = props => {
+  const [content, setContent] = useState(
+    <div className="loading">
+      <h1>Launching...</h1>
+    </div>
+  );
+  /*
   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
@@ -22,11 +28,7 @@ const Launch = props => {
       iss: iss,
       launch: launch
     });
-  }, []);
-
-  <div className="loading">
-    <h1>Launching...</h1>
-  </div>
+  }, []); */
 
   useEffect(() => {
     smartLaunch();

From c4c24c2f16e394b8f0894576434542297367da74 Mon Sep 17 00:00:00 2001
From: Zach Robin <zrobin144@gmail.com>
Date: Wed, 10 Jan 2024 12:29:23 -0800
Subject: [PATCH 6/6] formatting

---
 src/components/App.js                   | 13 +++---
 src/containers/Launch.jsx               | 24 +----------
 src/containers/register/RegisterPage.js | 53 ++++++++++++++++---------
 3 files changed, 42 insertions(+), 48 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index cd79e0d8..0c514e36 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,13 +1,12 @@
-import React from 'react';
-import { BrowserRouter, HashRouter, Routes, Route } from 'react-router-dom';
-import RequestBuilder from '../containers/RequestBuilder';
-import PatientPortal from '../containers/PatientPortal';
-import theme from '../containers/styles/theme';
 import { ThemeProvider } from '@mui/styles';
-import Launch from '../containers/Launch';
-import Index from '../containers/Index';
+import React from 'react';
+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';
 const isGhPages = process.env.REACT_APP_GH_PAGES === 'true';
 const Router = isGhPages ? HashRouter : BrowserRouter;
 const redirect = isGhPages ? '/#/index' : '/index';
diff --git a/src/containers/Launch.jsx b/src/containers/Launch.jsx
index bec5ffaa..4021ef82 100644
--- a/src/containers/Launch.jsx
+++ b/src/containers/Launch.jsx
@@ -1,7 +1,6 @@
-import React, { memo, useState, useEffect } from 'react';
-import FHIR from 'fhirclient';
 import env from 'env-var';
-import queryString from 'querystring';
+import FHIR from 'fhirclient';
+import React, { memo, useEffect, useState } from 'react';
 import RegisterPage from './register/RegisterPage';
 
 const Launch = props => {
@@ -10,25 +9,6 @@ const Launch = props => {
       <h1>Launching...</h1>
     </div>
   );
-  /*
-  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
-    });
-  }, []); */
 
   useEffect(() => {
     smartLaunch();
diff --git a/src/containers/register/RegisterPage.js b/src/containers/register/RegisterPage.js
index 507ec799..a38d4327 100644
--- a/src/containers/register/RegisterPage.js
+++ b/src/containers/register/RegisterPage.js
@@ -1,5 +1,15 @@
 import CloseIcon from '@mui/icons-material/Close';
-import { Box, Button, Card, CardContent, FormControl, FormHelperText, IconButton, TextField, Typography } from '@mui/material';
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  FormControl,
+  FormHelperText,
+  IconButton,
+  TextField,
+  Typography
+} from '@mui/material';
 import React, { useState } from 'react';
 import './RegisterPageStyle.css';
 
@@ -13,7 +23,7 @@ export default function RegisterPage(props) {
 
   function deleteClient(client) {
     const newClients = currentClients.filter(
-      (c) => !(c.name === client.name && c.client === client.client)
+      c => !(c.name === client.name && c.client === client.client)
     );
     localStorage.setItem('clients', JSON.stringify(newClients));
     setCurrentClients(newClients);
@@ -38,54 +48,59 @@ export default function RegisterPage(props) {
           <CardContent>
             <h1>Client ID Registration</h1>
             {props.callback ? <h6>Client ID not found. Please register the client ID.</h6> : ''}
-            <Typography variant='h5' component='div' color='text.secondary'>
+            <Typography variant="h5" component="div" color="text.secondary">
               Request Generator
             </Typography>
-            <br></br><br></br>
-            <form onSubmit={submit} autoComplete='off'>
-              <FormControl fullWidth={true} required={true} margin='normal'>
+            <br></br>
+            <br></br>
+            <form onSubmit={submit} autoComplete="off">
+              <FormControl fullWidth={true} required={true} margin="normal">
                 <TextField
-                  id='clientId'
-                  label='Client ID'
-                  aria-describedby='clientIdHelp'
+                  id="clientId"
+                  label="Client ID"
+                  aria-describedby="clientIdHelp"
                   value={clientId}
                   onChange={e => {
                     setClientId(e.target.value);
                   }}
                 />
-                <FormHelperText id='clientIdHelp'>
+                <FormHelperText id="clientIdHelp">
                   Clients must be registered with the FHIR server out of band.
                 </FormHelperText>
               </FormControl>
-              <FormControl fullWidth={true} required={true} margin='normal'>
+              <FormControl fullWidth={true} required={true} margin="normal">
                 <TextField
-                  id='fhirIss'
-                  label='ISS'
-                  aria-describedby='fhirIssHelp'
+                  id="fhirIss"
+                  label="ISS"
+                  aria-describedby="fhirIssHelp"
                   value={fhirUrl}
                   onChange={e => {
                     setFhirUrl(e.target.value);
                   }}
                 />
-                <FormHelperText id='fhirIssHelp'>
+                <FormHelperText id="fhirIssHelp">
                   The ISS is the base url of the FHIR server.
                 </FormHelperText>
               </FormControl>
-              <Button type='submit' variant='contained' disabled={clientId === '' || fhirUrl === ''}>
+              <Button
+                type="submit"
+                variant="contained"
+                disabled={clientId === '' || fhirUrl === ''}
+              >
                 {props.callback ? 'Submit and Retry' : 'Submit'}
               </Button>
             </form>
           </CardContent>
         </Card>
         <br></br>
-        <Box className='clientIds'>
-          <Typography variant='h5' component='div' color='text.secondary'>
+        <Box className="clientIds">
+          <Typography variant="h5" component="div" color="text.secondary">
             Existing Client Ids:
           </Typography>
 
           {currentClients.map((client, index) => {
             return (
-              <div key={index} className='clientIdList'>
+              <div key={index} className="clientIdList">
                 <span style={{ marginRight: '35px' }}>
                   <b>{client.name}</b>: {client.client}
                 </span>