Add form validators and country api

8 files changed, 185 insertions, 44 deletions

diff --git a/client/package.json b/client/package.json
index 18d0b4b..3676754 100644
--- a/client/package.json
+++ b/client/package.json
@@ -9,10 +9,14 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "country-state-city": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-form-with-constraints": "^0.19.1",
+    "react-hook-form": "^7.34.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "react-select": "^5.4.0",
     "react-webcam": "^7.0.1",
     "web-vitals": "^2.1.4"
   },
diff --git a/client/src/components/Input/Input.jsx b/client/src/components/Input/Input.jsx
index 5987e27..08e8fab 100644
--- a/client/src/components/Input/Input.jsx
+++ b/client/src/components/Input/Input.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styles from './Input.module.css'
 
-const Input = ({ label, id, value, type, name, onChange, placeholder }) => {
+const Input = ({ label, id, value, type, name, onChange, placeholder, maxLength, pattern, minLength, onInvalid, onValid }) => {
   return (
     <div className={styles.input}>
       <div className={styles.input__container}>
@@ -15,6 +15,11 @@ const Input = ({ label, id, value, type, name, onChange, placeholder }) => {
           onChange={onChange}
           required
           placeholder={placeholder}
+          pattern={pattern}
+          maxLength={maxLength}
+          minLength={minLength}
+          onInvalid={onInvalid}
+          onValid={onValid}
         />
       </div>
     </div>
diff --git a/client/src/components/Input/Input.module.css b/client/src/components/Input/Input.module.css
index cafb5f1..b02591c 100644
--- a/client/src/components/Input/Input.module.css
+++ b/client/src/components/Input/Input.module.css
@@ -13,7 +13,8 @@
 .input__field {
   width: 300px;
   margin: 10px 0px;
-  padding: 20px 10px;
+  padding: 18px 10px;
   border: 3px solid;
   border-radius: 10px;
+  font-size: 1rem;
 }
diff --git a/client/src/components/SubmitButton/SubmitButton.jsx b/client/src/components/SubmitButton/SubmitButton.jsx
index e1ba305..4437efa 100644
--- a/client/src/components/SubmitButton/SubmitButton.jsx
+++ b/client/src/components/SubmitButton/SubmitButton.jsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import styles from './SubmitButton.module.css'
 
-const SubmitButton = () => {
+const SubmitButton = ({ onClick }) => {
   return (
     <>
-      <button className={styles.submit} type="submit">
+      <button onClick={onClick} className={styles.submit} type="submit">
         <img
           className={styles.submit__image}
           src={`${process.env.PUBLIC_URL}/assets/images/white-check.svg`}
diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx
index 713c8d9..4acd0e6 100644
--- a/client/src/pages/Enrollment/Address/Address.jsx
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -3,91 +3,177 @@ import { useNavigate } from 'react-router-dom'
 import Header from '../../../components/Header/Header'
 import Input from '../../../components/Input/Input'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import { Country, State, City } from 'country-state-city'
+import Select from 'react-select'
 
 import styles from './Address.module.css'
 
 const Address = () => {
   const [address, setAddress] = useState('')
+  const [houseNo, setHouseNo] = useState('')
+  const [locality, setLocality] = useState('')
+  const [postOffice, setPostOffice] = useState('')
+  const [street, setStreet] = useState('')
+  const [landmark, setLandmark] = useState('')
+  const [town, setTown] = useState('')
+  const [pincode, setPincode] = useState('')
+  const [state, setState] = useState('')
+  const [country, setCountry] = useState('')
+  const [city, setCity] = useState('')
 
   const navigate = useNavigate()
 
   const handleSubmit = () => {
     navigate('/enrollment/photo')
+    const add = `${houseNo} ${locality} ${postOffice} ${street} ${landmark} ${town} ${city} ${state} ${countries} ${pincode}`
+    setAddress({ add })
+    console.log(address)
   }
 
+  const countries = Country.getAllCountries()
+
+  const updatedCountries = countries.map((country) => ({
+    label: country.name,
+    value: country.id,
+    ...country
+  }))
+
+  const updatedStates = (countryId) =>
+  State
+      .getStatesOfCountry(countryId)
+      .map((state) => ({ label: state.name, value: state.id, ...state }))
+  const updatedCities = (countryID, stateId) =>
+    City
+      .getCitiesOfState(countryID, stateId)
+      .map((city) => ({ label: city.name, value: city.id, ...city }))
+
+      const customStyles = {
+        control: (base, state) => ({
+          ...base,
+          width: '330px',
+          height: '60px',
+          margin: '10px 0px',
+          // padding: '20px 10px',
+          border: '3px solid',
+          borderRadius: '10px !important'
+        }),
+        input: (base, state) => ({
+          ...base,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: '0px',
+          margin: '0px'
+        })
+      }
+
   return (
     <>
       <Header subheading="Enrollment" />
       <form onSubmit={() => handleSubmit()} className={styles.address}>
         <div className={styles.address__container}>
+      <div className={styles.input}>
+      <div className={styles.input__container}>
+      <label htmlFor='country'>Country</label>
+        <Select
+          id="country"
+          name="country"
+          label="country"
+          options={updatedCountries}
+          value={country}
+          onChange={setCountry}
+          styles={customStyles}
+        />
+      </div>
+    </div>
+    <div className={styles.input}>
+      <div className={styles.input__container}>
+      <label htmlFor='state'>State</label>
+      <Select
+          id="state"
+          name="state"
+          options={updatedStates(country.isoCode)}
+          value={state}
+          onChange={setState}
+          styles={customStyles}
+        />
+      </div>
+    </div>
+    <div className={styles.input}>
+      <div className={styles.input__container}>
+      <label htmlFor='city'>District</label>
+      <Select
+          id="city"
+          name="city"
+          options={updatedCities(country.isoCode, state.isoCode)}
+          value={city}
+          onChange={setCity}
+          styles={customStyles}
+        />
+      </div>
+    </div>
+    <Input
+      id="town"
+      label="Village / Town"
+      value={town}
+      type="text"
+      onChange={(e) => setTown(e.target.value)}
+      placeholder="Enter your Village / Town"
+      />
+            </div>
+            <div className={styles.address__container}>
           <Input
             id="houseNo"
             label="House Number/ Apartment"
-            value={address}
+            value={houseNo}
             type="text"
-            onChange={(e) => setAddress(e.target.value)}
+            onChange={(e) => setHouseNo(e.target.value)}
             placeholder="Enter your House Number / Apartment"
           />
           <Input
+            id="street"
+            label="Street / Road"
+            value={street}
+            type="text"
+            onChange={(e) => setStreet(e.target.value)}
+            placeholder="Enter the Street / Road"
+          />
+          <Input
             id="locality"
             label="Area / Locality"
-            value={address}
+            value={locality}
             type="text"
-            onChange={(e) => setAddress(e.target.value)}
+            onChange={(e) => setLocality(e.target.value)}
             placeholder="Enter your Area / Locality"
           />
-          <Input id="town" label="Village / Town" value="town" type="text" />
           <Input
             id="postOffice"
             label="Post Office"
-            value={address}
+            value={postOffice}
             type="text"
-            onChange={(e) => setAddress(e.target.value)}
+            onChange={(e) => setPostOffice(e.target.value)}
             placeholder="Enter your Village / Town"
           />
-        </div>
+          </div>
         <div className={styles.address__container}>
           <Input
-            id="street"
-            label="Street / Road"
-            value={address}
-            type="text"
-            onChange={(e) => setAddress(e.target.value)}
-            placeholder="Enter the Street / Road"
-          />
-          <Input
             id="landmark"
             label="Landmark"
-            value={address}
+            value={landmark}
             type="text"
-            onChange={(e) => setAddress(e.target.value)}
+            onChange={(e) => setLandmark(e.target.value)}
             placeholder="Enter the Landmark"
           />
           <Input
-            id="district"
-            label="District"
-            value={address}
-            type="text"
-            onChange={(e) => setAddress(e.target.value)}
-            placeholder="Enter your District"
-          />
-          <Input
             id="pincode"
             label="Pincode"
-            value={address}
+            value={pincode}
             type="text"
-            onChange={(e) => setAddress(e.target.value)}
+            onChange={(e) => setPincode(e.target.value)}
             placeholder="Enter your area Pincode"
+            pattern="[0-9]+"
           />
         </div>
-        <Input
-          id="state"
-          label="State"
-          value={address}
-          type="text"
-          onChange={(e) => setAddress(e.target.value)}
-          placeholder="Enter your State"
-        />
         <SubmitButton />
       </form>
     </>
diff --git a/client/src/pages/Enrollment/Address/Address.module.css b/client/src/pages/Enrollment/Address/Address.module.css
index 60958ba..26ca909 100644
--- a/client/src/pages/Enrollment/Address/Address.module.css
+++ b/client/src/pages/Enrollment/Address/Address.module.css
@@ -6,3 +6,23 @@
 .address__container {
   margin: 0px 20px;
 }
+
+.input {
+  display: flex;
+  justify-content: center;
+  font-family: 'Barlow';
+  font-size: var(--font-medium-s);
+}
+
+.input__container {
+  display: flex;
+  flex-direction: column;
+}
+
+.input__field {
+  width: 300px;
+  margin: 10px 0px;
+  padding: 20px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+}
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx
index ed83a6f..e9bff62 100644
--- a/client/src/pages/Enrollment/FormOne/FormOne.jsx
+++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx
@@ -47,6 +47,7 @@ const FormOne = () => {
         value={fullName}
         onChange={(e) => setFullName(e.target.value)}
         placeholder="Enter your full name"
+        pattern="[a-zA-z]+"
       />
 
       <div className={styles.formone__gender}>
diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
index 3ea8447..a0aebcf 100644
--- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
+++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import Input from '../../../components/Input/Input'
 import Header from '../../../components/Header/Header'
@@ -10,8 +10,28 @@ const FormTwo = () => {
 
   const navigate = useNavigate()
 
+  const handleSubmit = () => {
+    navigate('/enrollment/address')
+  }
+
+  useEffect(() => {
+    const eMail = document.getElementById('email')
+    function emailValidator () {
+      if (eMail.validity.patternMismatch) {
+        eMail.setCustomValidity('Email must contain @')
+      } else {
+        eMail.setCustomValidity('')
+      }
+    }
+    console.log(eMail)
+    eMail.addEventListener('input', emailValidator)
+    return () => {
+      eMail.removeEventListener('input', emailValidator)
+    }
+  }, [])
+
   return (
-    <div className="formtwo">
+    <form onSubmit={() => handleSubmit()} className="formtwo">
       <Header subheading="Enrollment" />
       <Input
         id="mobile"
@@ -20,6 +40,9 @@ const FormTwo = () => {
         type="text"
         onChange={(e) => setMobileNumber(e.target.value)}
         placeholder="Enter your Mobile Number"
+        pattern="[0-9]+"
+        maxLength="10"
+        minLength="10"
       />
       <Input
         id="email"
@@ -28,9 +51,10 @@ const FormTwo = () => {
         type="email"
         onChange={(e) => setEmail(e.target.value)}
         placeholder="Enter your Email ID"
+        pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
       />
-      <SubmitButton onClick={() => navigate('/enrollment/address')} />
-    </div>
+      <SubmitButton />
+    </form>
   )
 }