@medplum/react 0.9.22 → 0.9.23

package/dist/esm/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/types/RegisterForm.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import './SignInForm.css';
+import './util.css';
+export interface BaseRegisterFormProps {
+    readonly googleClientId?: string;
+    readonly children?: React.ReactNode;
+    readonly onSuccess: () => void;
+}
+export interface PatientRegisterFormProps extends BaseRegisterFormProps {
+    readonly type: 'patient';
+    readonly projectId: string;
+}
+export interface ProjectRegisterFormProps extends BaseRegisterFormProps {
+    readonly type: 'project';
+}
+export declare type RegisterFormProps = PatientRegisterFormProps | ProjectRegisterFormProps;
+export declare function RegisterForm(props: RegisterFormProps): JSX.Element;

package/dist/types/index.d.ts

@@ -47,6 +47,7 @@ export * from './QuestionnaireUtils';
 export * from './RangeDisplay';
 export * from './RangeInput';
 export * from './ReferenceInput';
+export * from './RegisterForm';
 export * from './RequestGroupDisplay';
 export * from './ResourceArrayDisplay';
 export * from './ResourceArrayInput';
@@ -82,3 +83,4 @@ export * from './UploadButton';
 export * from './useResource';
 export * from './utils';
 export * from './utils/date';
+export * from './utils/recaptcha';

package/dist/types/stories/RegisterForm.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare function Basic(): JSX.Element;
+export declare function WithFooter(): JSX.Element;
+export declare function WithGoogle(): JSX.Element;

package/dist/types/utils/recaptcha.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Dynamically loads the recaptcha script.
+ * We do not want to load the script on page load unless the user needs it.
+ */
+export declare function initRecaptcha(): void;
+/**
+ * Starts a request to generate a recapcha token.
+ * @returns Promise to a recaptcha token for the current user.
+ */
+export declare function getRecaptcha(): Promise<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medplum/react",
-  "version": "0.9.22",
+  "version": "0.9.23",
   "description": "Medplum React Component Library",
   "author": "Medplum <hello@medplum.com>",
   "license": "Apache-2.0",
@@ -19,9 +19,9 @@
     "storybook": "build-storybook"
   },
   "devDependencies": {
-    "@medplum/core": "0.9.22",
-    "@medplum/fhirtypes": "0.9.22",
-    "@medplum/mock": "0.9.22",
+    "@medplum/core": "0.9.23",
+    "@medplum/fhirtypes": "0.9.23",
+    "@medplum/mock": "0.9.23",
     "@storybook/addon-actions": "6.5.9",
     "@storybook/addon-essentials": "6.5.9",
     "@storybook/addon-links": "6.5.9",
@@ -48,7 +48,7 @@
     "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "@medplum/core": "0.9.22",
+    "@medplum/core": "0.9.23",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0",
     "react-router-dom": "^6.2.2"