admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

added login with otp feature, added send otp api

Browse Source
This commit is contained in:
Pramod Mahajan 2025-06-07 17:39:37 +05:30
parent 40f4f2f254
commit 194087c0a3
1 changed files with 126 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
src/pages/authentication/LoginPage.jsx
View File

@ -1,4 +1,4 @@
import { useState } from "react"; import { useEffect, useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { AuthWrapper } from "./AuthWrapper"; import { AuthWrapper } from "./AuthWrapper";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
@ -9,16 +9,23 @@ import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "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 LoginPage = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [hidepass, setHidepass] = useState(true); 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 { const {
register, register,
@ -27,35 +34,49 @@ const LoginPage = () => {
reset, reset,
getValues, getValues,
} = useForm({ } = useForm({
resolver: zodResolver(loginScheam), resolver: zodResolver(loginSchema),
}); });
const onSubmit = async (data) => { const onSubmit = async (data) => {
setLoading(true); setLoading(true);
try { try {
let userCredential = { if (!IsLoginWithOTP) {
username: data.username, const userCredential = {
password: data.password, username: data.username,
}; password: data.password,
const response = await AuthRepository.login(userCredential); };
localStorage.setItem("jwtToken", response.data.token); const response = await AuthRepository.login(userCredential);
localStorage.setItem("refreshToken", response.data.refreshToken); localStorage.setItem("jwtToken", response.data.token);
setLoading(false); localStorage.setItem("refreshToken", response.data.refreshToken);
navigate("/dashboard"); 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) { } catch (err) {
showToast("Invalid username or password.","error") showToast("Invalid username or password.", "error");
setLoading(false); 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 ( return (
<AuthWrapper> <AuthWrapper>
<h4 className="mb-2">Welcome to PMS!</h4> <h4 className="mb-2">Welcome to PMS!</h4>
<p className="mb-4"> <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> </p>
<form <form
id="formAuthentication" id="formAuthentication"
className="mb-3" className="mb-3"
@ -70,7 +91,6 @@ const LoginPage = () => {
className="form-control" className="form-control"
id="username" id="username"
{...register("username")} {...register("username")}
name="username"
placeholder="Enter your email or username" placeholder="Enter your email or username"
autoFocus autoFocus
/> />
@ -83,87 +103,103 @@ const LoginPage = () => {
</div> </div>
)} )}
</div> </div>
<div className="mb-3 form-password-toggle">
<div className="d-flex justify-content-center"> {!IsLoginWithOTP && (
<label className="form-label" htmlFor="password"> <>
Password <div className="mb-3 form-password-toggle">
</label> <label className="form-label" htmlFor="password">
</div> Password
<div className="input-group input-group-merge"> </label>
<input <div className="input-group input-group-merge">
type={hidepass ? "password" : "text"} <input
autoComplete="true" type={hidepass ? "password" : "text"}
id="password" autoComplete="true"
{...register("password")} id="password"
className="form-control" {...register("password")}
name="password" className="form-control"
placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" placeholder="••••••••••••"
aria-describedby="password" />
/> <button
<button type="button"
type="button" className="btn border-top border-end border-bottom"
className="btn border-top border-end border-bottom" onClick={() => setHidepass(!hidepass)}
onClick={() => setHidepass(!hidepass)} style={{
style={{ borderTopLeftRadius: 0,
borderTopLeftRadius: 0, borderBottomLeftRadius: 0,
borderBottomLeftRadius: 0, borderLeft: 0,
borderLeft: 0, }}
}} >
> {hidepass ? (
{hidepass ? ( <i className="bx bx-hide" />
<i className="bx bx-hide" /> ) : (
) : ( <i className="bx bx-show" />
<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> <div className="mb-3 d-flex justify-content-between">
<div className="mb-3 d-flex justify-content-between"> <div className="form-check d-flex">
<div className="form-check d-flex"> <input
<input className="form-check-input"
className="form-check-input" type="checkbox"
type="checkbox" id="remember-me"
id="remember-me" {...register("rememberMe")}
name="rememberMe" />
{...register("rememberMe")} <label className="form-check-label ms-2">Remember Me</label>
/> </div>
<label className="form-check-label ms-2">Remember Me</label> <Link to="/auth/forgot-password">Forgot Password?</Link>
</div> </div>
<Link </>
aria-label="Go to Forgot Password Page" )}
to="/auth/forgot-password"
>
<span>Forgot Password?</span>
</Link>
</div>
<div className="mb-3"> <div className="mb-3">
<button <button
aria-label="Click me" aria-label="Submit form"
className="btn btn-primary d-grid w-100" className="btn btn-primary d-grid w-100 mb-2"
type="submit" type="submit"
> >
{loading ? "Please Wait" : " Sign in"} {loading
? "Please Wait"
: IsLoginWithOTP
? "Continue with OTP"
: "Sign In"}
</button> </button>
{!IsLoginWithOTP && (
<button
aria-label="loginwithotp"
type="button"
onClick={() => setLoginWithOtp(true)}
className="btn btn-primary w-100"
>
login With OTP
</button>
)}
</div> </div>
</form> </form>
<p className="text-center"> <p className="text-center">
<span>New on our platform? </span> <span>New on our platform? </span>
<Link {IsLoginWithOTP ? (
aria-label="Go to Register Page" <a
to="/auth/reqest/demo" className="text-primary cursor-pointer"
className="registration-link" onClick={() => setLoginWithOtp(false)}
> >
<span>Request a Demo</span> Login With Password
</Link> </a>
) : (
<Link to="/auth/reqest/demo" className="registration-link">
Request a Demo
</Link>
)}
</p> </p>
</AuthWrapper> </AuthWrapper>
); );