From 25945366d6ae85f826ba210c7952a5a165c80d5b Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Mon, 4 Aug 2025 14:37:34 +0530 Subject: [PATCH] change the design of login page, otp page and request for demo page. --- src/layouts/AuthLayout.jsx | 27 +- src/pages/authentication/AuthWrapper.jsx | 16 +- .../authentication/ForgotPasswordPage.jsx | 129 ++++----- src/pages/authentication/LoginPage.jsx | 258 +++++++++--------- src/pages/authentication/MainForgetPage.jsx | 20 ++ src/pages/authentication/MainLogin.jsx | 19 ++ src/pages/authentication/MainRegisterPage.jsx | 19 ++ src/pages/authentication/RegisterPage.jsx | 76 +++--- src/router/AppRoutes.jsx | 9 +- 9 files changed, 314 insertions(+), 259 deletions(-) create mode 100644 src/pages/authentication/MainForgetPage.jsx create mode 100644 src/pages/authentication/MainLogin.jsx create mode 100644 src/pages/authentication/MainRegisterPage.jsx diff --git a/src/layouts/AuthLayout.jsx b/src/layouts/AuthLayout.jsx index 2640081b..c6cbb401 100644 --- a/src/layouts/AuthLayout.jsx +++ b/src/layouts/AuthLayout.jsx @@ -1,6 +1,7 @@ import React from "react"; -import {Outlet} from "react-router-dom"; -import {QueryClient} from '@tanstack/react-query'; +import { Link, Outlet } from "react-router-dom"; +import { QueryClient } from '@tanstack/react-query'; +import { AuthWrapper } from "../pages/authentication/AuthWrapper"; export const queryClient = new QueryClient({ defaultOptions: { @@ -8,17 +9,33 @@ export const queryClient = new QueryClient({ staleTime: 5 * 60 * 1000, // 5 min: data considered fresh refetchOnWindowFocus: true, // refresh on tab switch refetchOnReconnect: true, // re-fetch if network was lost - retry: false, + retry: false, }, }, }); const AuthLayout = () => { return ( -
+ //
+
+ + + + marco-logo + +
+ //
); }; -export default AuthLayout; +export default AuthLayout; \ No newline at end of file diff --git a/src/pages/authentication/AuthWrapper.jsx b/src/pages/authentication/AuthWrapper.jsx index c065bac2..5c8f0eb9 100644 --- a/src/pages/authentication/AuthWrapper.jsx +++ b/src/pages/authentication/AuthWrapper.jsx @@ -4,17 +4,17 @@ import "./page-auth.css"; export const AuthWrapper = ({ children }) => { return (
-
+ {/*
-
+
*/}
-
+
- + marco-logo { /> -
+ {/*
*/} {children}
-
-
+ //
+ //
); -}; +}; \ No newline at end of file diff --git a/src/pages/authentication/ForgotPasswordPage.jsx b/src/pages/authentication/ForgotPasswordPage.jsx index 508b7a56..efdf94e4 100644 --- a/src/pages/authentication/ForgotPasswordPage.jsx +++ b/src/pages/authentication/ForgotPasswordPage.jsx @@ -1,89 +1,88 @@ import { useState } from "react"; -import {Link} from "react-router-dom"; +import { Link } from "react-router-dom"; import { AuthWrapper } from "./AuthWrapper" import "./page-auth.css"; 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 { z } from "zod"; -const forgotPassSceham = z.object( { +const forgotPassSceham = z.object({ email: z.string().email(), -} ) +}) const ForgotPasswordPage = () => { - const[loding,setLoading] = useState(false) + const [loding, setLoading] = useState(false) - const {register, + const { register, handleSubmit, formState: { errors }, reset, - getValues } = useForm( { - resolver: zodResolver( forgotPassSceham ), - defaultValues: { - email:"" - } - }) + getValues } = useForm({ + resolver: zodResolver(forgotPassSceham), + defaultValues: { + email: "" + } + }) - const onSubmit = async (data) => - { - try - { + const onSubmit = async (data) => { + try { setLoading(true) - const response = await AuthRepository.forgotPassword(data) - if ( response.data && response.success ) - showToast( "verification email has been sent to your registered email address", "success" ) + const response = await AuthRepository.forgotPassword(data) + if (response.data && response.success) + showToast("verification email has been sent to your registered email address", "success") reset() - setLoading( false ) - } catch ( err ) - { + setLoading(false) + } catch (err) { reset() - if(err.response.status === 404){ - showToast( "verification email has been sent to your registered email address", "success" ) - }else{ - showToast("Something wrong","error") - } - + if (err.response.status === 404) { + showToast("verification email has been sent to your registered email address", "success") + } else { + showToast("Something wrong", "error") + } + setLoading(false) } } return ( - -

Forgot Password? 🔒

-

- Enter your email and we'll send you instructions to reset your password -

-
-
- - - {errors.email && ( -
- {errors.email.message} -
- )} -
- -
-
+
+
+

Forgot Password? 🔒

+

+ Enter your email and we'll send you instructions to reset your password +

+ +
+
+ + + {errors.email && ( +
+ {errors.email.message} +
+ )} +
+ +
+
{ Back to login
- + + {/* Footer Text */} + +
+
); }; -export default ForgotPasswordPage; +export default ForgotPasswordPage; \ No newline at end of file diff --git a/src/pages/authentication/LoginPage.jsx b/src/pages/authentication/LoginPage.jsx index c9eb5e0d..85bf8f0c 100644 --- a/src/pages/authentication/LoginPage.jsx +++ b/src/pages/authentication/LoginPage.jsx @@ -1,20 +1,17 @@ import { useEffect, useState } from "react"; -import { Link } from "react-router-dom"; -import { AuthWrapper } from "./AuthWrapper"; -import { useNavigate } from "react-router-dom"; -import "./page-auth.css"; +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 [IsTriedOTPThrough, setIsTriedOTPThrough] = useState(false); const now = Date.now(); const loginSchema = IsLoginWithOTP @@ -37,15 +34,12 @@ const LoginPage = () => { register, handleSubmit, formState: { errors }, - reset, - getValues, } = useForm({ resolver: zodResolver(loginSchema), }); const onSubmit = async (data) => { setLoading(true); - try { const username = data.username.trim(); const password = data.password?.trim(); @@ -85,138 +79,136 @@ const LoginPage = () => { navigate("/auth/login-otp"); } }, [IsLoginWithOTP]); + return ( - -

Welcome to PMS!

-

- {IsLoginWithOTP - ? "Enter your email to receive a one-time password (OTP)." - : "Please sign-in to your account and start the adventure."} -

-
-
- - - {errors.username && ( -
- {errors.username.message} -
- )} -
+
+
+

Welcome to PMS!

+

+ {IsLoginWithOTP + ? "Enter your email to receive a one-time password (OTP)." + : "Please sign in to your account and start the adventure"} +

- {!IsLoginWithOTP && ( - <> -
- -
- - + + {/* Email */} +
+ + + {errors.username && ( +
+ {errors.username.message}
- {errors.password && ( -
- {errors.password.message} -
- )} -
+ )} +
- -
-
- - -
- Forgot Password? -
- - )} - -
- - {!IsLoginWithOTP &&
OR
} + {/* Password */} {!IsLoginWithOTP && ( - - )} -
- + <> +
+ +
+ + setHidepass(!hidepass)} + > + + +
+ {errors.password && ( +
+ {errors.password.message} +
+ )} +
-

- New on our platform? - {IsLoginWithOTP ? ( - setLoginWithOtp(false)} + {/* Remember Me + Forgot Password */} +

+ + )} + + {/* Submit */} + + + {/* Login With OTP Button */} + {!IsLoginWithOTP && ( + <> +
+
or
+
+ + + )} + + + {/* Footer Text */} +

+ New on our platform? + {IsLoginWithOTP ? ( + + ) : ( + + Request a Demo + + )} +

+
+
); }; -export default LoginPage; +export default LoginPage; \ No newline at end of file diff --git a/src/pages/authentication/MainForgetPage.jsx b/src/pages/authentication/MainForgetPage.jsx new file mode 100644 index 00000000..1aabc1e6 --- /dev/null +++ b/src/pages/authentication/MainForgetPage.jsx @@ -0,0 +1,20 @@ +import React from "react" +// import LoginPage from "./LoginPage"; +import ForgotPasswordPage from "./ForgotPasswordPage"; + +const MainForgetPage = () => { + return ( + <> + +
+
+
+ Login image +
+
+ +
+ + ) +} +export default MainForgetPage; \ No newline at end of file diff --git a/src/pages/authentication/MainLogin.jsx b/src/pages/authentication/MainLogin.jsx new file mode 100644 index 00000000..92d41d8f --- /dev/null +++ b/src/pages/authentication/MainLogin.jsx @@ -0,0 +1,19 @@ + +import React from "react" +import LoginPage from "./LoginPage"; + +const MainLogin =()=>{ + return( + <> +
+
+
+ Login image +
+
+ +
+ + ) +} +export default MainLogin; \ No newline at end of file diff --git a/src/pages/authentication/MainRegisterPage.jsx b/src/pages/authentication/MainRegisterPage.jsx new file mode 100644 index 00000000..3a2ef031 --- /dev/null +++ b/src/pages/authentication/MainRegisterPage.jsx @@ -0,0 +1,19 @@ +import React from "react" +import RegisterPage from "./RegisterPage"; + +const MainRegisterPage = () => { + return ( + <> + +
+
+
+ Login image +
+
+ +
+ + ) +} +export default MainRegisterPage; \ No newline at end of file diff --git a/src/pages/authentication/RegisterPage.jsx b/src/pages/authentication/RegisterPage.jsx index 16517816..c3d1000f 100644 --- a/src/pages/authentication/RegisterPage.jsx +++ b/src/pages/authentication/RegisterPage.jsx @@ -58,7 +58,7 @@ const RegisterPage = () => { fetchIndustries(); }, []); - useEffect(() => {}, [industries]); + useEffect(() => { }, [industries]); const fetchIndustries = async () => { try { @@ -71,17 +71,19 @@ const RegisterPage = () => { }; return ( <> - {!registered && ( - + +
+
+

Adventure starts here 🚀

Make your app management easy and fun!

-
+
@@ -103,7 +105,7 @@ const RegisterPage = () => {
)}
-
+
@@ -124,11 +126,11 @@ const RegisterPage = () => {
)}
-
+
-
+
{
)}
-
+
-
+
{
)}
-
+
-
+