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;
}
.app-brand-logo-login {
width: 100px;
}
.app-brand-logo-border {
border: 1px solid #d5d5d5;
@ -164,3 +162,24 @@
thead tr {
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)
);
}
.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="/"
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
src="/img/brand/marco.png"
alt="marco-logo"

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

@ -48,7 +48,7 @@ const ForgotPasswordPage = () => {
}
}
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" }}>
<h4 className="mb-2">Forgot Password? 🔒</h4>
<p className="mb-4">

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

@ -75,7 +75,7 @@ const LoginPage = () => {
}, [IsLoginWithOTP]);
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" }}>
<h4 className="mb-2">Welcome to PMS!</h4>
<p className="mb-4">
@ -93,7 +93,7 @@ const LoginPage = () => {
<input
type="text"
id="username"
className={`form-control ${errors.username ? "is-invalid" : ""}`}
className={`form-control ${errors.username ? "is-invalid" : ""}`}
placeholder="Enter your email"
{...register("username")}
autoFocus
@ -119,7 +119,7 @@ const LoginPage = () => {
<input
type={hidepass ? "password" : "text"}
id="password"
className={`form-control ${
className={`form-control form-control-sm ${
errors.password ? "is-invalid" : ""
}`}
placeholder="••••••••"

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

@ -123,8 +123,9 @@ const LoginWithOtp = () => {
return (
<AuthWrapper>
<div className="otp-verification-wrapper">
// <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>Verify Your OTP</h4>
<p className="mb-4">Please enter the 4-digit code sent to your email.</p>
@ -209,8 +210,9 @@ const LoginWithOtp = () => {
)}
</form>
</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="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 class="d-none d-lg-flex col-lg-7 col-xl-8 h-100 align-items-center p-3">
<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="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>
<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 (
<>
<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 class="authentication-inner row m-0">
<div class="d-none d-lg-flex col-lg-7 col-xl-8 h-100 align-items-center p-3">
<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="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>
<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 (
<>
<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" }}>
<h4 className="mb-2">Adventure starts here 🚀</h4>
<p className="mb-3">Make your app management easy and fun!</p>
<h4 className="mb-2">Adventure starts here</h4>
<p className="mb-2">Make your app management easy and fun!</p>
<form
id="formAuthentication"
className="mb-2"
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">
Organization Name
</label>
<input
type="text"
className="form-control"
className="form-control form-control-sm"
id="organizatioinName"
{...register("organizatioinName")}
name="organizatioinName"
@ -105,13 +106,13 @@ const RegisterPage = () => {
</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">
Email
</label>
<input
type="text"
className="form-control"
className="form-control form-control-sm"
id="email"
name="email"
placeholder="Enter your email"
@ -126,21 +127,21 @@ const RegisterPage = () => {
</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">
Contact Person
</label>
<div className="input-group">
<input
type="text"
id="contactperson"
{...register("contactPerson")}
className="form-control"
className="form-control form-control-sm"
name="contactPerson"
placeholder="Contact Person"
aria-describedby="contactperson"
/>
</div>
{errors.contactPerson && (
<div
className="danger-text text-start"
@ -150,21 +151,19 @@ const RegisterPage = () => {
</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">
Contact Number
</label>
<div className="input-group">
<input
type="text"
id="contactnumber"
{...register("contactNumber")}
className="form-control"
className="form-control form-control-sm "
name="contactNumber"
placeholder="Contact Number"
aria-describedby="contactnumber"
/>
</div>
{errors.contactNumber && (
<div
className="danger-text text-start"
@ -174,6 +173,7 @@ const RegisterPage = () => {
</div>
)}
</div>
</div>
<div className="mb-2 form-password-toggle text-start">
<label className="form-label" htmlFor="contactnumber">
About Organization
@ -181,8 +181,8 @@ const RegisterPage = () => {
<div className="input-group">
<textarea
id="about"
className="form-control"
placeholder="about"
className="form-control form-control"
placeholder="About..."
aria-label="about"
aria-describedby="about"
{...register("about")}
@ -201,9 +201,8 @@ const RegisterPage = () => {
<label className="form-label" htmlFor="oragnizationSize">
Organization Size
</label>
<div className="input-group">
<select
className="form-select"
className="form-select form-select-sm"
id="oragnizationSize"
name="oragnizationSize"
{...register("oragnizationSize")}
@ -216,7 +215,6 @@ const RegisterPage = () => {
<option value="100-200">100-200</option>
<option value="more than 200">more than 200</option>
</select>
</div>
{errors.oragnizationSize && (
<div
className="danger-text text-start"
@ -230,9 +228,8 @@ const RegisterPage = () => {
<label className="form-label" htmlFor="industryId">
Industry
</label>
<div className="input-group">
<select
className="form-select"
className="form-select form-select-sm"
id="industryId"
name="industryId"
{...register("industryId")}
@ -249,7 +246,6 @@ const RegisterPage = () => {
<option disabled>Loading industries...</option>
)}
</select>
</div>
{errors.industryId && (
<div
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"],
});
const ResetPasswordPage = () => {
const ResetPassword = () => {
const [searchParams] = useSearchParams();
const [loading, setLoading] = useState(false);
const [hidepass, setHidepass] = useState(true);
@ -67,7 +67,6 @@ const ResetPasswordPage = () => {
navigate("/auth/login", { replace: true });
// setLoading(false);
} catch (error) {
debugger;
setLoading(false);
if (error?.response?.status === 400) {
showToast("Please check valid Credentials", "error");
@ -94,7 +93,8 @@ const ResetPasswordPage = () => {
);
}
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>
<p className="mb-4">Enter your email and new password to update.</p>
<form
@ -238,8 +238,9 @@ const ResetPasswordPage = () => {
Back to login
</Link>
</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 RegisterPage from "../pages/authentication/RegisterPage";
import ForgotPasswordPage from "../pages/authentication/ForgotPasswordPage";
import ResetPasswordPage from "../pages/authentication/ResetPasswordPage";
import ChangePasswordPage from "../pages/authentication/ChangePassword";
// Home & Protected Pages
@ -46,10 +45,10 @@ const router = createBrowserRouter(
element: <AuthLayout />,
children: [
{ 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/forgot-password", element: <MainForgetPage /> },
{ path: "/reset-password", element: <ResetPasswordPage /> },
{ path: "/reset-password", element: <MainResetPasswordPage /> },
{ path: "/legal-info", element: <LegalInfoCard /> },
{ path: "/auth/changepassword", element: <ChangePasswordPage /> },
],