little fixes to auth pages

2023-04-26 23:55:17 +01:00
parent 6c68c2361c
commit 1407cb9769
4 changed files with 189 additions and 135 deletions
@@ -37,7 +37,7 @@ export default function SignUp() {

  const navigate = useNavigate();
  const userApi = new usersService();
-  
+
  // Get Country Api
  const getCountryList = async () => {
    const res = await userApi.getSignupCountryData()
@@ -63,6 +63,7 @@ export default function SignUp() {

    try {
      if (email !== '' && password !== '' && first_name !== '' && last_name !== '') {
+        setSignUpLoading(true)
        const reqData = {
          country: country,
          firstname: first_name,
@@ -75,7 +76,6 @@ export default function SignUp() {
        }

        const res = await userApi.CreateUser(reqData)
-        setSignUpLoading(true)

        if (res.status === 200) {
          const { data } = res
@@ -83,24 +83,19 @@ export default function SignUp() {
            setMsgError('This account has been already created')
            setSignUpLoading(false)
          }
-          if (data.status > 0 && data.internal_return == 100 && data.session != '') {
-            localStorage.setItem("email", `${data.email}`);
-            localStorage.setItem("country", `${data.country}`);
-            localStorage.setItem("firstname", `${data.firstname}`);
-            localStorage.setItem("lastname", `${data.lastname}`);
-
+          if (data && data.status == 1) {
            setTimeout(() => {
-              navigate("/", { replace: true });
+              navigate("/verify-you", { replace: true });
              setSignUpLoading(false)
            }, 2000)
          } else {
-            setMsgError(data.status)
            setSignUpLoading(false)
+
          }
+        } else {
+          setMsgError('This account does not exist')
+          setSignUpLoading(false)
        }
-      } else {
-        setMsgError('This account does not exist')
-        setSignUpLoading(false)
      }
    } catch (error) {
      throw new Error(error)
@@ -244,8 +239,7 @@ export default function SignUp() {
                          <button
                            type="button"
                            onClick={handleSignUp}
-                            className={`rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] ${signUpLoading ? "active" : ""
-                              }`}
+                            className={`rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem]`}
                          >
                            {signUpLoading ? (
                              <div className="signup btn-loader"></div>
@@ -1,32 +1,45 @@
-import { useEffect, useState } from "react";
-import { useLocation } from "react-router-dom";
+import { useEffect, useState, useCallback } from "react";
+import { useLocation, Link, useNavigate } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import usersService from "../../../services/UsersService";
+import WrenchBoard from "../../../assets/images/wrenchboard.png"

 export default function VerifyLink() {
  const [pageLoader, setPageLoader] = useState(true)
+  const [linkSuccess, setLinkSuccess] = useState(false)
+  const [linkError, setLinkError] = useState(false)
+  const navigate = useNavigate()
  const location = useLocation();
  const queryParams = new URLSearchParams(location?.search)
  const token = queryParams.get('vlink')
-  
-  const verifyEmail = async (code) => {
-    const userApi = new usersService()

-    try {
-      const verifyRes = await userApi.verifyEmail(code)
-      console.log(verifyRes)
-      if(verifyRes.internal_return === 0) {
-        let {data} = verifyRes
+  const verifyEmail = useCallback(
+    async (code) => {
+      const userApi = new usersService()

-      } else {
+      try {
+        const verifyRes = await userApi.verifyEmail(code)
+        console.log(verifyRes)
+        if (verifyRes.status === 200) {
+          let { data } = verifyRes

+          if (data && data.internal_return === 0 && data.status_text == 'Link Verfied') {
+            setPageLoader(false)
+            setLinkSuccess(true)
+          } else {
+            setPageLoader(false)
+            setLinkError(true)
+          }
+        }
+      } catch (error) {
+        console.log(error)
+        setPageLoader(false)
+        setLinkError(true)
+        throw new Error(error)
      }
-    } catch (error) {
-      console.log(error)
-      throw new Error(error)
-    }
-  }
+    }, [linkSuccess, linkError]
+  )

  useEffect(() => {
    verifyEmail(token)
@@ -39,63 +52,92 @@ export default function VerifyLink() {
      <AuthLayout
        slogan="Welcome to WrenchBoard"
      >
-        <div className="content-wrapper login dark:bg-dark-white w-full lg:max-w-[500px] 2xl:w-[828px] rounded-xl flex flex-col justify-center sm:p-7 p-5">
+        {pageLoader ? (
+          <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+        ) : (
          <div className="w-full">
-            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-              <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
-                fontSize: 'calc(1rem + .6vw)'
-              }}>
-                Sign In to WrenchBoard
-              </h1>
+            <div className='mb-12'>
+              <Link to='#'>
+                <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+              </Link>
            </div>
-            <div className="input-area">
-              {/* INPUT */}
-              <div className="mb-5">
-                <InputCom
-                  // value={password}
-                  // inputHandler={handlePassword}
-                  placeholder="support@mermsemr.com"
-                  label="Email"
-                  name="email"
-                  type="email"
-                  iconName="message"
-                />
-              </div>
-              <div className="mb-5">
-                <InputCom
-                  // value={password}
-                  // inputHandler={handlePassword}
-                  placeholder="● ● ● ● ● ●"
-                  label="Password"
-                  name="password"
-                  type="password"
-                  iconName="password"
-                />
-              </div>
-              <div className="signin-area mb-3.5">
-                <button
-                  // onClick={doLogin}
-                  type="button"
-                  className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center ${loginLoading ? "active" : ""
-                    }`}
-                >
-                  {loginLoading ? (
-                    <div className="signup btn-loader"></div>
-                  ) : (
-                    <span>Continue</span>
-                  )}
-                </button>
-                {/* <a
-                  href="/update-password"
-                  className="w-full rounded-[50px] h-[58px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center"
-                >
-                  Continue
-                </a> */}
+            <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
+              <div className="w-full">
+                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
+                    fontSize: 'calc(1rem + .6vw)'
+                  }}>
+                    {linkError && 'Invalid verification link'}
+                    {linkSuccess && 'Sign In to WrenchBoard'}
+                  </h1>
+                </div>
+                {/* If the verification was a success */}
+                {linkSuccess && <SuccessfulComponent />}
+
+                {/* If the verification was unsuccessful */}
+                {linkError && <ErrorComponent onClick={() => navigate('/login')} />}
              </div>
            </div>
          </div>
-        </div>
+        )}
      </AuthLayout>
    </>
  )
-}
+}
+
+const SuccessfulComponent = ({ onClick }) => (
+  <div className="input-area">
+    {/* INPUT */}
+    <div className="mb-5">
+      <InputCom
+        // value={password}
+        // inputHandler={handlePassword}
+        placeholder="support@mermsemr.com"
+        label="Email"
+        name="email"
+        type="email"
+        iconName="message"
+      />
+    </div>
+    <div className="mb-5">
+      <InputCom
+        // value={password}
+        // inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Password"
+        name="password"
+        type="password"
+        iconName="password"
+      />
+    </div>
+    <div className="signin-area mb-3.5">
+      <button
+        onClick={onClick}
+        type="button"
+        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center $`}
+      >
+        <span>Continue</span>
+      </button>
+    </div>
+  </div>
+)
+
+const ErrorComponent = ({ onClick }) => (
+  <div className="input-area">
+    <div className="my-5">
+      <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+        This error occurs because you have already verified this link or the link has expired. Try login or reset password. If none worked, try to create the account from the start.
+      </p>
+    </div>
+
+    <div className="signin-area flex justify-center mb-3.5">
+      <button
+        onClick={onClick}
+        type="button"
+        className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+      >
+        <span>Return Home</span>
+      </button>
+    </div>
+  </div>
+)
@@ -1,7 +1,5 @@
-import React from "react";
-import titleShape from "../../../assets/images/shape/text-shape-three.svg";
 import AuthLayout from "../AuthLayout";
-import Otp from "./Otp";
+import InputCom from "../../Helpers/Inputs/InputCom";

 export default function VerifyYou() {
  return (
@@ -15,51 +13,19 @@ export default function VerifyYou() {
              <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
                fontSize: 'calc(1rem + .6vw)'
              }}>
-                Sign In to WrenchBoard
+                Verification Sent
              </h1>
            </div>
            <div className="input-area">
-              {/* INPUT */}
              <div className="mb-5">
-                <InputCom
-                  // value={password}
-                  // inputHandler={handlePassword}
-                  placeholder="support@mermsemr.com"
-                  label="Email"
-                  name="email"
-                  type="email"
-                  iconName="message"
-                />
+                <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                  To complete the verification process, you should check your email inbox and look for the verification email. It may take a few minutes for the email to arrive, so be patient. Once you receive the email, open it and click on the verification link provided.
+                </p>
              </div>
              <div className="mb-5">
-                <InputCom
-                  // value={password}
-                  // inputHandler={handlePassword}
-                  placeholder="● ● ● ● ● ●"
-                  name="password"
-                  type="password"
-                  iconName="password"
-                />
-              </div>
-              <div className="signin-area mb-3.5">
-                <button
-                  // onClick={doLogin}
-                  type="button"
-                  className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center ${loginLoading ? "active" : ""
-                    }`}
-                >
-                  {loginLoading ? (
-                    <div className="signup btn-loader"></div>
-                  ) : (
-                    <span>Continue</span>
-                  )}
-                </button>
-                {/* <a
-                  href="/update-password"
-                  className="w-full rounded-[50px] h-[58px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center"
-                >
-                  Continue
-                </a> */}
+                <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                  If you haven't received the verification email after a reasonable amount of time, make sure to check your spam or junk mail folder. It's also possible that the email was sent to the wrong email address, so double-check that you entered your email address correctly.
+                </p>
              </div>
            </div>
          </div>
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import Icons from "../../Icons";
 import { Link } from "react-router-dom";

@@ -15,18 +15,67 @@ export default function InputCom({
  onClick,
  disable
 }) {
+  const inputRef = useRef(null)
+  // Entry Validation
+  // for Min Length:
+  const minLengthValidation = () => {
+    if (inputRef && inputRef?.current && inputRef?.current?.name == 'email') {
+      return 7
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'first_name') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'last_name') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'address') {
+      return 5
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'password') {
+      return 8
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'state') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'province') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'city') {
+      return 3
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'amount') {
+      return 1
+    }
+  }
+
+  // for MaxLength
+  const maxLengthValidation = () => {
+    if (inputRef && inputRef?.current && inputRef?.current?.name == 'email') {
+      return 35
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'first_name') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'last_name') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'address') {
+      return 49
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'password') {
+      return 15
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'state') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'province') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'city') {
+      return 25
+    } else if (inputRef && inputRef?.current && inputRef?.current?.name == 'amount') {
+      return 9  
+    }
+  }
+
+  console.log(inputRef.current?.name, inputRef.current?.minLength)
  return (
    <div className="input-com">
      <div className="flex items-center justify-between">
-      {label && (
-        <label
-          className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
-          htmlFor={name}
-        >
-          {label}
-        </label>
-      )}
-      {forgotPassword && <Link to="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
+        {label && (
+          <label
+            className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
+            htmlFor={name}
+          >
+            {label}
+          </label>
+        )}
+        {forgotPassword && <Link to="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
      </div>
      <div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
        <input
@@ -39,6 +88,9 @@ export default function InputCom({
          name={name}
          required
          readOnly={disable}
+          minLength={minLengthValidation()}
+          maxLength={maxLengthValidation()}
+          ref={inputRef}
        />
        {iconName && (
          <div className="absolute right-6 bottom-[10px] z-10">