added login with otp feature, added send otp api
This commit is contained in:
Pramod Mahajan
parent
40f4f2f254
commit
194087c0a3
@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { AuthWrapper } from "./AuthWrapper";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
@ -9,16 +9,23 @@ import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
|
||||
const loginScheam = z.object({
|
||||
username: z.string().email(),
|
||||
password: z.string().min(1, { message: "Password required" }),
|
||||
rememberMe: z.boolean(),
|
||||
});
|
||||
|
||||
const LoginPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [hidepass, setHidepass] = useState(true);
|
||||
const [IsLoginWithOTP, setLoginWithOtp] = useState(false);
|
||||
const [IsTriedOTPThrough, setIsTriedOTPThrough] = useState(false);
|
||||
const now = Date.now();
|
||||
|
||||
const loginSchema = IsLoginWithOTP
|
||||
? z.object({
|
||||
username: z.string().email({ message: "Valid email required" }),
|
||||
})
|
||||
: z.object({
|
||||
username: z.string().email({ message: "Valid email required" }),
|
||||
password: z.string().min(1, { message: "Password required" }),
|
||||
rememberMe: z.boolean(),
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
@ -27,35 +34,49 @@ const LoginPage = () => {
|
||||
reset,
|
||||
getValues,
|
||||
} = useForm({
|
||||
resolver: zodResolver(loginScheam),
|
||||
resolver: zodResolver(loginSchema),
|
||||
});
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
let userCredential = {
|
||||
username: data.username,
|
||||
password: data.password,
|
||||
};
|
||||
const response = await AuthRepository.login(userCredential);
|
||||
localStorage.setItem("jwtToken", response.data.token);
|
||||
localStorage.setItem("refreshToken", response.data.refreshToken);
|
||||
setLoading(false);
|
||||
navigate("/dashboard");
|
||||
if (!IsLoginWithOTP) {
|
||||
const userCredential = {
|
||||
username: data.username,
|
||||
password: data.password,
|
||||
};
|
||||
const response = await AuthRepository.login(userCredential);
|
||||
localStorage.setItem("jwtToken", response.data.token);
|
||||
localStorage.setItem("refreshToken", response.data.refreshToken);
|
||||
setLoading(false);
|
||||
navigate("/dashboard");
|
||||
} else {
|
||||
await AuthRepository.sendOTP({ email: data.username });
|
||||
localStorage.setItem("otpUsername", data.username);
|
||||
localStorage.setItem("otpSentTime", now.toString());
|
||||
navigate("/auth/login-otp");
|
||||
}
|
||||
} catch (err) {
|
||||
showToast("Invalid username or password.","error")
|
||||
showToast("Invalid username or password.", "error");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect( () =>
|
||||
{ const otpSentTime = localStorage.getItem("otpSentTime");
|
||||
if (localStorage.getItem("otpUsername") && IsLoginWithOTP && now - Number(otpSentTime) < 10 * 60 * 1000) {
|
||||
navigate("/auth/login-otp");
|
||||
}
|
||||
}, [IsLoginWithOTP]);
|
||||
return (
|
||||
<AuthWrapper>
|
||||
<h4 className="mb-2">Welcome to PMS!</h4>
|
||||
<p className="mb-4">
|
||||
Please sign-in to your account and start the adventure
|
||||
{IsLoginWithOTP
|
||||
? "Enter your email to receive a one-time password (OTP)."
|
||||
: "Please sign-in to your account and start the adventure."}
|
||||
</p>
|
||||
|
||||
<form
|
||||
id="formAuthentication"
|
||||
className="mb-3"
|
||||
@ -70,7 +91,6 @@ const LoginPage = () => {
|
||||
className="form-control"
|
||||
id="username"
|
||||
{...register("username")}
|
||||
name="username"
|
||||
placeholder="Enter your email or username"
|
||||
autoFocus
|
||||
/>
|
||||
@ -83,87 +103,103 @@ const LoginPage = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-3 form-password-toggle">
|
||||
<div className="d-flex justify-content-center">
|
||||
<label className="form-label" htmlFor="password">
|
||||
Password
|
||||
</label>
|
||||
</div>
|
||||
<div className="input-group input-group-merge">
|
||||
<input
|
||||
type={hidepass ? "password" : "text"}
|
||||
autoComplete="true"
|
||||
id="password"
|
||||
{...register("password")}
|
||||
className="form-control"
|
||||
name="password"
|
||||
placeholder="············"
|
||||
aria-describedby="password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn border-top border-end border-bottom"
|
||||
onClick={() => setHidepass(!hidepass)}
|
||||
style={{
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderLeft: 0,
|
||||
}}
|
||||
>
|
||||
{hidepass ? (
|
||||
<i className="bx bx-hide" />
|
||||
) : (
|
||||
<i className="bx bx-show" />
|
||||
|
||||
{!IsLoginWithOTP && (
|
||||
<>
|
||||
<div className="mb-3 form-password-toggle">
|
||||
<label className="form-label" htmlFor="password">
|
||||
Password
|
||||
</label>
|
||||
<div className="input-group input-group-merge">
|
||||
<input
|
||||
type={hidepass ? "password" : "text"}
|
||||
autoComplete="true"
|
||||
id="password"
|
||||
{...register("password")}
|
||||
className="form-control"
|
||||
placeholder="••••••••••••"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn border-top border-end border-bottom"
|
||||
onClick={() => setHidepass(!hidepass)}
|
||||
style={{
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderLeft: 0,
|
||||
}}
|
||||
>
|
||||
{hidepass ? (
|
||||
<i className="bx bx-hide" />
|
||||
) : (
|
||||
<i className="bx bx-show" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{errors.password && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.password.message}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{errors.password && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.password.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-3 d-flex justify-content-between">
|
||||
<div className="form-check d-flex">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="remember-me"
|
||||
name="rememberMe"
|
||||
{...register("rememberMe")}
|
||||
/>
|
||||
<label className="form-check-label ms-2">Remember Me</label>
|
||||
</div>
|
||||
<Link
|
||||
aria-label="Go to Forgot Password Page"
|
||||
to="/auth/forgot-password"
|
||||
>
|
||||
<span>Forgot Password?</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mb-3 d-flex justify-content-between">
|
||||
<div className="form-check d-flex">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="remember-me"
|
||||
{...register("rememberMe")}
|
||||
/>
|
||||
<label className="form-check-label ms-2">Remember Me</label>
|
||||
</div>
|
||||
<Link to="/auth/forgot-password">Forgot Password?</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="mb-3">
|
||||
<button
|
||||
aria-label="Click me"
|
||||
className="btn btn-primary d-grid w-100"
|
||||
aria-label="Submit form"
|
||||
className="btn btn-primary d-grid w-100 mb-2"
|
||||
type="submit"
|
||||
>
|
||||
{loading ? "Please Wait" : " Sign in"}
|
||||
{loading
|
||||
? "Please Wait"
|
||||
: IsLoginWithOTP
|
||||
? "Continue with OTP"
|
||||
: "Sign In"}
|
||||
</button>
|
||||
{!IsLoginWithOTP && (
|
||||
<button
|
||||
aria-label="loginwithotp"
|
||||
type="button"
|
||||
onClick={() => setLoginWithOtp(true)}
|
||||
className="btn btn-primary w-100"
|
||||
>
|
||||
login With OTP
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p className="text-center">
|
||||
<span>New on our platform? </span>
|
||||
<Link
|
||||
aria-label="Go to Register Page"
|
||||
to="/auth/reqest/demo"
|
||||
className="registration-link"
|
||||
>
|
||||
<span>Request a Demo</span>
|
||||
</Link>
|
||||
{IsLoginWithOTP ? (
|
||||
<a
|
||||
className="text-primary cursor-pointer"
|
||||
onClick={() => setLoginWithOtp(false)}
|
||||
>
|
||||
Login With Password
|
||||
</a>
|
||||
) : (
|
||||
<Link to="/auth/reqest/demo" className="registration-link">
|
||||
Request a Demo
|
||||
</Link>
|
||||
)}
|
||||
</p>
|
||||
</AuthWrapper>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user