Merge pull request #3 from Blaster4385/develop

Refactor code, add country api, switch to multi-step form

1 files changed, 21 insertions, 13 deletions

diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
index 3ea8447..91d8f6b 100644
--- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
+++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
@@ -1,35 +1,43 @@
-import React, { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import React from 'react'
 import Input from '../../../components/Input/Input'
 import Header from '../../../components/Header/Header'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 
-const FormTwo = () => {
-  const [mobileNumber, setMobileNumber] = useState('')
-  const [email, setEmail] = useState('')
-
-  const navigate = useNavigate()
-
+const FormTwo = ({ formData, setFormData }) => {
   return (
     <div className="formtwo">
       <Header subheading="Enrollment" />
       <Input
         id="mobile"
-        value={mobileNumber}
+        value={formData.mobile}
         label="Mobile"
         type="text"
-        onChange={(e) => setMobileNumber(e.target.value)}
+        onChange={(e) => {
+          setFormData({
+            ...formData,
+            mobile: e.target.value
+          })
+        }}
         placeholder="Enter your Mobile Number"
+        pattern="[0-9]+"
+        maxLength="10"
+        minLength="10"
       />
       <Input
         id="email"
-        value={email}
+        value={formData.email}
         label="Email"
         type="email"
-        onChange={(e) => setEmail(e.target.value)}
+        onChange={(e) => {
+          setFormData({
+            ...formData,
+            email: e.target.value
+          })
+        }}
         placeholder="Enter your Email ID"
+        pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
       />
-      <SubmitButton onClick={() => navigate('/enrollment/address')} />
+      <SubmitButton />
     </div>
   )
 }