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

Add family acc

Browse Source
This commit is contained in:
Ebube
2023-05-09 11:59:49 +01:00
parent 872ba3e0cc
commit 4eee3a4683
19 changed files with 2056 additions and 1362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/ForgotPassword/index.jsx
+71 -40
View File
@@ -1,17 +1,17 @@
import React, { useEffect, useState } from "react";
import { Link, useNavigate } from 'react-router-dom';
import WrenchBoard from "../../../assets/images/wrenchboard.png"
import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import WrenchBoard from "../../../assets/images/wrenchboard.png";
import usersService from "../../../services/UsersService";
import InputCom from "../../Helpers/Inputs/InputCom";
import AuthLayout from "../AuthLayout";
import usersService from "../../../services/UsersService";
export default function ForgotPassword() {
const [checked, setValue] = useState(false);
const [resetLoading, setResetLoading] = useState(false)
const [resetLoading, setResetLoading] = useState(false);
// email
const [email, setMail] = useState("");
const [msgError, setMsgError] = useState('');
const [msgSuccess, setMsgSuccess] = useState(false)
const [msgError, setMsgError] = useState("");
const [msgSuccess, setMsgSuccess] = useState(false);
const navigate = useNavigate();
const userApi = new usersService();
@@ -21,52 +21,54 @@ export default function ForgotPassword() {
};
const humanChecker = () => {
setValue(!checked)
}
setValue(!checked);
};
const resetHandler = async () => {
if (email == '') {
setMsgError('An email is required')
if (email == "") {
setMsgError("An email is required");
} else if (!checked) {
setMsgError('Check if you are human')
setMsgError("Check if you are human");
}
if (email !== '' && checked) {
const reqData = { email }
setResetLoading(true)
if (email !== "" && checked) {
const reqData = { email };
setResetLoading(true);
try {
const res = await userApi.StartResetPassword(reqData)
const res = await userApi.StartResetPassword(reqData);
if (res.status === 200) {
setMsgSuccess(true)
setMail("")
setValue(false)
setResetLoading(false)
setMsgSuccess(true);
setMail("");
setValue(false);
setResetLoading(false);
}
} catch (error) {
setResetLoading(false)
setMail("")
setMsgError('An error occurred')
throw new Error(error)
setResetLoading(false);
setMail("");
setMsgError("An error occurred");
throw new Error(error);
} finally {
setTimeout(() => {
setMsgError(null)
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
setMsgError(null);
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
}
}
setTimeout(() => {
setMsgError(null)
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
}
setMsgError(null);
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
};
return (
<>
<AuthLayout
slogan="Welcome to WrenchBoard"
>
<AuthLayout slogan="Welcome to WrenchBoard">
<div className="w-full">
<div className='mb-12'>
<Link to='#'>
<img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
<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 xl:bg-white dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
@@ -75,11 +77,14 @@ export default function ForgotPassword() {
<h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
Forget Password
</h1>
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">Enter your email to reset your password.</span>
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
Enter your email to reset your password.
</span>
</div>
<div className="input-area">
<div className="input-item mb-10">
<InputCom
fieldClass="px-6"
placeholder="Your Username/Email"
label="Email"
name="email"
@@ -98,7 +103,14 @@ export default function ForgotPassword() {
<div className="relative table top-0 h-full">
<div className="table-cell align-middle">
<div className="relative w-[30px] h-[30px] mx-[15px]">
<input type="checkbox" name="human-checkbox" id="human-checkbox" className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white" checked={checked} onChange={humanChecker} />
<input
type="checkbox"
name="human-checkbox"
id="human-checkbox"
className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white"
checked={checked}
onChange={humanChecker}
/>
</div>
</div>
</div>
@@ -106,7 +118,10 @@ export default function ForgotPassword() {
<div className="h-full relative inline-block w-[170px]">
<label className="relative table top-0 h-full">
<label className="table-cell align-middle">
<label className="text-800 text-sm" htmlFor="human-checkbox">
<label
className="text-800 text-sm"
htmlFor="human-checkbox"
>
I am human
</label>
</label>
@@ -116,8 +131,24 @@ export default function ForgotPassword() {
</div>
</div>
</div>
{msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">{msgError}</div>}
{msgSuccess && <div className="relative p-4 text-[#44228c] bg-[#e3d7fb] border-[#d5c4f9] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">If we find your email, you will receive a link to reset your password. Please use or <Link to='/contact' className="text-[#4687ba] hover:text-[#009ef7]">contact form</Link> if you did not get our message after few minutes.</div>}
{msgError && (
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
{msgError}
</div>
)}
{msgSuccess && (
<div className="relative p-4 text-[#44228c] bg-[#e3d7fb] border-[#d5c4f9] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
If we find your email, you will receive a link to reset your
password. Please use or{" "}
<Link
to="/contact"
className="text-[#4687ba] hover:text-[#009ef7]"
>
contact form
</Link>{" "}
if you did not get our message after few minutes.
</div>
)}
<div className="signin-area mb-3.5">
<div className="flex justify-center items-center gap-2">