gokulakannant · gokulakannant · Aug 7, 2020 · Aug 7, 2020 · Aug 7, 2020 · Aug 7, 2020
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,17 @@ All notable changes to React Form Input Validation APIs will be documented in th
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [2.0.3] - 07/08/2020
+
+### Fixed
+
+- Fixed Confirm password not working issue - [#19](https://github.com/gokulakannant/react-form-input-validation/issues/19)
+
+### Modified
+
+- Reduced the package size with webpack configurations.
+- Performance optimization
+
 ## [2.0.1] - 25/11/2019
 
 ### Fixed

diff --git a/README.md b/README.md
@@ -17,6 +17,7 @@ A customized [validatorjs](https://www.npmjs.com/package/validatorjs) library to
 * Compatible with libraries like [Material UI](https://material-ui.com/), and etc.
 * Readable and declarative validation rules which is inspired by laravel framework.
 * Error messages with multilingual support.
+* Handy to manage multiple forms in same page.
 
 ## Installation
 
@@ -170,7 +171,7 @@ The input types button, submit, reset, hidden are exceptional from the above lis
 
 ## Versions
 
-Latest Version: 2.0.2. For more versions refer [VERSIONS.md](VERSIONS.md).
+Latest Version: 2.0.3. For more versions refer [VERSIONS.md](VERSIONS.md).
 
 ## Changelog
 

diff --git a/demo/.gitignore b/demo/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+.DS_Store
+dist
diff --git a/example/src/Form.css → demo/app/Form.css b/example/src/Form.css → demo/app/Form.css
diff --git a/example/src/Form.js → demo/app/Form.js b/example/src/Form.js → demo/app/Form.js
@@ -9,6 +9,8 @@ class ValidationForm extends React.Component {
       fields: {
         customer_name: "",
         email_address: "",
+        password: "",
+        password_confirmation: "",
         phone_number: "",
         pickup_time: "",
         taxi: "",
@@ -23,6 +25,8 @@ class ValidationForm extends React.Component {
     this.form.useRules({
       customer_name: "required|username_available",
       email_address: "required|email",
+      password: "required|confirmed",
+      password_confirmation: "required|same:password",
       phone_number: "required|numeric|digits_between:10,12",
       pickup_time: "required|date",
       taxi: "required",
@@ -119,6 +123,42 @@ class ValidationForm extends React.Component {
               </label>
             </p>
 
+            <p>
+              <label>
+                Password
+                <input
+                  type="text"
+                  name="password"
+                  onBlur={this.form.handleBlurEvent}
+                  onChange={this.form.handleChangeEvent}
+                  value={this.state.fields.password}
+                />
+              </label>
+              <label className="error">
+                {this.state.errors.password
+                  ? this.state.errors.password
+                  : ""}
+              </label>
+            </p>
+
+            <p>
+              <label>
+                Confirm Password
+                <input
+                  type="text"
+                  name="password_confirmation"
+                  onBlur={this.form.handleBlurEvent}
+                  onChange={this.form.handleChangeEvent}
+                  value={this.state.fields.password_confirmation}
+                />
+              </label>
+              <label className="error">
+                {this.state.errors.password_confirmation
+                  ? this.state.errors.password_confirmation
+                  : ""}
+              </label>
+            </p>
+
             <fieldset>
               <legend>Which taxi do you require?</legend>
               <p>
@@ -216,7 +256,7 @@ class ValidationForm extends React.Component {
                   type="date"
                   name="pickup_time"
                   onChange={this.form.handleChangeEvent}
-                  onBlur={this.form.handleBlurEvent}
+                  // onBlur={this.form.handleBlurEvent}
                   value={this.state.fields.pickup_time}
                 />
               </label>

diff --git a/demo/app/index.html b/demo/app/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+    <head><title>
+        React Form Input Validation
+    </title></head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>
diff --git a/demo/app/index.js b/demo/app/index.js
@@ -0,0 +1,6 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Form from "./Form";
+
+ReactDOM.render(<Form />, document.getElementById('app'))
diff --git a/example/cypress.json → demo/cypress.json b/example/cypress.json → demo/cypress.json
diff --git a/demo/cypress/fixtures/example.json b/demo/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/example/cypress/integration/form.spec.js → ...ress/integration/integration/form.spec.js b/example/cypress/integration/form.spec.js → ...ress/integration/integration/form.spec.js
@@ -1,17 +1,17 @@
 describe('The Home Page', function() {
     it('Successfull rendering', function() {
-      cy.visit('http://localhost:3000/')
+      cy.visit('http://localhost:8080/')
     })
 
     it('Check Submit Button', function() {
-        cy.visit('http://localhost:3000/')
+        cy.visit('http://localhost:8080/')
         cy.contains('Submit Booking').click()
       });
   });
 
 describe("Test blur events", () => {
     it('Successfull rendering', function() {
-        cy.visit('http://localhost:3000/')
+        cy.visit('http://localhost:8080/')
     })
 
     it("Customer Name blur (Text field)", () => {
@@ -52,7 +52,7 @@ describe("Test blur events", () => {
 
 describe("Test change event", () => {
     it('Successfull rendering', function() {
-        cy.visit('http://localhost:3000/')
+        cy.visit('http://localhost:8080/')
     });
 
     it("Customer Name change event (Text field)", () => {
@@ -100,7 +100,7 @@ describe("Test change event", () => {
 
 describe("Fill form fields", () => {
     it('Successfull rendering', function() {
-        cy.visit('http://localhost:3000/')
+        cy.visit('http://localhost:8080/')
     });
 
     it("Type customer name (Text field)", () => {
@@ -143,7 +143,7 @@ describe("Fill form fields", () => {
 
 describe("Test validation rules in form fields", () => {
     beforeEach("Render home page", () => {
-        cy.visit('http://localhost:3000/');
+        cy.visit('http://localhost:8080/');
     })
     describe("Customer name (required)", () => {
         it("Empty fields should display error message", () => {

diff --git a/example/cypress/plugins/index.js → demo/cypress/plugins/index.js b/example/cypress/plugins/index.js → demo/cypress/plugins/index.js
@@ -1,3 +1,4 @@
+/// <reference types="cypress" />
 // ***********************************************************
 // This example plugins/index.js can be used to load plugins
 //
@@ -11,6 +12,9 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
+/**
+ * @type {Cypress.PluginConfig}
+ */
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config

diff --git a/example/cypress/support/commands.js → demo/cypress/support/commands.js b/example/cypress/support/commands.js → demo/cypress/support/commands.js
diff --git a/example/cypress/support/index.js → demo/cypress/support/index.js b/example/cypress/support/index.js → demo/cypress/support/index.js
diff --git a/demo/package.json b/demo/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+  },
+  "scripts": {
+    "start": "webpack-dev-server --open",
+    "auto-test": "cypress open"
+  },
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-form-input-validation": "./react-form-input-validation-2.0.2.tgz"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.11.1",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-react": "^7.10.4",
+    "babel-loader": "^8.1.0",
+    "css-loader": "^4.2.1",
+    "cypress": "^4.12.1",
+    "html-webpack-plugin": "^4.3.0",
+    "style-loader": "^1.2.1",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
+  }
+}
diff --git a/demo/react-form-input-validation-2.0.2.tgz b/demo/react-form-input-validation-2.0.2.tgz
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
@@ -0,0 +1,23 @@
+var path = require('path');
+var HtmlWebpackPlugin =  require('html-webpack-plugin');
+
+module.exports = {
+    entry : './app/index.js',
+    output : {
+        path : path.resolve(__dirname , 'dist'),
+        filename: 'index_bundle.js'
+    },
+    module : {
+        rules : [
+            {test : /\.(js)$/, use:'babel-loader'},
+            {test : /\.css$/, use:['style-loader', 'css-loader']}
+        ]
+    },
+    mode:'development',
+    plugins : [
+        new HtmlWebpackPlugin ({
+            template : 'app/index.html'
+        })
+    ]
+
+};