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

fixed layout properly of login , reset, forgot, login-with-otp and forgot -pages

Browse Source
This commit is contained in:
pramod mahajan 2025-08-25 20:05:52 +05:30
parent ac0d17ca6d
commit 585199a2a1
13 changed files with 121 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/assets/css/default.css
View File

@ -30,9 +30,7 @@
width: 45px; width: 45px;
} }
.app-brand-logo-login {
width: 100px;
}
.app-brand-logo-border { .app-brand-logo-border {
border: 1px solid #d5d5d5; border: 1px solid #d5d5d5;
@ -164,3 +162,24 @@
thead tr { thead tr {
border-top: 1px solid white; border-top: 1px solid white;
} }
.app-brand-logo-login {
max-width: 50px; /* default for mobile */
height: auto; /* keep aspect ratio */
}
/* Tablet and up (≥768px) */
@media (min-width: 768px) {
.app-brand-logo-login {
max-width: 60px;
}
}
/* Desktop and up (≥1200px) */
@media (min-width: 1200px) {
.app-brand-logo-login {
max-width: 80px;
}
}

3
public/assets/vendor/css/core.css vendored
View File

@ -32541,3 +32541,6 @@ body:not(.modal-open) .layout-content-navbar .layout-navbar {
var(--bs-dark-contrast) var(--bs-dark-contrast)
); );
} }
.bg-gray-60{
background-color:var(--bs-gray-60)
}

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

@ -14,7 +14,7 @@ export const AuthWrapper = ({ children }) => {
to="/" to="/"
className="app-brand-link gap-2" className="app-brand-link gap-2"
> >
<span className="app-brand-logo rounded-circle " style={{ marginBottom: "625px",marginLeft:"-39px" }}> <span className="app-brand-logo rounded-circle " >
<img <img
src="/img/brand/marco.png" src="/img/brand/marco.png"
alt="marco-logo" alt="marco-logo"

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

@ -48,7 +48,7 @@ const ForgotPasswordPage = () => {
} }
} }
return ( return (
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-white"> <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60">
<div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}> <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
<h4 className="mb-2">Forgot Password? 🔒</h4> <h4 className="mb-2">Forgot Password? 🔒</h4>
<p className="mb-4"> <p className="mb-4">

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

@ -75,7 +75,7 @@ const LoginPage = () => {
}, [IsLoginWithOTP]); }, [IsLoginWithOTP]);
return ( return (
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 "> <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60">
<div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}> <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
<h4 className="mb-2">Welcome to PMS!</h4> <h4 className="mb-2">Welcome to PMS!</h4>
<p className="mb-4"> <p className="mb-4">
@ -93,7 +93,7 @@ const LoginPage = () => {
<input <input
type="text" type="text"
id="username" id="username"
className={`form-control ${errors.username ? "is-invalid" : ""}`} className={`form-control ${errors.username ? "is-invalid" : ""}`}
placeholder="Enter your email" placeholder="Enter your email"
{...register("username")} {...register("username")}
autoFocus autoFocus
@ -119,7 +119,7 @@ const LoginPage = () => {
<input <input
type={hidepass ? "password" : "text"} type={hidepass ? "password" : "text"}
id="password" id="password"
className={`form-control ${ className={`form-control form-control-sm ${
errors.password ? "is-invalid" : "" errors.password ? "is-invalid" : ""
}`} }`}
placeholder="••••••••" placeholder="••••••••"

8
src/pages/authentication/LoginWithOtp.jsx
View File

@ -123,8 +123,9 @@ const LoginWithOtp = () => {
return ( return (
<AuthWrapper> // <AuthWrapper>
<div className="otp-verification-wrapper"> <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center justify-content-center p-4 p-sm-5 bg-gray-60 h-100">
<div className="block p-4 p-sm-5 bg-gray-60">
<h4>Verify Your OTP</h4> <h4>Verify Your OTP</h4>
<p className="mb-4">Please enter the 4-digit code sent to your email.</p> <p className="mb-4">Please enter the 4-digit code sent to your email.</p>
@ -209,8 +210,9 @@ const LoginWithOtp = () => {
)} )}
</form> </form>
</div>
</div> </div>
</AuthWrapper> // </AuthWrapper>
); );
}; };

6
src/pages/authentication/MainForgetPage.jsx
View File

@ -7,9 +7,9 @@ const MainForgetPage = () => {
<> <>
<div class="authentication-inner row m-0"> <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="d-none d-lg-flex col-lg-7 col-xl-8 h-100 align-items-center p-3">
<div class="w-100 d-flex justify-content-center"> <div class="w-75 h-75 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" /> <img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/illustrations/girl-unlock-password-light.png" class="object-fit-sm-contain " 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>
</div> </div>
<ForgotPasswordPage /> <ForgotPasswordPage />

26
src/pages/authentication/MainLoginWithOTPPage.jsx Normal file
View File

@ -0,0 +1,26 @@
import React from 'react'
import LoginWithOtp from './LoginWithOtp'
const MainLoginWithOTPPage = () => {
return (
<>
<div className="authentication-inner row m-0">
<div className="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-5">
<div className="w-100 d-flex justify-content-center">
<img
src="../../../public/img/illustrations/worker_03.png"
className="img-fluid"
alt="Login image"
width="70%"
data-app-dark-img="illustrations/boy-with-rocket-dark.png"
data-app-light-img="illustrations/boy-with-rocket-light.png"
/>
</div>
</div>
<LoginWithOtp />
</div>
</>
)
}
export default MainLoginWithOTPPage

8
src/pages/authentication/MainRegisterPage.jsx
View File

@ -5,10 +5,10 @@ const MainRegisterPage = () => {
return ( return (
<> <>
<div class="authentication-inner row m-0"> <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="d-none d-lg-flex col-lg-7 col-xl-8 h-100 align-items-center p-3">
<div class="w-100 d-flex justify-content-center"> <div class="w-75 h-75 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" /> <img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/illustrations/girl-unlock-password-light.png" class="object-fit-sm-contain " 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>
</div> </div>
<RegisterPage /> <RegisterPage />

26
src/pages/authentication/MainResetPasswordPage.jsx Normal file
View File

@ -0,0 +1,26 @@
import React from 'react'
import ResetPasswordPage from './ResetPassword'
const MainResetPasswordPage = () => {
return (
<>
<div className="authentication-inner row m-0">
<div className="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-5">
<div className="w-100 d-flex justify-content-center">
<img
src="../../../public/img/illustrations/worker_03.png"
className="img-fluid"
alt="Login image"
width="70%"
data-app-dark-img="illustrations/boy-with-rocket-dark.png"
data-app-light-img="illustrations/boy-with-rocket-light.png"
/>
</div>
</div>
<ResetPasswordPage />
</div>
</>
)
}
export default MainResetPasswordPage

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

@ -72,24 +72,25 @@ const RegisterPage = () => {
return ( return (
<> <>
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-white"> <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60">
<div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}> <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-2">Make your app management easy and fun!</p>
<form <form
id="formAuthentication" id="formAuthentication"
className="mb-2" className="mb-2"
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
> >
<div className="mb-2 text-start"> <div className="row">
<div className="mb-2 col-12 col-sm-6 text-start">
<label htmlFor="organizatioinName" className="form-label"> <label htmlFor="organizatioinName" className="form-label">
Organization Name Organization Name
</label> </label>
<input <input
type="text" type="text"
className="form-control" className="form-control form-control-sm"
id="organizatioinName" id="organizatioinName"
{...register("organizatioinName")} {...register("organizatioinName")}
name="organizatioinName" name="organizatioinName"
@ -105,13 +106,13 @@ const RegisterPage = () => {
</div> </div>
)} )}
</div> </div>
<div className="mb-2 text-start"> <div className="mb-2 col-12 col-sm-6 text-start">
<label htmlFor="email" className="form-label"> <label htmlFor="email" className="form-label">
Email Email
</label> </label>
<input <input
type="text" type="text"
className="form-control" className="form-control form-control-sm"
id="email" id="email"
name="email" name="email"
placeholder="Enter your email" placeholder="Enter your email"
@ -126,21 +127,21 @@ const RegisterPage = () => {
</div> </div>
)} )}
</div> </div>
<div className="mb-2 form-password-toggle text-start"> </div>
<div className="row">
<div className="mb-2 col-12 col-sm-6 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 <input
type="text" type="text"
id="contactperson" id="contactperson"
{...register("contactPerson")} {...register("contactPerson")}
className="form-control" className="form-control form-control-sm"
name="contactPerson" name="contactPerson"
placeholder="Contact Person" placeholder="Contact Person"
aria-describedby="contactperson" aria-describedby="contactperson"
/> />
</div>
{errors.contactPerson && ( {errors.contactPerson && (
<div <div
className="danger-text text-start" className="danger-text text-start"
@ -150,21 +151,19 @@ const RegisterPage = () => {
</div> </div>
)} )}
</div> </div>
<div className="mb-2 form-password-toggle text-start"> <div className="mb-2 col-12 col-sm-6 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 <input
type="text" type="text"
id="contactnumber" id="contactnumber"
{...register("contactNumber")} {...register("contactNumber")}
className="form-control" className="form-control form-control-sm "
name="contactNumber" name="contactNumber"
placeholder="Contact Number" placeholder="Contact Number"
aria-describedby="contactnumber" aria-describedby="contactnumber"
/> />
</div>
{errors.contactNumber && ( {errors.contactNumber && (
<div <div
className="danger-text text-start" className="danger-text text-start"
@ -174,6 +173,7 @@ const RegisterPage = () => {
</div> </div>
)} )}
</div> </div>
</div>
<div className="mb-2 form-password-toggle text-start"> <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
@ -181,8 +181,8 @@ const RegisterPage = () => {
<div className="input-group"> <div className="input-group">
<textarea <textarea
id="about" id="about"
className="form-control" className="form-control form-control"
placeholder="about" placeholder="About..."
aria-label="about" aria-label="about"
aria-describedby="about" aria-describedby="about"
{...register("about")} {...register("about")}
@ -201,9 +201,8 @@ const RegisterPage = () => {
<label className="form-label" htmlFor="oragnizationSize"> <label className="form-label" htmlFor="oragnizationSize">
Organization Size Organization Size
</label> </label>
<div className="input-group">
<select <select
className="form-select" className="form-select form-select-sm"
id="oragnizationSize" id="oragnizationSize"
name="oragnizationSize" name="oragnizationSize"
{...register("oragnizationSize")} {...register("oragnizationSize")}
@ -216,7 +215,6 @@ const RegisterPage = () => {
<option value="100-200">100-200</option> <option value="100-200">100-200</option>
<option value="more than 200">more than 200</option> <option value="more than 200">more than 200</option>
</select> </select>
</div>
{errors.oragnizationSize && ( {errors.oragnizationSize && (
<div <div
className="danger-text text-start" className="danger-text text-start"
@ -230,9 +228,8 @@ const RegisterPage = () => {
<label className="form-label" htmlFor="industryId"> <label className="form-label" htmlFor="industryId">
Industry Industry
</label> </label>
<div className="input-group">
<select <select
className="form-select" className="form-select form-select-sm"
id="industryId" id="industryId"
name="industryId" name="industryId"
{...register("industryId")} {...register("industryId")}
@ -249,7 +246,6 @@ const RegisterPage = () => {
<option disabled>Loading industries...</option> <option disabled>Loading industries...</option>
)} )}
</select> </select>
</div>
{errors.industryId && ( {errors.industryId && (
<div <div
className="danger-text text-start" className="danger-text text-start"

11
src/pages/authentication/ResetPasswordPage.jsx → src/pages/authentication/ResetPassword.jsx
View File

@ -33,7 +33,7 @@ const resetPasswordSchema = z
path: ["confirmPassword"], path: ["confirmPassword"],
}); });
const ResetPasswordPage = () => { const ResetPassword = () => {
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [hidepass, setHidepass] = useState(true); const [hidepass, setHidepass] = useState(true);
@ -67,7 +67,6 @@ const ResetPasswordPage = () => {
navigate("/auth/login", { replace: true }); navigate("/auth/login", { replace: true });
// setLoading(false); // setLoading(false);
} catch (error) { } catch (error) {
debugger;
setLoading(false); setLoading(false);
if (error?.response?.status === 400) { if (error?.response?.status === 400) {
showToast("Please check valid Credentials", "error"); showToast("Please check valid Credentials", "error");
@ -94,7 +93,8 @@ const ResetPasswordPage = () => {
); );
} }
return ( return (
<AuthWrapper> <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center justify-content-center p-4 p-sm-5 bg-gray-60 h-100">
<div className="block p-4 p-sm-5 bg-gray-60">
<h4 className="mb-2">Reset Password? 🔒</h4> <h4 className="mb-2">Reset Password? 🔒</h4>
<p className="mb-4">Enter your email and new password to update.</p> <p className="mb-4">Enter your email and new password to update.</p>
<form <form
@ -238,8 +238,9 @@ const ResetPasswordPage = () => {
Back to login Back to login
</Link> </Link>
</div> </div>
</AuthWrapper> </div>
</div>
); );
}; };
export default ResetPasswordPage; export default ResetPassword;

5
src/router/AppRoutes.jsx
View File

@ -9,7 +9,6 @@ import HomeLayout from "../layouts/HomeLayout";
import LoginPage from "../pages/authentication/LoginPage"; import LoginPage from "../pages/authentication/LoginPage";
import RegisterPage from "../pages/authentication/RegisterPage"; import RegisterPage from "../pages/authentication/RegisterPage";
import ForgotPasswordPage from "../pages/authentication/ForgotPasswordPage"; import ForgotPasswordPage from "../pages/authentication/ForgotPasswordPage";
import ResetPasswordPage from "../pages/authentication/ResetPasswordPage";
import ChangePasswordPage from "../pages/authentication/ChangePassword"; import ChangePasswordPage from "../pages/authentication/ChangePassword";
// Home & Protected Pages // Home & Protected Pages
@ -46,10 +45,10 @@ const router = createBrowserRouter(
element: <AuthLayout />, element: <AuthLayout />,
children: [ children: [
{ path: "/auth/login", element: <MainLogin /> }, { path: "/auth/login", element: <MainLogin /> },
{ path: "/auth/login-otp", element: <LoginWithOtp /> }, { path: "/auth/login-otp", element: <MainLoginWithOTPPage /> },
{ path: "/auth/reqest/demo", element: <MainRegisterPage /> }, { path: "/auth/reqest/demo", element: <MainRegisterPage /> },
{ path: "/auth/forgot-password", element: <MainForgetPage /> }, { path: "/auth/forgot-password", element: <MainForgetPage /> },
{ path: "/reset-password", element: <ResetPasswordPage /> }, { path: "/reset-password", element: <MainResetPasswordPage /> },
{ path: "/legal-info", element: <LegalInfoCard /> }, { path: "/legal-info", element: <LegalInfoCard /> },
{ path: "/auth/changepassword", element: <ChangePasswordPage /> }, { path: "/auth/changepassword", element: <ChangePasswordPage /> },
], ],