Merge pull request #83 from tieme-ndo/create-user-password-confirmation

created confirm passsword field
tieme-ndo · Sep 20, 2019 · d657a32 · d657a32
2 parents a5932a5 + 730d96a
commit d657a32
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 4 deletions.
diff --git a/src/components/pages/AddStaff/AddStaff.js b/src/components/pages/AddStaff/AddStaff.js
@@ -10,6 +10,7 @@ function AddStaff() {
   const [state, updateState] = useState({
     username: '',
     password: '',
+    confirmPassword: '',
     isAdmin: false,
     createAccount: false,
     errors: {}
@@ -36,7 +37,8 @@ function AddStaff() {
 
     const credential = {
       username: state.username,
-      password: state.password
+      password: state.password,
+      confirmPassword: state.confirmPassword
     };
 
     const { errors, isValid } = await validateAddStaffForm(credential);
@@ -49,6 +51,16 @@ function AddStaff() {
       }));
     }
 
+    if (state.password !== state.confirmPassword) {
+      return updateState(prevState => ({
+        ...prevState,
+        createAccount: false,
+        password: '',
+        confirmPassword: '',
+        errors: [{ password: 'Passwords do not match' }]
+      }));
+    }
+
     const response = await registrationHandler({
       username: state.username,
       password: state.password,
@@ -69,7 +81,8 @@ function AddStaff() {
 
       return updateState(prevState => ({
         ...prevState,
-        createAccount: false
+        createAccount: false,
+        errors: {}
       }));
     } else if (response === 'New user created') {
       toast.success('New user created');
@@ -78,6 +91,7 @@ function AddStaff() {
         ...prevState,
         username: '',
         password: '',
+        confirmPassword: '',
         isAdmin: false,
         createAccount: false
       }));

diff --git a/src/components/pages/AddStaff/AddStaff.spec.js b/src/components/pages/AddStaff/AddStaff.spec.js
@@ -9,6 +9,8 @@ it('renders without crashing', () => {
   expect(usernameField).toBeInTheDocument();
   const passwordField = getByTestId('password-field');
   expect(passwordField).toBeInTheDocument();
+  const confirmPasswordField = getByTestId('confirm-password-field');
+  expect(confirmPasswordField).toBeInTheDocument();
   const adminCheckbox = getByTestId('admin-checkbox');
   expect(adminCheckbox).toBeInTheDocument();
 });
diff --git a/src/components/pages/AddStaff/AddStaffForm.js b/src/components/pages/AddStaff/AddStaffForm.js
@@ -67,6 +67,18 @@ const AddStaff = props => {
                     data-testid="password-field"
                   />
                 </Form.Field>
+                <Form.Field>
+                  <label htmlFor="confirmPassword">Confirm Password</label>
+                  <Form.Input
+                    fluid
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    type="password"
+                    value={state.confirmPassword}
+                    onChange={handleChange}
+                    data-testid="confirm-password-field"
+                  />
+                </Form.Field>
                 <Form.Field>
                   <Checkbox
                     label="Check this box to make this user Admin"
@@ -88,8 +100,8 @@ const AddStaff = props => {
                     content="Loading..."
                   />
                 ) : (
-                  <Button color="teal" fluid content="Add Staff" />
-                )}
+                    <Button color="teal" fluid content="Add Staff" />
+                  )}
               </Segment>
             </Form>
           </Grid.Column>

diff --git a/src/components/pages/AddStaff/AddStaffValidation.js b/src/components/pages/AddStaff/AddStaffValidation.js
@@ -8,6 +8,12 @@ const addStaffSchema = yup.object().shape({
     .trim()
     .required(),
   password: yup
+    .string()
+    .min(6)
+    .max(40)
+    .required(),
+
+  confirmPassword: yup
     .string()
     .min(6)
     .max(40)