enable automatic redirect to rememberd url after login

This commit is contained in:
prafull-opensignlabs
2024-01-19 18:08:35 +05:30
parent 2a8cedca58
commit 34fc3afb1e
7 changed files with 104 additions and 182 deletions
+17 -99
View File
@@ -7,7 +7,7 @@ import Signup from "./routes/Signup";
import Form from "./routes/Form";
import Report from "./routes/Report";
import Dashboard from "./routes/Dashboard";
import PlanSubscriptions from "./routes/PlanSubscriptions";
import Subscriptions from "./routes/PlanSubscriptions";
import HomeLayout from "./layout/HomeLayout";
import UserProfile from "./routes/UserProfile";
import PageNotFound from "./routes/PageNotFound";
@@ -60,112 +60,30 @@ function App() {
) : (
<BrowserRouter>
<Routes>
<Route
exact
path="/"
element={
<ValidateRoute>
<Login />
</ValidateRoute>
}
/>
<Route
exact
path="/signup"
element={
<ValidateRoute>
<Signup />
</ValidateRoute>
}
/>
<Route element={<ValidateRoute />}>
<Route exact path="/" element={<Login />} />
<Route exact path="/signup" element={<Signup />} />
</Route>
<Route exact path="/loadmf/:remoteApp/*" element={<LoadMf />} />
<Route exact path="/forgetpassword" element={<ForgetPassword />} />
{process.env.REACT_APP_ENABLE_SUBSCRIPTION && (
<>
<Route exact path="/pgsignup" element={<Pgsignup />} />
<Route
exact
path="/subscription"
element={<PlanSubscriptions />}
/>
<Route exact path="/subscription" element={<Subscriptions />} />
</>
)}
<Route
exact
path="/changepassword"
element={
<HomeLayout>
<ChangePassword />
</HomeLayout>
}
/>
<Route
path="/mf/:remoteApp/*"
element={
<HomeLayout>
<Microapp />
</HomeLayout>
}
/>
<Route
path="/asmf/:remoteApp/*"
element={
<HomeLayout>
<Microapp />
</HomeLayout>
}
/>
<Route
path="/rpmf/:remoteApp/*"
element={
<HomeLayout>
<ReportMicroapp />
</HomeLayout>
}
/>
<Route
path="/form/:id"
element={
<HomeLayout>
<Form />
</HomeLayout>
}
/>
<Route
path="/report/:id"
element={
<HomeLayout>
<Report />
</HomeLayout>
}
/>
<Route
path="/dashboard/:id"
element={
<HomeLayout>
<Dashboard />
</HomeLayout>
}
/>
<Route
path="/profile"
element={
<HomeLayout>
<UserProfile />
</HomeLayout>
}
/>
<Route
path="/generatetoken"
element={
<HomeLayout>
<GenerateToken />
</HomeLayout>
}
/>
<Route element={<HomeLayout />}>
<Route path="/changepassword" element={<ChangePassword />} />
<Route path="/mf/:remoteApp/*" element={<Microapp />} />
<Route path="/asmf/:remoteApp/*" element={<Microapp />} />
<Route path="/rpmf/:remoteApp/*" element={<ReportMicroapp />} />
<Route path="/form/:id" element={<Form />} />
<Route path="/report/:id" element={<Report />} />
<Route path="/dashboard/:id" element={<Dashboard />} />
<Route path="/profile" element={<UserProfile />} />
<Route path="/generatetoken" element={<GenerateToken />} />
</Route>
<Route path="*" element={<PageNotFound />} />
{/* <Route exact path="/ForgotPassword" element={<ForgotPassword />} /> */}
</Routes>
</BrowserRouter>
)}
+47 -24
View File
@@ -8,15 +8,16 @@ import axios from "axios";
import { useSelector } from "react-redux";
import Parse from "parse";
import ModalUi from "../primitives/ModalUi";
import { useNavigate } from "react-router-dom";
import { useNavigate, useLocation, Outlet } from "react-router-dom";
const HomeLayout = ({ children }) => {
const HomeLayout = () => {
const navigate = useNavigate();
const location = useLocation();
const { width } = useWindowSize();
const [isOpen, setIsOpen] = useState(true);
const arr = useSelector((state) => state.TourSteps);
const [isUserValid, setIsUserValid] = useState(true);
const [isLoader, setIsLoader] = useState(true);
useEffect(() => {
(async () => {
try {
@@ -27,6 +28,7 @@ const HomeLayout = ({ children }) => {
});
if (user) {
setIsUserValid(true);
setIsLoader(false);
} else {
setIsUserValid(false);
}
@@ -184,7 +186,7 @@ const HomeLayout = ({ children }) => {
console.log("err ", err);
} finally {
localStorage.removeItem("accesstoken");
navigate("/", { replace: true });
navigate("/", { replace: true, state: { from: location } });
}
};
return (
@@ -194,27 +196,48 @@ const HomeLayout = ({ children }) => {
</div>
{isUserValid ? (
<>
<div className="flex md:flex-row flex-col z-50">
<Sidebar isOpen={isOpen} closeSidebar={closeSidebar} />
<div className="relative h-screen flex flex-col justify-between w-full overflow-y-auto">
<div className="bg-[#eef1f5] p-3">{children}</div>
<div className="z-30">
<Footer />
</div>
{isLoader ? (
<div
style={{
height: "100vh",
display: "flex",
alignItems: "center",
justifyContent: "center"
}}
>
<div
style={{
fontSize: "45px",
color: "#3dd3e0"
}}
className="loader-37"
></div>
</div>
</div>
<Tour
onRequestClose={closeTour}
steps={tourConfigs}
isOpen={isTour}
closeWithMask={false}
disableKeyboardNavigation={["esc"]}
// disableInteraction={true}
scrollOffset={-100}
rounded={5}
showCloseButton={isCloseBtn}
/>
) : (
<>
<div className="flex md:flex-row flex-col z-50">
<Sidebar isOpen={isOpen} closeSidebar={closeSidebar} />
<div className="relative h-screen flex flex-col justify-between w-full overflow-y-auto">
<div className="bg-[#eef1f5] p-3">{<Outlet />}</div>
<div className="z-30">
<Footer />
</div>
</div>
</div>
<Tour
onRequestClose={closeTour}
steps={tourConfigs}
isOpen={isTour}
closeWithMask={false}
disableKeyboardNavigation={["esc"]}
// disableInteraction={true}
scrollOffset={-100}
rounded={5}
showCloseButton={isCloseBtn}
/>
</>
)}
</>
) : (
<ModalUi title={"Session Expired"} isOpen={true} showClose={false}>
@@ -1,7 +1,7 @@
import React, { useEffect } from "react";
import Parse from "parse";
const ValidateRoute = ({ children }) => {
import { Outlet } from "react-router-dom";
const ValidateRoute = () => {
useEffect(() => {
(async () => {
try {
@@ -28,7 +28,7 @@ const ValidateRoute = ({ children }) => {
localStorage.removeItem("accesstoken");
}
};
return <div>{children}</div>;
return <div>{<Outlet />}</div>;
};
export default ValidateRoute;
+1 -1
View File
@@ -24,7 +24,7 @@ const Dashboard = (props) => {
getDashboard(localStorage.getItem("PageLanding"));
}
} else {
navigate("/", { replace: true });
navigate("/", { replace: true, state: { from: location } });
}
// eslint-disable-next-line
}, [id]);
+19 -22
View File
@@ -8,12 +8,13 @@ import axios from "axios";
import Title from "../components/Title";
import GoogleSignInBtn from "../components/LoginGoogle";
// import LoginFacebook from "../components/LoginFacebook";
import { NavLink, useNavigate } from "react-router-dom";
import { NavLink, useNavigate, useLocation } from "react-router-dom";
import login_img from "../assets/images/login_img.svg";
import { useWindowSize } from "../hook/useWindowSize";
function Login(props) {
const navigate = useNavigate();
const location = useLocation();
const { width } = useWindowSize();
const [state, setState] = useState({
email: "",
@@ -132,6 +133,9 @@ function Login(props) {
`${localStorage.getItem("_appName")}_appeditor`
) {
userSettings.forEach(async (element) => {
const redirectUrl =
location?.state?.from ||
`/${element.pageType}/${element.pageId}`;
if (element.role === _currentRole) {
let _role = _currentRole.replace(
`${localStorage.getItem("_appName")}_`,
@@ -260,9 +264,8 @@ function Login(props) {
localStorage.removeItem(
"userDetails"
);
navigate(
`/${element.pageType}/${element.pageId}`
);
// Redirect to the appropriate URL after successful login
navigate(redirectUrl);
} else {
navigate(`/subscription`, {
replace: true
@@ -274,9 +277,8 @@ function Login(props) {
});
}
} else {
navigate(
`/${element.pageType}/${element.pageId}`
);
// Redirect to the appropriate URL after successful login
navigate(redirectUrl);
}
}
} else {
@@ -313,9 +315,8 @@ function Login(props) {
});
}
} else {
navigate(
`/${element.pageType}/${element.pageId}`
);
// Redirect to the appropriate URL after successful login
navigate(redirectUrl);
}
}
},
@@ -462,6 +463,9 @@ function Login(props) {
`${localStorage.getItem("_appName")}_appeditor`
) {
userSettings.forEach(async (element) => {
const redirectUrl =
location?.state?.from ||
`/${element.pageType}/${element.pageId}`;
if (element.role === _currentRole) {
let _role = _currentRole.replace(
`${localStorage.getItem("_appName")}_`,
@@ -569,9 +573,7 @@ function Login(props) {
if (billingDate) {
if (billingDate > new Date()) {
localStorage.removeItem("userDetails");
navigate(
`/${element.pageType}/${element.pageId}`
);
navigate(redirectUrl);
} else {
navigate(`/subscription`, {
replace: true
@@ -581,9 +583,7 @@ function Login(props) {
navigate(`/subscription`, { replace: true });
}
} else {
navigate(
`/${element.pageType}/${element.pageId}`
);
navigate(redirectUrl);
}
}
} else {
@@ -599,9 +599,8 @@ function Login(props) {
if (billingDate) {
if (billingDate > new Date()) {
localStorage.removeItem("userDetails");
navigate(
`/${element.pageType}/${element.pageId}`
);
// Redirect to the appropriate URL after successful login
navigate(redirectUrl);
} else {
navigate(`/subscription`, { replace: true });
}
@@ -609,9 +608,7 @@ function Login(props) {
navigate(`/subscription`, { replace: true });
}
} else {
navigate(
`/${element.pageType}/${element.pageId}`
);
navigate(redirectUrl);
}
}
},
+16 -7
View File
@@ -5,7 +5,7 @@ import axios from "axios";
import { fetchAppInfo, showTenantName } from "../redux/actions/index";
import { connect } from "react-redux";
import Title from "../components/Title";
import { useNavigate } from "react-router-dom";
import { useNavigate, useLocation } from "react-router-dom";
const appId = localStorage.getItem("AppID12");
const server = localStorage.getItem("BaseUrl12");
@@ -13,6 +13,7 @@ Parse.serverURL = server;
Parse.initialize(appId);
const PgSignUp = (props) => {
const navigate = useNavigate();
const location = useLocation();
const [parseBaseUrl] = useState(localStorage.getItem("BaseUrl12"));
const [parseAppId] = useState(localStorage.getItem("AppID12"));
const [formData, setFormData] = useState({
@@ -187,7 +188,7 @@ const PgSignUp = (props) => {
console.log("err ", error);
if (error.message === "Account already exists for this username.") {
alert("Account already exists!");
navigate("/");
navigate("/", { replace: true });
} else {
setIsLoader(false);
alert("Something went wrong, please try again later!");
@@ -351,7 +352,7 @@ const PgSignUp = (props) => {
element.pageType
);
setIsLoader(false);
navigate("/");
navigate("/", { replace: true });
} else {
extendedInfo.forEach((x) => {
if (x.TenantId) {
@@ -389,9 +390,12 @@ const PgSignUp = (props) => {
);
setIsLoader(false);
alert("Registered user successfully");
navigate(
`/${element.pageType}/${element.pageId}`
);
const redirectUrl =
location?.state?.from ||
`/${element.pageType}/${element.pageId}`;
// Redirect to the appropriate URL after successful login
navigate(redirectUrl);
}
} else {
alert("Registered user successfully");
@@ -402,7 +406,12 @@ const PgSignUp = (props) => {
);
localStorage.setItem("pageType", element.pageType);
setIsLoader(false);
navigate(`/${element.pageType}/${element.pageId}`);
const redirectUrl =
location?.state?.from ||
`/${element.pageType}/${element.pageId}`;
// Redirect to the appropriate URL after successful login
navigate(redirectUrl);
}
},
(error) => {
+1 -26
View File
@@ -39,7 +39,7 @@ const PlanSubscriptions = () => {
setIsLoader(false);
setYearlyVisible(false);
} else {
navigate("/");
navigate("/", { replace: true });
}
// eslint-disable-next-line
}, []);
@@ -78,31 +78,6 @@ const PlanSubscriptions = () => {
id="monthlyPlans"
className={`${yearlyVisible ? "none" : "block my-2"}`}
>
{/* <div className=" my-2 w-full flex justify-center">
<ul
className="navs"
style={{
listStyle: "none",
display: "flex",
alignItems: "baseline"
}}
>
<li className="nav-item">
<button className="nav-link frequency active" name="1_months">
Monthly
</button>
</li>
<li className="nav-item">
<button
className="nav-link frequency "
onClick={toggleFrequency}
name="1_years"
>
Yearly
</button>
</li>
</ul>
</div> */}
<div className="flex justify-center w-full my-2">
<ul className=" flex flex-col md:flex-row h-full bg-white justify-center border-collapse border-[1px] border-gray-300">
{plansArr.map((item) => (