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

added complete signup handler

Browse Source
This commit is contained in:
Ebube
2023-04-27 22:54:27 +01:00
parent 63f2ee3e6c
commit d23408d0ab
8 changed files with 183 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/ForgotPassword/index.jsx
+15 -22
View File
@@ -11,6 +11,7 @@ export default function ForgotPassword() {
// email
const [email, setMail] = useState("");
const [msgError, setMsgError] = useState('');
const [msgSuccess, setMsgSuccess] = useState(false)
const navigate = useNavigate();
const userApi = new usersService();
@@ -20,8 +21,8 @@ export default function ForgotPassword() {
};
const humanChecker = () => {
setValue(!checked);
};
setValue(!checked)
}
const resetHandler = async () => {
if (email == '') {
@@ -30,24 +31,16 @@ export default function ForgotPassword() {
setMsgError('Check if you are human')
}
if (email != '' && checked) {
if (email !== '' && checked) {
const reqData = { email }
setResetLoading(true)
try {
const res = await userApi.StartResetPassword(reqData)
if (res.status === 200) {
const { data } = res
if (data.status == -1) {
setMsgError('This is an incorrect or duplicate email')
setResetLoading(false)
} else if (data.status > 0) {
setResetLoading(false)
navigate("/verify-you", { replace: true })
} else{
setMsgError("reset was not successful")
setResetLoading(false)
}
setMsgSuccess(true)
setMail("")
setValue(false)
setResetLoading(false)
}
} catch (error) {
setResetLoading(false)
@@ -79,12 +72,10 @@ export default function ForgotPassword() {
<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="flex flex-col justify-center w-full h-full px-5">
<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)'
}}>
<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-xl">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">
@@ -98,7 +89,6 @@ export default function ForgotPassword() {
iconName="message"
/>
</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]">{msgError}</div>}
{/* hCaptha clone for the time being */}
<div className="mb-10">
<div className="w-[303px] h-[78px] mx-auto overflow-hidden">
@@ -108,7 +98,7 @@ 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" onClick={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>
@@ -126,12 +116,15 @@ 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>}
<div className="signin-area mb-3.5">
<div className="flex justify-center items-center gap-2">
<button
type="button"
onClick={resetHandler}
className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
>
{resetLoading ? (
<div className="signup btn-loader"></div>
@@ -142,7 +135,7 @@ export default function ForgotPassword() {
<button
type="button"
onClick={() => navigate("/login")}
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.8125rem] `}
className={`rounded-[0.475rem] mb-6 text-[15px] 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.8125rem] `}
>
Cancel
</button>