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

Reset Page Completed

Browse Source
This commit is contained in:
Ebube
2023-05-05 01:21:55 +01:00
parent 12e940d9b3
commit dd94177a95
5 changed files with 230 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/Login/index.jsx
+64 -38
View File
@@ -4,17 +4,16 @@ import { toast } from "react-toastify";
import googleLogo from "../../../assets/images/google-logo.svg";
import appleLogo from "../../../assets/images/apple-black.svg";
import facebookLogo from "../../../assets/images/facebook-4.svg";
import WrenchBoard from "../../../assets/images/wrenchboard.png"
import WrenchBoard from "../../../assets/images/wrenchboard.png";
import usersService from "../../../services/UsersService";
import InputCom from "../../Helpers/Inputs/InputCom";
import AuthLayout from "../AuthLayout";
import { useDispatch, useSelector } from "react-redux";
import {updateUserDetails} from '../../../store/UserDetails'
import { updateUserDetails } from "../../../store/UserDetails";
export default function Login() {
const dispatch = useDispatch()
const dispatch = useDispatch();
const [checked, setValue] = useState(false);
const [loginLoading, setLoginLoading] = useState(false);
@@ -22,7 +21,7 @@ export default function Login() {
//login error state
const [loginError, setLoginError] = useState(false);
// for the catch error
const [msgError, setMsgError] = useState('');
const [msgError, setMsgError] = useState("");
const rememberMe = () => {
setValue(!checked);
@@ -41,57 +40,62 @@ export default function Login() {
const navigate = useNavigate();
const userApi = new usersService();
const doLogin = async () => {
if (email == '' && password == '') {
setMsgError('Please fill in fields')
}
try {
if (email !== "" && password !== "") {
var postData = {
username: email,
password: password,
sessionid: 'STARTING'
sessionid: "STARTING",
};
const loginResult = await userApi.logInUser(postData); // just for a test
const loginResult = await userApi.logInUser(postData); // just for a test
//debugger;
// if (email === "support@mermsemr.com") {
if (loginResult.data.status > 0 && loginResult.data.internal_return == 100 && loginResult.data.session != '') { // just for a start
if (
loginResult.data.status > 0 &&
loginResult.data.internal_return == 100 &&
loginResult.data.session != ""
) {
// just for a start
localStorage.setItem("member_id", `${loginResult.data.member_id}`);
localStorage.setItem("uid", `${loginResult.data.uid}`);
localStorage.setItem("session_token", `${loginResult.data.session}`);
localStorage.setItem("session", `${loginResult.data.session}`);
setLoginLoading(true);
// userApi.getUserReminders(); //testing
dispatch(updateUserDetails(loginResult.data))
dispatch(updateUserDetails(loginResult.data));
setTimeout(() => {
navigate("/", { replace: true });
setLoginLoading(false);
}, 2000);
} else {
// toast.error("Invalid Credential");
setLoginError(true)
setLoginError(true);
}
} else {
setMsgError("Please fill in fields");
}
} catch (error) {
setMsgError('An error occurred')
setMsgError("An error occurred");
} finally {
setTimeout(() => {
setLoginError(false)
setMsgError(null)
}, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT))
setLoginError(false);
setMsgError(null);
}, Number(process.env.REACT_APP_LOGIN_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">
@@ -100,7 +104,15 @@ export default function Login() {
<h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
Sign In to WrenchBoard
</h1>
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">New Here? <Link to='/signup' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Create an Account</Link></span>
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
New Here?{" "}
<Link
to="/signup"
className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
>
Create an Account
</Link>
</span>
</div>
<div className="input-area">
<div className="input-item mb-5">
@@ -160,8 +172,23 @@ export default function Login() {
Forgot Password
</a>
</div> */}
{loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></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>}
{loginError && (
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
Invalid username or password- Please{" "}
<Link to="/#" className="text-[#009ef7]">
reset your password
</Link>{" "}
or{" "}
<Link to="/signup" className="text-[#009ef7]">
create a new account
</Link>
</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>
)}
<div className="signin-area mb-3.5">
<div className="flex justify-center">
<button
@@ -176,9 +203,9 @@ export default function Login() {
)}
</button>
</div>
<BrandBtn link='#' imgSrc={googleLogo} brand='Google' />
<BrandBtn link='#' imgSrc={facebookLogo} brand='Facebook' />
<BrandBtn link='#' imgSrc={appleLogo} brand='Apple' />
<BrandBtn link="#" imgSrc={googleLogo} brand="Google" />
<BrandBtn link="#" imgSrc={facebookLogo} brand="Facebook" />
<BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
</div>
{/* <div className="signup-area flex justify-center">
<p className="sm:text-lg text-sm text-thin-light-gray font-normal">
@@ -188,7 +215,10 @@ export default function Login() {
</a>
</p>
</div> */}
<div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.</div>
<div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
This site is protected by hCaptcha and the our Privacy Policy
and Terms of Service apply.
</div>
</div>
</div>
</div>
@@ -198,11 +228,7 @@ export default function Login() {
);
}
const BrandBtn = ({
link,
imgSrc,
brand
}) => {
const BrandBtn = ({ link, imgSrc, brand }) => {
return (
<div className="flex justify-center bottomMargin">
<a
@@ -215,5 +241,5 @@ const BrandBtn = ({
</span>
</a>
</div>
)
}
);
};