Webatrice: Add account validation dialog/form (#4547)

* Add account validation dialog/form

* clean up

* close registration dialog on token request

* remove dupe code

* add subtitle styling

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.css

@@ -0,0 +1,13 @@
+.dialog-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.MuiDialogTitle-root.dialog-title {
+  padding-bottom: 0;
+}
+
+.content {
+  margin-bottom: 20px;
+}

webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import Typography from '@material-ui/core/Typography';
+
+import { AccountActivationForm } from 'forms';
+
+import './AccountActivationDialog.css';
+
+const AccountActivationDialog = ({ classes, handleClose, isOpen, onSubmit }: any) => {
+  const handleOnClose = () => {
+    handleClose();
+  }
+
+  return (
+    <Dialog onClose={handleOnClose} open={isOpen}>
+      <DialogTitle disableTypography className="dialog-title">
+        <Typography variant="h6">Account Activation</Typography>
+
+        {handleOnClose ? (
+          <IconButton onClick={handleOnClose}>
+            <CloseIcon />
+          </IconButton>
+        ) : null}
+      </DialogTitle>
+      <DialogContent>
+        <div className="content">
+          <Typography variant='subtitle1'>Your account has not been activated yet.</Typography>
+          <Typography variant='subtitle1'>You need to provide the activation token received in the activation email.</Typography>
+        </div>
+
+        <AccountActivationForm onSubmit={onSubmit}></AccountActivationForm>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AccountActivationDialog;

webclient/src/dialogs/index.ts

@@ -1,3 +1,4 @@
+export { default as AccountActivationDialog } from './AccountActivationDialog/AccountActivationDialog';
 export { default as CardImportDialog } from './CardImportDialog/CardImportDialog';
 export { default as KnownHostDialog } from './KnownHostDialog/KnownHostDialog';
 export { default as RegistrationDialog } from './RegistrationDialog/RegistrationDialog';