From cfb2dea1a6c297a5ef9ed185fe3e4e83798a6b3f Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Thu, 8 Jun 2023 18:14:26 +0500
Subject: [PATCH] reg form validations

---
 package-lock.json              |  34 ++--
 src/components/sign/RegForm.js | 285 ++++++++++++++++++++++++---------
 2 files changed, 224 insertions(+), 95 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0e7b456..ceefccf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6018,6 +6018,11 @@
         }
       }
     },
+    "node_modules/debug/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
     "node_modules/decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
@@ -11656,9 +11661,9 @@
       }
     },
     "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/multicast-dns": {
       "version": "6.2.3",
@@ -14948,11 +14953,6 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
-    "node_modules/send/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
-    },
     "node_modules/serialize-javascript": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
@@ -21703,6 +21703,13 @@
       "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
       "requires": {
         "ms": "2.1.2"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
       }
     },
     "decamelize": {
@@ -25820,9 +25827,9 @@
       }
     },
     "ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -28089,11 +28096,6 @@
               "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
             }
           }
-        },
-        "ms": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
         }
       }
     },
diff --git a/src/components/sign/RegForm.js b/src/components/sign/RegForm.js
index 32c8e7d..03b2cbe 100644
--- a/src/components/sign/RegForm.js
+++ b/src/components/sign/RegForm.js
@@ -3,6 +3,8 @@ import React, { useState, useEffect, useRef, useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import { UserContext } from "../../backend/UserContext";
 import ReCAPTCHA from "react-google-recaptcha";
+import ms from "ms";
+import moment from "moment/moment";
 
 // IMPORT IMAGES
 import up from "../../icons/clipboard-white.svg";
@@ -119,6 +121,14 @@ const RegForm = () => {
     }
   }, [user, navigate]);
 
+  useEffect(() => {
+    const inputDate = document.querySelector("#date");
+    inputDate.min = new Date(Date.now() - 504911232000)
+      .toISOString()
+      .split("T")[0];
+    inputDate.max = new Date().toISOString().split("T")[0];
+    console.log(inputDate.max);
+  }, []);
   return (
     <section className="reg">
       <LogoBg />
@@ -166,6 +176,23 @@ const RegForm = () => {
                   }
                 }}
               />
+              {validateTop ? (
+                <span
+                  className={
+                    inputValid.surname ? "pass-check" : "pass-check active"
+                  }
+                >
+                  {locale === "TKM"
+                    ? "Familiýasy gerek"
+                    : locale === "РУС"
+                    ? "Требуется фамилия"
+                    : locale === "ENG"
+                    ? "Surname is required"
+                    : "Familiýasy gerek"}
+                </span>
+              ) : (
+                ""
+              )}
             </div>
             <div className="reg-input-block">
               <label htmlFor="name">
@@ -194,6 +221,23 @@ const RegForm = () => {
                   }
                 }}
               />
+              {validateTop ? (
+                <span
+                  className={
+                    inputValid.name ? "pass-check" : "pass-check active"
+                  }
+                >
+                  {locale === "TKM"
+                    ? "Ady gerek"
+                    : locale === "РУС"
+                    ? "Требуется фамилия"
+                    : locale === "ENG"
+                    ? "Name is required"
+                    : "Ady gerek"}
+                </span>
+              ) : (
+                ""
+              )}
             </div>
             <div className="reg-input-block">
               <label htmlFor="fname">
@@ -222,6 +266,23 @@ const RegForm = () => {
                   }
                 }}
               />
+              {validateTop ? (
+                <span
+                  className={
+                    inputValid.fathers ? "pass-check" : "pass-check active"
+                  }
+                >
+                  {locale === "TKM"
+                    ? "Atasynyň ady gerek"
+                    : locale === "РУС"
+                    ? "Требуется фамилия"
+                    : locale === "ENG"
+                    ? "Middle name is required"
+                    : "Atasynyň ady gerek"}
+                </span>
+              ) : (
+                ""
+              )}
             </div>
             <div className="reg-input-block">
               <label htmlFor="date">
@@ -241,8 +302,6 @@ const RegForm = () => {
                 placeholder="дд / мм / гггг"
                 id="date"
                 required
-                min="1900-01-01"
-                max={getDate(18)}
                 onChange={(e) => {
                   setValidateTop(true);
                   if (e.target.value !== "") {
@@ -253,83 +312,117 @@ const RegForm = () => {
                 }}
               />
             </div>
-            <div className="reg-input-block split">
-              <div className="split-block">
-                <label htmlFor="serie">
-                  {locale === "TKM"
-                    ? "Seriýa-I"
-                    : locale === "РУС"
-                    ? "Серия-I"
-                    : locale === "ENG"
-                    ? "Series-I"
-                    : "Seriýa-I"}
-                  <span>*</span>
-                </label>
-                <CustomSelect
-                  items={["I", "II", "III", "IV"]}
-                  blockName={"select-block"}
-                  elName={"select-el"}
-                  customId={"serie"}
-                  name={"passport-serie"}
-                  stateSetter={(e) => {
-                    setPpSerie(e);
-                  }}
-                  eTarget={true}
-                  placeholder="I"
-                />
-              </div>
-              <div className="split-block">
-                <label htmlFor="reg">
-                  {locale === "TKM"
-                    ? "Seriýa-II"
-                    : locale === "РУС"
-                    ? "Серия-II"
-                    : locale === "ENG"
-                    ? "Series-II"
-                    : "Seriýa-II"}
-                  <span>*</span>
-                </label>
-                <CustomSelect
-                  items={["AŞ", "AH", "DZ", "MR", "BN", "LB"]}
-                  blockName={"select-block"}
-                  elName={"select-el"}
-                  customId={"reg"}
-                  name={"passport-reg"}
-                  stateSetter={(e) => {
-                    setPpPrefix(e);
-                  }}
-                  eTarget={true}
-                  placeholder="AŞ"
-                />
-              </div>
-              <div className="split-block">
-                <label htmlFor="num">
-                  {locale === "TKM"
-                    ? "Pasportyň belgisi"
-                    : locale === "РУС"
-                    ? "Номер паспорта"
-                    : locale === "ENG"
-                    ? "Passport number"
-                    : "Pasportyň belgisi"}
-                  <span>*</span>
-                </label>
-                <input
-                  autoComplete="true"
-                  type="text"
-                  name="num"
-                  maxLength={6}
-                  placeholder="212121"
-                  id="num"
-                  required
-                  onChange={(e) => {
-                    setValidateTop(true);
-                    if (e.target.value !== "") {
-                      setInputValid({ ...inputValid, ppNum: e.target.value });
-                    } else {
-                      setInputValid({ ...inputValid, ppNum: null });
-                    }
-                  }}
-                />
+            <div className="reg-input-block">
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "1.4rem",
+                }}
+              >
+                <div className="split">
+                  <div className="split-block">
+                    <label htmlFor="serie">
+                      {locale === "TKM"
+                        ? "Seriýa-I"
+                        : locale === "РУС"
+                        ? "Серия-I"
+                        : locale === "ENG"
+                        ? "Series-I"
+                        : "Seriýa-I"}
+                      <span>*</span>
+                    </label>
+                    <CustomSelect
+                      items={["I", "II", "III", "IV"]}
+                      blockName={"select-block"}
+                      elName={"select-el"}
+                      customId={"serie"}
+                      name={"passport-serie"}
+                      stateSetter={(e) => {
+                        setPpSerie(e);
+                      }}
+                      eTarget={true}
+                      placeholder="I"
+                    />
+                  </div>
+                  <div className="split-block">
+                    <label htmlFor="reg">
+                      {locale === "TKM"
+                        ? "Seriýa-II"
+                        : locale === "РУС"
+                        ? "Серия-II"
+                        : locale === "ENG"
+                        ? "Series-II"
+                        : "Seriýa-II"}
+                      <span>*</span>
+                    </label>
+                    <CustomSelect
+                      items={["AŞ", "AH", "DZ", "MR", "BN", "LB"]}
+                      blockName={"select-block"}
+                      elName={"select-el"}
+                      customId={"reg"}
+                      name={"passport-reg"}
+                      stateSetter={(e) => {
+                        setPpPrefix(e);
+                      }}
+                      eTarget={true}
+                      placeholder="AŞ"
+                    />
+                  </div>
+                  <div className="split-block">
+                    <label htmlFor="num">
+                      {locale === "TKM"
+                        ? "Pasportyň belgisi"
+                        : locale === "РУС"
+                        ? "Номер паспорта"
+                        : locale === "ENG"
+                        ? "Passport number"
+                        : "Pasportyň belgisi"}
+                      <span>*</span>
+                    </label>
+                    <input
+                      autoComplete="true"
+                      type="text"
+                      name="num"
+                      maxLength={6}
+                      placeholder="212121"
+                      id="num"
+                      required
+                      onChange={(e) => {
+                        setValidateTop(true);
+                        if (e.target.value !== "") {
+                          setInputValid({
+                            ...inputValid,
+                            ppNum: e.target.value,
+                          });
+                        } else {
+                          setInputValid({ ...inputValid, ppNum: null });
+                        }
+                      }}
+                    />
+                  </div>
+                </div>
+                <div>
+                  {validateTop ? (
+                    <span
+                      className={
+                        ppSerie && ppPrefix && inputValid.ppNum
+                          ? "pass-check"
+                          : "pass-check active"
+                      }
+                    >
+                      {locale === "TKM"
+                        ? "Bu maglumatlar zerurdyr"
+                        : locale === "РУС"
+                        ? "Эта информация обязательна"
+                        : locale === "ENG"
+                        ? "This information is required"
+                        : "Bu maglumatlar zerurdyr"}
+                    </span>
+                  ) : (
+                    ""
+                  )}
+                </div>
               </div>
             </div>
             <div className="reg-input-block">
@@ -359,6 +452,23 @@ const RegForm = () => {
                   }
                 }}
               />
+              {validateTop ? (
+                <span
+                  className={
+                    inputValid.ppAddr ? "pass-check" : "pass-check active"
+                  }
+                >
+                  {locale === "TKM"
+                    ? "Bu meýdan hökmanydyr"
+                    : locale === "РУС"
+                    ? "Это поле обязательно"
+                    : locale === "ENG"
+                    ? "This field is required"
+                    : "Bu meýdan hökmanydyr"}
+                </span>
+              ) : (
+                ""
+              )}
             </div>
             <div className="reg-input-block">
               <label htmlFor="address">
@@ -725,6 +835,23 @@ const RegForm = () => {
                 setInputValid({ ...inputValid, captcha: true });
               }}
             />
+            {validateBottom ? (
+              <span
+                className={
+                  inputValid.captcha ? "pass-check" : "pass-check active"
+                }
+              >
+                {locale === "TKM"
+                  ? "Captcha gerek"
+                  : locale === "РУС"
+                  ? "Капча требуется"
+                  : locale === "ENG"
+                  ? "Captcha is required"
+                  : "Captcha gerek"}
+              </span>
+            ) : (
+              ""
+            )}
           </div>
           {locale === "TKM" ? (
             <h2>