From c87fc4f32d46dce1f8c38629b1969cf17ee1570b Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Thu, 27 Apr 2023 02:25:03 +0100
Subject: [PATCH] Added verify link

---
 src/components/AuthPages/VerifyLink/index.jsx | 141 ++++++++++++++++++
 1 file changed, 141 insertions(+)
 create mode 100644 src/components/AuthPages/VerifyLink/index.jsx

diff --git a/src/components/AuthPages/VerifyLink/index.jsx b/src/components/AuthPages/VerifyLink/index.jsx
new file mode 100644
index 0000000..ed4b7a1
--- /dev/null
+++ b/src/components/AuthPages/VerifyLink/index.jsx
@@ -0,0 +1,141 @@
+import { useEffect, useState } 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.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)
+    }
+  }
+
+  useEffect(() => {
+    verifyEmail(token)
+  })
+
+  console.log(token)
+
+  return (
+    <>
+      <AuthLayout
+        slogan="Welcome to WrenchBoard"
+      >
+        {pageLoader ? (
+          <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+        ) : (
+          <div className="w-full">
+            <div className='mb-12'>
+              <Link to='#'>
+                <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+              </Link>
+            </div>
+            <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>
+        )}
+      </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>
+)
\ No newline at end of file