invite users

components/UsersPage/UsersPage.module.scss

@@ -65,3 +65,18 @@
     }
   }
 }
+
+.headerRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+
+  h1 {
+    margin: 0;
+  }
+}
+
+.disclaimerText {
+  margin-top: 0;
+}

components/UsersPage/UsersPage.tsx

@@ -251,6 +251,63 @@ const EditUserModal = ({
   );
 };
 
+const InviteUserModal = ({ close, modalRef }: ModalProps) => {
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const { formData, handleInputChange, handleSubmit } = useForm(
+    { email: '' },
+    async () => {
+      // Invite user
+      toast
+        .promise(publishJSON(`/api/admin/users/invite`, 'POST', formData), {
+          loading: 'Sending the invite...',
+          success: 'Invite sent!',
+          error: (err) => `Sending invite failed: ${err.message}`,
+        })
+        .then((data) => {
+          if (data) {
+            close(true);
+          }
+        });
+      return false;
+    }
+  );
+
+  return (
+    <Modal modalRef={modalRef}>
+      <ModalHeader>
+        <h3>Invite a new user</h3>
+      </ModalHeader>
+      <ModalBody>
+        <p className={styles.disclaimerText}>
+          The new user will receive a link to create their account. It will be
+          activated automatically.
+        </p>
+        <FormWrapper>
+          <form ref={formRef} onSubmit={handleSubmit} autoComplete="off">
+            <FormControl>
+              <label htmlFor="email">Email</label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                value={formData.email}
+                onChange={handleInputChange}
+              />
+            </FormControl>
+          </form>
+        </FormWrapper>
+      </ModalBody>
+      <ModalFooter>
+        <Button onClick={() => close(true)}>Cancel</Button>
+        <Button onClick={() => handleSubmit()} variant="primary">
+          Submit
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
 const UserCard = ({
   user,
   update,
@@ -419,7 +476,12 @@ export const UsersPage = () => {
       </Head>
       <Header user={user}></Header>
       <Container>
-        <h1>Users{userCount && ` (${userCount})`}</h1>
+        <div className={styles.headerRow}>
+          <h1>Users{userCount && ` (${userCount})`}</h1>
+          <Button onClick={() => ModalService.open(InviteUserModal, {})}>
+            Invite
+          </Button>
+        </div>
         <FormWrapper>
           <FormControl>
             <input