Complete format and api call(70%)
This commit is contained in:
@@ -21,6 +21,8 @@ REACT_APP_SESSION_EXPIRE_MINUTES=300000
|
||||
REACT_APP_SESSION_EXPIRE_CHECKER=60000
|
||||
|
||||
REACT_APP_LOGIN_ERROR_TIMEOUT=7000
|
||||
REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
|
||||
REACT_APP_RESET_START_ERROR_TIMEOUT=5000
|
||||
|
||||
#apigate.lotus.g1.wrenchboard.com:76.209.103.227
|
||||
#apigate.orion.g1.wrenchboard.com:76.209.103.227
|
||||
|
||||
@@ -1,10 +1,67 @@
|
||||
import React from "react";
|
||||
import { Link } from 'react-router-dom';
|
||||
import React, { useState } from "react";
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import WrenchBoard from "../../../assets/images/wrenchboard.png"
|
||||
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)
|
||||
// email
|
||||
const [email, setMail] = useState("");
|
||||
const [msgError, setMsgError] = useState('');
|
||||
|
||||
const navigate = useNavigate();
|
||||
const userApi = new usersService();
|
||||
|
||||
const handleEmail = (e) => {
|
||||
setMail(e?.target.value);
|
||||
};
|
||||
|
||||
const humanChecker = () => {
|
||||
setValue(!checked);
|
||||
};
|
||||
|
||||
const resetHandler = async () => {
|
||||
if (email == '') {
|
||||
setMsgError('Please fill in fields')
|
||||
} else if (!checked){
|
||||
setMsgError('Check if you are human')
|
||||
}
|
||||
|
||||
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('reset was not successful')
|
||||
setResetLoading(false)
|
||||
return
|
||||
}
|
||||
if (data.status > 0) {
|
||||
setResetLoading(false)
|
||||
console.log('Success', data)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
setResetLoading(false)
|
||||
setMsgError('An error occurred')
|
||||
throw new Error(error)
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
setMsgError(null)
|
||||
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
setMsgError(null)
|
||||
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<AuthLayout
|
||||
@@ -18,7 +75,7 @@ export default function ForgotPassword() {
|
||||
</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="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">
|
||||
<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)'
|
||||
}}>
|
||||
@@ -27,25 +84,61 @@ export default function ForgotPassword() {
|
||||
<span className="text-gray-400 font-medium text-xl">Enter your email to reset your password.</span>
|
||||
</div>
|
||||
<div className="input-area">
|
||||
<div className="input-item mb-5">
|
||||
<div className="input-item mb-10">
|
||||
<InputCom
|
||||
placeholder="Your Username/Email"
|
||||
label="Email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={email}
|
||||
inputHandler={handleEmail}
|
||||
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">
|
||||
<div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
|
||||
{/* Checkbox */}
|
||||
<div className="h-full relative inline-block">
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
I am human
|
||||
</label>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
<div className="h-full relative inline-block w-16"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="signin-area mb-3.5">
|
||||
<div className="flex justify-center items-center gap-2">
|
||||
<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]`}
|
||||
>
|
||||
Send Code
|
||||
{resetLoading ? (
|
||||
<div className="signup btn-loader"></div>
|
||||
) : (
|
||||
<span>Send Code</span>
|
||||
)}
|
||||
</button>
|
||||
<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] `}
|
||||
>
|
||||
Cancel
|
||||
|
||||
@@ -22,8 +22,6 @@ export default function Login() {
|
||||
setValue(!checked);
|
||||
};
|
||||
|
||||
console.log(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT)
|
||||
|
||||
// email
|
||||
const [email, setMail] = useState("");
|
||||
const handleEmail = (e) => {
|
||||
|
||||
@@ -102,7 +102,7 @@ export default function SignUp() {
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
setMsgError(null)
|
||||
}, 7000)
|
||||
}, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,6 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
|
||||
const navigate = useNavigate();
|
||||
const { pathname } = useLocation();
|
||||
|
||||
|
||||
//Removing Data stored at localStorage after session expires
|
||||
const expireSession = () => {
|
||||
localStorage.removeItem("email");
|
||||
|
||||
@@ -6,6 +6,11 @@ class usersService {
|
||||
console.log("WRB Service Entry");
|
||||
}
|
||||
|
||||
CreateUser(reqData){
|
||||
localStorage.setItem("session_token", ``);
|
||||
return this.postAuxEnd("/createuser", reqData);
|
||||
}
|
||||
|
||||
getHomeDate(){
|
||||
var postData = {
|
||||
uuid: localStorage.getItem("uuid"),
|
||||
@@ -48,11 +53,6 @@ class usersService {
|
||||
return this.postAuxEnd("/apigate", null);
|
||||
}
|
||||
|
||||
CreateUser(reqData){
|
||||
localStorage.setItem("session_token", ``);
|
||||
return this.postAuxEnd("/createuser", reqData);
|
||||
}
|
||||
|
||||
getLoadProfile(){
|
||||
var postData = {
|
||||
uuid: localStorage.getItem("uid"),
|
||||
@@ -221,6 +221,10 @@ class usersService {
|
||||
return this.postAuxEnd("/sendreferral", postData);
|
||||
}
|
||||
|
||||
StartResetPassword(reqData){
|
||||
return this.postAuxEnd("/startresetpasword", reqData)
|
||||
}
|
||||
|
||||
getCouponRedeem(){
|
||||
var postData = {
|
||||
uuid: localStorage.getItem("uid"),
|
||||
|
||||
Reference in New Issue
Block a user