Add password confirmation field

hotblac · Jul 29, 2018 · f7236ec · f7236ec
1 parent e2bc6d1
commit f7236ec
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 6 deletions.
diff --git a/src/UserRegistration.js b/src/UserRegistration.js
@@ -7,20 +7,36 @@ export class UserRegistration extends Component {
         super(props);
         this.state = {
             username: '',
-            password: ''
+            password: '',
+            confirm: '',
+            submitEnabled: false
         };
         this.handleSubmit = this.handleSubmit.bind(this);
     }
 
     handleInputChange = (event) =>  {
         const target = event.target;
+
+        // Logic to check passwords match must check input change against existing field value.
+        let submitEnabled = false;
+        if (target.name === 'password') {
+            submitEnabled = target.value && (target.value === this.state.confirm);
+        } else if (target.name === 'confirm') {
+            submitEnabled = target.value && (target.value === this.state.password);
+        }
+
         this.setState({
-            [target.name]: target.value
+            [target.name]: target.value,
+            submitEnabled: submitEnabled
         });
     };
 
     handleSubmit = () => {
-        this.props.onSubmit(this.state.username, this.state.password);
+        if (this.state.submitEnabled) {
+            this.props.onSubmit(this.state.username, this.state.password);
+        } else {
+            console.error("Attempt to submit form when form has validation errors");
+        }
     };
 
     render() {
@@ -30,16 +46,22 @@ export class UserRegistration extends Component {
                 <div className="field">
                     <label className="label">Username</label>
                     <div className="control">
-                        <input name="username" type={'text'} className="input username" onChange={this.handleInputChange}/>
+                        <input name="username" type="text" className="input username" onChange={this.handleInputChange}/>
                     </div>
                 </div>
                 <div className="field">
                     <label className="label">Password</label>
                     <div className="control">
-                        <input name="password" type={'password'} className="input password" onChange={this.handleInputChange}/>
+                        <input name="password" type="password" className="input password" onChange={this.handleInputChange}/>
+                    </div>
+                </div>
+                <div className="field">
+                    <label className="label">Confirm Password</label>
+                    <div className="control">
+                        <input name="confirm" type="password" className="input confirm" onChange={this.handleInputChange}/>
                     </div>
                 </div>
-                <button className="button is-primary" onClick={this.handleSubmit}>Submit</button>
+                <button className="button is-primary" onClick={this.handleSubmit} disabled={!this.state.submitEnabled}>Submit</button>
             </div>
         );
     }

diff --git a/src/UserRegistration.test.js b/src/UserRegistration.test.js
@@ -8,6 +8,10 @@ describe ('<UserRegistration/>', () => {
     const password = 'password';
     const onSubmit = jest.fn();
 
+    beforeEach(() => {
+        onSubmit.mockReset();
+    });
+
     it('renders', () => {
         const wrapper = shallow(<UserRegistration/>);
         expect(wrapper).toBeDefined();
@@ -17,14 +21,69 @@ describe ('<UserRegistration/>', () => {
         const wrapper = shallow(<UserRegistration onSubmit={onSubmit}/>);
         const usernameField = wrapper.find('input.username');
         const passwordField = wrapper.find('input.password');
+        const confirmField = wrapper.find('input.confirm');
         const submitButton = wrapper.find('button');
 
         usernameField.simulate('change', stubEvent(usernameField, username));
         passwordField.simulate('change', stubEvent(passwordField, password));
+        confirmField.simulate('change', stubEvent(confirmField, password));
         submitButton.simulate('click');
 
         expect(onSubmit).toBeCalledWith(username, password);
     });
+
+    it('disables submit when password does not match confirmation', () => {
+        const wrapper = shallow(<UserRegistration onSubmit={onSubmit}/>);
+        const usernameField = wrapper.find('input.username');
+        const passwordField = wrapper.find('input.password');
+        const confirmField = wrapper.find('input.confirm');
+
+        usernameField.simulate('change', stubEvent(usernameField, username));
+        passwordField.simulate('change', stubEvent(passwordField, password));
+        confirmField.simulate('change', stubEvent(confirmField, 'mismatch'));
+
+        const submitButton = wrapper.find('button');
+        expect(submitButton.prop('disabled')).toBeTruthy();
+
+        // Try submitting anyway
+        submitButton.simulate('click');
+        expect(onSubmit).not.toBeCalled();
+    });
+
+    it('enables submit when password matches confirmation', () => {
+        const wrapper = shallow(<UserRegistration onSubmit={onSubmit}/>);
+        const usernameField = wrapper.find('input.username');
+        const passwordField = wrapper.find('input.password');
+        const confirmField = wrapper.find('input.confirm');
+
+        usernameField.simulate('change', stubEvent(usernameField, username));
+        passwordField.simulate('change', stubEvent(passwordField, password));
+        confirmField.simulate('change', stubEvent(confirmField, password));
+
+        const submitButton = wrapper.find('button');
+        expect(submitButton.prop('disabled')).toBeFalsy();
+
+        submitButton.simulate('click');
+        expect(onSubmit).toBeCalled();
+    });
+
+    it('disables submit when password and confirmation are blank', () => {
+        const wrapper = shallow(<UserRegistration onSubmit={onSubmit}/>);
+        const usernameField = wrapper.find('input.username');
+        const passwordField = wrapper.find('input.password');
+        const confirmField = wrapper.find('input.confirm');
+
+        usernameField.simulate('change', stubEvent(usernameField, username));
+        passwordField.simulate('change', stubEvent(passwordField, ''));
+        confirmField.simulate('change', stubEvent(confirmField, ''));
+
+        const submitButton = wrapper.find('button');
+        expect(submitButton.prop('disabled')).toBeTruthy();
+
+        // Try submitting anyway
+        submitButton.simulate('click');
+        expect(onSubmit).not.toBeCalled();
+    });
 });
 
 /**