diff --git a/apps/OpenSign/src/layout/HomeLayout.js b/apps/OpenSign/src/layout/HomeLayout.js index d604fbbac..5427af365 100644 --- a/apps/OpenSign/src/layout/HomeLayout.js +++ b/apps/OpenSign/src/layout/HomeLayout.js @@ -253,21 +253,8 @@ const HomeLayout = () => { {isUserValid ? ( <> {isLoader ? ( -
-
+
+
) : ( <> diff --git a/apps/OpenSign/src/pages/ForgetPassword.js b/apps/OpenSign/src/pages/ForgetPassword.js index b87ccf90c..cd798464c 100644 --- a/apps/OpenSign/src/pages/ForgetPassword.js +++ b/apps/OpenSign/src/pages/ForgetPassword.js @@ -7,6 +7,8 @@ import Alert from "../primitives/Alert"; import { appInfo } from "../constant/appinfo"; import { useDispatch } from "react-redux"; import { fetchAppInfo } from "../redux/reducers/infoReducer"; +import { isEnableSubscription } from "../constant/const"; +import { getAppLogo } from "../constant/Utils"; function ForgotPassword() { const dispatch = useDispatch(); @@ -17,6 +19,8 @@ function ForgotPassword() { hideNav: "" }); const [sentStatus, setSentStatus] = useState(""); + const [image, setImage] = useState(); + const handleChange = (event) => { const { name, value } = event.target; setState({ ...state, [name]: value }); @@ -52,13 +56,24 @@ function ForgotPassword() { useEffect(() => { dispatch(fetchAppInfo()); + saveLogo(); resize(); window.addEventListener("resize", resize); return () => window.removeEventListener("resize", resize); // eslint-disable-next-line }, []); - - let image = appInfo.applogo; + const saveLogo = async () => { + if (isEnableSubscription) { + const logo = await getAppLogo(); + if (logo) { + setImage(logo); + } else { + setImage(appInfo?.applogo || undefined); + } + } else { + setImage(appInfo?.applogo || undefined); + } + }; return (
@@ -71,12 +86,14 @@ function ForgotPassword() { <Alert type={"danger"}>Please setup email adapter </Alert> )} <div className="md:p-10 lg:p-16"> - <div className=" md:p-4 lg:p-10 p-5 bg-base-100 text-base-content md:border-[1px] md:border-gray-400 "> - <div className="w-[250px] h-[66px] inline-block"> - {state.hideNav ? ( - <img src={image} width="100%" alt="" /> - ) : ( - <img src={image} width="100%" alt="" /> + <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card"> + <div className="w-[250px] h-[66px] inline-block overflow-hidden"> + {image && ( + <img + src={image} + className="object-contain h-full" + alt="applogo" + /> )} </div> <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2"> @@ -86,7 +103,7 @@ function ForgotPassword() { <span className="text-[12px] text-[#878787]"> Reset Your Password </span> - <div className="shadow-md rounded my-4"> + <div className="w-full my-4 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50"> <div className="px-6 py-4"> <label className="block text-xs">Email</label> <input diff --git a/apps/OpenSign/src/pages/Login.js b/apps/OpenSign/src/pages/Login.js index 7e38fe896..309c08b03 100644 --- a/apps/OpenSign/src/pages/Login.js +++ b/apps/OpenSign/src/pages/Login.js @@ -1064,28 +1064,9 @@ function Login() { {state.loading && ( <div aria-live="assertive" - style={{ - position: "fixed", - width: "100vw", - height: "100vh", - backgroundColor: "rgba(0,0,0,0.2)", - top: 0, - left: 0, - zIndex: 2 - }} + className="fixed w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-20 text-[50px] text-[#3ac9d6]" > - <div - role="status" - style={{ - position: "fixed", - fontSize: "50px", - color: "#3ac9d6", - top: "50%", - left: "50%", - transform: "translate(-50%, -50%)" - }} - className="loader-37" - > + <div role="status" className="loader-37"> <span className="sr-only">Loading...</span> </div> </div> @@ -1097,13 +1078,13 @@ function Login() { role="region" className="md:p-10 lg:p-16" > - <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content md:border-[1px] md:border-gray-400 "> + <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card"> <div className="w-[250px] h-[66px] inline-block overflow-hidden"> {image && ( <img src={image} className="object-contain h-full" - alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly." + alt="applogo" /> )} </div> @@ -1115,7 +1096,7 @@ function Login() { <legend className="text-[12px] text-[#878787]"> Login to your account </legend> - <div className="px-6 py-4 outline outline-1 outline-slate-300/50 my-2 rounded shadow-md"> + <div className="w-full px-6 py-3 my-1 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50"> <label className="block text-xs" htmlFor="email"> Email </label> @@ -1128,7 +1109,7 @@ function Login() { onChange={handleChange} required /> - <hr className="my-2 border-none" /> + <hr className="my-1 border-none" /> {!isLoginSSO && ( <> <label className="block text-xs" htmlFor="password"> @@ -1190,7 +1171,7 @@ function Login() { </NavLink> </div> </form> - {appInfo.googleClietId && ( + {(appInfo.googleClietId || isEnableSubscription) && ( <div className="op-divider my-4 text-sm">OR</div> )} <div className="flex flex-col justify-center items-center gap-y-3"> diff --git a/apps/OpenSign/src/pages/SSOVerify.js b/apps/OpenSign/src/pages/SSOVerify.js index 85dbb70bd..e7afdc9d6 100644 --- a/apps/OpenSign/src/pages/SSOVerify.js +++ b/apps/OpenSign/src/pages/SSOVerify.js @@ -3,11 +3,7 @@ import { useLocation, useNavigate } from "react-router-dom"; import Parse from "parse"; import axios from "axios"; import { appInfo } from "../constant/appinfo"; -import { - isEnableSubscription, - modalCancelBtnColor, - modalSubmitBtnColor -} from "../constant/const"; +import { isEnableSubscription } from "../constant/const"; import { fetchSubscription } from "../constant/Utils"; import { useDispatch } from "react-redux"; import { showTenant } from "../redux/reducers/ShowTenant"; @@ -294,33 +290,26 @@ const SSOVerify = () => { {message === "Verifying SSO..." && ( <img alt="loader" src={loader} className="w-[80px] h-[80px]" /> )} - <div className="text-[gray]">{message}</div> + <div className="text-base-content">{message}</div> </div> <ModalUi isOpen={isModal} title="Additional Info" showClose={false}> <div className="relative"> {isLoader && ( - <div className="absolute w-full h-full bg-black bg-opacity-25 flex justify-center items-center"> - <div - style={{ - fontSize: "45px", - color: "#3dd3e0" - }} - className="loader-37" - ></div> + <div className="absolute w-full h-full bg-black bg-opacity-25 flex justify-center items-center text-[45px] text-[#3dd3e0]"> + <div className="loader-37"></div> </div> )} - <form className="px-4 py-3" onSubmit={handleSubmitbtn}> + <form + className="px-4 py-3 text-base-content" + onSubmit={handleSubmitbtn} + > <div className="mb-3"> - <label - htmlFor="Company" - style={{ display: "flex" }} - className="block text-xs text-gray-700 font-semibold" - > - Phone <span style={{ fontSize: 13, color: "red" }}>*</span> + <label htmlFor="Company" className="block text-xs font-semibold"> + Phone <span className="text-[13px] text-[red]">*</span> </label> <input type="tel" - className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs" + className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs" id="Phone" value={userDetails.phone} onChange={(e) => @@ -337,16 +326,12 @@ const SSOVerify = () => { </p> </div> <div className="mb-3"> - <label - htmlFor="Company" - style={{ display: "flex" }} - className="block text-xs text-gray-700 font-semibold" - > - Company <span style={{ fontSize: 13, color: "red" }}>*</span> + <label htmlFor="Company" className="block text-xs font-semibold"> + Company <span className="text-[13px] text-[red]">*</span> </label> <input type="text" - className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs" + className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs" id="Company" value={userDetails.Company} onChange={(e) => @@ -360,17 +345,13 @@ const SSOVerify = () => { /> </div> <div className="mb-3"> - <label - htmlFor="JobTitle" - style={{ display: "flex" }} - className="block text-xs text-gray-700 font-semibold" - > + <label htmlFor="JobTitle" className="block text-xs font-semibold"> Job Title - <span style={{ fontSize: 13, color: "red" }}>*</span> + <span className="text-[13px] text-[red]">*</span> </label> <input type="text" - className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs" + className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs" id="JobTitle" value={userDetails.Destination} onChange={(e) => @@ -384,21 +365,13 @@ const SSOVerify = () => { /> </div> <div className="mt-4"> - <button - type="submit" - className="px-3 py-1.5 text-white rounded shadow-md text-center focus:outline-none " - style={{ - marginRight: 10, - backgroundColor: modalSubmitBtnColor - }} - > + <button type="submit" className="op-btn op-btn-primary"> Login </button> <button type="button" - className="py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none" + className="op-btn op-btn-ghost ml-2" onClick={handleCloseModal} - style={{ width: 75, backgroundColor: modalCancelBtnColor }} > Cancel </button> diff --git a/apps/OpenSign/src/pages/Signup.js b/apps/OpenSign/src/pages/Signup.js index 23dfad61b..af58c9c55 100644 --- a/apps/OpenSign/src/pages/Signup.js +++ b/apps/OpenSign/src/pages/Signup.js @@ -503,15 +503,14 @@ const Signup = () => { return ( <div className=""> {state.loading && ( - <div className="fixed w-[100vw] h-[100vh] top-0 left-0 z-20 bg-black bg-opacity-25 text-[#3ac9d6] text-[50px]"> - <div className="loader-37 fixed text-[50px] top-[50%] left-[45%]"></div> + <div className="fixed w-[100vw] h-[100vh] flex justify-center items-center z-20 bg-black bg-opacity-25 text-[#3ac9d6] text-[50px]"> + <div className="loader-37 "></div> </div> )} - <Title title={"Signup page"} /> {appInfo && appInfo.applogo ? ( <div className="md:p-10 lg:p-16"> - <div className="md:p-4 lg:p-10 p-5 bg-base-100 text-base-content md:border-[1px] md:border-gray-400 "> + <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card"> <div className="w-[250px] h-[66px] inline-block overflow-hidden"> {image && ( <img src={image} className="object-contain h-full" alt="logo" /> @@ -521,7 +520,7 @@ const Signup = () => { <div> <form onSubmit={handleSubmit}> <h2 className="text-[30px] mt-6">Create Account !</h2> - <div className="outline outline-1 outline-slate-300/50 shadow-md rounded my-4"> + <div className="w-full my-4 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50"> <div className="px-6 py-4 text-xs"> <label className="block "> Name{" "}