diff --git a/web/app.react.js b/web/app.react.js --- a/web/app.react.js +++ b/web/app.react.js @@ -47,6 +47,7 @@ import { EditModalProvider } from './chat/edit-message-provider.js'; import { MemberListSidebarProvider } from './chat/member-list-sidebar/member-list-sidebar-provider.react.js'; import { DBOpsHandler } from './components/db-ops-handler.react.js'; +import LogOutIfMissingCSATHandler from './components/log-out-if-missing-csat-handler.react.js'; import NavigationArrows from './components/navigation-arrows.react.js'; import MinVersionHandler from './components/version-handler.react.js'; import { olmAPI } from './crypto/olm-api.js'; @@ -231,6 +232,7 @@ + {content} diff --git a/web/components/log-out-if-missing-csat-handler.react.js b/web/components/log-out-if-missing-csat-handler.react.js --- a/web/components/log-out-if-missing-csat-handler.react.js +++ b/web/components/log-out-if-missing-csat-handler.react.js @@ -3,10 +3,42 @@ import * as React from 'react'; import { logOutActionTypes, useLogOut } from 'lib/actions/user-actions.js'; +import { useModalContext } from 'lib/components/modal-provider.react.js'; import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js'; import { useSelector } from 'lib/utils/redux-utils.js'; import { usingCommServicesAccessToken } from 'lib/utils/services-utils.js'; +import css from './version-handler.css'; +import Modal from '../modals/modal.react.js'; + +function MissingCSATModal(): React.Node { + const { popModal } = useModalContext(); + + return ( + +
+

+ Unfortunately, we must log you out in order to generate a PAKE-derived + secret. You can learn more about PAKEs and the protocol we use + (OPAQUE){' '} + + here + + . +

+
+
+ ); +} + function LogOutIfMissingCSATHandler() { const dispatchActionPromise = useDispatchActionPromise(); const callLogOut = useLogOut(); @@ -14,11 +46,20 @@ const hasAccessToken = useSelector(state => !!state.commServicesAccessToken); const dataLoaded = useSelector(state => state.dataLoaded); + const { pushModal } = useModalContext(); + React.useEffect(() => { if (!hasAccessToken && dataLoaded && usingCommServicesAccessToken) { void dispatchActionPromise(logOutActionTypes, callLogOut()); + pushModal(); } - }, [callLogOut, dataLoaded, dispatchActionPromise, hasAccessToken]); + }, [ + callLogOut, + dataLoaded, + dispatchActionPromise, + hasAccessToken, + pushModal, + ]); } export default LogOutIfMissingCSATHandler; diff --git a/web/root.js b/web/root.js --- a/web/root.js +++ b/web/root.js @@ -20,7 +20,6 @@ import { getWagmiConfig } from 'lib/utils/wagmi-utils.js'; import App from './app.react.js'; -import LogOutIfMissingCSATHandler from './components/log-out-if-missing-csat-handler.react.js'; import ErrorBoundary from './error-boundary.react.js'; import IdentityServiceContextProvider from './grpc/identity-service-context-provider.react.js'; import { defaultWebState } from './redux/default-state.js'; @@ -71,7 +70,6 @@ -