connect reset password to login view (#4489)

webclient/src/components/CheckboxField/CheckboxField.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-const CheckboxField = ({ input, label }) => {
-  const { value, onChange } = input;
+const CheckboxField = (props) => {
+  const { input: { value, onChange }, label, ...args } = props;
 
   // @TODO this isnt unchecking properly
   return (
@@ -12,9 +12,10 @@ const CheckboxField = ({ input, label }) => {
       label={label}
       control={
         <Checkbox
+          { ...args }
           className="checkbox-field__box"
           checked={!!value}
-          onChange={onChange}
+          onChange={(e, checked) => onChange(checked)}
           color="primary"
         />
       }

webclient/src/components/InputField/InputField.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const InputField = ({ input, label, name, autoComplete, type, meta: { touched, error, warning } }) => {
+const InputField = ({ input, meta: { touched, error, warning }, ...args }) => {
   const classes = useStyles();
 
   return (
@@ -38,15 +38,12 @@ const InputField = ({ input, label, name, autoComplete, type, meta: { touched, e
       ) }
 
       <TextField
+        { ...input }
+        { ...args }
         className="rounded"
         variant="outlined"
         margin="dense"
         fullWidth={true}
-        label={label}
-        name={name}
-        type={type}
-        autoComplete={autoComplete}
-        { ...input }
       />
     </div>
   );

webclient/src/components/KnownHosts/KnownHosts.tsx

@@ -29,7 +29,9 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const KnownHosts = ({ input: { onChange }, meta: { touched, error, warning } }) => {
+const KnownHosts = (props) => {
+  const { input: { onChange }, meta, disabled } = props;
+  const { touched, error, warning } = meta;
   const classes = useStyles();
 
   const [hostsState, setHostsState] = useState({
@@ -169,6 +171,7 @@ const KnownHosts = ({ input: { onChange }, meta: { touched, error, warning } })
           value={hostsState.selectedHost}
           fullWidth={true}
           onChange={e => selectHost(e.target.value)}
+          disabled={disabled}
         >
           <Button value={hostsState.selectedHost} onClick={openAddKnownHostDialog}>
             <span>Add new host</span>

webclient/src/components/RequestPasswordResetDialog/RequestPasswordResetDialog.css

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

webclient/src/components/RequestPasswordResetDialog/RequestPasswordResetDialog.tsx

@@ -1,36 +0,0 @@
-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 }: 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}></RequestPasswordResetForm>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default RequestPasswordResetDialog;

webclient/src/components/ResetPasswordDialog/ResetPasswordDialog.css

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

webclient/src/components/ResetPasswordDialog/ResetPasswordDialog.tsx

@@ -1,36 +0,0 @@
-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 }: 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}/>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default ResetPasswordDialog;

webclient/src/components/index.ts

@@ -1,6 +1,7 @@
 // Common components
 export { default as Card } from './Card/Card';
 export { default as CardDetails } from './CardDetails/CardDetails';
+export { default as CountryDropdown } from './CountryDropdown/CountryDropdown';
 export { default as Header } from './Header/Header';
 export { default as InputField } from './InputField/InputField';
 export { default as InputAction } from './InputAction/InputAction';
@@ -16,7 +17,3 @@ export { default as ScrollToBottomOnChanges } from './ScrollToBottomOnChanges/Sc
 // Guards
 export { default as AuthGuard } from './Guard/AuthGuard';
 export { default as ModGuard } from './Guard/ModGuard';
-
-// Dialogs
-export { default as RequestPasswordResetDialog } from './RequestPasswordResetDialog/RequestPasswordResetDialog';
-export { default as ResetPasswordDialog } from './ResetPasswordDialog/ResetPasswordDialog';