From cb6815c7b126da82e28e24776915a16bb49b4ed5 Mon Sep 17 00:00:00 2001
From: JASKEERAT SINGH <jaskeerat10000@gmail.com>
Date: Tue, 6 Apr 2021 19:06:46 +0530
Subject: [PATCH 1/2] added validations for the join us form

---
 frontend/package-lock.json                    |  13 +
 frontend/package.json                         |   2 +
 .../pages/Home/components/JoinUsForm/Form.jsx | 654 +++++++++++-------
 3 files changed, 413 insertions(+), 256 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2ff9d840..0aa861d4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7727,6 +7727,11 @@
       "resolved": "https://registry.npmjs.org/goober/-/goober-2.0.33.tgz",
       "integrity": "sha512-Wy9HYzmmqmB1PTMQCY3+hlREZ4Lk7kaac6PZeWlJxOM6lIO9lsrU2yBu33TiougO0AC6bBxxIVueDP+nEGNWJw=="
     },
+    "google-libphonenumber": {
+      "version": "3.2.17",
+      "resolved": "https://registry.npmjs.org/google-libphonenumber/-/google-libphonenumber-3.2.17.tgz",
+      "integrity": "sha512-T1fBQ3ujlpo4VUe0palZVHxBkY1zsfCShkS3l1rNq/d5C6C1SIijo8aXzgpJeGQFB8Bk+C36o6jhLl05NtfQ3w=="
+    },
     "graceful-fs": {
       "version": "4.2.6",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@@ -10285,6 +10290,14 @@
       "resolved": "https://registry.npmjs.org/joi-browser/-/joi-browser-13.4.0.tgz",
       "integrity": "sha512-TfzJd2JaJ/lg/gU+q5j9rLAjnfUNF9DUmXTP9w+GfmG79LjFOXFeM7hIFuXCBcZCivUDFwd9l1btTV9rhHumtQ=="
     },
+    "joi-phone-number": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/joi-phone-number/-/joi-phone-number-5.0.1.tgz",
+      "integrity": "sha512-gVzKD2WETDxAONmdt79tF9LHEfr2M6AtSyZ8/FnkQkF9qln6PF5wuzjrr9555uB7R+LbAQdFNgYN2UETzPn5ew==",
+      "requires": {
+        "google-libphonenumber": "3.2.17"
+      }
+    },
     "jquery": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index eace0db2..75a50a47 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,7 +12,9 @@
     "bootstrap": "^4.5.3",
     "bootstrap-social": "^5.1.1",
     "font-awesome": "^4.7.0",
+    "joi": "^17.4.0",
     "joi-browser": "^13.4.0",
+    "joi-phone-number": "^5.0.1",
     "jwt-decode": "^3.1.2",
     "mdbreact": "^5.0.1",
     "node-sass": "^4.14.1",
diff --git a/frontend/src/pages/Home/components/JoinUsForm/Form.jsx b/frontend/src/pages/Home/components/JoinUsForm/Form.jsx
index d01fcf1e..c4ef88fe 100644
--- a/frontend/src/pages/Home/components/JoinUsForm/Form.jsx
+++ b/frontend/src/pages/Home/components/JoinUsForm/Form.jsx
@@ -1,9 +1,87 @@
-import React from "react";
+import React, { useState } from "react";
+import Joi from "joi-browser";
 import styles from "./form.module.scss";
 import { Button2 } from "../../../../components/util/Button/index";
+
 export const JoinUsForm = (props) => {
   let dark = props.theme;
 
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    link: "",
+    desc: "",
+    dept: null,
+    college: "",
+  });
+
+  const [formerrors, setFormErrors] = useState({});
+
+  const schema = {
+    name: Joi.string().min(3).required(),
+    email: Joi.string()
+      .email({ tlds: { allow: false } })
+      .required(),
+    link: Joi.string().uri().required(),
+    desc: Joi.string().required(),
+    dept: Joi.required(),
+    college: Joi.string().required(),
+  };
+
+  const validate = () => {
+    const result = Joi.validate(formData, schema, { abortEarly: false });
+    if (!result.error) return null;
+    const errors = {};
+    for (let item of result.error.details) {
+      errors[item.path[0]] = item.message;
+    }
+    return errors;
+  };
+
+  const validateProperty = (input) => {
+    const { name, value } = input;
+    const obj = { [name]: value };
+    const obj_schema = { [name]: schema[name] };
+    const result = Joi.validate(obj, obj_schema);
+    return result.error ? result.error.details[0].message : null;
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const errors = validate();
+    Object.keys(formData).map((key) => {
+      if (formData[key] === "" || formData[key] === null) {
+        errors[key] = `${key} is not allowed to be empty`;
+      }
+      return 0;
+    });
+    if (errors["info"]) {
+      delete errors["info"];
+    }
+    if (Object.keys(errors).length !== 0) {
+      setFormErrors(errors);
+    }
+    if (Object.keys(errors).length !== 0) {
+      console.log(errors);
+    } else {
+      //Call the Server
+      console.log("Submitted");
+    }
+  };
+
+  const handleChange = (e) => {
+    const { currentTarget: input } = e;
+    const errors = { ...formerrors };
+    const errorMessage = validateProperty(input);
+    if (errorMessage) errors[input.name] = errorMessage;
+    else delete errors[input.name];
+
+    const data = { ...formData };
+    data[input.name] = input.value;
+    setFormData({ ...data, [input.name]: input.value });
+    setFormErrors(errors);
+  };
+
   return (
     <div
       className={
@@ -38,9 +116,56 @@ export const JoinUsForm = (props) => {
           >
             Join Us Form
           </h3>
-          <div className={styles["inside-join-us-form"]}>
-            <div className={styles["form-row"]}>
-              <div className={`${styles["form-group"]} col-sm-6`}>
+
+          <form onSubmit={handleSubmit}>
+            <div className={styles["inside-join-us-form"]}>
+              <div className={styles["form-row"]}>
+                <div className={`${styles["form-group"]} col-sm-6`}>
+                  <div
+                    className={
+                      dark
+                        ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
+                        : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
+                    }
+                  >
+                    <input
+                      placeholder="Name"
+                      id="txt_name"
+                      type="text"
+                      required="required"
+                      name="name"
+                      onChange={handleChange}
+                    />
+                    <i className={`fas fa-user ${styles["user"]}`}></i>
+                    <div
+                      className={`${styles["validation"]} validation d-sm-none d-md-block`}
+                    >
+                      {formerrors["name"] && (
+                        <div style={{ color: "red" }}>{formerrors["name"]}</div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+                <div className={`${styles["form-group2"]} col-sm-6`}>
+                  <div
+                    className={
+                      dark
+                        ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
+                        : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
+                    }
+                  >
+                    <input
+                      placeholder="Contact No."
+                      id="phone"
+                      type="tel"
+                      required="required"
+                      name="phone"
+                    />
+                    <i className={`fas fa-phone ${styles["phone"]}`}></i>
+                  </div>
+                </div>
+              </div>
+              <div className={styles["form-group"]}>
                 <div
                   className={
                     dark
@@ -49,16 +174,26 @@ export const JoinUsForm = (props) => {
                   }
                 >
                   <input
-                    placeholder="Name"
-                    id="txt_name"
+                    placeholder="Email ID"
+                    id="txt_email"
                     type="text"
                     required="required"
-                    name="name"
+                    name="email"
+                    onChange={handleChange}
                   />
-                  <i className={`fas fa-user ${styles["user"]}`}></i>
+                  <i
+                    className={`fas fa-envelope-open-text ${styles["envelope"]}`}
+                  ></i>
+                  <div
+                    className={`${styles["validation"]} validation d-sm-none d-md-block`}
+                  >
+                    {formerrors["email"] && (
+                      <div style={{ color: "red" }}>{formerrors["email"]}</div>
+                    )}
+                  </div>
                 </div>
               </div>
-              <div className={`${styles["form-group2"]} col-sm-6`}>
+              <div className={styles["form-group"]}>
                 <div
                   className={
                     dark
@@ -67,17 +202,23 @@ export const JoinUsForm = (props) => {
                   }
                 >
                   <input
-                    placeholder="Contact No."
-                    id="phone"
-                    type="tel"
+                    placeholder="Linkedin Profile URL"
+                    id="txt_link"
+                    type="text"
                     required="required"
-                    name="phone"
+                    name="link"
+                    onChange={handleChange}
                   />
-                  <i className={`fas fa-phone ${styles["phone"]}`}></i>
+                  <i className={`fas fa-link ${styles["link"]}`}></i>
+                  <div
+                    className={`${styles["validation"]} validation d-sm-none d-md-block`}
+                  >
+                    {formerrors["link"] && (
+                      <div style={{ color: "red" }}>{formerrors["link"]}</div>
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
-            <div className={styles["form-group"]}>
               <div
                 className={
                   dark
@@ -85,293 +226,294 @@ export const JoinUsForm = (props) => {
                     : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
                 }
               >
-                <input
-                  placeholder="Email ID"
-                  id="txt_email"
-                  type="text"
+                <textarea
+                  placeholder="How can you contribute to help the community?"
+                  id="txt_desc"
+                  rows="2"
+                  cols="20"
+                  name="desc"
                   required="required"
-                  name="email"
-                />
-                <i
-                  className={`fas fa-envelope-open-text ${styles["envelope"]}`}
-                ></i>
+                  onChange={handleChange}
+                ></textarea>
+                <i className={`fas fa-comment-dots ${styles["comments"]}`}></i>
+                <div
+                  className={`${styles["validation"]} validation d-sm-none d-md-block`}
+                >
+                  {formerrors["desc"] && (
+                    <div style={{ color: "red" }}>{formerrors["desc"]}</div>
+                  )}
+                </div>
               </div>
-            </div>
-            <div className={styles["form-group"]}>
               <div
                 className={
                   dark
-                    ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
-                    : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
+                    ? `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-dark"]}`
+                    : `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-light"]}`
                 }
               >
-                <input
-                  placeholder="Linkedin Profile URL"
-                  id="txt_link"
-                  type="text"
-                  required="required"
-                  name="link"
-                />
-                <i className={`fas fa-link ${styles["link"]}`}></i>
-              </div>
-            </div>
-            <div
-              className={
-                dark
-                  ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
-                  : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
-              }
-            >
-              <textarea
-                placeholder="How can you contribute to help the community?"
-                id="txt_desc"
-                rows="2"
-                cols="20"
-                name="desc"
-                required="required"
-              ></textarea>
-              <i className={`fas fa-comment-dots ${styles["comments"]}`}></i>
-            </div>
-            <div
-              className={
-                dark
-                  ? `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-dark"]}`
-                  : `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-light"]}`
-              }
-            >
-              <label className={`mb-4 ${styles["ID"]}`}>
-                Interested Domains
-              </label>
-              <div className={styles["checkbuttons"]}>
-                <div className="row">
-                  <div className="col-xl-6">
-                    <div
-                      className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
-                    >
-                      <input name="ml" type="checkbox" />
-                      <label className={`${styles["mx-3"]} ${styles["label"]}`}>
-                        Machine Learning
-                      </label>
+                <label className={`mb-4 ${styles["ID"]}`}>
+                  Interested Domains
+                </label>
+                <div className={styles["checkbuttons"]}>
+                  <div className="row">
+                    <div className="col-xl-6">
+                      <div
+                        className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
+                      >
+                        <input name="ml" type="checkbox" />
+                        <label
+                          className={`${styles["mx-3"]} ${styles["label"]}`}
+                        >
+                          Machine Learning
+                        </label>
+                      </div>
                     </div>
-                  </div>
-                  <div className="col-xl-6">
-                    <div
-                      className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
-                    >
-                      <input name="ai" type="checkbox" />
-                      <label className={`${styles["mx-3"]} ${styles["label"]}`}>
-                        Artificial Intelligence
-                      </label>
+                    <div className="col-xl-6">
+                      <div
+                        className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
+                      >
+                        <input name="ai" type="checkbox" />
+                        <label
+                          className={`${styles["mx-3"]} ${styles["label"]}`}
+                        >
+                          Artificial Intelligence
+                        </label>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div className="row">
-                  <div className="col-xl-6">
-                    <div
-                      className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
-                    >
-                      <input name="android" type="checkbox" />
-                      <label className={`${styles["mx-3"]} ${styles["label"]}`}>
-                        Android
-                      </label>
+                  <div className="row">
+                    <div className="col-xl-6">
+                      <div
+                        className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
+                      >
+                        <input name="android" type="checkbox" />
+                        <label
+                          className={`${styles["mx-3"]} ${styles["label"]}`}
+                        >
+                          Android
+                        </label>
+                      </div>
                     </div>
-                  </div>
-                  <div className="col-xl-6">
-                    <div
-                      className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
-                    >
-                      <input name="web" type="checkbox" />
-                      <label className={`${styles["mx-3"]} ${styles["label"]}`}>
-                        Web Development
-                      </label>
+                    <div className="col-xl-6">
+                      <div
+                        className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
+                      >
+                        <input name="web" type="checkbox" />
+                        <label
+                          className={`${styles["mx-3"]} ${styles["label"]}`}
+                        >
+                          Web Development
+                        </label>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div className="row">
-                  <div className="col-xl-6">
-                    <div
-                      className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
-                    >
-                      <input name="poster" type="checkbox" />
-                      <label className={`${styles["mx-3"]} ${styles["label"]}`}>
-                        Poster Designing
-                      </label>
+                  <div className="row">
+                    <div className="col-xl-6">
+                      <div
+                        className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
+                      >
+                        <input name="poster" type="checkbox" />
+                        <label
+                          className={`${styles["mx-3"]} ${styles["label"]}`}
+                        >
+                          Poster Designing
+                        </label>
+                      </div>
                     </div>
-                  </div>
-                  <div className="col-xl-6">
-                    <div
-                      className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
-                    >
-                      <input name="video" type="checkbox" />
-                      <label className={`${styles["mx-3"]} ${styles["label"]}`}>
-                        Video Editing
-                      </label>
+                    <div className="col-xl-6">
+                      <div
+                        className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
+                      >
+                        <input name="video" type="checkbox" />
+                        <label
+                          className={`${styles["mx-3"]} ${styles["label"]}`}
+                        >
+                          Video Editing
+                        </label>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div className="row">
-                  <div className="col-xl-6">
-                    <div
-                      className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
-                    >
-                      <input name="social" type="checkbox" />
-                      <label className={`${styles["mx-3"]} ${styles["label"]}`}>
-                        Social Media Handler
-                      </label>
+                  <div className="row">
+                    <div className="col-xl-6">
+                      <div
+                        className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
+                      >
+                        <input name="social" type="checkbox" />
+                        <label
+                          className={`${styles["mx-3"]} ${styles["label"]}`}
+                        >
+                          Social Media Handler
+                        </label>
+                      </div>
                     </div>
-                  </div>
-                  <div className="col-xl-6">
-                    <div
-                      className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
-                    >
-                      <input name="iot" type="checkbox" />
-                      <label className={`${styles["mx-3"]} ${styles["label"]}`}>
-                        IoT
-                      </label>
+                    <div className="col-xl-6">
+                      <div
+                        className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
+                      >
+                        <input name="iot" type="checkbox" />
+                        <label
+                          className={`${styles["mx-3"]} ${styles["label"]}`}
+                        >
+                          IoT
+                        </label>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div className="row">
-                  <div className="col-xl-6">
-                    <div
-                      className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
-                    >
-                      <input name="content" type="checkbox" />
-                      <label className={`${styles["mx-3"]} ${styles["label"]}`}>
-                        Content Writing
-                      </label>
+                  <div className="row">
+                    <div className="col-xl-6">
+                      <div
+                        className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
+                      >
+                        <input name="content" type="checkbox" />
+                        <label
+                          className={`${styles["mx-3"]} ${styles["label"]}`}
+                        >
+                          Content Writing
+                        </label>
+                      </div>
                     </div>
-                  </div>
-                  <div className="col-xl-6">
-                    <div
-                      className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
-                    >
-                      <input name="other" type="checkbox" />
-                      <label className={`${styles["mx-3"]} ${styles["label"]}`}>
-                        Other
-                      </label>
+                    <div className="col-xl-6">
+                      <div
+                        className={`${styles["form_check"]} form-check-inline ${styles["checkbox_item"]}`}
+                      >
+                        <input name="other" type="checkbox" />
+                        <label
+                          className={`${styles["mx-3"]} ${styles["label"]}`}
+                        >
+                          Other
+                        </label>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div className={styles["form-group"]}>
-              <div
-                className={
-                  dark
-                    ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
-                    : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
-                }
-              >
-                <input
-                  placeholder="Other - if the domain is not listed above"
-                  id="txt_other"
-                  type="text"
-                  required="required"
-                  name="other"
-                />
-                <i className={`fas fa-pencil-alt ${styles["pencil"]}`}></i>
-              </div>
-            </div>
-            <div className={styles["form-group"]}>
-              <div
-                className={
-                  dark
-                    ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
-                    : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
-                }
-              >
-                <input
-                  placeholder="Department"
-                  id="txt_dept"
-                  type="text"
-                  required="required"
-                  name="dept"
-                />
-                <i className={`fas fa-building ${styles["building"]}`}></i>
-              </div>
-            </div>
-            <div
-              className={
-                dark
-                  ? `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-dark"]}`
-                  : `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-light"]}`
-              }
-            >
-              <label className={`mb-4 ${styles["year-of-study"]}`}>
-                Year of Study
-              </label>
-              <div className={styles["radioButtons"]}>
+              <div className={styles["form-group"]}>
                 <div
                   className={
                     dark
-                      ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
-                      : `${styles["radio-item"]} ${styles["radio-item-light"]}`
+                      ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
+                      : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
                   }
                 >
-                  <input type="radio" name="one" />
-                  <label className={`mx-3 ${styles["label"]}`}>1st</label>
+                  <input
+                    placeholder="Other - if the domain is not listed above"
+                    id="txt_other"
+                    type="text"
+                    name="other"
+                  />
+                  <i className={`fas fa-pencil-alt ${styles["pencil"]}`}></i>
                 </div>
+              </div>
+              <div className={styles["form-group"]}>
                 <div
                   className={
                     dark
-                      ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
-                      : `${styles["radio-item"]} ${styles["radio-item-light"]}`
+                      ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
+                      : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
                   }
                 >
-                  <input type="radio" name="one" />
-                  <label className={`mx-3 ${styles["label"]}`}>2nd</label>
+                  <input
+                    placeholder="Department"
+                    id="txt_dept"
+                    type="text"
+                    required="required"
+                    name="dept"
+                  />
+                  <i className={`fas fa-building ${styles["building"]}`}></i>
                 </div>
-                <div
-                  className={
-                    dark
-                      ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
-                      : `${styles["radio-item"]} ${styles["radio-item-light"]}`
-                  }
-                >
-                  <input type="radio" name="one" />
-                  <label className={`mx-3 ${styles["label"]}`}>3rd</label>
+              </div>
+              <div
+                className={
+                  dark
+                    ? `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-dark"]}`
+                    : `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-light"]}`
+                }
+              >
+                <label className={`mb-4 ${styles["year-of-study"]}`}>
+                  Year of Study
+                </label>
+                <div className={styles["radioButtons"]}>
+                  <div
+                    className={
+                      dark
+                        ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
+                        : `${styles["radio-item"]} ${styles["radio-item-light"]}`
+                    }
+                  >
+                    <input type="radio" name="one" />
+                    <label className={`mx-3 ${styles["label"]}`}>1st</label>
+                  </div>
+                  <div
+                    className={
+                      dark
+                        ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
+                        : `${styles["radio-item"]} ${styles["radio-item-light"]}`
+                    }
+                  >
+                    <input type="radio" name="one" />
+                    <label className={`mx-3 ${styles["label"]}`}>2nd</label>
+                  </div>
+                  <div
+                    className={
+                      dark
+                        ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
+                        : `${styles["radio-item"]} ${styles["radio-item-light"]}`
+                    }
+                  >
+                    <input type="radio" name="one" />
+                    <label className={`mx-3 ${styles["label"]}`}>3rd</label>
+                  </div>
+                  <div
+                    className={
+                      dark
+                        ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
+                        : `${styles["radio-item"]} ${styles["radio-item-light"]}`
+                    }
+                  >
+                    <input type="radio" name="one" />
+                    <label className={`mx-3 ${styles["label"]}`}>4th</label>
+                  </div>
                 </div>
+              </div>
+              <div className={styles["form-group"]}>
                 <div
                   className={
                     dark
-                      ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
-                      : `${styles["radio-item"]} ${styles["radio-item-light"]}`
+                      ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
+                      : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
                   }
                 >
-                  <input type="radio" name="one" />
-                  <label className={`mx-3 ${styles["label"]}`}>4th</label>
+                  <input
+                    placeholder="College Name"
+                    id="txt_college"
+                    type="text"
+                    required="required"
+                    name="college"
+                    onChange={handleChange}
+                  />
+                  <i
+                    className={`fas fa-graduation-cap ${styles["graduation"]}`}
+                  ></i>
+                  <div
+                    className={`${styles["validation"]} validation d-sm-none d-md-block`}
+                  >
+                    {formerrors["college"] && (
+                      <div style={{ color: "red" }}>
+                        {formerrors["college"]}
+                      </div>
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
-            <div className={styles["form-group"]}>
-              <div
-                className={
-                  dark
-                    ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
-                    : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
-                }
-              >
-                <input
-                  placeholder="College Name"
-                  id="txt_college"
-                  type="text"
-                  required="required"
-                  name="college"
+              <div className={styles["submit-btn"]}>
+                <Button2
+                  className={styles["submit-btn-text"]}
+                  label="Submit"
+                  type="submit"
                 />
-                <i
-                  className={`fas fa-graduation-cap ${styles["graduation"]}`}
-                ></i>
               </div>
             </div>
-            <div className={styles["submit-btn"]}>
-              <Button2
-                className={styles["submit-btn-text"]}
-                label="Submit"
-                type="submit"
-              />
-            </div>
-          </div>
+          </form>
         </div>
       </div>
     </div>

From 7cdd44fb369eb6ce680c6555a26674f223cdd3bb Mon Sep 17 00:00:00 2001
From: Jaskeerat Singh <jaskeerat10000@gmail.com>
Date: Wed, 19 May 2021 02:16:42 +0530
Subject: [PATCH 2/2] dockerized the Community Website Application

---
 Makefile                   |  2 ++
 backend/.dockerignore      |  1 +
 backend/Dockerfile         | 20 +++++++++++++
 backend/Makefile           |  5 ++++
 backend/package.json       |  2 +-
 docker-compose.yml         | 58 ++++++++++++++++++++++++++++++++++++++
 frontend/.dockerignore     |  1 +
 frontend/Dockerfile        | 20 +++++++++++++
 frontend/Makefile          |  5 ++++
 frontend/package-lock.json | 52 ++++++++++++++++++++++++++++++++++
 10 files changed, 165 insertions(+), 1 deletion(-)
 create mode 100644 Makefile
 create mode 100644 backend/.dockerignore
 create mode 100644 backend/Dockerfile
 create mode 100644 backend/Makefile
 create mode 100644 docker-compose.yml
 create mode 100644 frontend/.dockerignore
 create mode 100644 frontend/Dockerfile
 create mode 100644 frontend/Makefile

diff --git a/Makefile b/Makefile
new file mode 100644
index 00000000..2199c54e
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,2 @@
+run-dev:
+	docker-compose up
\ No newline at end of file
diff --git a/backend/.dockerignore b/backend/.dockerignore
new file mode 100644
index 00000000..b512c09d
--- /dev/null
+++ b/backend/.dockerignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/backend/Dockerfile b/backend/Dockerfile
new file mode 100644
index 00000000..c4ad5211
--- /dev/null
+++ b/backend/Dockerfile
@@ -0,0 +1,20 @@
+#  Dockerfile for Node Express Backend
+
+FROM node:14-alpine
+
+# Create App Directory
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+# Install Dependencies
+COPY package*.json ./
+
+RUN npm install
+
+# Copy app source code
+COPY . .
+
+# Exports
+EXPOSE 3500
+
+CMD ["npm","start"]
\ No newline at end of file
diff --git a/backend/Makefile b/backend/Makefile
new file mode 100644
index 00000000..69e0fedd
--- /dev/null
+++ b/backend/Makefile
@@ -0,0 +1,5 @@
+# "make build" will give us the backend image
+build: 
+	docker build -t api-server .
+
+
diff --git a/backend/package.json b/backend/package.json
index c570aa8a..0e3708de 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -67,6 +67,6 @@
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",
     "nodemon": "^2.0.6",
-    "prettier": "2.2.1"    
+    "prettier": "2.2.1"
   }
 }
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 00000000..f31ea9f4
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,58 @@
+version: "3.7"
+
+services:
+  api-server:
+    build:
+      context: ./backend/
+      dockerfile: Dockerfile
+    image: api-server
+    container_name: myapp-node-server
+    command: /usr/src/app/node_modules/.bin/nodemon index.js
+    volumes:
+      - ./backend/:/usr/src/app
+      - /usr/src/app/node_modules
+    ports:
+      - "3500:3500"
+    depends_on:
+      - mongo
+    env_file: ./backend/.env
+    environment:
+      - NODE_ENV=development
+    networks:
+      - community-app
+  mongo:
+    image: mongo:4.4-bionic
+    volumes:
+      - mongo-data:/data/db
+    ports:
+      - "27017:27017"
+    networks:
+      - community-app
+  react-app:
+    build:
+      context: ./frontend/
+      dockerfile: Dockerfile
+    image: react-app
+    stdin_open: true
+    container_name: myapp-react-frontend
+    command: npm start
+    volumes:
+      - ./frontend/:/usr/src/app
+      - /usr/src/app/node_modules
+    depends_on:
+      - api-server
+    ports:
+      - "3000:3000"
+    networks:
+      - community-app
+
+networks:
+  community-app:
+    driver: bridge
+
+volumes:
+  mongo-data:
+    driver: local
+  node_modules:
+  web-root:
+    driver: local
diff --git a/frontend/.dockerignore b/frontend/.dockerignore
new file mode 100644
index 00000000..b512c09d
--- /dev/null
+++ b/frontend/.dockerignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 00000000..154e9cd1
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,20 @@
+# Dockerfile for React client
+
+# Build react client
+FROM node:14-alpine
+
+# Working directory be app
+WORKDIR /usr/src/app
+
+COPY package*.json ./
+
+###  Installing dependencies
+
+RUN npm install
+
+# copy local files to app folder
+COPY . .
+
+EXPOSE 3000
+
+CMD ["npm","start"]
\ No newline at end of file
diff --git a/frontend/Makefile b/frontend/Makefile
new file mode 100644
index 00000000..d908ff7c
--- /dev/null
+++ b/frontend/Makefile
@@ -0,0 +1,5 @@
+# "make build" will give us the frontend image
+build: 
+	docker build -t react-app .
+
+
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0aa861d4..73bf69b6 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2019,6 +2019,31 @@
         "prop-types": "^15.6.2"
       }
     },
+    "@sideway/address": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.2.tgz",
+      "integrity": "sha512-idTz8ibqWFrPU8kMirL0CoPH/A29XOzzAzpyN3zQ4kAWnzmNfFmRaoMNN6VI8ske5M73HZyhIaW4OuSFIdM4oA==",
+      "requires": {
+        "@hapi/hoek": "^9.0.0"
+      },
+      "dependencies": {
+        "@hapi/hoek": {
+          "version": "9.2.0",
+          "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.2.0.tgz",
+          "integrity": "sha512-sqKVVVOe5ivCaXDWivIJYVSaEgdQK9ul7a4Kity5Iw7u9+wBAPbX1RMSnLLmp7O4Vzj0WOWwMAJsTL00xwaNug=="
+        }
+      }
+    },
+    "@sideway/formula": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.0.tgz",
+      "integrity": "sha512-vHe7wZ4NOXVfkoRb8T5otiENVlT7a3IAiw7H5M2+GO+9CDgcVUUsX1zalAztCmwyOr2RUTGJdgB+ZvSVqmdHmg=="
+    },
+    "@sideway/pinpoint": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
+      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
+    },
     "@sinonjs/commons": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.2.tgz",
@@ -10285,6 +10310,33 @@
         "supports-color": "^7.0.0"
       }
     },
+    "joi": {
+      "version": "17.4.0",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.4.0.tgz",
+      "integrity": "sha512-F4WiW2xaV6wc1jxete70Rw4V/VuMd6IN+a5ilZsxG4uYtUXWu2kq9W5P2dz30e7Gmw8RCbY/u/uk+dMPma9tAg==",
+      "requires": {
+        "@hapi/hoek": "^9.0.0",
+        "@hapi/topo": "^5.0.0",
+        "@sideway/address": "^4.1.0",
+        "@sideway/formula": "^3.0.0",
+        "@sideway/pinpoint": "^2.0.0"
+      },
+      "dependencies": {
+        "@hapi/hoek": {
+          "version": "9.2.0",
+          "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.2.0.tgz",
+          "integrity": "sha512-sqKVVVOe5ivCaXDWivIJYVSaEgdQK9ul7a4Kity5Iw7u9+wBAPbX1RMSnLLmp7O4Vzj0WOWwMAJsTL00xwaNug=="
+        },
+        "@hapi/topo": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.0.0.tgz",
+          "integrity": "sha512-tFJlT47db0kMqVm3H4nQYgn6Pwg10GTZHb1pwmSiv1K4ks6drQOtfEF5ZnPjkvC+y4/bUPHK+bc87QvLcL+WMw==",
+          "requires": {
+            "@hapi/hoek": "^9.0.0"
+          }
+        }
+      }
+    },
     "joi-browser": {
       "version": "13.4.0",
       "resolved": "https://registry.npmjs.org/joi-browser/-/joi-browser-13.4.0.tgz",