connect reset password to login view (#4489)

webclient/src/dialogs/RegistrationDialog/RegistrationDialog.css

@@ -3,3 +3,8 @@
   justify-content: space-between;
   align-items: center;
 }
+
+.dialog-content {
+  width: 700px;
+  max-width: 100%;
+}

webclient/src/dialogs/RegistrationDialog/RegistrationDialog.tsx

@@ -10,13 +10,13 @@ import { RegisterForm } from 'forms';
 
 import './RegistrationDialog.css';
 
-const RegistrationDialog = ({ classes, handleClose, isOpen }: any) => {
+const RegistrationDialog = ({ classes, handleClose, isOpen, onSubmit }: any) => {
   const handleOnClose = () => {
     handleClose();
   }
 
   return (
-    <Dialog onClose={handleOnClose} open={isOpen}>
+    <Dialog className="RegistrationDialog" onClose={handleOnClose} open={isOpen} maxWidth='xl'>
       <DialogTitle disableTypography className="dialog-title">
         <Typography variant="h6">Create New Account</Typography>
 
@@ -26,8 +26,8 @@ const RegistrationDialog = ({ classes, handleClose, isOpen }: any) => {
           </IconButton>
         ) : null}
       </DialogTitle>
-      <DialogContent>
-        <RegisterForm onSubmit={handleOnClose}></RegisterForm>
+      <DialogContent className="dialog-content">
+        <RegisterForm onSubmit={onSubmit}></RegisterForm>
       </DialogContent>
     </Dialog>
   );

webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.css

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

webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.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 { RequestPasswordResetForm } from 'forms';
+
+import './RequestPasswordResetDialog.css';
+
+const RequestPasswordResetDialog = ({ classes, handleClose, isOpen, onSubmit, skipTokenRequest }: any) => {
+  const handleOnClose = () => {
+    handleClose();
+  }
+
+  return (
+    <Dialog onClose={handleOnClose} open={isOpen}>
+      <DialogTitle disableTypography className="dialog-title">
+        <Typography variant="h6">Request Password Reset</Typography>
+
+        {handleOnClose ? (
+          <IconButton onClick={handleOnClose}>
+            <CloseIcon />
+          </IconButton>
+        ) : null}
+      </DialogTitle>
+      <DialogContent>
+        <RequestPasswordResetForm onSubmit={onSubmit} skipTokenRequest={skipTokenRequest}></RequestPasswordResetForm>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default RequestPasswordResetDialog;

webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.css

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

webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.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 { ResetPasswordForm } from 'forms';
+
+import './ResetPasswordDialog.css';
+
+const ResetPasswordDialog = ({ classes, handleClose, isOpen, onSubmit, userName }: any) => {
+  const handleOnClose = () => {
+    handleClose();
+  }
+
+  return (
+    <Dialog onClose={handleOnClose} open={isOpen}>
+      <DialogTitle disableTypography className="dialog-title">
+        <Typography variant="h6">Reset Password</Typography>
+
+        {handleOnClose ? (
+          <IconButton onClick={handleOnClose}>
+            <CloseIcon />
+          </IconButton>
+        ) : null}
+      </DialogTitle>
+      <DialogContent>
+        <ResetPasswordForm onSubmit={onSubmit} userName={userName}/>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ResetPasswordDialog;

webclient/src/dialogs/index.ts

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