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

Merge pull request 'change the design of login page, otp page and request for demo page.' (#323) from Kartik_Task857 into Landing_pages

Browse Source 
Reviewed-on: #323
This commit is contained in:
Vikas Nale 2025-08-04 11:57:07 +00:00
commit 7ad65ece78
9 changed files with 317 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/layouts/AuthLayout.jsx
View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import {Outlet} from "react-router-dom"; import { Link, Outlet } from "react-router-dom";
import {QueryClient} from '@tanstack/react-query'; import { QueryClient } from '@tanstack/react-query';
import { AuthWrapper } from "../pages/authentication/AuthWrapper";
export const queryClient = new QueryClient({ export const queryClient = new QueryClient({
defaultOptions: { defaultOptions: {
@ -15,9 +16,25 @@ export const queryClient = new QueryClient({
const AuthLayout = () => { const AuthLayout = () => {
return ( return (
<div className="login-box"> // <div className="login-box">
<div class="authentication-wrapper authentication-cover">
<Link
aria-label="Go to Home Page"
to="/"
className="app-brand-link gap-2 position-fixed top-2 start-0 mx-6"
>
<span className="app-brand-logo rounded-circle " >
<img
src="/img/brand/marco.png"
alt="marco-logo"
className="app-brand-logo-login"
/>
</span>
</Link>
<Outlet /> <Outlet />
</div> </div>
// </div>
); );
}; };

14
src/pages/authentication/AuthWrapper.jsx
View File

@ -4,17 +4,17 @@ import "./page-auth.css";
export const AuthWrapper = ({ children }) => { export const AuthWrapper = ({ children }) => {
return ( return (
<div className="container-xxl"> <div className="container-xxl">
<div className="authentication-wrapper authentication-basic container-p-y"> {/* <div className="authentication-wrapper authentication-basic container-p-y">
<div className="authentication-inner"> <div className="authentication-inner">
<div className="card"> <div className="card"> */}
<div className="card-body"> <div className="card-body">
<div className="app-brand justify-content-center"> <div className="app-brand justify-content-center" >
<Link <Link
aria-label="Go to Home Page" aria-label="Go to Home Page"
to="/" to="/"
className="app-brand-link gap-2" className="app-brand-link gap-2"
> >
<span className="app-brand-logo rounded-circle "> <span className="app-brand-logo rounded-circle " style={{ marginBottom: "625px",marginLeft:"-39px" }}>
<img <img
src="/img/brand/marco.png" src="/img/brand/marco.png"
alt="marco-logo" alt="marco-logo"
@ -22,12 +22,12 @@ export const AuthWrapper = ({ children }) => {
/> />
</span> </span>
</Link> </Link>
</div> {/* </div> */}
{children} {children}
</div> </div>
</div> </div>
</div> </div>
</div> // </div>
</div> // </div>
); );
}; };

125
src/pages/authentication/ForgotPasswordPage.jsx
View File

@ -1,89 +1,88 @@
import { useState } from "react"; import { useState } from "react";
import {Link} from "react-router-dom"; import { Link } from "react-router-dom";
import { AuthWrapper } from "./AuthWrapper" import { AuthWrapper } from "./AuthWrapper"
import "./page-auth.css"; import "./page-auth.css";
import AuthRepository from "../../repositories/AuthRepository"; import AuthRepository from "../../repositories/AuthRepository";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
import { useForm } from "react-hook-form"; 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 forgotPassSceham = z.object( { const forgotPassSceham = z.object({
email: z.string().email(), email: z.string().email(),
} ) })
const ForgotPasswordPage = () => { const ForgotPasswordPage = () => {
const[loding,setLoading] = useState(false) const [loding, setLoading] = useState(false)
const {register, const { register,
handleSubmit, handleSubmit,
formState: { errors }, formState: { errors },
reset, reset,
getValues } = useForm( { getValues } = useForm({
resolver: zodResolver( forgotPassSceham ), resolver: zodResolver(forgotPassSceham),
defaultValues: { defaultValues: {
email:"" email: ""
} }
}) })
const onSubmit = async (data) => const onSubmit = async (data) => {
{ try {
try
{
setLoading(true) setLoading(true)
const response = await AuthRepository.forgotPassword(data) const response = await AuthRepository.forgotPassword(data)
if ( response.data && response.success ) if (response.data && response.success)
showToast( "verification email has been sent to your registered email address", "success" ) showToast("verification email has been sent to your registered email address", "success")
reset() reset()
setLoading( false ) setLoading(false)
} catch ( err ) } catch (err) {
{
reset() reset()
if(err.response.status === 404){ if (err.response.status === 404) {
showToast( "verification email has been sent to your registered email address", "success" ) showToast("verification email has been sent to your registered email address", "success")
}else{ } else {
showToast("Something wrong","error") showToast("Something wrong", "error")
} }
setLoading(false) setLoading(false)
} }
} }
return ( return (
<AuthWrapper> <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-white">
<h4 className="mb-2">Forgot Password? 🔒</h4> <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
<p className="mb-4"> <h4 className="mb-2">Forgot Password? 🔒</h4>
Enter your email and we'll send you instructions to reset your password <p className="mb-4">
</p> Enter your email and we'll send you instructions to reset your password
<form id="formAuthentication" className="mb-3" onSubmit={handleSubmit(onSubmit)}> </p>
<div className="mb-3">
<label htmlFor="email" className="form-label"> <form id="formAuthentication" className="mb-3" onSubmit={handleSubmit(onSubmit)}>
Email <div className="mb-3 text-start">
</label> <label htmlFor="email" className="form-label">
<input Email
type="text" </label>
className="form-control" <input
id="email" type="text"
name="email" className="form-control"
{...register("email")} id="email"
placeholder="Enter your email" name="email"
autoFocus {...register("email")}
/> placeholder="Enter your email"
{errors.email && ( autoFocus
<div />
className="danger-text text-start" {errors.email && (
style={{ fontSize: "12px" }} <div
> className="danger-text text-start"
{errors.email.message} style={{ fontSize: "12px" }}
</div> >
)} {errors.email.message}
</div> </div>
<button aria-label="Click me" className="btn btn-primary d-grid w-100"> )}
{loding ? "Please Wait...":"Send Reset Link"} </div>
</button> <button aria-label="Click me" className="btn btn-primary d-grid w-100">
</form> {loding ? "Please Wait..." : "Send Reset Link"}
<div className="text-center"> </button>
</form>
<div className="text-center">
<Link <Link
aria-label="Go to Login Page" aria-label="Go to Login Page"
to="/auth/login" to="/auth/login"
@ -93,7 +92,11 @@ const ForgotPasswordPage = () => {
Back to login Back to login
</Link> </Link>
</div> </div>
</AuthWrapper>
{/* Footer Text */}
</div>
</div>
); );
}; };

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

@ -1,20 +1,17 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { AuthWrapper } from "./AuthWrapper";
import { useNavigate } from "react-router-dom";
import "./page-auth.css";
import AuthRepository from "../../repositories/AuthRepository"; import AuthRepository from "../../repositories/AuthRepository";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
import { useForm } from "react-hook-form"; 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";
import { AuthWrapper } from "./AuthWrapper";
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 [IsLoginWithOTP, setLoginWithOtp] = useState(false);
const [IsTriedOTPThrough, setIsTriedOTPThrough] = useState(false);
const now = Date.now(); const now = Date.now();
const loginSchema = IsLoginWithOTP const loginSchema = IsLoginWithOTP
@ -31,15 +28,12 @@ const LoginPage = () => {
register, register,
handleSubmit, handleSubmit,
formState: { errors }, formState: { errors },
reset,
getValues,
} = useForm({ } = useForm({
resolver: zodResolver(loginSchema), resolver: zodResolver(loginSchema),
}); });
const onSubmit = async (data) => { const onSubmit = async (data) => {
setLoading(true); setLoading(true);
try { try {
if (!IsLoginWithOTP) { if (!IsLoginWithOTP) {
const userCredential = { const userCredential = {
@ -74,137 +68,135 @@ const LoginPage = () => {
navigate("/auth/login-otp"); navigate("/auth/login-otp");
} }
}, [IsLoginWithOTP]); }, [IsLoginWithOTP]);
return ( return (
<AuthWrapper> <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-white">
<h4 className="mb-2">Welcome to PMS!</h4> <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
<p className="mb-4"> <h4 className="mb-2">Welcome to PMS!</h4>
{IsLoginWithOTP <p className="mb-4">
? "Enter your email to receive a one-time password (OTP)." {IsLoginWithOTP
: "Please sign-in to your account and start the adventure."} ? "Enter your email to receive a one-time password (OTP)."
</p> : "Please sign in to your account and start the adventure"}
<form </p>
id="formAuthentication"
className="mb-3"
onSubmit={handleSubmit(onSubmit)}
>
<div className="mb-2">
<label htmlFor="username" className="form-label">
Email or Username
</label>
<input
type="text"
className="form-control"
id="username"
{...register("username")}
placeholder="Enter your email or username"
autoFocus
/>
{errors.username && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.username.message}
</div>
)}
</div>
{!IsLoginWithOTP && ( <form id="formAuthentication" onSubmit={handleSubmit(onSubmit)}>
<> {/* Email */}
<div className="mb-3 form-password-toggle"> <div className="mb-3 text-start">
<label className="form-label" htmlFor="password"> <label htmlFor="username" className="form-label">
Password Email
</label> </label>
<div className="input-group input-group-merge d-flex align-items-center border rounded px-2"> <input
<input type="text"
type={hidepass ? "password" : "text"} id="username"
autoComplete="true" className={`form-control ${errors.username ? "is-invalid" : ""}`}
id="password" placeholder="Enter your email"
{...register("password")} {...register("username")}
className="form-control form-control-xl border-0 shadow-none" autoFocus
placeholder="••••••••••••" />
/> {errors.username && (
<button <div className="invalid-feedback text-start" style={{ fontSize: "12px" }}>
type="button" {errors.username.message}
className="btn btn-link p-0 ms-2 "
onClick={() => setHidepass(!hidepass)}
style={{
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
borderLeft: 0,
}}
>
{hidepass ? (
<i className="bx bx-hide" />
) : (
<i className="bx bx-show" />
)}
</button>
</div> </div>
{errors.password && ( )}
<div </div>
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.password.message}
</div>
)}
</div>
{/* Password */}
<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="Submit form"
className="btn btn-primary d-grid w-100 mb-2"
type="submit"
>
{loading ? "Please Wait" : IsLoginWithOTP ? "Send OTP" : "Sign In"}
</button>
{!IsLoginWithOTP && <div className="p-2">OR</div>}
{!IsLoginWithOTP && ( {!IsLoginWithOTP && (
<button <>
aria-label="loginwithotp" <div className="mb-3 text-start">
type="button" <label htmlFor="password" className="form-label">
onClick={() => setLoginWithOtp(true)} Password
className="btn btn-secondary w-100" </label>
> <div className="input-group input-group-merge">
Login With OTP <input
</button> type={hidepass ? "password" : "text"}
)} id="password"
</div> className={`form-control ${errors.password ? "is-invalid" : ""}`}
</form> 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>
<p className="text-center"> {/* Remember Me + Forgot Password */}
<span>New on our platform? </span> <div className="mb-3 d-flex justify-content-between align-items-center">
{IsLoginWithOTP ? ( <div className="form-check">
<a <input
className="text-primary cursor-pointer" type="checkbox"
onClick={() => setLoginWithOtp(false)} 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}
> >
Login With Password {loading
</a> ? "Please Wait..."
) : ( : IsLoginWithOTP
<Link to="/auth/reqest/demo" className="registration-link"> ? "Send OTP"
Request a Demo : "Sign In"}
</Link> </button>
)}
</p> {/* Login With OTP Button */}
</AuthWrapper> {!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 */}
<p className="text-center mt-3">
<span>New on our platform? </span>
{IsLoginWithOTP ? (
<button
className="btn btn-link p-0"
onClick={() => setLoginWithOtp(false)}
>
Login With Password
</button>
) : (
<Link to="/auth/reqest/demo" className="btn btn-link p-0">
Request a Demo
</Link>
)}
</p>
</div>
</div>
); );
}; };

20
src/pages/authentication/MainForgetPage.jsx Normal file
View File

@ -0,0 +1,20 @@
import React from "react"
// import LoginPage from "./LoginPage";
import ForgotPasswordPage from "./ForgotPasswordPage";
const MainForgetPage = () => {
return (
<>
<div class="authentication-inner row m-0">
<div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-3">
<div class="w-100 d-flex justify-content-center">
<img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/illustrations/girl-unlock-password-light.png" class="img-fluid scaleX-n1-rtl" alt="Login image" width="700" data-app-dark-img="illustrations/girl-unlock-password-dark.png" data-app-light-img="illustrations/girl-unlock-password-light.png" />
</div>
</div>
<ForgotPasswordPage />
</div>
</>
)
}
export default MainForgetPage;

19
src/pages/authentication/MainLogin.jsx Normal file
View File

@ -0,0 +1,19 @@
import React from "react"
import LoginPage from "./LoginPage";
const MainLogin =()=>{
return(
<>
<div class="authentication-inner row m-0">
<div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-5">
<div class="w-100 d-flex justify-content-center">
<img src="https://demos.themeselection.com/sneat-aspnet-core-admin-template/assets/img/illustrations/boy-with-rocket-light.png" class="img-fluid" alt="Login image" width="700" data-app-dark-img="illustrations/boy-with-rocket-dark.png" data-app-light-img="illustrations/boy-with-rocket-light.png" />
</div>
</div>
<LoginPage/>
</div>
</>
)
}
export default MainLogin;

19
src/pages/authentication/MainRegisterPage.jsx Normal file
View File

@ -0,0 +1,19 @@
import React from "react"
import RegisterPage from "./RegisterPage";
const MainRegisterPage = () => {
return (
<>
<div class="authentication-inner row m-0">
<div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-0">
<div class="w-100 d-flex justify-content-center">
<img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/illustrations/girl-unlock-password-light.png" class="img-fluid scaleX-n1-rtl" alt="Login image" width="700" data-app-dark-img="illustrations/girl-unlock-password-dark.png" data-app-light-img="illustrations/girl-unlock-password-light.png" />
</div>
</div>
<RegisterPage />
</div>
</>
)
}
export default MainRegisterPage;

74
src/pages/authentication/RegisterPage.jsx
View File

@ -58,7 +58,7 @@ const RegisterPage = () => {
fetchIndustries(); fetchIndustries();
}, []); }, []);
useEffect(() => {}, [industries]); useEffect(() => { }, [industries]);
const fetchIndustries = async () => { const fetchIndustries = async () => {
try { try {
@ -71,17 +71,19 @@ const RegisterPage = () => {
}; };
return ( return (
<> <>
{!registered && (
<AuthWrapper> <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-white">
<div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
<h4 className="mb-2">Adventure starts here 🚀</h4> <h4 className="mb-2">Adventure starts here 🚀</h4>
<p className="mb-3">Make your app management easy and fun!</p> <p className="mb-3">Make your app management easy and fun!</p>
<form <form
id="formAuthentication" id="formAuthentication"
className="mb-3" className="mb-2"
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
> >
<div className="mb-3"> <div className="mb-2 text-start">
<label htmlFor="organizatioinName" className="form-label"> <label htmlFor="organizatioinName" className="form-label">
Organization Name Organization Name
</label> </label>
@ -103,7 +105,7 @@ const RegisterPage = () => {
</div> </div>
)} )}
</div> </div>
<div className="mb-3"> <div className="mb-2 text-start">
<label htmlFor="email" className="form-label"> <label htmlFor="email" className="form-label">
Email Email
</label> </label>
@ -124,11 +126,11 @@ const RegisterPage = () => {
</div> </div>
)} )}
</div> </div>
<div className="mb-3 form-password-toggle"> <div className="mb-2 form-password-toggle text-start">
<label className="form-label" htmlFor="contactperson"> <label className="form-label" htmlFor="contactperson">
Contact Person Contact Person
</label> </label>
<div className="input-group input-group-merge"> <div className="input-group">
<input <input
type="text" type="text"
id="contactperson" id="contactperson"
@ -148,11 +150,11 @@ const RegisterPage = () => {
</div> </div>
)} )}
</div> </div>
<div className="mb-3 form-password-toggle"> <div className="mb-2 form-password-toggle text-start">
<label className="form-label" htmlFor="contactnumber"> <label className="form-label" htmlFor="contactnumber">
Contact Number Contact Number
</label> </label>
<div className="input-group input-group-merge"> <div className="input-group">
<input <input
type="text" type="text"
id="contactnumber" id="contactnumber"
@ -172,11 +174,11 @@ const RegisterPage = () => {
</div> </div>
)} )}
</div> </div>
<div className="mb-3 form-password-toggle"> <div className="mb-2 form-password-toggle text-start">
<label className="form-label" htmlFor="contactnumber"> <label className="form-label" htmlFor="contactnumber">
About Organization About Organization
</label> </label>
<div className="input-group input-group-merge"> <div className="input-group">
<textarea <textarea
id="about" id="about"
className="form-control" className="form-control"
@ -195,11 +197,11 @@ const RegisterPage = () => {
</div> </div>
)} )}
</div> </div>
<div className="mb-3 form-password-toggle"> <div className="mb-2 form-password-toggle text-start">
<label className="form-label" htmlFor="oragnizationSize"> <label className="form-label" htmlFor="oragnizationSize">
Organization Size Organization Size
</label> </label>
<div className="input-group input-group-merge"> <div className="input-group">
<select <select
className="form-select" className="form-select"
id="oragnizationSize" id="oragnizationSize"
@ -224,11 +226,11 @@ const RegisterPage = () => {
</div> </div>
)} )}
</div> </div>
<div className="mb-3 form-password-toggle"> <div className="mb-2 form-password-toggle text-start">
<label className="form-label" htmlFor="industryId"> <label className="form-label" htmlFor="industryId">
Industry Industry
</label> </label>
<div className="input-group input-group-merge"> <div className="input-group">
<select <select
className="form-select" className="form-select"
id="industryId" id="industryId"
@ -257,7 +259,7 @@ const RegisterPage = () => {
</div> </div>
)} )}
</div> </div>
<div className="mb-3"> <div className="mb-2 text-start">
<div className="form-check"> <div className="form-check">
<input <input
className="form-check-input" className="form-check-input"
@ -267,18 +269,16 @@ const RegisterPage = () => {
{...register("terms")} {...register("terms")}
/> />
<label className="form-check-label" htmlFor="terms-conditions"> <label className="form-check-label" htmlFor="terms-conditions">
I agree to I agree to{" "}
<Link <Link
aria-label="Go to Login Page"
to="/legal-info" to="/legal-info"
className="d-flex align-items-center justify-content-center" aria-label="privacy policy and terms"
className="text-decoration-underline"
> >
<a aria-label="pricacy policy and terms" href="#"> privacy policy & terms
{" "}
privacy policy & terms
</a>
</Link> </Link>
</label> </label>
</div> </div>
{errors.terms && ( {errors.terms && (
<div <div
@ -290,7 +290,7 @@ const RegisterPage = () => {
)} )}
</div> </div>
<button <button
aria-label="Click me" aria-label="Click me "
className="btn btn-primary d-grid w-100" className="btn btn-primary d-grid w-100"
> >
Request Demo Request Demo
@ -298,32 +298,18 @@ const RegisterPage = () => {
</form> </form>
<p className="text-center"> <p className="text-center">
<span>Already have an account?</span> <span>Already have an account? </span>
<Link <Link
aria-label="Go to Login Page" aria-label="Go to Login Page"
to="/auth/login" to="/auth/login"
className="d-flex align-items-center justify-content-center" className="text-decoration-underline ms-1"
> >
<i className="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i> <i className="bx bx-chevron-left scaleX-n1-rtl bx-sm me-1"></i>
Back to login Back to login
</Link> </Link>
</p> </p>
</AuthWrapper> </div>
)} </div>
{registered && (
<AuthWrapper>
<h6 className="mb-2">Thank you for contacting us</h6>
<h4 className="mb-3">We will get back to you soon</h4>
<Link
aria-label="Go to Login Page"
to="/auth/login"
className="d-flex align-items-center justify-content-center"
>
<i className="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
Back to login
</Link>
</AuthWrapper>
)}
</> </>
); );
}; };

10
src/router/AppRoutes.jsx
View File

@ -1,4 +1,3 @@
// AppRoutes.jsx
import React from "react"; import React from "react";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom"; import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
@ -38,16 +37,19 @@ import LegalInfoCard from "../pages/TermsAndConditions/LegalInfoCard";
import ProtectedRoute from "./ProtectedRoute"; import ProtectedRoute from "./ProtectedRoute";
import Directory from "../pages/Directory/Directory"; import Directory from "../pages/Directory/Directory";
import LoginWithOtp from "../pages/authentication/LoginWithOtp"; import LoginWithOtp from "../pages/authentication/LoginWithOtp";
import MainLogin from "../pages/authentication/MainLogin";
import MainForgetPage from "../pages/authentication/MainForgetPage";
import MainRegisterPage from "../pages/authentication/MainRegisterPage";
const router = createBrowserRouter( const router = createBrowserRouter(
[ [
{ {
element: <AuthLayout />, element: <AuthLayout />,
children: [ children: [
{path: "/auth/login", element: <LoginPage />}, {path: "/auth/login", element: <MainLogin />},
{path: "/auth/login-otp", element: <LoginWithOtp />}, {path: "/auth/login-otp", element: <LoginWithOtp />},
{ path: "/auth/reqest/demo", element: <RegisterPage /> }, { path: "/auth/reqest/demo", element: <MainRegisterPage /> },
{ path: "/auth/forgot-password", element: <ForgotPasswordPage /> }, { path: "/auth/forgot-password", element: <MainForgetPage /> },
{ path: "/reset-password", element: <ResetPasswordPage /> }, { path: "/reset-password", element: <ResetPasswordPage /> },
{ path: "/legal-info", element: <LegalInfoCard /> }, { path: "/legal-info", element: <LegalInfoCard /> },
{ path: "/auth/changepassword", element: <ChangePasswordPage /> }, { path: "/auth/changepassword", element: <ChangePasswordPage /> },