@verified-network/verified-custody 0.1.8 → 0.2.0

package/src/pages/otp.tsx

@@ -0,0 +1,410 @@
+import React, { useEffect, useState } from "react";
+import { useVaultStore } from "../services/store";
+import {
+  checkOTPVerification,
+  errorToast,
+  sendOTPVerification,
+} from "../utils/helpers";
+import PageSlider from "../components/slider";
+import { PrivacyOverlay } from "../components/overlays";
+import { imageAssets } from "../utils/constants";
+
+const OTPPage = (props: {
+  setStep: (step: string) => void;
+  setIsLoading: (isLoading: boolean) => void;
+  setUserNumberFmt: (number: string) => void;
+  setUserEmail: (email: string) => void;
+  selectedCountry: { name: string; area: string; flag: string };
+  userNumberFmt: string;
+  userEmail: string;
+}) => {
+  const [searchActive, setSearchActive] = useState(false);
+  const [countdown, setCountdown] = useState(60);
+  const [otpIncorrect, setOtpIncorrect] = useState(false);
+
+  const { pk, vaultContract } = useVaultStore();
+
+  useEffect(() => {
+    if (countdown === 0) return;
+
+    const reduceCountdown = setInterval(() => {
+      setCountdown((prevCountdown) => prevCountdown - 1);
+    }, 1000);
+
+    return () => clearInterval(reduceCountdown);
+  }, [countdown]);
+
+  //todo: add key actions to input focus change
+  const handlleInputFocus = (currentInput: any) => {
+    if (currentInput.value.length > 0) {
+      const nextInput = currentInput.nextElementSibling;
+      if (nextInput) {
+        nextInput.focus();
+      }
+    } else if (currentInput.value.length === 0) {
+      currentInput.focus();
+    }
+  };
+
+  const handleOtpPaste = (e: any) => {
+    const pastedText = e.clipboardData.getData("text");
+    const numbersFromText = pastedText?.replace(/\D/g, "");
+    const allOptInputs: any = document.getElementsByClassName("otp-input");
+    if (allOptInputs?.length === 4 && numbersFromText?.length > 0) {
+      for (let i = 0; i < allOptInputs.length; i++) {
+        if (numbersFromText[i]) {
+          allOptInputs[i].value = numbersFromText[i];
+          allOptInputs[i].focus();
+        }
+      }
+    }
+  };
+
+  const handleOtpBackspace = (e: any) => {
+    const previousInpput = e.target.previousElementSibling;
+    if (previousInpput) {
+      previousInpput.focus();
+    }
+  };
+
+  const handleButtonDisplay = () => {
+    const button: any = document.getElementById(
+      "verified-custd-mdl-otp-button"
+    );
+    const otp1: any = document.getElementById("verified-custd-mdl-otp-input-1");
+    const otp2: any = document.getElementById("verified-custd-mdl-otp-input-2");
+    const otp3: any = document.getElementById("verified-custd-mdl-otp-input-3");
+    const otp4: any = document.getElementById("verified-custd-mdl-otp-input-4");
+    if (
+      button &&
+      otp1?.value.length > 0 &&
+      otp2?.value.length > 0 &&
+      otp3?.value.length > 0 &&
+      otp4?.value.length > 0 &&
+      !otpIncorrect
+    ) {
+      button.className = "verified-custd-mdl-startup-button-active";
+    } else {
+      button.className = "verified-custd-mdl-startup-button";
+    }
+  };
+
+  const handleVerifyOtp = async () => {
+    const vaultId =
+      props.userEmail?.length > 0
+        ? props.userEmail
+        : `+${props.selectedCountry.area}${props.userNumberFmt?.replace(
+            " ",
+            ""
+          )}`;
+    const otp1: any = document.getElementById("verified-custd-mdl-otp-input-1");
+    const otp2: any = document.getElementById("verified-custd-mdl-otp-input-2");
+    const otp3: any = document.getElementById("verified-custd-mdl-otp-input-3");
+    const otp4: any = document.getElementById("verified-custd-mdl-otp-input-4");
+    if (
+      otp1?.value?.length > 0 &&
+      otp2?.value?.length > 0 &&
+      otp3?.value?.length > 0 &&
+      otp4?.value?.length > 0 &&
+      vaultId &&
+      pk &&
+      vaultContract
+    ) {
+      props.setIsLoading(true);
+      const fullOtp = otp1?.value + otp2?.value + otp3?.value + otp4?.value;
+      await checkOTPVerification(vaultId, fullOtp).then((res) => {
+        props.setIsLoading(false);
+        if (res) {
+          props.setStep("4");
+        } else {
+          setOtpIncorrect(true);
+        }
+      });
+    }
+  };
+
+  const handleResendOtp = async () => {
+    const vaultId =
+      props.userEmail?.length > 0
+        ? props.userEmail
+        : `+${props.selectedCountry.area}${props.userNumberFmt?.replace(
+            " ",
+            ""
+          )}`;
+
+    const channel = props.userEmail?.length > 0 ? "email" : "sms";
+
+    if (vaultId && channel) {
+      props.setIsLoading(true);
+      await sendOTPVerification(vaultId, channel).then((res) => {
+        props.setIsLoading(false);
+        if (res) {
+          setCountdown(60);
+          setOtpIncorrect(false);
+          const otp1: any = document.getElementById(
+            "verified-custd-mdl-otp-input-1"
+          );
+          const otp2: any = document.getElementById(
+            "verified-custd-mdl-otp-input-2"
+          );
+          const otp3: any = document.getElementById(
+            "verified-custd-mdl-otp-input-3"
+          );
+          const otp4: any = document.getElementById(
+            "verified-custd-mdl-otp-input-4"
+          );
+          (otp1!.value = ""),
+            (otp2!.value = ""),
+            (otp3!.value = ""),
+            (otp4!.value = "");
+        } else {
+          errorToast("Oops something went wrong", "Unexpected error");
+        }
+      });
+    }
+  };
+
+  return (
+    <div className="verified-custd-mdl-startup-language">
+      <div className="verified-custd-mdl-startup-contact">
+        <PageSlider sliderCount={[1, 2, 3]} currentSlider="0" />
+        <div className="verified-custd-mdl-startup-contact-content">
+          <p className="verified-custd-mdl-startup-contact-text">Enter OTP</p>
+          <div className="verified-custd-mdl-startup-otp-text">
+            <p className="verified-custd-mdl-startup-otp-header-text">
+              Enter <span style={{ color: "#0C0C0E" }}>4-Digit OTP</span> (One
+              Time Password) sent to your{" "}
+              {props.userNumberFmt?.length > 0
+                ? "phone number"
+                : "email address"}
+            </p>
+            <div className="verified-custd-mdl-startup-otp-footer">
+              <p className="verified-custd-mdl-startup-otp-footer-text">
+                {props.userNumberFmt?.length > 0 && (
+                  <React.Fragment>
+                    <span>(+{props.selectedCountry?.area})</span>{" "}
+                    <span> {props.userNumberFmt?.split(" ")[0]}</span>{" "}
+                    <span> {props.userNumberFmt?.split(" ")[1]}</span>
+                  </React.Fragment>
+                )}
+                {props.userEmail?.length > 0 && <span>{props.userEmail}</span>}
+              </p>
+              <img
+                onClick={() => {
+                  props.setUserNumberFmt("");
+                  props.setUserEmail("");
+                  props.setStep("2");
+                }}
+                src={imageAssets.editBlue}
+                alt="edit-icon"
+                className="verified-custd-mdl-st-otp-icon"
+              />
+            </div>
+          </div>
+        </div>
+        <div className="verified-custd-mdl-otp-input-container">
+          <div className="verified-custd-mdl-otp-input-group">
+            <input
+              onInputCapture={(e: any) => {
+                e.target.value = e.target.value?.replace(/\D/g, "");
+                setOtpIncorrect(false);
+              }}
+              onInput={(e) => {
+                handlleInputFocus(e.target);
+                handleButtonDisplay();
+              }}
+              onKeyDown={(e: any) => {
+                if (e.key === "Backspace" && e.target.value === "") {
+                  handleOtpBackspace(e);
+                }
+              }}
+              onPaste={(e) => {
+                handleOtpPaste(e);
+              }}
+              className={
+                otpIncorrect
+                  ? "verified-custd-mdl-otp-input-red"
+                  : "verified-custd-mdl-otp-input"
+              }
+              type="text"
+              maxLength={1}
+              id="verified-custd-mdl-otp-input-1"
+            />
+            <input
+              onInputCapture={(e: any) => {
+                e.target.value = e.target.value?.replace(/\D/g, "");
+                setOtpIncorrect(false);
+              }}
+              onInput={(e) => {
+                handlleInputFocus(e.target);
+                handleButtonDisplay();
+              }}
+              onKeyDown={(e: any) => {
+                if (e.key === "Backspace" && e.target.value === "") {
+                  handleOtpBackspace(e);
+                }
+              }}
+              className={
+                otpIncorrect
+                  ? "verified-custd-mdl-otp-input-red"
+                  : "verified-custd-mdl-otp-input"
+              }
+              type="text"
+              maxLength={1}
+              id="verified-custd-mdl-otp-input-2"
+            />
+            <input
+              onInputCapture={(e: any) => {
+                e.target.value = e.target.value?.replace(/\D/g, "");
+                setOtpIncorrect(false);
+              }}
+              onInput={(e) => {
+                handlleInputFocus(e.target);
+                handleButtonDisplay();
+              }}
+              onKeyDown={(e: any) => {
+                if (e.key === "Backspace" && e.target.value === "") {
+                  handleOtpBackspace(e);
+                }
+              }}
+              className={
+                otpIncorrect
+                  ? "verified-custd-mdl-otp-input-red"
+                  : "verified-custd-mdl-otp-input"
+              }
+              type="text"
+              maxLength={1}
+              id="verified-custd-mdl-otp-input-3"
+            />
+            <input
+              onInputCapture={(e: any) => {
+                e.target.value = e.target.value?.replace(/\D/g, "");
+                setOtpIncorrect(false);
+              }}
+              onInput={(e) => {
+                handlleInputFocus(e.target);
+                handleButtonDisplay();
+              }}
+              onKeyDown={(e: any) => {
+                if (e.key === "Backspace" && e.target.value === "") {
+                  handleOtpBackspace(e);
+                }
+              }}
+              className={
+                otpIncorrect
+                  ? "verified-custd-mdl-otp-input-red"
+                  : "verified-custd-mdl-otp-input"
+              }
+              type="text"
+              maxLength={1}
+              id="verified-custd-mdl-otp-input-4"
+            />
+          </div>
+          <div className="verified-custd-mdl-otp-timer">
+            {!otpIncorrect && countdown > 5 && (
+              <p className="verified-custd-mdl-otp-timer-text">
+                <span style={{ color: "#717286", fontWeight: 400 }}>00:</span>
+                {countdown}
+              </p>
+            )}
+            {!otpIncorrect && countdown <= 5 && countdown > 0 && (
+              <p className="verified-custd-mdl-otp-timer-text-red">
+                <span style={{ fontWeight: 400 }}>00:</span>
+                {countdown}
+              </p>
+            )}
+            {!otpIncorrect && countdown === 0 && (
+              <p className="verified-custd-mdl-otp-resend-text">
+                Didn't receive an OTP ?
+              </p>
+            )}
+            {otpIncorrect && (
+              <p className="verified-custd-mdl-otp-incorrect-text">
+                Please enter the correct OTP
+              </p>
+            )}
+            {!otpIncorrect && countdown > 0 && (
+              <p className="verified-custd-mdl-otp-resend-text">Resend OTP</p>
+            )}
+            {!otpIncorrect && countdown === 0 && (
+              <p
+                onClick={async () => {
+                  //clear input content
+                  const inputs: any =
+                    document.getElementsByClassName("otp-input");
+                  if (inputs) {
+                    for (let i = 0; i < inputs.length; i++) {
+                      inputs[i].value = "";
+                    }
+                  }
+
+                  await handleResendOtp();
+                }}
+                className="verified-custd-mdl-otp-resend-text-active"
+              >
+                Resend OTP
+              </p>
+            )}
+            {otpIncorrect && (
+              <p
+                onClick={async () => {
+                  //clear input content
+                  const inputs: any =
+                    document.getElementsByClassName("otp-input");
+                  if (inputs) {
+                    for (let i = 0; i < inputs.length; i++) {
+                      inputs[i].value = "";
+                    }
+                  }
+
+                  await handleResendOtp();
+                }}
+                className="verified-custd-mdl-otp-resend-text-active"
+              >
+                Resend OTP
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {!searchActive && <div style={{ height: "100px" }}></div>}
+
+      <div className="verified-custd-mdl-startup-contact-footer">
+        <div className="verified-custd-mdl-st-contact-footer-first-section">
+          <button
+            id="verified-custd-mdl-otp-button"
+            onClick={async (e: any) => {
+              if (
+                e.target.className.includes(
+                  "verified-custd-mdl-startup-button"
+                ) &&
+                e.target.className !== "verified-custd-mdl-startup-button"
+              ) {
+                e.target.className = "verified-custd-mdl-startup-button-click";
+                await handleVerifyOtp();
+              } else {
+                const buttonElement = document.getElementsByClassName(
+                  "verified-custd-mdl-startup-button-active"
+                );
+                if (buttonElement.length > 0) {
+                  buttonElement[0].className =
+                    "verified-custd-mdl-startup-button-click";
+                  await handleVerifyOtp();
+                }
+              }
+            }}
+            className="verified-custd-mdl-startup-button"
+          >
+            Proceed
+          </button>
+          <div className="verified-custd-mdl-st-contact-footer-second-section">
+            <PrivacyOverlay />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OTPPage;