Merge remote-tracking branch 'origin/master' into 506-salesforce-message-publisher

Author: sposerina

src/client/package-lock.json

@@ -3,6 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
+        "@hookform/resolvers": "^3.1.0",
         "@material-ui/core": "^4.9.14",
         "@material-ui/icons": "^4.9.1",
         "@material-ui/lab": "^4.0.0-alpha.53",
@@ -15,8 +16,10 @@
         "moment": "^2.29.1",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
+        "react-hook-form": "^7.43.9",
         "react-router-dom": "^5.2.0",
-        "react-scripts": "3.4.1"
+        "react-scripts": "3.4.1",
+        "yup": "^1.1.1"
     },
     "scripts": {
         "start": "IS_LOCAL=false react-scripts start",

src/client/package.json

@@ -18,6 +18,7 @@ import Refresh from './components/Refresh';
 import useToken from './pages/Login/useToken';
 import Box from "@material-ui/core/Box";
 import {RFM} from "./pages/RFM/RFM";
+import UserManagement from './pages/UserManagement/UserManagement';
 
 let jwt = require('jsonwebtoken');
 
@@ -157,6 +158,11 @@ function AuthenticatedApp() {
                             <Refresh/>
                         </Route>
 
+                        <Route path="/users">
+                            <UserManagement access_token={access_token}/>
+                        </Route>
+
+
                     </Switch>
             }
 

src/client/src/App.js

@@ -26,6 +26,9 @@ class Header extends Component {
                             {this.props.headerType === 'Admin' &&
                             <Button size="large" component={RouterLink} to="/admin">Admin</Button>}
 
+                            {this.props.headerType === 'Admin' &&
+                            <Button size="large" component={RouterLink} to="/users">Users</Button>}
+
                             {this.props.headerType !== 'Login' && <Button size="large" component={RouterLink} to="/360view/search">360
                                 DataView</Button>
                             }

src/client/src/components/Header.js

@@ -0,0 +1,106 @@
+import { yupResolver } from "@hookform/resolvers/yup";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    TextField,
+    Typography
+} from '@material-ui/core';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+import { updateUser } from "../../../../utils/api";
+import { buildPasswordValidation } from '../../Validations';
+
+
+export default function ChangePasswordDialog(props) {
+    const {
+        onClose,
+        notifyResult,
+        token,
+        user
+    } = props;
+    const { username } = user;
+
+    const validationSchema = Yup.object().shape({
+        password: buildPasswordValidation(username),
+        confirmPassword: Yup.string().oneOf([Yup.ref("password")], "Passwords must match"),
+    });
+
+    const { register, handleSubmit, formState: { errors }, trigger } = useForm({
+        resolver: yupResolver(validationSchema),
+    });
+
+    const onSubmitHandler = (data) => {
+        const { password } = data;
+
+        updateUser({ username, password }, token)
+            .then((res) => {
+                if (res === "Updated") {
+                    notifyResult({ success: true, message: `Password for user ${username} successfully changed!` });
+                } else {
+                    notifyResult({ success: false, message: res });
+                }
+            })
+            .catch(e => {
+                console.warn(e)
+                notifyResult({ success: false, message: e })
+            });
+        onClose();
+    }
+
+    return (
+        <Dialog
+            hideBackdrop
+            fullWidth
+            open
+        >
+            <DialogTitle style={{ fontSize: "20px" }}>Change Password</DialogTitle>
+            <form onSubmit={handleSubmit(onSubmitHandler)}>
+                <DialogContent>
+                    <Typography>
+                        {`Fill out the fields below to update the password for user with username: ${user.username}.`}
+                    </Typography>
+                    <TextField
+                        {...register("password")}
+                        margin="dense"
+                        id="password-input"
+                        label="Password"
+                        onBlur={() => trigger("password")}
+                        type="password"
+                        fullWidth
+                    />
+                    {errors.password &&
+                        <Typography color="error">{errors.password.message}</Typography>
+                    }
+                    <TextField
+                        {...register("confirmPassword")}
+                        margin="dense"
+                        id="confirm-password-input"
+                        label="Confirm Password"
+                        onBlur={() => trigger("confirmPassword")}
+                        type="password"
+                        fullWidth
+                    />
+                    {errors.confirmPassword &&
+                        <Typography color="error">{errors.confirmPassword.message}</Typography>
+                    }
+                    <DialogActions>
+                        <Button
+                            onClick={onClose}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            type="submit"
+                        >
+                            Submit
+                        </Button>
+                    </DialogActions>
+                </DialogContent>
+            </form>
+        </Dialog>
+    )
+}