diff --git a/apps/passport-client/new-components/screens/Login/NewLoginInterstitialScreen.tsx b/apps/passport-client/new-components/screens/Login/NewLoginInterstitialScreen.tsx new file mode 100644 index 0000000000..86258b6873 --- /dev/null +++ b/apps/passport-client/new-components/screens/Login/NewLoginInterstitialScreen.tsx @@ -0,0 +1,128 @@ +import { useLayoutEffect } from "react"; +import { useNavigate } from "react-router-dom"; +import styled from "styled-components"; +import { AppContainer } from "../../../components/shared/AppContainer"; +import { useLoadedIssuedPCDs } from "../../../src/appHooks"; +import { + clearAllPendingRequests, + getPendingRequest +} from "../../../src/sessionStorage"; +import { useSyncE2EEStorage } from "../../../src/useSyncE2EEStorage"; +import { NewLoader } from "../../shared/NewLoader"; +import { Typography } from "../../Typography"; + +export function NewLoginInterstitialScreen(): JSX.Element { + useSyncE2EEStorage(); + const navigate = useNavigate(); + const loadedIssuedPCDs = useLoadedIssuedPCDs(); + + useLayoutEffect(() => { + if (loadedIssuedPCDs) { + const pendingRequest = getPendingRequest(); + if (pendingRequest) { + switch (pendingRequest.key) { + case "proof": { + console.log("Redirecting to prove screen"); + const encReq = encodeURIComponent(pendingRequest.value); + clearAllPendingRequests(); + navigate("/prove?request=" + encReq, { replace: true }); + break; + } + case "add": { + console.log("Redirecting to add screen"); + const encReq = encodeURIComponent(pendingRequest.value); + clearAllPendingRequests(); + navigate("/add?request=" + encReq + "&autoAdd=true", { + replace: true + }); + break; + } + case "halo": { + console.log("Redirecting to halo screen"); + clearAllPendingRequests(); + navigate(`/halo${pendingRequest.value}`, { replace: true }); + break; + } + case "getWithoutProving": { + console.log("Redirecting to get without proving screen"); + const encReq = encodeURIComponent(pendingRequest.value); + clearAllPendingRequests(); + navigate(`/get-without-proving?request=${encReq}`, { + replace: true + }); + break; + } + case "viewSubscriptions": { + console.log("Redirecting to view subscription screen"); + clearAllPendingRequests(); + navigate(`/subscriptions`, { replace: true }); + break; + } + case "addSubscription": { + console.log("Redirecting to add subscription screen"); + const encReq = encodeURIComponent(JSON.parse(pendingRequest.value)); + clearAllPendingRequests(); + navigate(`/add-subscription?url=${encReq}`, { replace: true }); + break; + } + case "viewFrogCrypto": { + console.log("Redirecting to frog crypto screen"); + const encReq = encodeURIComponent(JSON.parse(pendingRequest.value)); + clearAllPendingRequests(); + navigate(`/frogscriptions/${encReq}`, { replace: true }); + break; + } + case "genericIssuanceCheckin": { + console.log("Redirecting to Generic Issuance checkin screen"); + const encReq = new URLSearchParams( + JSON.parse(pendingRequest.value) + ).toString(); + clearAllPendingRequests(); + navigate(`/generic-checkin?${encReq}`, { + replace: true + }); + break; + } + case "authenticateIFrame": { + console.log("Redirecting to Authenticate IFrame screen"); + clearAllPendingRequests(); + navigate(`/authenticate-iframe`, { + replace: true + }); + break; + } + default: + window.location.hash = "#/new"; + } + } + } + }, [loadedIssuedPCDs, navigate]); + + // scroll to top when we navigate to this page + useLayoutEffect(() => { + document.body.scrollTop = document.documentElement.scrollTop = 0; + }, []); + + return ( + <> + + + + + LOADING + + + + + ); +} + +const Container = styled.div` + display: flex; + flex: 1; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + gap: 12px; +`; diff --git a/apps/passport-client/new-components/screens/Login/NewLoginScreen.tsx b/apps/passport-client/new-components/screens/Login/NewLoginScreen.tsx index 80d2b6004b..02dc1d0e54 100644 --- a/apps/passport-client/new-components/screens/Login/NewLoginScreen.tsx +++ b/apps/passport-client/new-components/screens/Login/NewLoginScreen.tsx @@ -27,6 +27,7 @@ import { LoginForm, LoginTitleContainer } from "../../shared/Login/LoginComponents"; +import { NewLoader } from "../../shared/NewLoader"; import { Typography } from "../../shared/Typography"; export const NewLoginScreen = (): JSX.Element => { @@ -129,10 +130,10 @@ export const NewLoginScreen = (): JSX.Element => { }, [self]); if (state.loggingOut) { - // # TODO add loader return ( + LOGGING OUT @@ -189,4 +190,5 @@ const LogoutContainer = styled.div` flex-direction: column; align-items: center; justify-content: center; + gap: 12px; `; diff --git a/apps/passport-client/pages/index.tsx b/apps/passport-client/pages/index.tsx index 3be3a5c5e6..d4d2f9e7d0 100644 --- a/apps/passport-client/pages/index.tsx +++ b/apps/passport-client/pages/index.tsx @@ -62,6 +62,7 @@ import { NewHomeScreen } from "../new-components/screens/Home"; import { NewAlreadyRegisteredScreen } from "../new-components/screens/Login/NewAlreadyRegisteredScreen"; import { NewCreatePasswordScreen } from "../new-components/screens/Login/NewCreatePasswordScreen"; import { NewEnterConfirmationCodeScreen } from "../new-components/screens/Login/NewEnterConfirmationCodeScreen"; +import { NewLoginInterstitialScreen } from "../new-components/screens/Login/NewLoginInterstitialScreen"; import { NewLoginScreen } from "../new-components/screens/Login/NewLoginScreen"; import { NewPassportScreen2 } from "../new-components/screens/Login/NewPassportScreen"; import { NewSyncExistingScreen } from "../new-components/screens/Login/NewSyncExistingScreen"; @@ -156,6 +157,10 @@ function RouterImpl(): JSX.Element { path="already-registered" element={} /> + } + /> } /> } /> } />