Merge pull request #593 from CodeForPhilly/587_tweak-new-user-modal

587: Tweak new user modal

Author: c-simpson

src/client/src/pages/UserManagement/Components/Dialog/NewUserDialog.jsx

@@ -19,6 +19,7 @@ import {
     buildUsernameValidation
 } from '../../Validations';
 import useAlert from "../../../../hooks/useAlert";
+import RolesRadioGroup from "../RolesRadioGroup";
 
 
 export default function NewUserDialog(props) {
@@ -49,7 +50,8 @@ export default function NewUserDialog(props) {
             username: data.username,
             full_name: data.name,
             role: data.role,
-            password: data.password
+            password: data.password,
+            active: "Y",
         };
 
         createUser(newUser, token)
@@ -99,18 +101,6 @@ export default function NewUserDialog(props) {
                     {(responseError || errors.username) && // This is a little janky... Could be improved upon.
                         <Typography color="error">{responseError || errors.username.message}</Typography>
                     }
-                    <TextField
-                        {...register("role")}
-                        margin="dense"
-                        id="role-input"
-                        label="Role - user/editor/admin"
-                        onBlur={() => trigger("role")}
-                        variant="standard"
-                        fullWidth
-                    />
-                    {errors.role &&
-                        <Typography color="error">{errors.role.message}</Typography>
-                    }
                     <TextField
                         {...register("password")}
                         margin="dense"
@@ -135,6 +125,10 @@ export default function NewUserDialog(props) {
                     {errors.confirmPassword &&
                         <Typography color="error">{errors.confirmPassword.message}</Typography>
                     }
+                    <RolesRadioGroup id="roles-radio-group" register={register} />
+                    {errors.role &&
+                        <Typography color="error">{errors.role.message}</Typography>
+                    }
                     <DialogActions>
                         <Button
                             onClick={onClose}

src/client/src/pages/UserManagement/Components/Dialog/UpdateUserDialog.jsx

@@ -16,6 +16,7 @@ import * as Yup from 'yup';
 import { updateUser } from "../../../../utils/api";
 import { buildNameValidation, buildRoleValidation } from '../../Validations';
 import useAlert from "../../../../hooks/useAlert";
+import RolesRadioGroup from "../RolesRadioGroup";
 
 
 export default function UpdateUserDialog(props) {
@@ -28,7 +29,6 @@ export default function UpdateUserDialog(props) {
     const {
         username,
         full_name: name,
-        role,
         active
     } = user;
 
@@ -104,16 +104,7 @@ export default function UpdateUserDialog(props) {
                     {(errors.username) &&
                         <Typography color="error">{errors.username.message}</Typography>
                     }
-                    <TextField
-                        {...register("role")}
-                        defaultValue={role}
-                        margin="dense"
-                        id="role-input"
-                        label="Role - user/editor/admin"
-                        onBlur={() => trigger("role")}
-                        variant="standard"
-                        fullWidth
-                    />
+                    <RolesRadioGroup id="roles-radio-group" user={user} register={register} />
                     {errors.role &&
                         <Typography color="error">{errors.role.message}</Typography>
                     }

src/client/src/pages/UserManagement/Components/RolesRadioGroup.jsx

@@ -0,0 +1,55 @@
+import {
+    FormControlLabel,
+    Radio,
+    RadioGroup,
+} from "@material-ui/core";
+import React from "react";
+
+const UserRoles = {
+    Admin: "admin",
+    User: "user",
+};
+
+const options = [
+    {
+        label: "Admin",
+        value: UserRoles.Admin,
+    },
+    {
+        label: "User",
+        value: UserRoles.User,
+    },
+];
+
+export default function RolesRadioGroup(props) {
+    const { register, user } = props;
+    const [selectedRole, setSelectedRole] = React.useState(user ? user.role : undefined);
+
+    React.useEffect(() => {
+        setSelectedRole(user ? user.role : null);
+    }, [user]);
+
+    const generateRadioOptions = () => {
+        return options.map((option) => (
+            <FormControlLabel
+                key={option.value}
+                value={option.value}
+                label={option.label}
+                control={<Radio />}
+                checked={selectedRole === option.value}
+                onClick={(() => setSelectedRole(option.value))}
+                {...register("role")}
+            />
+        ));
+    };
+
+    return (
+        <RadioGroup
+            row
+            name="role"
+            {...register("role")}
+        >
+            {generateRadioOptions()}
+        </RadioGroup>
+    );
+};

src/client/src/pages/UserManagement/Validations.js

@@ -30,7 +30,7 @@ export const buildUsernameValidation = () => {
 export const buildRoleValidation = () => {
     return Yup.string()
         .trim()
-        .oneOf(["user", "editor", "admin"], "Role must be one of the following: user/editor/admin")
+        .oneOf(["user", "admin"], "Role must be one of the following: user/admin")
         .required("Role is required")
 }
 
@@ -50,6 +50,6 @@ export const buildPasswordValidation = (username) => {
                 return [...DISALLOWED_WORDS, lowercaseUsername].every((word) => !lowercasePassword.includes(word))
             })
         .matches(/^[a-zA-Z0-9!@#$%^*]+$/, "Password can only contain numbers, letters, and the following symbols: !@#$%^*")
-        .min(12, "Password must contain at least 12 letters")
+        .min(12, "Password must contain at least 12 characters")
         .max(36, "Password must be 36 characters or less")
 }

src/server/api/user_api.py

@@ -266,7 +266,7 @@ def user_create():
     username : str  
     full_name : str  
     password : str  
-    role : str, one of `user`, `editor`, `admin`  
+    role : str, one of `user`, `admin`  
 
     Returns    
     ----------

src/server/db_setup/README.md

@@ -11,7 +11,7 @@ Form POST Parameters
 username : str  
 full_name : str  
 password : str  
-role : str, one of `user`, `editor`, `admin`  
+role : str, one of `user`, `admin`  
 
 Returns    
 ----------
@@ -28,6 +28,5 @@ Returns
 One header row of field names, one row per user  
 "['username', 'full_name', 'active', 'role'],  
 ['admin', None, 'Y', 'admin'],  
-['editor', None, 'Y', 'editor'],  
 ['steve11', 'Steve the User', 'Y', 'admin'],  
 ['user', None, 'Y', 'user'],"

src/server/db_setup/base_users.py

@@ -8,15 +8,14 @@
 
 
 try:   
-    from secrets_dict import BASEUSER_PW, BASEEDITOR_PW, BASEADMIN_PW
+    from secrets_dict import BASEUSER_PW, BASEADMIN_PW
 except ImportError:   
     # Not running locally
     logger.debug("Couldn't get BASE user PWs from file, trying environment **********")
     from os import environ
 
     try:
         BASEUSER_PW = environ['BASEUSER_PW']
-        BASEEDITOR_PW = environ['BASEEDITOR_PW']
         BASEADMIN_PW = environ['BASEADMIN_PW']
 
     except KeyError:
@@ -39,15 +38,14 @@ def create_base_roles():
         role_count = len(result.fetchall())
         if role_count == 0:
             connection.execute("INSERT into pdp_user_roles  values (1, 'user') ")
-            connection.execute("INSERT into pdp_user_roles  values (2, 'editor') ")
             connection.execute("INSERT into pdp_user_roles  values (9, 'admin') ")
 
         else:
             logger.debug("%d roles already present in DB, not creating", role_count)
 
 
 def create_base_users():  # TODO: Just call create_user for each
-    """ Creates three users (user, editor, admin) for testing
+    """ Creates two users (user, admin) for testing
         Password for each is user name with 'pw' appended """
     with engine.connect() as connection:
 
@@ -73,13 +71,6 @@ def create_base_users():  # TODO: Just call create_user for each
             )
             connection.execute(ins_stmt)
 
-            # editor
-            pw_hash = user_api.hash_password(BASEEDITOR_PW)
-            ins_stmt = pu.insert().values(
-                username="base_editor", full_name="Base Editor", password=pw_hash, active="Y", role=2,
-            )
-            connection.execute(ins_stmt)
-
             # admin
             pw_hash = user_api.hash_password(BASEADMIN_PW)
             ins_stmt = pu.insert().values(