@medplum/react 0.9.22 → 0.9.23

package/dist/cjs/styles.css

@@ -1370,6 +1370,76 @@ div.medplum-nav-menu-container {
   color: var(--medplum-blue-500);
 }
 
+.medplum-signin-buttons {
+  display: flex;
+  justify-content: space-between;
+  line-height: 32px;
+}
+
+.medplum-signin-buttons > div {
+  display: flex;
+  align-items: center;
+}
+
+.medplum-signin-buttons a {
+  font-size: 12px;
+  margin-right: 16px;
+}
+
+.medplum-signin-buttons label {
+  font-size: 12px;
+}
+
+.medplum-signin-google-container {
+  padding: 20px 0 10px 0;
+  margin: 20px 0 10px 0;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.medplum-signin-separator {
+  padding: 12px 0;
+  margin: 12px 0;
+  overflow: hidden;
+  text-align: center;
+  font-size: var(--medplum-font-small);
+}
+
+.medplum-signin-separator::before,
+.medplum-signin-separator::after {
+  background-color: var(--medplum-gray-400);
+  content: '';
+  display: inline-block;
+  height: 0.1px;
+  position: relative;
+  vertical-align: middle;
+  width: 50%;
+}
+
+.medplum-signin-separator::before {
+  right: 0.5em;
+  margin-left: -50%;
+}
+
+.medplum-signin-separator::after {
+  left: 0.5em;
+  margin-right: -50%;
+}
+
+.medplum-left {
+  text-align: left;
+}
+
+.medplum-center {
+  text-align: center;
+}
+
+.medplum-right {
+  text-align: right;
+}
+
 .medplum-status {
   padding: 1px 6px;
   font-size: 80%;
@@ -1569,61 +1639,6 @@ div.medplum-nav-menu-container {
 
 .grecaptcha-badge { visibility: hidden; }
 
-.medplum-signin {
-  max-width: 400px;
-}
-
-.medplum-signin-buttons {
-  display: flex;
-  justify-content: space-between;
-  line-height: 32px;
-}
-
-.medplum-signin-buttons > div {
-  display: flex;
-  align-items: center;
-}
-
-.medplum-signin-buttons a {
-  font-size: 12px;
-  margin-right: 16px;
-}
-
-.medplum-signin-buttons label {
-  font-size: 12px;
-}
-
-.medplum-signin-google-container {
-  padding: 20px 0 10px 0;
-  margin: 20px 0 10px 0;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: 0.1px solid var(--medplum-gray-200);
-}
-
-.medplum-signin-google-icon {
-  margin-right: 8px;
-}
-
-.medplum-signin-google-icon svg {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.medplum-left {
-  text-align: left;
-}
-
-.medplum-center {
-  text-align: center;
-}
-
-.medplum-right {
-  text-align: right;
-}
-
 a.medplum-tab {
   display: inline-block;
   line-height: 50px;

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { formatAddress, getDisplayString, getImageSrc, capitalize, globalSchema, getPropertyDisplayName, formatHumanName, stringify, buildTypeName, PropertyType, getTypedPropertyValue, createReference, toTypedValue, getReferenceString, evalFhirPath, getSearchParameterDetails, Operator, evalFhirPathTyped, SearchParameterType, formatSearchQuery, parseSearchDefinition, DEFAULT_SEARCH_COUNT, isUUID } from '@medplum/core';
+import { formatAddress, getDisplayString, getImageSrc, capitalize, globalSchema, getPropertyDisplayName, formatHumanName, stringify, buildTypeName, PropertyType, getTypedPropertyValue, createReference, toTypedValue, getReferenceString, evalFhirPath, getSearchParameterDetails, Operator, evalFhirPathTyped, SearchParameterType, formatSearchQuery, parseSearchDefinition, DEFAULT_SEARCH_COUNT, isUUID, parseJWTPayload } from '@medplum/core';
 import React, { useState, useRef, createContext, useEffect, useContext, useCallback, useMemo } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 
@@ -1770,18 +1770,24 @@ function ResourceBadge(props) {
 }
 
 function DiagnosticReportDisplay(props) {
-    var _a;
+    var _a, _b;
     const diagnosticReport = useResource(props.value);
+    const specimen = useResource((_a = diagnosticReport === null || diagnosticReport === void 0 ? void 0 : diagnosticReport.specimen) === null || _a === void 0 ? void 0 : _a[0]);
     if (!diagnosticReport) {
         return null;
     }
-    let textContent = undefined;
+    let textContent = '';
     if (diagnosticReport.presentedForm && diagnosticReport.presentedForm.length > 0) {
         const pf = diagnosticReport.presentedForm[0];
-        if (((_a = pf.contentType) === null || _a === void 0 ? void 0 : _a.startsWith('text/plain')) && pf.data) {
+        if (((_b = pf.contentType) === null || _b === void 0 ? void 0 : _b.startsWith('text/plain')) && pf.data) {
             textContent = window.atob(pf.data);
         }
     }
+    if (specimen === null || specimen === void 0 ? void 0 : specimen.note) {
+        for (const note of specimen.note) {
+            textContent += note.text + '\n\n';
+        }
+    }
     return (React.createElement("div", { className: "medplum-diagnostic-report" },
         React.createElement("h1", null, "Diagnostic Report"),
         React.createElement("div", { className: "medplum-diagnostic-report-header" },
@@ -1801,8 +1807,8 @@ function DiagnosticReportDisplay(props) {
             diagnosticReport.status && (React.createElement("dl", null,
                 React.createElement("dt", null, "Status"),
                 React.createElement("dd", null, capitalize(diagnosticReport.status))))),
-        textContent && React.createElement("pre", null, textContent),
-        diagnosticReport.result && React.createElement(ObservationTable, { value: diagnosticReport.result })));
+        diagnosticReport.result && React.createElement(ObservationTable, { value: diagnosticReport.result }),
+        textContent && React.createElement("pre", null, textContent.trim())));
 }
 function ObservationTable(props) {
     var _a;
@@ -4898,6 +4904,163 @@ function ensureQuestionnaireOptionKeys(options) {
     return options.map((option) => (Object.assign(Object.assign({}, option), { id: option.id || generateId() })));
 }
 
+/**
+ * Dynamically creates a script tag for the specified JavaScript file.
+ * @param src The JavaScript file URL.
+ */
+function createScriptTag(src, onload) {
+    const head = document.getElementsByTagName('head')[0];
+    const script = document.createElement('script');
+    script.async = true;
+    script.src = src;
+    script.onload = onload || null;
+    head.appendChild(script);
+}
+
+function GoogleButton(props) {
+    const medplum = useMedplum();
+    const { googleClientId, handleGoogleCredential } = props;
+    const parentRef = useRef(null);
+    const [scriptLoaded, setScriptLoaded] = useState(typeof google !== 'undefined');
+    const [initialized, setInitialized] = useState(false);
+    const [buttonRendered, setButtonRendered] = useState(false);
+    useEffect(() => {
+        if (typeof google === 'undefined') {
+            createScriptTag('https://accounts.google.com/gsi/client', () => setScriptLoaded(true));
+            return;
+        }
+        if (!initialized) {
+            google.accounts.id.initialize({
+                client_id: googleClientId,
+                callback: handleGoogleCredential,
+            });
+            setInitialized(true);
+        }
+        if (parentRef.current && !buttonRendered) {
+            google.accounts.id.renderButton(parentRef.current, {});
+            setButtonRendered(true);
+        }
+    }, [medplum, googleClientId, initialized, scriptLoaded, parentRef, buttonRendered, handleGoogleCredential]);
+    if (!googleClientId) {
+        return null;
+    }
+    return React.createElement("div", { ref: parentRef });
+}
+function getGoogleClientId(clientId) {
+    var _a, _b;
+    if (clientId) {
+        return clientId;
+    }
+    const origin = window.location.protocol + '//' + window.location.host;
+    const authorizedOrigins = (_b = (_a = "http://localhost:3000,http://localhost:6006,https://app.medplum.com,https://docs.medplum.com") === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+    if (authorizedOrigins.includes(origin)) {
+        return "921088377005-3j1sa10vr6hj86jgmdfh2l53v3mp7lfi.apps.googleusercontent.com";
+    }
+    return undefined;
+}
+
+/**
+ * Dynamically loads the recaptcha script.
+ * We do not want to load the script on page load unless the user needs it.
+ */
+function initRecaptcha() {
+    if (typeof grecaptcha === 'undefined') {
+        createScriptTag('https://www.google.com/recaptcha/api.js?render=' + process.env.RECAPTCHA_SITE_KEY);
+    }
+}
+/**
+ * Starts a request to generate a recapcha token.
+ * @returns Promise to a recaptcha token for the current user.
+ */
+function getRecaptcha() {
+    return new Promise((resolve) => {
+        grecaptcha.ready(() => {
+            grecaptcha.execute(process.env.RECAPTCHA_SITE_KEY, { action: 'submit' }).then(resolve);
+        });
+    });
+}
+
+function RegisterForm(props) {
+    const medplum = useMedplum();
+    const googleClientId = getGoogleClientId(props.googleClientId);
+    const [outcome, setOutcome] = useState();
+    const issues = getIssuesForExpression(outcome, undefined);
+    useEffect(initRecaptcha, []);
+    function handleAuthResponse(registerRequest, partialLogin) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                let login;
+                if (props.type === 'patient') {
+                    login = yield medplum.startNewPatient(registerRequest, partialLogin);
+                }
+                else {
+                    login = yield medplum.startNewProject(registerRequest, partialLogin);
+                }
+                yield medplum.processCode(login.code);
+                props.onSuccess();
+            }
+            catch (err) {
+                setOutcome(err);
+            }
+        });
+    }
+    return (React.createElement(Document, { width: 450 },
+        React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => __awaiter(this, void 0, void 0, function* () {
+                try {
+                    const recaptchaToken = yield getRecaptcha();
+                    const registerRequest = Object.assign(Object.assign({}, formData), { recaptchaToken });
+                    const userLogin = yield medplum.startNewUser(registerRequest);
+                    handleAuthResponse(registerRequest, userLogin);
+                }
+                catch (err) {
+                    setOutcome(err);
+                }
+            }) },
+            React.createElement("div", { className: "medplum-center" }, props.children),
+            issues && (React.createElement("div", { className: "medplum-input-error" }, issues.map((issue) => {
+                var _a, _b;
+                return (React.createElement("div", { "data-testid": "text-field-error", key: (_a = issue.details) === null || _a === void 0 ? void 0 : _a.text }, (_b = issue.details) === null || _b === void 0 ? void 0 : _b.text));
+            }))),
+            googleClientId && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "medplum-signin-google-container" },
+                    React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => __awaiter(this, void 0, void 0, function* () {
+                            try {
+                                const loginRequest = {
+                                    googleClientId: response.clientId,
+                                    googleCredential: response.credential,
+                                };
+                                const userLogin = yield medplum.startGoogleLogin(loginRequest);
+                                const googleClaims = parseJWTPayload(loginRequest.googleCredential);
+                                const registerRequest = {
+                                    firstName: googleClaims.given_name,
+                                    lastName: googleClaims.family_name,
+                                    email: googleClaims.email,
+                                };
+                                handleAuthResponse(registerRequest, userLogin);
+                            }
+                            catch (err) {
+                                setOutcome(err);
+                            }
+                        }) })),
+                React.createElement("div", { className: "medplum-signin-separator" }, "or"))),
+            React.createElement(FormSection, { title: "First Name", htmlFor: "firstName", outcome: outcome },
+                React.createElement(Input, { name: "firstName", type: "text", testid: "firstName", placeholder: "First name", required: true, autoFocus: true, outcome: outcome })),
+            React.createElement(FormSection, { title: "Last Name", htmlFor: "lastName", outcome: outcome },
+                React.createElement(Input, { name: "lastName", type: "text", testid: "lastName", placeholder: "Last name", required: true, outcome: outcome })),
+            props.type === 'project' && (React.createElement(FormSection, { title: "Project Name", htmlFor: "projectName", outcome: outcome },
+                React.createElement(Input, { name: "projectName", type: "text", testid: "projectName", placeholder: "My Project", required: true, outcome: outcome }))),
+            React.createElement(FormSection, { title: "Email", htmlFor: "email", outcome: outcome },
+                React.createElement(Input, { name: "email", type: "email", testid: "email", placeholder: "name@domain.com", required: true, outcome: outcome })),
+            React.createElement(FormSection, { title: "Password", htmlFor: "password", outcome: outcome },
+                React.createElement(Input, { name: "password", type: "password", testid: "password", autoComplete: "off", required: true, outcome: outcome })),
+            React.createElement("div", { className: "medplum-signin-buttons" },
+                React.createElement("div", null,
+                    React.createElement("input", { type: "checkbox", id: "remember", name: "remember", value: "true" }),
+                    React.createElement("label", { htmlFor: "remember" }, "Remember me")),
+                React.createElement("div", null,
+                    React.createElement(Button, { type: "submit", testid: "submit" }, "Create account"))))));
+}
+
 function StatusBadge(props) {
     return React.createElement("span", { className: `medplum-status medplum-status-${props.status}` }, props.status);
 }
@@ -5471,62 +5634,6 @@ function ServiceRequestTimeline(props) {
         }) }));
 }
 
-/**
- * Dynamically creates a script tag for the specified JavaScript file.
- * @param src The JavaScript file URL.
- */
-function createScriptTag(src, onload) {
-    const head = document.getElementsByTagName('head')[0];
-    const script = document.createElement('script');
-    script.async = true;
-    script.src = src;
-    script.onload = onload || null;
-    head.appendChild(script);
-}
-
-function GoogleButton(props) {
-    const medplum = useMedplum();
-    const { handleGoogleCredential } = props;
-    const googleClientId = getGoogleClientId(props.googleClientId);
-    const parentRef = useRef(null);
-    const [scriptLoaded, setScriptLoaded] = useState(typeof google !== 'undefined');
-    const [initialized, setInitialized] = useState(false);
-    const [buttonRendered, setButtonRendered] = useState(false);
-    useEffect(() => {
-        if (typeof google === 'undefined') {
-            createScriptTag('https://accounts.google.com/gsi/client', () => setScriptLoaded(true));
-            return;
-        }
-        if (!initialized) {
-            google.accounts.id.initialize({
-                client_id: googleClientId,
-                callback: handleGoogleCredential,
-            });
-            setInitialized(true);
-        }
-        if (parentRef.current && !buttonRendered) {
-            google.accounts.id.renderButton(parentRef.current, {});
-            setButtonRendered(true);
-        }
-    }, [medplum, googleClientId, initialized, scriptLoaded, parentRef, buttonRendered, handleGoogleCredential]);
-    if (!googleClientId) {
-        return null;
-    }
-    return React.createElement("div", { ref: parentRef });
-}
-function getGoogleClientId(clientId) {
-    var _a, _b;
-    if (clientId) {
-        return clientId;
-    }
-    const origin = window.location.protocol + '//' + window.location.host;
-    const authorizedOrigins = (_b = (_a = "http://localhost:3000,http://localhost:6006,https://app.medplum.com,https://docs.medplum.com") === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
-    if (authorizedOrigins.includes(origin)) {
-        return "921088377005-3j1sa10vr6hj86jgmdfh2l53v3mp7lfi.apps.googleusercontent.com";
-    }
-    return undefined;
-}
-
 function SignInForm(props) {
     const medplum = useMedplum();
     const [login, setLogin] = useState(undefined);
@@ -5568,6 +5675,7 @@ function SignInForm(props) {
 }
 function AuthenticationForm(props) {
     const medplum = useMedplum();
+    const googleClientId = getGoogleClientId(props.googleClientId);
     const [outcome, setOutcome] = useState();
     const issues = getIssuesForExpression(outcome, undefined);
     return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
@@ -5588,6 +5696,21 @@ function AuthenticationForm(props) {
             var _a, _b;
             return (React.createElement("div", { "data-testid": "text-field-error", key: (_a = issue.details) === null || _a === void 0 ? void 0 : _a.text }, (_b = issue.details) === null || _b === void 0 ? void 0 : _b.text));
         }))),
+        googleClientId && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "medplum-signin-google-container" },
+                React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => {
+                        medplum
+                            .startGoogleLogin({
+                            clientId: props.clientId,
+                            scope: props.scope,
+                            nonce: props.nonce,
+                            googleClientId: response.clientId,
+                            googleCredential: response.credential,
+                        })
+                            .then(props.handleAuthResponse)
+                            .catch(setOutcome);
+                    } })),
+            React.createElement("div", { className: "medplum-signin-separator" }, "or"))),
         React.createElement(FormSection, { title: "Email", htmlFor: "email", outcome: outcome },
             React.createElement(Input, { name: "email", type: "email", testid: "email", required: true, autoFocus: true, outcome: outcome })),
         React.createElement(FormSection, { title: "Password", htmlFor: "password", outcome: outcome },
@@ -5600,20 +5723,7 @@ function AuthenticationForm(props) {
                 React.createElement("input", { type: "checkbox", id: "remember", name: "remember", value: "true" }),
                 React.createElement("label", { htmlFor: "remember" }, "Remember me")),
             React.createElement("div", null,
-                React.createElement(Button, { type: "submit", testid: "submit" }, "Sign in"))),
-        React.createElement("div", { className: "medplum-signin-google-container" },
-            React.createElement(GoogleButton, { googleClientId: props.googleClientId, handleGoogleCredential: (response) => {
-                    medplum
-                        .startGoogleLogin({
-                        clientId: props.clientId,
-                        scope: props.scope,
-                        nonce: props.nonce,
-                        googleClientId: response.clientId,
-                        googleCredential: response.credential,
-                    })
-                        .then(props.handleAuthResponse)
-                        .catch(setOutcome);
-                } }))));
+                React.createElement(Button, { type: "submit", testid: "submit" }, "Sign in")))));
 }
 function ProfileForm(props) {
     const medplum = useMedplum();
@@ -5685,5 +5795,5 @@ function TabSwitch(props) {
     })));
 }
 
-export { AddressDisplay, AddressInput, AttachmentArrayDisplay, AttachmentArrayInput, AttachmentInput, Autocomplete, Avatar, BackboneElementInput, Button, Checkbox, CheckboxFormSection, CodeInput, CodeableConceptDisplay, CodeableConceptInput, ContactDetailDisplay, ContactDetailInput, ContactPointDisplay, ContactPointInput, DateTimeDisplay, DateTimeInput, DefaultResourceTimeline, DiagnosticReportDisplay, Document, ElementDefinitionInputSelector, ElementDefinitionTypeInput, EncounterTimeline, ErrorBoundary, FhirPathTable, FooterLinks, Form, FormSection, Header, HumanNameDisplay, HumanNameInput, IdentifierInput, Input, Loading, Logo, MedplumLink, MedplumProvider, MemoizedFhirPathTable, MemoizedSearchControl, MenuItem, ObservationTable, PatientTimeline, PlanDefinitionBuilder, Popup, QuestionnaireBuilder, QuestionnaireForm, QuestionnaireFormItem, QuestionnaireItemType, RangeDisplay, RangeInput, ReferenceInput, RequestGroupDisplay, ResourceArrayDisplay, ResourceArrayInput, ResourceBadge, ResourceBlame, ResourceDiff, ResourceForm, ResourceHistoryTable, ResourceInput, ResourceName, ResourcePropertyDisplay, ResourcePropertyInput, ResourceTable, ResourceTimeline, Scheduler, Scrollable, SearchChangeEvent, SearchClickEvent, SearchControl, SearchFieldEditor, SearchFilterEditor, SearchLoadEvent, Select, ServiceRequestTimeline, SignInForm, StatusBadge, Tab, TabList, TabPanel, TabSwitch, TextArea, Timeline, TimelineItem, TitleBar, UploadButton, addDateEqualsFilter, addDateFilter, addDateFilterBetween, addField, addFilter, addLastMonthFilter, addMissingFilter, addNextMonthFilter, addQuestionnaireInitialValues, addThisMonthFilter, addTodayFilter, addTomorrowFilter, addYearToDateFilter, addYesterdayFilter, buildFieldNameString, clearFilters, clearFiltersOnField, convertIsoToLocal, convertLocalToIso, createScriptTag, deleteFilter, formatRangeString, getOpString, getSearchOperators, getSortField, getTimeString, getValueAndType, hasFilterOnField, isChoiceQuestion, isSortDescending, movePage, parseForm, renderValue, setFilters, setOffset, setPropertyValue, setSort, sortByDateAndPriority, toggleSort, useMedplum, useMedplumContext, useMedplumProfile, useResource };
+export { AddressDisplay, AddressInput, AttachmentArrayDisplay, AttachmentArrayInput, AttachmentInput, Autocomplete, Avatar, BackboneElementInput, Button, Checkbox, CheckboxFormSection, CodeInput, CodeableConceptDisplay, CodeableConceptInput, ContactDetailDisplay, ContactDetailInput, ContactPointDisplay, ContactPointInput, DateTimeDisplay, DateTimeInput, DefaultResourceTimeline, DiagnosticReportDisplay, Document, ElementDefinitionInputSelector, ElementDefinitionTypeInput, EncounterTimeline, ErrorBoundary, FhirPathTable, FooterLinks, Form, FormSection, Header, HumanNameDisplay, HumanNameInput, IdentifierInput, Input, Loading, Logo, MedplumLink, MedplumProvider, MemoizedFhirPathTable, MemoizedSearchControl, MenuItem, ObservationTable, PatientTimeline, PlanDefinitionBuilder, Popup, QuestionnaireBuilder, QuestionnaireForm, QuestionnaireFormItem, QuestionnaireItemType, RangeDisplay, RangeInput, ReferenceInput, RegisterForm, RequestGroupDisplay, ResourceArrayDisplay, ResourceArrayInput, ResourceBadge, ResourceBlame, ResourceDiff, ResourceForm, ResourceHistoryTable, ResourceInput, ResourceName, ResourcePropertyDisplay, ResourcePropertyInput, ResourceTable, ResourceTimeline, Scheduler, Scrollable, SearchChangeEvent, SearchClickEvent, SearchControl, SearchFieldEditor, SearchFilterEditor, SearchLoadEvent, Select, ServiceRequestTimeline, SignInForm, StatusBadge, Tab, TabList, TabPanel, TabSwitch, TextArea, Timeline, TimelineItem, TitleBar, UploadButton, addDateEqualsFilter, addDateFilter, addDateFilterBetween, addField, addFilter, addLastMonthFilter, addMissingFilter, addNextMonthFilter, addQuestionnaireInitialValues, addThisMonthFilter, addTodayFilter, addTomorrowFilter, addYearToDateFilter, addYesterdayFilter, buildFieldNameString, clearFilters, clearFiltersOnField, convertIsoToLocal, convertLocalToIso, createScriptTag, deleteFilter, formatRangeString, getOpString, getRecaptcha, getSearchOperators, getSortField, getTimeString, getValueAndType, hasFilterOnField, initRecaptcha, isChoiceQuestion, isSortDescending, movePage, parseForm, renderValue, setFilters, setOffset, setPropertyValue, setSort, sortByDateAndPriority, toggleSort, useMedplum, useMedplumContext, useMedplumProfile, useResource };
 //# sourceMappingURL=index.js.map