Merge branch 'pramod_Task#482' into Issue_Jun_1W_2
# Conflicts: # src/pages/authentication/LoginPage.jsx
This commit is contained in:
commit
945d79a250
@ -42,13 +42,13 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
<>
|
||||
<table className="table ">
|
||||
<thead>
|
||||
<tr className="border-top-0" style={{ textAlign: 'left' }}>
|
||||
<td >
|
||||
<tr className="border-none" style={{ textAlign: 'left' }}>
|
||||
<td style={{ borderBottom: 'none' }}>
|
||||
<strong>Date : {todayDate.toLocaleDateString('en-GB')}</strong>
|
||||
</td>
|
||||
<td style={{ paddingLeft: '20px' }}>
|
||||
</td>
|
||||
<td style={{ paddingLeft: '20px', borderBottom: 'none' }}></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="border-top-0" colSpan={2}>
|
||||
Name
|
||||
|
@ -122,109 +122,112 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="dataTables_length text-start py-2 d-flex justify-content-between"
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<div className="col-md-3 my-0 ">
|
||||
<DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday} />
|
||||
|
||||
<div
|
||||
className="dataTables_length text-start py-2 d-flex justify-content-between"
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<div className="col-md-3 my-0 ">
|
||||
<DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday} />
|
||||
</div>
|
||||
<div className="col-md-2 m-0 text-end">
|
||||
<i
|
||||
className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
|
||||
}`}
|
||||
title="Refresh"
|
||||
onClick={() => setIsRefreshing(true)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-2 m-0 text-end">
|
||||
<i
|
||||
className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
|
||||
}`}
|
||||
title="Refresh"
|
||||
onClick={() => setIsRefreshing(true)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive text-nowrap">
|
||||
{data && data.length > 0 && (
|
||||
<table className="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="border-top-1" colSpan={2}>
|
||||
Name
|
||||
</th>
|
||||
<th className="border-top-1">Date</th>
|
||||
<th>
|
||||
<i className="bx bxs-down-arrow-alt text-success"></i> Check-In
|
||||
</th>
|
||||
<th>
|
||||
<i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
|
||||
</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(loading || isRefreshing) && (
|
||||
<div className="table-responsive text-nowrap" style={{ minHeight: "250px" }}>
|
||||
{data && data.length > 0 && (
|
||||
<table className="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<td colSpan={6}>Loading...</td>
|
||||
<th className="border-top-1" colSpan={2}>
|
||||
Name
|
||||
</th>
|
||||
<th className="border-top-1">Date</th>
|
||||
<th>
|
||||
<i className="bx bxs-down-arrow-alt text-success"></i> Check-In
|
||||
</th>
|
||||
<th>
|
||||
<i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
|
||||
</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
)}
|
||||
{!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
|
||||
const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
|
||||
const previousAttendance = arr[index - 1];
|
||||
const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
|
||||
</thead>
|
||||
<tbody>
|
||||
{(loading || isRefreshing) && (
|
||||
<tr>
|
||||
<td colSpan={6}>Loading...</td>
|
||||
</tr>
|
||||
)}
|
||||
{!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
|
||||
const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
|
||||
const previousAttendance = arr[index - 1];
|
||||
const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
|
||||
|
||||
if (!previousDate || currentDate !== previousDate) {
|
||||
if (!previousDate || currentDate !== previousDate) {
|
||||
acc.push(
|
||||
<tr key={`header-${currentDate}`} className="table-row-header">
|
||||
<td colSpan={6} className="text-start">
|
||||
<strong>{moment(currentDate).format("DD-MM-YYYY")}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
acc.push(
|
||||
<tr key={`header-${currentDate}`} className="table-row-header">
|
||||
<td colSpan={6} className="text-start">
|
||||
<strong>{moment(currentDate).format("DD-MM-YYYY")}</strong>
|
||||
<tr key={index}>
|
||||
<td colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar
|
||||
firstName={attendance.firstName}
|
||||
lastName={attendance.lastName}
|
||||
/>
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
href="#"
|
||||
className="text-heading text-truncate"
|
||||
>
|
||||
<span className="fw-normal">
|
||||
{attendance.firstName} {attendance.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
<td>{convertShortTime(attendance.checkInTime)}</td>
|
||||
<td>
|
||||
{attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<RenderAttendanceStatus
|
||||
attendanceData={attendance}
|
||||
handleModalData={handleModalData}
|
||||
Tab={2}
|
||||
currentDate={today.toLocaleDateString("en-CA")}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
acc.push(
|
||||
<tr key={index}>
|
||||
<td colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar
|
||||
firstName={attendance.firstName}
|
||||
lastName={attendance.lastName}
|
||||
/>
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
href="#"
|
||||
className="text-heading text-truncate"
|
||||
>
|
||||
<span className="fw-normal">
|
||||
{attendance.firstName} {attendance.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
<td>{convertShortTime(attendance.checkInTime)}</td>
|
||||
<td>
|
||||
{attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<RenderAttendanceStatus
|
||||
attendanceData={attendance}
|
||||
handleModalData={handleModalData}
|
||||
Tab={2}
|
||||
currentDate={today.toLocaleDateString("en-CA")}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
return acc;
|
||||
}, [])}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
{!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
|
||||
{error && !loading && !isRefreshing && (
|
||||
<tr>
|
||||
<td colSpan={6}>{error}</td>
|
||||
</tr>
|
||||
)}
|
||||
</div>
|
||||
return acc;
|
||||
}, [])}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
)}
|
||||
{!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
|
||||
{error && !loading && !isRefreshing && (
|
||||
<tr>
|
||||
<td colSpan={6}>{error}</td>
|
||||
</tr>
|
||||
)}
|
||||
</div>
|
||||
{!loading && !isRefreshing && processedData.length > 10 && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
|
@ -31,7 +31,7 @@ const Regularization = ({ handleRequest }) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="table-responsive text-nowrap">
|
||||
<div className="table-responsive text-nowrap" style={{minHeight:"300px"}}>
|
||||
<table className="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -47,7 +47,7 @@ const Regularization = ({ handleRequest }) => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && <td colSpan={5}>Loading...</td>}
|
||||
{loading && <td colSpan={6} className="text-center py-5">Loading...</td>}
|
||||
|
||||
{!loading &&
|
||||
(regularizes?.length > 0 ? (
|
||||
@ -55,7 +55,7 @@ const Regularization = ({ handleRequest }) => {
|
||||
<tr key={index}>
|
||||
<td colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar
|
||||
<Avatar
|
||||
firstName={att.firstName}
|
||||
lastName={att.lastName}
|
||||
></Avatar>
|
||||
@ -88,12 +88,17 @@ const Regularization = ({ handleRequest }) => {
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={5}>No Record Found</td>
|
||||
<td colSpan={6}
|
||||
className="text-center" style={{
|
||||
height: "200px",
|
||||
verticalAlign: "middle",
|
||||
borderBottom: "none",
|
||||
}}>No Record Found</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{!loading && (
|
||||
{!loading >10 && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
@ -107,9 +112,8 @@ const Regularization = ({ handleRequest }) => {
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
className={`page-item ${currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
@ -120,9 +124,8 @@ const Regularization = ({ handleRequest }) => {
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
|
@ -86,7 +86,7 @@ const TaskModel = ({
|
||||
...prev,
|
||||
floorId: value,
|
||||
workAreaId: 0,
|
||||
activityID: 0,
|
||||
activityID: "",
|
||||
workCategoryId: categoryData?.[0]?.id?.toString() ?? "",
|
||||
}));
|
||||
};
|
||||
@ -291,7 +291,7 @@ const TaskModel = ({
|
||||
{...register("activityID")}
|
||||
onChange={handleActivityChange}
|
||||
>
|
||||
<option value="0">Select Activity</option>
|
||||
<option value="">Select Activity</option>
|
||||
{activityData &&
|
||||
activityData.length > 0 &&
|
||||
activityData
|
||||
|
@ -1,21 +1,27 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
|
||||
const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate = new Date() - 1 }) => {
|
||||
const DateRangePicker = ({
|
||||
onRangeChange,
|
||||
DateDifference = 7,
|
||||
endDateMode = "yesterday", // "today" or "yesterday"
|
||||
}) => {
|
||||
const inputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const today = new Date();;
|
||||
today.setDate(today.getDate() - 1);
|
||||
const fifteenDaysAgo = new Date();
|
||||
|
||||
fifteenDaysAgo.setDate(today.getDate() - DateDifference);
|
||||
const endDate = new Date();
|
||||
if (endDateMode === "yesterday") {
|
||||
endDate.setDate(endDate.getDate() - 1);
|
||||
}
|
||||
|
||||
const startDate = new Date();
|
||||
startDate.setDate(endDate.getDate() - DateDifference);
|
||||
|
||||
const fp = flatpickr(inputRef.current, {
|
||||
mode: "range",
|
||||
dateFormat: "Y-m-d", // Format for backend (actual input value)
|
||||
altInput: true, // Enables a visually different field
|
||||
dateFormat: "Y-m-d",
|
||||
altInput: true,
|
||||
altFormat: "d-m-Y",
|
||||
defaultDate: [fifteenDaysAgo, today],
|
||||
defaultDate: [startDate, endDate],
|
||||
static: true,
|
||||
clickOpens: true,
|
||||
onChange: (selectedDates, dateStr) => {
|
||||
@ -25,16 +31,14 @@ const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate =
|
||||
});
|
||||
|
||||
onRangeChange?.({
|
||||
// startDate: fifteenDaysAgo.toISOString().split("T")[0],
|
||||
// endDate: today.toISOString().split("T")[0],
|
||||
startDate: fifteenDaysAgo.toLocaleDateString("en-CA"),
|
||||
endDate: today.toLocaleDateString("en-CA"),
|
||||
startDate: startDate.toLocaleDateString("en-CA"),
|
||||
endDate: endDate.toLocaleDateString("en-CA"),
|
||||
});
|
||||
|
||||
return () => {
|
||||
fp.destroy();
|
||||
};
|
||||
}, [onRangeChange]);
|
||||
}, [onRangeChange, DateDifference, endDateMode]);
|
||||
|
||||
return (
|
||||
<input
|
||||
@ -47,4 +51,4 @@ const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate =
|
||||
);
|
||||
};
|
||||
|
||||
export default DateRangePicker;
|
||||
export default DateRangePicker;
|
@ -176,6 +176,7 @@ const DailyTask = () => {
|
||||
<div className="col-md-6 d-flex gap-3 align-items-center col-12 text-start mb-2 mb-md-0">
|
||||
<DateRangePicker
|
||||
onRangeChange={setDateRange}
|
||||
endDateMode="today"
|
||||
DateDifference="6"
|
||||
dateFormat="DD-MM-YYYY"
|
||||
/>
|
||||
|
@ -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,53 @@ 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 +95,6 @@ const LoginPage = () => {
|
||||
className="form-control"
|
||||
id="username"
|
||||
{...register("username")}
|
||||
name="username"
|
||||
placeholder="Enter your email or username"
|
||||
autoFocus
|
||||
/>
|
||||
@ -83,70 +107,100 @@ const LoginPage = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-3 ">
|
||||
<label className="form-label" htmlFor="password">Password</label>
|
||||
<div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
|
||||
<input
|
||||
type={hidepass ? "password" : "text"}
|
||||
id="password"
|
||||
autoComplete="true"
|
||||
className="form-control border-0 shadow-none"
|
||||
{...register("password")}
|
||||
placeholder="············"
|
||||
style={{ flex: 1 }}
|
||||
aria-describedby="password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link p-0 ms-2"
|
||||
style={{ fontSize: "18px", color: "#6c757d", }}
|
||||
onClick={() => setHidepass(!hidepass)}
|
||||
>
|
||||
<i className={`bx ${hidepass ? "bx-hide" : "bx-show"}`} />
|
||||
</button>
|
||||
</div>
|
||||
{errors.password && (
|
||||
<p className="danger-text small-text text-start">{errors.password.message}</p>
|
||||
)}
|
||||
</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>
|
||||
|
||||
{!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>
|
||||
)}
|
||||
</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 ? "Send OTP" : "Sign In"}
|
||||
</button>
|
||||
<div className="p-2">OR</div>
|
||||
{!IsLoginWithOTP && (
|
||||
<button
|
||||
aria-label="loginwithotp"
|
||||
type="button"
|
||||
onClick={() => setLoginWithOtp(true)}
|
||||
className="btn btn-secondary 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>
|
||||
);
|
||||
|
185
src/pages/authentication/LoginWithOtp.jsx
Normal file
185
src/pages/authentication/LoginWithOtp.jsx
Normal file
@ -0,0 +1,185 @@
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import showToast from "../../services/toastService";
|
||||
import { AuthWrapper } from "./AuthWrapper";
|
||||
import { OTP_EXPIRY_SECONDS } from "../../utils/constants";
|
||||
import AuthRepository from "../../repositories/AuthRepository";
|
||||
|
||||
const otpSchema = z.object({
|
||||
otp1: z.string().min(1, "Required"),
|
||||
otp2: z.string().min(1, "Required"),
|
||||
otp3: z.string().min(1, "Required"),
|
||||
otp4: z.string().min(1, "Required"),
|
||||
});
|
||||
|
||||
const LoginWithOtp = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [ loading, setLoading ] = useState( false );
|
||||
const [ timeLeft, setTimeLeft ] = useState( 0 );
|
||||
|
||||
|
||||
const inputRefs = useRef([]);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitted },
|
||||
getValues,
|
||||
} = useForm({
|
||||
resolver: zodResolver(otpSchema),
|
||||
});
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
const finalOtp = data.otp1 + data.otp2 + data.otp3 + data.otp4;
|
||||
const username = localStorage.getItem( "otpUsername" );
|
||||
console.log(username)
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
let requestedData = {
|
||||
email: username,
|
||||
otp:finalOtp
|
||||
}
|
||||
const response = await AuthRepository.verifyOTP( requestedData )
|
||||
|
||||
localStorage.setItem("jwtToken", response.data.token);
|
||||
localStorage.setItem("refreshToken", response.data.refreshToken);
|
||||
setLoading( false );
|
||||
localStorage.removeItem( "otpUsername" );
|
||||
localStorage.removeItem( "otpSentTime" );
|
||||
navigate( "/dashboard" );
|
||||
|
||||
} catch (err) {
|
||||
showToast( "Invalid or expired OTP.", "error" );
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const formatTime = (seconds) => {
|
||||
const min = Math.floor(seconds / 60).toString().padStart(2, "0");
|
||||
const sec = (seconds % 60).toString().padStart(2, "0");
|
||||
return `${min}:${sec}`;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const otpSentTime = localStorage.getItem("otpSentTime");
|
||||
const now = Date.now();
|
||||
|
||||
if (otpSentTime) {
|
||||
const elapsed = Math.floor((now - Number(otpSentTime)) / 1000); // in seconds
|
||||
const remaining = Math.max(OTP_EXPIRY_SECONDS - elapsed, 0); // prevent negatives
|
||||
setTimeLeft(remaining);
|
||||
}
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
if (timeLeft <= 0) return;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
setTimeLeft((prev) => {
|
||||
if (prev <= 1) {
|
||||
clearInterval(timer);
|
||||
localStorage.removeItem( "otpSentTime" );
|
||||
localStorage.removeItem("otpUsername");
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [timeLeft]);
|
||||
|
||||
|
||||
return (
|
||||
<AuthWrapper>
|
||||
<div className="otp-verification-wrapper">
|
||||
<h4>Verify Your OTP</h4>
|
||||
<p className="mb-4">Please enter the 4-digit code sent to your email.</p>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="d-flex justify-content-center gap-6 mb-3">
|
||||
{[1, 2, 3, 4].map((num, idx) => {
|
||||
const { ref, onChange, ...rest } = register(`otp${num}`);
|
||||
|
||||
return (
|
||||
<input
|
||||
key={num}
|
||||
type="text"
|
||||
maxLength={1}
|
||||
className={`form-control text-center ${
|
||||
errors[`otp${num}`] ? "is-invalid" : ""
|
||||
}`}
|
||||
ref={(el) => {
|
||||
inputRefs.current[idx] = el;
|
||||
ref(el);
|
||||
}}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
onChange(e);
|
||||
if (/^\d$/.test(val) && idx < 3) {
|
||||
inputRefs.current[idx + 1]?.focus();
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (
|
||||
e.key === "Backspace" &&
|
||||
!getValues()[`otp${num}`] &&
|
||||
idx > 0
|
||||
) {
|
||||
inputRefs.current[idx - 1]?.focus();
|
||||
}
|
||||
}}
|
||||
style={{ width: "40px", height: "40px", fontSize: "15px" }}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{isSubmitted && Object.values(errors).some((e) => e?.message) && (
|
||||
<div
|
||||
className="text-danger text-center mb-3"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
Please fill all four digits.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary d-grid w-100"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Verifying..." : "Verify OTP"}
|
||||
</button>
|
||||
|
||||
{timeLeft > 0 ? (
|
||||
<p
|
||||
className="text-center text-muted mt-2"
|
||||
style={{ fontSize: "14px" }}
|
||||
>
|
||||
This OTP will expire in <strong>{formatTime(timeLeft)}</strong>
|
||||
</p>
|
||||
) : (
|
||||
<div>
|
||||
<p
|
||||
className="text-center text-danger mt-2 text small-text m-0"
|
||||
|
||||
>
|
||||
OTP has expired. Please request a new one.
|
||||
</p>
|
||||
<a className="text-primary cursor-pointer" onClick={()=>navigate('/auth/login')}>Try Again</a>
|
||||
</div>
|
||||
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</AuthWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginWithOtp;
|
@ -141,7 +141,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<div className="col-md-3 my-0 ">
|
||||
<DateRangePicker onRangeChange={setDateRange} />
|
||||
<DateRangePicker onRangeChange={setDateRange} endDateMode="yesterday"/>
|
||||
</div>
|
||||
<div className="col-md-2 m-0 text-end">
|
||||
<i
|
||||
|
@ -10,7 +10,9 @@ const AuthRepository = {
|
||||
resetPassword: (data) => api.post("/api/auth/reset-password", data),
|
||||
forgotPassword: (data) => api.post("/api/auth/forgot-password", data),
|
||||
sendMail: (data) => api.post("/api/auth/sendmail", data),
|
||||
changepassword: (data) => api.post("/api/auth/change-password", data),
|
||||
changepassword: ( data ) => api.post( "/api/auth/change-password", data ),
|
||||
sendOTP: ( data ) => api.post( 'api/auth/send-otp', data ),
|
||||
verifyOTP:(data)=>api.post("api/auth/login-otp",data)
|
||||
};
|
||||
|
||||
export default AuthRepository;
|
||||
|
@ -37,13 +37,15 @@ import LegalInfoCard from "../pages/TermsAndConditions/LegalInfoCard";
|
||||
// Protected Route Wrapper
|
||||
import ProtectedRoute from "./ProtectedRoute";
|
||||
import Directory from "../pages/Directory/Directory";
|
||||
import LoginWithOtp from "../pages/authentication/LoginWithOtp";
|
||||
|
||||
const router = createBrowserRouter(
|
||||
[
|
||||
{
|
||||
element: <AuthLayout />,
|
||||
children: [
|
||||
{ path: "/auth/login", element: <LoginPage /> },
|
||||
{path: "/auth/login", element: <LoginPage />},
|
||||
{path: "/auth/login-otp", element: <LoginWithOtp />},
|
||||
{ path: "/auth/reqest/demo", element: <RegisterPage /> },
|
||||
{ path: "/auth/forgot-password", element: <ForgotPasswordPage /> },
|
||||
{ path: "/reset-password", element: <ResetPasswordPage /> },
|
||||
|
@ -1,5 +1,6 @@
|
||||
export const THRESH_HOLD = 48; // hours
|
||||
export const DURATION_TIME = 10; // minutes
|
||||
export const OTP_EXPIRY_SECONDS = 600 // OTP time
|
||||
|
||||
export const MANAGE_MASTER = "588a8824-f924-4955-82d8-fc51956cf323";
|
||||
|
||||
@ -24,4 +25,5 @@ export const MANAGE_TASK = "08752f33-3b29-4816-b76b-ea8a968ed3c5"
|
||||
|
||||
export const VIEW_TASK = "9fcc5f87-25e3-4846-90ac-67a71ab92e3c"
|
||||
|
||||
export const ASSIGN_REPORT_TASK = "6a32379b-8b3f-49a6-8c48-4b7ac1b55dc2"
|
||||
export const ASSIGN_REPORT_TASK = "6a32379b-8b3f-49a6-8c48-4b7ac1b55dc2"
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user