Webatrice: KnownHosts component (#4456)

* refactor dexie services for future schema updates

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

webclient/src/dialogs/CardImportDialog/CardImportDialog.css

@@ -0,0 +1,5 @@
+.dialog-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

webclient/src/dialogs/CardImportDialog/CardImportDialog.tsx

@@ -0,0 +1,36 @@
+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 { CardImportForm } from 'forms';
+
+import './CardImportDialog.css';
+
+const CardImportDialog = ({ classes, handleClose, isOpen }: any) => {
+  const handleOnClose = () => {
+    handleClose();
+  }
+
+  return (
+    <Dialog onClose={handleOnClose} open={isOpen}>
+      <DialogTitle disableTypography className="dialog-title">
+        <Typography variant="h2">Import Cards</Typography>
+
+        {handleOnClose ? (
+          <IconButton onClick={handleOnClose}>
+            <CloseIcon />
+          </IconButton>
+        ) : null}
+      </DialogTitle>
+      <DialogContent>
+        <CardImportForm onSubmit={handleOnClose}></CardImportForm>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default CardImportDialog;

webclient/src/dialogs/KnownHostDialog/KnownHostDialog.css

@@ -0,0 +1,26 @@
+.KnownHostDialog {
+
+}
+
+.KnownHostDialog .MuiDialog-paper {
+  width: 100%;
+  max-width: 420px;
+}
+
+.dialog-title__wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid;
+  padding-bottom: 10px;
+}
+
+.dialog-title__label {
+  display: flex;
+  align-items: center;
+}
+
+.dialog-content__subtitle.MuiTypography-root {
+  margin-bottom: 20px;
+}

webclient/src/dialogs/KnownHostDialog/KnownHostDialog.tsx

@@ -0,0 +1,55 @@
+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 { makeStyles } from '@material-ui/core/styles';
+import AddIcon from '@material-ui/icons/Add';
+import CloseIcon from '@material-ui/icons/Close';
+import Typography from '@material-ui/core/Typography';
+
+import { KnownHostForm } from 'forms';
+
+import './KnownHostDialog.css';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& .dialog-title__wrapper': {
+      borderColor: theme.palette.grey[300]
+    }
+  },
+}));
+
+const KnownHostDialog = ({ handleClose, onRemove, onSubmit, isOpen, host }: any) => {
+  const classes = useStyles();
+
+  const handleOnClose = () => {
+    if (handleClose) {
+      handleClose();
+    }
+  };
+
+  return (
+    <Dialog className={'KnownHostDialog ' + classes.root} onClose={handleOnClose} open={isOpen}>
+      <DialogTitle disableTypography className='dialog-title'>
+        <div className='dialog-title__wrapper'>
+          <Typography variant='h2'>{ host ? 'Edit' : 'Add' } Known Host</Typography>
+
+          {handleClose ? (
+            <IconButton onClick={handleClose}>
+              <CloseIcon fontSize='large' />
+            </IconButton>
+          ) : null}
+        </div>
+      </DialogTitle>
+      <DialogContent className='dialog-content'>
+        <Typography className='dialog-content__subtitle' variant='subtitle1'>
+          Adding a new host allows you to connect to different servers. Enter the details below to your host list.
+        </Typography>
+        <KnownHostForm onRemove={onRemove} onSubmit={onSubmit} host={host}></KnownHostForm>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default KnownHostDialog;

webclient/src/dialogs/RegistrationDialog/RegistrationDialog.css

@@ -0,0 +1,5 @@
+.dialog-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

webclient/src/dialogs/RegistrationDialog/RegistrationDialog.tsx

@@ -0,0 +1,36 @@
+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 { RegisterForm } from 'forms';
+
+import './RegistrationDialog.css';
+
+const RegistrationDialog = ({ classes, handleClose, isOpen }: any) => {
+  const handleOnClose = () => {
+    handleClose();
+  }
+
+  return (
+    <Dialog onClose={handleOnClose} open={isOpen}>
+      <DialogTitle disableTypography className="dialog-title">
+        <Typography variant="h6">Create New Account</Typography>
+
+        {handleOnClose ? (
+          <IconButton onClick={handleOnClose}>
+            <CloseIcon />
+          </IconButton>
+        ) : null}
+      </DialogTitle>
+      <DialogContent>
+        <RegisterForm onSubmit={handleOnClose}></RegisterForm>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default RegistrationDialog;

webclient/src/dialogs/index.ts

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