added useState and made input functional

author: rohan09-raj <[email protected]> 2022-08-02 00:06:39 +0530
committer: rohan09-raj <[email protected]> 2022-08-02 00:06:39 +0530
commit: 5f8f6f98c2c47ca878aadb893b0d64a0c66316aa (patch)
tree: c32ee819c446a47f9eed15d44330a19d31b6e9b3
parent: 337b0a2a7d358a597e114197cf5d12e8ed81a19e (diff)
11 files changed, 160 insertions, 25 deletions
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
index a11777c..8ed2dd7 100644
--- a/client/public/favicon.ico
+++ b/client/public/favicon.ico
diff --git a/client/public/index.html b/client/public/index.html
index de71572..aa37a82 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -3,13 +3,20 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!-- <a href="https://iconscout.com/icons/aadhaar" target="_blank"
+      >Aadhaar Icon</a
+    >
+    by
+    <a href="https://iconscout.com/contributors/icon-mafia" target="_blank"
+      >Icon Mafia</a
+    > -->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -31,7 +38,7 @@
       href="https://fonts.googleapis.com/css2?family=Barlow&family=Fredoka+One&display=swap"
       rel="stylesheet"
     />
-    <title>React App</title>
+    <title>Aadhaar | Enrollment & Update</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/client/src/components/Input/Input.jsx b/client/src/components/Input/Input.jsx
index ee79f3b..5987e27 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 }) => {
+const Input = ({ label, id, value, type, name, onChange, placeholder }) => {
   return (
     <div className={styles.input}>
       <div className={styles.input__container}>
@@ -12,7 +12,9 @@ const Input = ({ label, id, value, type, name }) => {
           id={id}
           name={name}
           value={value}
+          onChange={onChange}
           required
+          placeholder={placeholder}
         />
       </div>
     </div>
diff --git a/client/src/components/LabelCard/LabelCard.jsx b/client/src/components/LabelCard/LabelCard.jsx
index be02f01..42ba7bf 100644
--- a/client/src/components/LabelCard/LabelCard.jsx
+++ b/client/src/components/LabelCard/LabelCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styles from './LabelCard.module.css'
 
-const LabelCard = ({ id, name, value, title, image }) => {
+const LabelCard = ({ id, name, value, title, image, onChange }) => {
   return (
     <div className={styles.labelcard}>
       <label htmlFor={id} className={styles.card}>
@@ -15,6 +15,7 @@ const LabelCard = ({ id, name, value, title, image }) => {
         name={name}
         value={value}
         required
+        onChange={onChange}
       />
     </div>
   )
diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx
index 6a32bcf..132fba1 100644
--- a/client/src/pages/Enrollment/Address/Address.jsx
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import Header from '../../../components/Header/Header'
 import Input from '../../../components/Input/Input'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
@@ -6,6 +7,10 @@ import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import styles from './Address.module.css'
 
 const Address = () => {
+  const [address, setAddress] = useState('')
+
+  const navigate = useNavigate()
+
   return (
     <>
       <Header subheading="Enrollment" />
@@ -14,32 +19,73 @@ const Address = () => {
           <Input
             id="houseNo"
             label="House Number/ Apartment"
-            value="house"
+            value={address}
             type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter your House Number / Apartment"
           />
           <Input
             id="locality"
             label="Area / Locality"
-            value="locality"
+            value={address}
             type="text"
+            onChange={(e) => setAddress(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="postOffice"
+            value={address}
             type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter your Village / Town"
           />
         </div>
         <div className={styles.address__container}>
-          <Input id="street" label="Street / Road" value="street" type="text" />
-          <Input id="landmark" label="Landmark" value="landmark" type="text" />
-          <Input id="district" label="District" value="district" type="text" />
-          <Input id="pincode" label="Pincode" value="pincode" type="text" />
+          <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}
+            type="text"
+            onChange={(e) => setAddress(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}
+            type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter your area Pincode"
+          />
         </div>
       </div>
-      <Input id="state" label="State" value="state" type="text" />
-      <SubmitButton />
+      <Input
+        id="state"
+        label="State"
+        value={address}
+        type="text"
+        onChange={(e) => setAddress(e.target.value)}
+        placeholder="Enter your State"
+      />
+      <SubmitButton onClick={() => navigate('/enrollment/photo')} />
     </>
   )
 }
diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx
index b8bbc81..98def04 100644
--- a/client/src/pages/Enrollment/Enrollment.jsx
+++ b/client/src/pages/Enrollment/Enrollment.jsx
@@ -1,14 +1,16 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import Header from '../../components/Header/Header'
 import SubmitButton from '../../components/SubmitButton/SubmitButton'
 import FormOne from './FormOne/FormOne'
 
 const Enrollment = () => {
+  const navigate = useNavigate()
   return (
     <>
       <Header subheading="Enrollment" />
       <FormOne />
-      <SubmitButton />
+      <SubmitButton onClick={() => navigate('/enrollment/form2')} />
     </>
   )
 }
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx
index 4ba274c..ed83a6f 100644
--- a/client/src/pages/Enrollment/FormOne/FormOne.jsx
+++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx
@@ -1,9 +1,18 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Input from '../../../components/Input/Input'
 import LabelCard from '../../../components/LabelCard/LabelCard'
 import styles from './FormOne.module.css'
 
 const FormOne = () => {
+  const [indianResident, setIndianResident] = useState(true)
+  const [fullName, setFullName] = useState('')
+  const [gender, setGender] = useState('')
+  const [dateOfBirth, setDateOfBirth] = useState(
+    new Date().toISOString().slice(0, 10)
+  )
+
+  console.log(fullName, indianResident, gender, dateOfBirth)
+
   return (
     <div className={styles.formone}>
       <div className={styles.formone__radio}>
@@ -12,7 +21,8 @@ const FormOne = () => {
             type="radio"
             id="indian"
             name="resident"
-            value="Indian Resident"
+            value={indianResident}
+            onChange={() => setIndianResident(true)}
             required
           />
           <label htmlFor="indian">Indian Resident</label>
@@ -23,33 +33,45 @@ const FormOne = () => {
             id="indian"
             name="resident"
             value="Indian Resident"
+            onChange={() => setIndianResident(false)}
             required
           />
           <label htmlFor="indian">Non-Residential Indian</label>
         </span>
       </div>
 
-      <Input type="text" id="fullName" label="Full Name" value="Full Name" />
+      <Input
+        type="text"
+        id="fullName"
+        label="Full Name"
+        value={fullName}
+        onChange={(e) => setFullName(e.target.value)}
+        placeholder="Enter your full name"
+      />
 
       <div className={styles.formone__gender}>
         <LabelCard
           id="male"
           name="gender"
           title="Male"
+          value={gender}
+          onChange={() => setGender('male')}
           image={`${process.env.PUBLIC_URL}/assets/images/male.svg`}
         />
         <LabelCard
           id="female"
           name="gender"
-          value="female"
+          value={gender}
           title="Female"
+          onChange={() => setGender('female')}
           image={`${process.env.PUBLIC_URL}/assets/images/female.svg`}
         />
         <LabelCard
           id="trans"
           name="gender"
-          value="trans"
+          value={gender}
           title="Transgender"
+          onChange={() => setGender('transgender')}
           image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`}
         />
       </div>
@@ -61,7 +83,8 @@ const FormOne = () => {
           type="date"
           id="dob"
           name="dob"
-          value="Date of Birth"
+          value={dateOfBirth}
+          onChange={(e) => setDateOfBirth(e.target.value)}
           required
         />
       </div>
diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
index 56bcd70..3ea8447 100644
--- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
+++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
@@ -1,15 +1,35 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 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()
+
   return (
     <div className="formtwo">
       <Header subheading="Enrollment" />
-      <Input id="mobile" value="Mobile" label="Mobile" type="text" />
-      <Input id="email" value="Email" label="Email" type="email" />
-      <SubmitButton />
+      <Input
+        id="mobile"
+        value={mobileNumber}
+        label="Mobile"
+        type="text"
+        onChange={(e) => setMobileNumber(e.target.value)}
+        placeholder="Enter your Mobile Number"
+      />
+      <Input
+        id="email"
+        value={email}
+        label="Email"
+        type="email"
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Enter your Email ID"
+      />
+      <SubmitButton onClick={() => navigate('/enrollment/address')} />
     </div>
   )
 }
diff --git a/server/controllers/users.js b/server/controllers/users.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/server/controllers/users.js
diff --git a/server/models/users.js b/server/models/users.js
new file mode 100644
index 0000000..f78b7d7
--- /dev/null
+++ b/server/models/users.js
@@ -0,0 +1,26 @@
+import mongoose from 'mongoose';
+
+const userSchema = mongoose.Schema({
+  id: String,
+  aadhaarNumber: String,
+  indianResident: Boolean,
+  name: String,
+  gender: String,
+  dob: {
+    type: Date,
+  },
+  mobile: String,
+  email: String,
+  address: String,
+  photo: String,
+  documents: Object,
+  biometrics: Object,
+  createdAt: {
+    type: Date,
+    default: new Date(),
+  },
+});
+
+const UserDetails = mongoose.model('UserDetails', userSchema);
+
+export default UserDetails;
diff --git a/server/routes/users.js b/server/routes/users.js
new file mode 100644
index 0000000..55f846b
--- /dev/null
+++ b/server/routes/users.js
@@ -0,0 +1,8 @@
+import Express from 'express';
+
+const router = Express.Router();
+
+router.post('/user');
+router.get('/user');
+
+export default router;
author	rohan09-raj <[email protected]>	2022-08-02 00:06:39 +0530
committer	rohan09-raj <[email protected]>	2022-08-02 00:06:39 +0530
commit	5f8f6f98c2c47ca878aadb893b0d64a0c66316aa (patch)
tree	c32ee819c446a47f9eed15d44330a19d31b6e9b3
parent	337b0a2a7d358a597e114197cf5d12e8ed81a19e (diff)