add standalone launch gateway

src/components/App.js

@@ -6,7 +6,7 @@ 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';
@@ -24,7 +24,7 @@ const App = () => {
             </ThemeProvider>
           }
         />
-        <Route path="/" exact element={<RequestBuilder redirect={redirect} />} />
+        <Route path="/" exact element={<Gateway redirect={redirect} />} />
       </Routes>
     </Router>
   );

src/containers/Gateway/Gateway.jsx

@@ -0,0 +1,119 @@
+import React, { memo, useState, useEffect } from 'react';
+import FHIR from 'fhirclient';
+import env from 'env-var';
+import {
+  Button,
+  FormControl,
+  FormHelperText,
+  IconButton,
+  TextField,
+  Accordion,
+  AccordionDetails
+} from '@mui/material';
+import Stack from '@mui/material/Stack';
+import Autocomplete from '@mui/material/Autocomplete';
+import useStyles from './styles';
+
+const Gateway = props => {
+  const classes = useStyles();
+  const envFhir = env.get('REACT_APP_EHR_SERVER').asString();
+  const envClient = env.get('REACT_APP_CLIENT').asString();
+  const envScope = env.get('REACT_APP_CLIENT_SCOPES').asString().split(' ');
+  const [clientId, setClientId] = useState(envClient || '');
+  const [fhirUrl, setFhirUrl] = useState(envFhir || '');
+  const [scope, _setScope] = useState(envScope || []);
+  const setScope = value => {
+    // split by space to facilitate copy/pasting strings of scopes into the input
+    const sv = value.map(e => {
+      if (e) {
+        return e.split(' ');
+      }
+    });
+    _setScope(sv.flat());
+  };
+  const submit = event => {
+    event.preventDefault();
+    FHIR.oauth2.authorize({
+      clientId: clientId,
+      scope: scope.join(' '),
+      redirectUri: props.redirect,
+      iss: fhirUrl
+    });
+  };
+  return (
+    <div className={classes.gatewayDiv}>
+      <h2 className={classes.gatewayHeader}>Launch Request Generator</h2>
+      <form onSubmit={submit} autoComplete="off">
+        <FormControl fullWidth={true} required={true} margin="normal">
+          <Stack spacing={4} sx={{ width: '500px' }}>
+            <Autocomplete
+              freeSolo
+              filterSelectedOptions
+              id="iss-dropdown"
+              inputValue={fhirUrl}
+              onInputChange={(e, inputValue) => {
+                setFhirUrl(inputValue);
+              }}
+              options={[envFhir]} // TODO: can be updated later to include registered iss
+              renderInput={params => (
+                <TextField
+                  {...params}
+                  size="medium"
+                  label="FHIR Server Endpoint"
+                  InputProps={{
+                    ...params.InputProps,
+                    type: 'search'
+                  }}
+                />
+              )}
+            />
+            <Autocomplete
+              freeSolo
+              filterSelectedOptions
+              id="client-dropdown"
+              inputValue={clientId}
+              onInputChange={(e, inputValue) => {
+                setClientId(inputValue);
+              }}
+              options={[envClient]} // TODO: can be updated later to match from iss from register page
+              renderInput={params => (
+                <TextField
+                  {...params}
+                  size="medium"
+                  label="Client ID"
+                  InputProps={{
+                    ...params.InputProps,
+                    type: 'search'
+                  }}
+                />
+              )}
+            />
+            <Autocomplete
+              multiple
+              freeSolo
+              limitTags={3}
+              disableClearable
+              filterSelectedOptions
+              id="tags-outlined"
+              options={envScope} // can be updated to include other scopes
+              value={scope}
+              onChange={(e, scopes) => {
+                // scopes is the new full list, not the singular new value
+                setScope(scopes);
+              }}
+              defaultValue={['launch']}
+              renderInput={params => (
+                <TextField {...params} label="Scope" placeholder="Enter Scope" />
+              )}
+            />
+            <Button type="submit" variant="outlined" disabled={clientId === '' || fhirUrl === ''}>
+              Launch
+            </Button>
+          </Stack>
+        </FormControl>
+      </form>
+    </div>
+  );
+};
+
+export default memo(Gateway);

src/containers/Gateway/styles.jsx

@@ -0,0 +1,27 @@
+import { makeStyles } from '@mui/styles';
+export default makeStyles(
+  theme => ({
+    '@global': {
+      body: {
+        backgroundColor: '#fafafa'
+      }
+    },
+    gatewayDiv: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      padding: '50px',
+      margin: '10% auto 0 auto',
+      width: '60%',
+      backgroundColor: '#fff'
+    },
+    gatewayHeader: {
+      marginBottom: '25px'
+    },
+    gatewayInput: {
+      padding: '50px'
+    }
+  }),
+
+  { name: 'Gateway', index: 1 }
+);

src/containers/Index.jsx

@@ -12,13 +12,17 @@ const Index = props => {
     });
   }, []);
 
-  return <div>
-    { client ? <RequestBuilder client={client} /> : 
-      <div className='loading'>
-        <h1>Getting Client...</h1>
-      </div>
-    }
-    </div>;
+  return (
+    <div>
+      {client ? (
+        <RequestBuilder client={client} />
+      ) : (
+        <div className="loading">
+          <h1>Getting Client...</h1>
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default Index;

src/containers/Launch.jsx

@@ -23,7 +23,11 @@ const Launch = props => {
     });
   }, []);
 
-  return <div className='loading'><h1>Launching...</h1></div>;
+  return (
+    <div className="loading">
+      <h1>Launching...</h1>
+    </div>
+  );
 };
 
 export default memo(Launch);