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={}
/>
+ }
+ />
} />
} />
} />