223 lines
7.0 KiB
JavaScript
223 lines
7.0 KiB
JavaScript
import { useEffect, useState } from "react";
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import AuthRepository from "../../repositories/AuthRepository";
|
|
import showToast from "../../services/toastService";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { z } from "zod";
|
|
import { AuthWrapper } from "./AuthWrapper";
|
|
|
|
const LoginPage = () => {
|
|
const navigate = useNavigate();
|
|
const [loading, setLoading] = useState(false);
|
|
const [hidepass, setHidepass] = useState(true);
|
|
const [IsLoginWithOTP, setLoginWithOtp] = 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,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: zodResolver(loginSchema),
|
|
});
|
|
|
|
const onSubmit = async (data) => {
|
|
setLoading(true);
|
|
try {
|
|
const username = data.username.trim();
|
|
const password = data.password?.trim();
|
|
|
|
if (!IsLoginWithOTP) {
|
|
const userCredential = {
|
|
username,
|
|
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: username });
|
|
showToast("OTP has been sent to your email.", "success");
|
|
localStorage.setItem("otpUsername", username);
|
|
localStorage.setItem("otpSentTime", now.toString());
|
|
navigate("/auth/login-otp");
|
|
}
|
|
} catch (err) {
|
|
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 (
|
|
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 ">
|
|
<div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
|
|
<h4 className="mb-2">Welcome to PMS!</h4>
|
|
<p className="mb-4">
|
|
{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" onSubmit={handleSubmit(onSubmit)}>
|
|
{/* Email */}
|
|
<div className="mb-3 text-start">
|
|
<label htmlFor="username" className="form-label">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
className={`form-control ${errors.username ? "is-invalid" : ""}`}
|
|
placeholder="Enter your email"
|
|
{...register("username")}
|
|
autoFocus
|
|
/>
|
|
{errors.username && (
|
|
<div
|
|
className="invalid-feedback text-start"
|
|
style={{ fontSize: "12px" }}
|
|
>
|
|
{errors.username.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Password */}
|
|
{!IsLoginWithOTP && (
|
|
<>
|
|
<div className="mb-3 text-start">
|
|
<label htmlFor="password" className="form-label">
|
|
Password
|
|
</label>
|
|
<div className="input-group input-group-merge">
|
|
<input
|
|
type={hidepass ? "password" : "text"}
|
|
id="password"
|
|
className={`form-control ${
|
|
errors.password ? "is-invalid" : ""
|
|
}`}
|
|
placeholder="••••••••"
|
|
{...register("password")}
|
|
/>
|
|
<span
|
|
className="input-group-text cursor-pointer"
|
|
onClick={() => setHidepass(!hidepass)}
|
|
>
|
|
<i className={`bx ${hidepass ? "bx-hide" : "bx-show"}`}></i>
|
|
</span>
|
|
</div>
|
|
{errors.password && (
|
|
<div
|
|
className="invalid-feedback text-start"
|
|
style={{ fontSize: "12px" }}
|
|
>
|
|
{errors.password.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Remember Me + Forgot Password */}
|
|
<div className="mb-3 d-flex justify-content-between align-items-center">
|
|
<div className="form-check">
|
|
<input
|
|
type="checkbox"
|
|
id="remember-me"
|
|
className="form-check-input"
|
|
{...register("rememberMe")}
|
|
/>
|
|
<label className="form-check-label" htmlFor="remember-me">
|
|
Remember Me
|
|
</label>
|
|
</div>
|
|
<Link
|
|
to="/auth/forgot-password"
|
|
className="text-decoration-none"
|
|
>
|
|
Forgot Password?
|
|
</Link>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Submit */}
|
|
<button
|
|
type="submit"
|
|
className="btn btn-primary w-100"
|
|
disabled={loading}
|
|
>
|
|
{loading
|
|
? "Please Wait..."
|
|
: IsLoginWithOTP
|
|
? "Send OTP"
|
|
: "Sign In"}
|
|
</button>
|
|
|
|
{/* Login With OTP Button */}
|
|
{!IsLoginWithOTP && (
|
|
<>
|
|
<div className="divider my-4">
|
|
<div className="divider-text">or</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="btn btn-outline-secondary w-100"
|
|
onClick={() => setLoginWithOtp(true)}
|
|
>
|
|
Login With OTP
|
|
</button>
|
|
</>
|
|
)}
|
|
</form>
|
|
|
|
{/* Footer Text */}
|
|
{!IsLoginWithOTP ? (
|
|
<p className="text-center mt-3">
|
|
<span>New on our platform? </span>
|
|
<Link to="/auth/reqest/demo" className="btn btn-link p-0">
|
|
Request a Demo
|
|
</Link>
|
|
</p>
|
|
) : (
|
|
<div className="text-center mt-3">
|
|
<button
|
|
className="btn btn-link p-0"
|
|
onClick={() => setLoginWithOtp(false)}
|
|
>
|
|
<i className="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
|
|
Back to login
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoginPage;
|