WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

adding verification

Browse Source
This commit is contained in:
Ebube
2023-04-26 13:09:57 +01:00
parent 02fe8cb399
commit 6c68c2361c
7 changed files with 260 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/Login/index.jsx
+1 -1
View File
@@ -97,7 +97,7 @@ export default function Login() {
<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 xl:bg-white dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
<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={{
src/components/AuthPages/VerifyLink/index.jsx
+101
View File
@@ -0,0 +1,101 @@
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import AuthLayout from "../AuthLayout";
import InputCom from "../../Helpers/Inputs/InputCom";
import usersService from "../../../services/UsersService";
export default function VerifyLink() {
const [pageLoader, setPageLoader] = useState(true)
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
} else {
}
} catch (error) {
console.log(error)
throw new Error(error)
}
}
useEffect(() => {
verifyEmail(token)
}, [])
console.log(token)
return (
<>
<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">
<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>
<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>
</div>
</div>
</div>
</AuthLayout>
</>
)
}
src/components/AuthPages/VerifyYou/index.jsx
+43 -19
View File
@@ -9,33 +9,57 @@ export default function VerifyYou() {
<AuthLayout
slogan="Welcome to WrenchBoard"
>
<div className="content-wrapper xl:bg-white dark:bg-dark-white w-full sm:w-auto px-5 xl:px-[70px] 2xl:px-[100px] h-[818px] rounded-xl flex flex-col justify-center">
<div>
<div className="title-area flex flex-col justify-center items-center relative text-center mb-8">
<h1 className="sm:text-5xl text-4xl font-bold leading-[74px] text-dark-gray dark:text-white">
Verification Code
<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">
<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="shape sm:w-[377px] w-[270px] -mt-5 ml-5">
<img src={titleShape} alt="shape" />
</div>
</div>
<div className="input-area">
<Otp />
{/* 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="● ● ● ● ● ●"
name="password"
type="password"
iconName="password"
/>
</div>
<div className="signin-area mb-3.5">
<a
<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>
<div className="resend-code flex justify-center">
<p className="text-lg text-thin-light-gray font-normal">
Dont’t have an aceount ?
<a href="#" className="ml-2 text-dark-gray dark:text-white font-bold">
Please resend
</a>
</p>
</a> */}
</div>
</div>
</div>