more login page changes
This commit is contained in:
subnub
+1
-1
@@ -19,5 +19,5 @@ export const loginAPI = async (email: string, password: string) => {
|
||||
email,
|
||||
password,
|
||||
});
|
||||
response.data;
|
||||
return response.data;
|
||||
};
|
||||
|
||||
@@ -1,16 +1,19 @@
|
||||
import SpinnerLogin from "../SpinnerLogin";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import env from "../../enviroment/envFrontEnd";
|
||||
import { getUserAPI } from "../../api/user";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { getUserAPI, loginAPI } from "../../api/user";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { setUser } from "../../reducers/user";
|
||||
import { useAppDispatch } from "../../hooks/store";
|
||||
import { capitalize } from "lodash";
|
||||
import AlertIcon from "../../icons/AlertIcon";
|
||||
|
||||
const LoginPage = (props) => {
|
||||
const LoginPage = () => {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [verifyPassword, setVerifyPassword] = useState("");
|
||||
const [mode, setMode] = useState<"login" | "create" | "reset">("login");
|
||||
const [attemptingLogin, setAttemptingLogin] = useState(false);
|
||||
const [loginExpired, setLoginExpired] = useState(false);
|
||||
const dispatch = useAppDispatch();
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
@@ -35,10 +38,56 @@ const LoginPage = (props) => {
|
||||
} catch (e) {
|
||||
console.log("Login Error", e);
|
||||
setAttemptingLogin(false);
|
||||
if (window.localStorage.getItem("hasPreviouslyLoggedIn")) {
|
||||
setLoginExpired(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = () => {};
|
||||
const login = async () => {
|
||||
try {
|
||||
const loginResponse = await loginAPI(email, password);
|
||||
console.log("login response", loginResponse);
|
||||
window.localStorage.setItem("hasPreviouslyLoggedIn", "true");
|
||||
dispatch(setUser(loginResponse));
|
||||
navigate("/home");
|
||||
} catch (e) {
|
||||
console.log("Login Error", e);
|
||||
}
|
||||
};
|
||||
|
||||
const isSubmitDisabled = useMemo(() => {
|
||||
switch (mode) {
|
||||
case "login":
|
||||
return !email || !password;
|
||||
case "create":
|
||||
return !email || !password || !verifyPassword;
|
||||
case "reset":
|
||||
return !email;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
}, [email, password, verifyPassword, mode]);
|
||||
|
||||
const onSubmit = (e: any) => {
|
||||
e.preventDefault();
|
||||
if (mode === "login") {
|
||||
login();
|
||||
}
|
||||
};
|
||||
|
||||
const headerTitle = useMemo(() => {
|
||||
switch (mode) {
|
||||
case "login":
|
||||
return "Login to your account";
|
||||
case "create":
|
||||
return "Create an account";
|
||||
case "reset":
|
||||
return "Reset Password";
|
||||
default:
|
||||
return "Login to your account";
|
||||
}
|
||||
}, [mode]);
|
||||
|
||||
useEffect(() => {
|
||||
attemptLoginWithToken();
|
||||
@@ -58,103 +107,102 @@ const LoginPage = (props) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="sign__back">
|
||||
<div className="login__block">
|
||||
<div className="login__inner">
|
||||
<div className="login__logo">
|
||||
<img src="/images/icon.png" alt="logo" />
|
||||
</div>
|
||||
|
||||
{/* <!-- Login form block --> */}
|
||||
<div
|
||||
className="login__form"
|
||||
style={
|
||||
props.loginFailed && props.loginFailedCode === 404
|
||||
? { display: "none" }
|
||||
: { display: "block" }
|
||||
}
|
||||
>
|
||||
<h2>
|
||||
{props.state.loginMode
|
||||
? "Login to your account"
|
||||
: "Create an account"}
|
||||
</h2>
|
||||
<form onSubmit={props.login}>
|
||||
<div className="group__input">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Email address"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
value={email}
|
||||
/>
|
||||
</div>
|
||||
{!props.state.resetPasswordMode ? (
|
||||
<div className="group__input forgot__pass">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
value={password}
|
||||
/>
|
||||
{props.state.loginMode ? (
|
||||
<a onClick={props.switchResetPasswordMode}>Forgot?</a>
|
||||
) : undefined}
|
||||
</div>
|
||||
) : undefined}
|
||||
{props.state.loginMode ? undefined : (
|
||||
<div className="group__input">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Verify Password"
|
||||
onChange={(e) => setVerifyPassword(e.target.value)}
|
||||
value={verifyPassword}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="group__submit">
|
||||
<input
|
||||
type="submit"
|
||||
value={
|
||||
props.state.resetPasswordMode
|
||||
? "Reset"
|
||||
: props.state.loginMode
|
||||
? "Login"
|
||||
: "Create"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{!props.state.resetPasswordMode ? (
|
||||
<div className="create__account">
|
||||
{props.state.loginMode ? (
|
||||
<p>
|
||||
Don't have an account?{" "}
|
||||
<a onClick={props.switchLoginMode}>Create account</a>
|
||||
</p>
|
||||
) : (
|
||||
<p>
|
||||
Back to <a onClick={props.switchLoginMode}>Login</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="create__account">
|
||||
<p>
|
||||
Back to{" "}
|
||||
<a onClick={props.switchResetPasswordMode}>Login</a>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{props.loginFailed && (
|
||||
<div className="login__image__wrapper">
|
||||
<img className="login__image" src="/images/error-red.png" />
|
||||
<p className="login__title">{props.loginFailed}</p>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
<div className="bg-[#F4F4F6] w-screen h-screen flex justify-center items-center">
|
||||
<div className="rounded-md shadow-lg bg-white p-10 relative min-w-[500px]">
|
||||
<div className="absolute -top-10 left-0 right-0 flex justify-center items-center">
|
||||
<div className="flex items-center justify-center rounded-full bg-white p-3 shadow-md">
|
||||
<img src="/images/icon.png" alt="logo" className="w-[45px]" />
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={onSubmit}>
|
||||
<p className="text-[#212B36] font-medium text-[25px] mt-0 mb-[15px] text-center">
|
||||
{headerTitle}
|
||||
</p>
|
||||
{/* Email Address */}
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Email address"
|
||||
className="w-full h-[48px] pl-[12px] pr-[12px] text-black border border-[#637381] rounded-[5px] outline-none text-[15px]"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
value={email}
|
||||
/>
|
||||
|
||||
{/* Password */}
|
||||
{(mode === "login" || mode === "create") && (
|
||||
<div className="relative">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
className="w-full h-[48px] pl-[12px] pr-[70px] text-black border border-[#637381] rounded-[5px] outline-none text-[15px] mt-4"
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
value={password}
|
||||
/>
|
||||
{mode === "login" && (
|
||||
<div className="absolute right-0 top-0 bottom-0 flex items-center justify-center">
|
||||
<a
|
||||
className="text-[#3c85ee] text-[15px] font-medium no-underline mr-2 mt-4"
|
||||
onClick={() => setMode("reset")}
|
||||
>
|
||||
Forgot?
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Verify Password */}
|
||||
{mode === "create" && (
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Verify Password"
|
||||
className="w-full h-[48px] pl-[12px] pr-[12px] text-black border border-[#637381] rounded-[5px] outline-none text-[15px] mt-4"
|
||||
onChange={(e) => setVerifyPassword(e.target.value)}
|
||||
value={verifyPassword}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex justify-center items-center mt-4">
|
||||
<input
|
||||
type="submit"
|
||||
value={capitalize(mode)}
|
||||
disabled={isSubmitDisabled}
|
||||
className="bg-[#3c85ee] border border-[#3c85ee] rounded-[5px] text-white text-[15px] font-medium cursor-pointer py-2 px-4 disabled:opacity-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-2">
|
||||
{mode === "login" && (
|
||||
<p className="text-center text-[#637381] text-[15px] font-normal">
|
||||
Don't have an account?{" "}
|
||||
<a
|
||||
onClick={() => setMode("create")}
|
||||
className="text-[#3c85ee] text-[15px] font-medium no-underline"
|
||||
>
|
||||
Create account
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
{(mode === "create" || mode === "reset") && (
|
||||
<p className="text-center text-[#637381] text-[15px] font-normal">
|
||||
Back to{" "}
|
||||
<a
|
||||
onClick={() => setMode("login")}
|
||||
className="text-[#3c85ee] text-[15px] font-medium no-underline"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{loginExpired && (
|
||||
<div className="mt-4">
|
||||
<div className="flex justify-center items-center">
|
||||
<AlertIcon className="w-[20px] text-red-600 mr-2" />
|
||||
<p className="text-[#637381] text-[15px]">Login expired</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
type AlertIconType = React.SVGAttributes<SVGSVGElement>;
|
||||
|
||||
const AlertIcon: React.FC<AlertIconType> = (props) => {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<title>alert-circle</title>
|
||||
<path
|
||||
d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlertIcon;
|
||||
Reference in New Issue
Block a user