jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): iframe and jwt behaviour

Browse source
This commit is contained in:
Shekar Siri 2023-10-27 11:23:54 +02:00
parent b4e614d867
commit bfe6b5b480
3 changed files with 85 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
frontend/app/Router.js
View file

@ -18,9 +18,10 @@ import Signup from 'Components/Signup';
import { fetchTenants, setJwt } from 'Duck/user';
import { setSessionPath } from 'Duck/sessions';
import { ModalProvider } from './components/Modal';
import { GLOBAL_DESTINATION_PATH, GLOBAL_HAS_NO_RECORDINGS, IFRAME } from 'App/constants/storageKeys';
import { GLOBAL_DESTINATION_PATH, GLOBAL_HAS_NO_RECORDINGS, IFRAME, JWT_PARAM } from 'App/constants/storageKeys';
import SupportCallout from 'Shared/SupportCallout';
import NotFoundPage from 'Shared/NotFoundPage';
import { checkParam } from 'App/utils';
const Login = lazy(() => import('Components/Login/Login'));
const ForgotPassword = lazy(() => import('Components/ForgotPassword/ForgotPassword'));
@ -130,29 +131,16 @@ class Router extends React.Component {
this.fetchInitialData();
}
const urlJWT = new URLSearchParams(window.location.search).get('jwt');
if (urlJWT && !props.isLoggedIn) {
props.setJwt(urlJWT)
}
this.state = {
isIframe: this.checkIframe(),
isIframe: checkParam('iframe', IFRAME),
isJwt: checkParam('jwt', JWT_PARAM)
};
}
checkIframe = () => {
const urlParams = new URLSearchParams(window.location.search);
const iframe = urlParams.get('iframe');
if (iframe && iframe === 'true') {
localStorage.setItem(IFRAME, true);
return true;
} else {
localStorage.removeItem(IFRAME);
return false;
const urlJWT = new URLSearchParams(window.location.search).get('jwt');
if (urlJWT && !props.isLoggedIn) {
props.setJwt(urlJWT);
}
};
}
fetchInitialData = async () => {
const siteIdFromPath = parseInt(window.location.pathname.split('/')[1]);
@ -189,7 +177,7 @@ class Router extends React.Component {
destinationPath !== routes.login() &&
destinationPath !== '/'
) {
history.push(destinationPath + window.location.search);
this.props.history.push(destinationPath + window.location.search);
}
if (!prevProps.isLoggedIn && this.props.isLoggedIn) {
@ -221,28 +209,44 @@ class Router extends React.Component {
|| isRoute(MULTIVIEW_INDEX_PATH, location.pathname);
const redirectToOnboarding = !onboarding && localStorage.getItem(GLOBAL_HAS_NO_RECORDINGS) === 'true';
const { isIframe } = this.state;
const { isIframe, isJwt } = this.state;
const renderAuthenticatedIframeRoutes = () => (
<ModalProvider>
<Loader loading={loading} className='flex-1'>
<Suspense fallback={<Loader loading={true} className='flex-1' />}>
<Switch key='content'>
<Route exact strict path={withSiteId(SESSION_PATH, siteIdList)} component={Session} />
<Route exact strict path={withSiteId(LIVE_SESSION_PATH, siteIdList)} component={LiveSession} />
<Route path='*' render={NotFoundPage} />
</Switch>
</Suspense>
</Loader>
</ModalProvider>
);
const renderUnauthenticatedIframeRoutes = () => (
<Suspense fallback={<Loader loading={true} className='flex-1' />}>
<Switch>
<Route exact strict path={FORGOT_PASSWORD} component={ForgotPassword} />
<Route exact strict path={LOGIN_PATH} component={changePassword ? UpdatePassword : Login} />
<Route exact strict path={SIGNUP_PATH} component={Signup} />
<Redirect to={LOGIN_PATH} />
</Switch>
{!isEnterprise && <SupportCallout />}
</Suspense>
);
if (isIframe) {
if (isLoggedIn) {
return (
<ModalProvider>
<Loader loading={loading} className='flex-1'>
<Suspense fallback={<Loader loading={true} className='flex-1' />}>
<Switch key='content'>
<Route exact strict path={withSiteId(SESSION_PATH, siteIdList)} component={Session} />
<Route exact strict path={withSiteId(LIVE_SESSION_PATH, siteIdList)} component={LiveSession} />
<Route path='*' render={NotFoundPage} />
</Switch>
</Suspense>
</Loader>
</ModalProvider>
);
} else {
return (
<NotFoundPage />
);
return renderAuthenticatedIframeRoutes();
}
if (isJwt) {
return <NotFoundPage />;
}
return renderUnauthenticatedIframeRoutes();
}
return isLoggedIn ? (

3
frontend/app/constants/storageKeys.ts
View file

@ -7,4 +7,5 @@ export const GLOBAL_HAS_NO_RECORDINGS = "__$global-hasNoRecordings$__"
export const SITE_ID_STORAGE_KEY = "__$user-siteId$__"
export const GETTING_STARTED = "__$user-gettingStarted$__"
export const MOUSE_TRAIL = "__$session-mouseTrail$__"
export const IFRAME = "__$session-iframe$__"
export const IFRAME = "__$session-iframe$__"
export const JWT_PARAM = "__$session-jwt-param$__"

40
frontend/app/utils/index.ts
View file

@ -426,3 +426,43 @@ export function deleteCookie(name: string, path: string, domain: string) {
(domain ? ';domain=' + domain : '') +
';expires=Thu, 01 Jan 1970 00:00:01 GMT';
}
/**
* Checks if a specified query parameter exists in the URL and if its value is set to 'true'.
* If a storageKey is provided, stores the result in localStorage under that key.
*
* @function
* @param {string} paramName - The name of the URL parameter to check.
* @param {string} [storageKey] - The optional key to use for storing the result in localStorage.
* @returns {boolean} - Returns true if the parameter exists and its value is 'true'. Otherwise, returns false.
*
* @example
* // Assuming URL is: http://example.com/?iframe=true
* const isIframeEnabled = checkParam('iframe'); // Returns true, doesn't store in localStorage
* const isIframeEnabledWithStorage = checkParam('iframe', 'storageKey'); // Returns true, stores in localStorage
*
* @description
* The function inspects the current URL's query parameters. If the specified parameter exists
* and its value is set to 'true', and a storageKey is provided, the function stores 'true' under
* the provided storage key in the localStorage. If the condition is not met, or if the parameter
* does not exist, and a storageKey is provided, any existing localStorage entry with the storageKey
* is removed.
*/
export const checkParam = (paramName: string, storageKey?: string): boolean => {
const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get(paramName);
const existsAndTrue = paramValue && paramValue === 'true' || paramValue?.length > 0;
if (storageKey) {
if (existsAndTrue) {
localStorage.setItem(storageKey, 'true');
} else {
localStorage.removeItem(storageKey);
}
}
return existsAndTrue;
};