+
+ {renderModal &&
+
+
+
+
+
+
+ {categoriesStore
+ .filter((category) => category.ID !== MAILBOX_LABEL_IDS.CATEGORY_DEFAULT)
+ .map((tmp) => {
+ const category = getCategoryTabFromLabel(tmp);
+
+ return (
+ {c('Label').t`Categories`}
+
+ {c('Label').t`Notifications`}
+ {/* This is intentionally not translated, will be removed after the alpha */}
+
+
+
+
+
+
+
+ onUpdate({ ...category, notify: !category.notify })}
+ data-testid={`${category.id}-notify`}
+ disabled={loading}
+ />
+
+ );
+};
diff --git a/applications/account/src/app/containers/mail/sections/CategoryViewToggle.test.tsx b/applications/account/src/app/containers/mail/sections/CategoryViewToggle.test.tsx
new file mode 100644
index 00000000000..688708ef606
--- /dev/null
+++ b/applications/account/src/app/containers/mail/sections/CategoryViewToggle.test.tsx
@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react';
+
+import { useOrganization } from '@proton/account/organization/hooks';
+import { useMailSettings } from '@proton/mail/store/mailSettings/hooks';
+import { DEFAULT_MAIL_SETTINGS } from '@proton/shared/lib/mail/mailSettings';
+import useFlag from '@proton/unleash/useFlag';
+
+import { CategoryViewToggle } from './CategoryViewToggle';
+
+jest.mock('@proton/mail/store/mailSettings/hooks');
+const mockUseMailSettings = useMailSettings as jest.Mock;
+
+jest.mock('@proton/account/organization/hooks');
+const mockUseOrganization = useOrganization as jest.Mock;
+
+// We assume the flag is always enabled
+jest.mock('@proton/unleash/useFlag');
+jest.mocked(useFlag).mockReturnValue(true);
+
+jest.mock('@proton/components/hooks/useNotifications', () =>
+ jest.fn().mockReturnValue({ createNotification: jest.fn() })
+);
+
+jest.mock('@proton/redux-shared-store/sharedProvider', () => ({
+ __esModule: true,
+ useDispatch: () => jest.fn(),
+}));
+
+describe('CategoryViewSection', () => {
+ describe('setting is visible', () => {
+ it('should have visible switch and checked if the setting is on', () => {
+ mockUseMailSettings.mockReturnValue([{ ...DEFAULT_MAIL_SETTINGS, MailCategoryView: true }]);
+ mockUseOrganization.mockReturnValue([{ Settings: { MailCategoryViewEnabled: true } }]);
+
+ render(
+ onUpdate({ ...category, display: !category.display })}
+ onClick={noop}
+ data-testid={`${category.id}-display`}
+ // disabled={loading}
+ disabled={true}
+ />
+
+ {c('Info') + .t`All messages will be shown in Inbox, and the category tabs and tags will no longer be visible. `}
+
+
{textToDisplay}
diff --git a/applications/account/src/app/content/MainContainer.tsx b/applications/account/src/app/content/MainContainer.tsx
index 071d20bc14d..f957ddcd8ab 100644
--- a/applications/account/src/app/content/MainContainer.tsx
+++ b/applications/account/src/app/content/MainContainer.tsx
@@ -4,8 +4,10 @@ import { Redirect, Route, Switch, useLocation } from 'react-router-dom';
import { c } from 'ttag';
import { useAddresses } from '@proton/account/addresses/hooks';
-import { getTrustedContactRoute } from '@proton/account/delegatedAccess/available';
import { OutgoingEmergencyContactTopBanner } from '@proton/account/delegatedAccess/emergencyContact/outgoing/OutgoingEmergencyContactTopBanner';
+import { IncomingRecoveryContactTopBanner } from '@proton/account/delegatedAccess/recoveryContact/incoming/IncomingRecoveryContactTopBanner';
+import { OutgoingRecoveryContactTopBanner } from '@proton/account/delegatedAccess/recoveryContact/outgoing/OutgoingRecoveryContactTopBanner';
+import { getTrustedContactRoute } from '@proton/account/delegatedAccess/routes';
import { useGroupMemberships } from '@proton/account/groupMemberships/hooks';
import { useGroups } from '@proton/account/groups/hooks';
import { useOrganization } from '@proton/account/organization/hooks';
@@ -48,6 +50,7 @@ import UnprivatizationRequestTopBanner from '@proton/components/containers/membe
import { CANCEL_ROUTE } from '@proton/components/containers/payments/subscription/cancellationFlow/helper';
import useShowDashboard from '@proton/components/hooks/accounts/useShowDashboard';
import useAssistantFeatureEnabled from '@proton/components/hooks/assistant/useAssistantFeatureEnabled';
+import { useIsGroupOwner } from '@proton/components/hooks/useIsGroupOwner';
import useShowVPNDashboard from '@proton/components/hooks/useShowVPNDashboard';
import { FeatureCode, useFeatures } from '@proton/features';
import { getHasPassB2BPlan, hasAIAssistant, hasAllProductsB2CPlan } from '@proton/payments';
@@ -166,12 +169,10 @@ const MainContainer = () => {
useFeatures([FeatureCode.EasySwitch]);
const showThemeSelection = useShowThemeSelection();
- const isBreachesAccountDashboardEnabled = useFlag('BreachesAccountDashboard');
const canDisplayB2BLogsPass = useFlag('B2BLogsPass');
const canDisplayB2BLogsVPN = useFlag('B2BLogsVPN');
const isUserGroupsFeatureEnabled = useFlag('UserGroupsPermissionCheck');
const isUserGroupsNoCustomDomainEnabled = useFlag('UserGroupsNoCustomDomain');
- const isUserGroupsMembershipFeatureEnabled = useFlag('UserGroupsMembersPermissionCheck');
const isB2BAuthLogsEnabled = useFlag('B2BAuthenticationLogs');
const { paymentsEnabled: isScribePaymentEnabled } = useAssistantFeatureEnabled();
const isScribeAdminSettingFeatureEnabled = useFlag('ScribeAdminSetting');
@@ -189,6 +190,9 @@ const MainContainer = () => {
const isMeetAvailable = useFlag('PMVC2025');
const isAuthenticatorAvailable = useFlag('AuthenticatorSettingsEnabled');
const isOLESEnabled = useFlag('OlesM1');
+ const isCategoryViewEnabled = useFlag('CategoryView');
+ const isRecoveryContactsEnabled = useFlag('SocialRecovery');
+ const isRolesAndPermissionsEnabled = useFlag('AdminRoleMVP');
const [referralInfo] = useReferralInfo();
@@ -226,9 +230,15 @@ const MainContainer = () => {
'DriveDashboard'
);
+ const { showDashboard: showMeetDashboard, variant: showMeetDashboardVariant } = useShowDashboard(
+ app,
+ 'MeetDashboard'
+ );
+
const { isB2B: isB2BDrive } = useDrivePlan();
const isB2BTrial = useIsB2BTrial(subscription, organization);
+ const [isGroupOwner, loadingIsGroupOwner] = useIsGroupOwner();
const canDisplayNonPrivateEmailPhone = useFlag('B2BNonPrivateEmailPhone');
@@ -245,18 +255,17 @@ const MainContainer = () => {
isDataRecoveryAvailable,
isSessionRecoveryAvailable,
recoveryNotification: recoveryNotification?.color,
- isBreachesAccountDashboardEnabled,
showVPNDashboard,
showVPNDashboardVariant: showVPNDashboardVariant.name,
isUserGroupsFeatureEnabled,
showThemeSelection,
assistantKillSwitch,
+ isRecoveryContactsEnabled,
canDisplayB2BLogsPass,
canDisplayB2BLogsVPN,
canDisplayPassReports,
memberships,
groups,
- isUserGroupsMembershipFeatureEnabled,
isUserGroupsNoCustomDomainEnabled,
canB2BHidePhotos,
isB2BDrive,
@@ -277,9 +286,14 @@ const MainContainer = () => {
showPassDashboardVariant: showPassDashboardVariant.name,
showDriveDashboard,
showDriveDashboardVariant: showDriveDashboardVariant.name,
+ showMeetDashboard,
+ showMeetDashboardVariant: showMeetDashboardVariant.name,
isAuthenticatorAvailable,
hasPendingInvitations,
+ isGroupOwner,
isOLESEnabled,
+ isCategoryViewEnabled,
+ isRolesAndPermissionsEnabled,
});
useEffect(() => {
@@ -332,6 +346,8 @@ const MainContainer = () => {
const top = (
+
+
diff --git a/applications/account/src/app/content/PrivateAppLoaderPage.tsx b/applications/account/src/app/content/PrivateAppLoaderPage.tsx
new file mode 100644
index 00000000000..78dee524b3f
--- /dev/null
+++ b/applications/account/src/app/content/PrivateAppLoaderPage.tsx
@@ -0,0 +1,30 @@
+import { c } from 'ttag';
+
+import { ProtonLoader } from '@proton/atoms/ProtonLoader/ProtonLoader';
+import { TextLoader } from '@proton/components';
+import { getAppName } from '@proton/shared/lib/apps/helper';
+import { APPS } from '@proton/shared/lib/constants';
+import clsx from '@proton/utils/clsx';
+
+interface Props {
+ text?: string;
+ loaderClassName?: string;
+}
+
+const PrivateAppLoaderPage = ({ text, loaderClassName = '' }: Props) => {
+ const appName = getAppName(APPS.PROTONACCOUNT);
+ const textToDisplay = text || c('Info').t`Loading ${appName}`;
+
+ return (
+ | undefined;
-
-const handlePreload = () => {
- if (!cryptoWorkerPromise) {
- cryptoWorkerPromise = loadCrypto({
- appName: APPS.PROTONACCOUNT,
- unleashClient: undefined,
- });
- }
-};
-
-let started = false;
-
-const handleStartFlags = () => {
- if (!started) {
- const unleashClient = extraThunkArguments.unleashClient;
- unleashClient.start().catch(noop);
- started = true;
- }
-};
-
-// Feature flags are not needed in these routes. That allows us to prevent creating an unauth session if only these routes would be requested.
-const UnleashFlagStarter = ({ location }: { location: H.Location }) => {
- useEffect(() => {
- if (![SSO_PATHS.SWITCH].some((pathname) => pathname === location.pathname)) {
- handleStartFlags();
- }
- }, [location.pathname]);
- return null;
-};
-
-const handlePreSubmit = async () => {
- handlePreload();
- // The crypto worked must be loaded when signup/login/reset are performed
- await cryptoWorkerPromise;
-};
-
-const handleStartAuth = () => {
- return extraThunkArguments.unauthenticatedApi.startUnAuthFlow();
-};
-
-const completeResult: OnLoginCallbackResult = { state: 'complete' };
-const inputResult: OnLoginCallbackResult = { state: 'input' };
-
-const getClientType = (toApp: APP_NAMES | undefined) => {
- if (getIsVPNApp(toApp)) {
- return CLIENT_TYPES.VPN;
- }
- if (getIsPassApp(toApp)) {
- return CLIENT_TYPES.PASS;
- }
- return CLIENT_TYPES.MAIL;
-};
-
-const loginPaths = [
- SSO_PATHS.LOGIN,
- SSO_PATHS.MAIL_SIGN_IN,
- SSO_PATHS.CALENDAR_SIGN_IN,
- SSO_PATHS.DRIVE_SIGN_IN,
- SSO_PATHS.DOCS_SIGN_IN,
- SSO_PATHS.VPN_SIGN_IN,
- SSO_PATHS.PASS_SIGN_IN,
- SSO_PATHS.WALLET_SIGN_IN,
- SSO_PATHS.LUMO_SIGN_IN,
- SSO_PATHS.MEET_SIGN_IN,
-];
-
-const ephemeralLoginPaths = [SSO_PATHS.APP_SWITCHER, SSO_PATHS.REAUTH];
-
-const BasePublicApp = ({ sessions }: { sessions: ReturnType['sessions'] }) => {
- const normalApi = useApi();
- const silentApi = useSilentApi();
- const history = useHistory();
- const location = useLocationWithoutLocale<{ from?: H.Location }>();
- const [, setState] = useState(1);
- const refresh = useCallback(() => setState((i) => i + 1), []);
- const [forkState, setForkState] = useState(readForkState);
- const [activeSessions, setActiveSessions] = useState();
- const [maybeHasActiveSessions] = useState(sessions.initialSessionsLength);
- const [locationState, setLocationState] = useState(null);
-
- const searchParams = new URLSearchParams(location.search);
-
- const [
- {
- productParams: { product: maybeQueryAppIntent, productParam },
- initialSearchParams,
- maybeLocalRedirect,
- },
- ] = useState(() => {
- const productParams = getProductParamsFromLocation(location, searchParams);
- return {
- productParams,
- initialLocation: location,
- initialSearchParams: searchParams,
- maybeLocalRedirect: getLocalRedirect(location, productParams),
- };
- });
-
- const [hasInitialSessionBlockingLoading, setHasInitialSessionBlockingLoading] = useState(() => {
- return (
- maybeHasActiveSessions &&
- ((maybeLocalRedirect && maybeLocalRedirect.type !== 'prompt-login') ||
- location.pathname === '/' ||
- [...loginPaths, ...ephemeralLoginPaths].some((pathname) => location.pathname === pathname))
- );
- });
-
- const maybePreAppIntent = getPreAppIntent({
- forkState,
- localRedirect: maybeLocalRedirect,
- queryAppIntent: maybeQueryAppIntent,
- });
- const paths = getPaths({
- maybeLocalePrefix: location.localePrefix,
- forkState,
- app: maybePreAppIntent,
- productParam,
- searchParams: initialSearchParams,
- });
-
- const handleLoginResult = (result: LoginResult) => {
- if (result.type === 'done') {
- const url = result.payload.url;
- replaceUrl(url.toString());
- return completeResult;
- }
- setLocationState(result);
- if (result.location) {
- history.push(result.location);
- }
- const payload = result.payload;
- if (payload && 'session' in payload) {
- setActiveSessions((previousSessions) => {
- return addSession(previousSessions, payload.session);
- });
- }
- return inputResult;
- };
-
- const handleLogin: OnLoginCallback = async (session) => {
- const result = await getLoginResult({
- api: silentApi,
- session,
- localRedirect: maybeLocalRedirect,
- initialSearchParams,
- forkState,
- preAppIntent: maybePreAppIntent,
- paths,
- });
- return handleLoginResult(result);
- };
-
- const handleInvalidFork = () => {
- history.replace(paths.login);
- };
-
- const handleGetActiveSessions = async () => {
- const result = await getActiveSessions({
- api: silentApi,
- localID: getLocalIDForkSearchParameter(initialSearchParams),
- email: getEmailSessionForkSearchParameter(initialSearchParams),
- });
- setActiveSessions(result.sessions);
- return result;
- };
-
- const handleActiveSessions = async (
- sessionsResult: GetActiveSessionsResult,
- newForkState = forkState
- ): Promise => {
- const maybePreAppIntent = getPreAppIntent({
- forkState: newForkState,
- localRedirect: maybeLocalRedirect,
- queryAppIntent: maybeQueryAppIntent,
- });
- const paths = getPaths({
- maybeLocalePrefix: location.localePrefix,
- forkState: newForkState,
- app: maybePreAppIntent,
- productParam,
- searchParams: initialSearchParams,
- });
- const result = await getActiveSessionLoginResult({
- api: silentApi,
- sessionsResult,
- forkState: newForkState,
- localRedirect: maybeLocalRedirect,
- initialSearchParams,
- preAppIntent: maybePreAppIntent,
- paths,
- });
- setForkState(newForkState);
- setActiveSessions(sessionsResult.sessions);
- return handleLoginResult(result);
- };
-
- const handleAddAccount = () => {
- history.push(paths.login);
- };
-
- const toOAuthName = (() => {
- if (forkState?.type === SSOType.OAuth) {
- return forkState.payload.oauthData.clientInfo.Name;
- }
- if (locationState?.type === 'confirm-oauth') {
- return locationState.payload.data.payload.oauthData.clientInfo.Name;
- }
- })();
-
- const toInternalAppName = maybePreAppIntent && getToAppName(maybePreAppIntent);
- const toAppName = toOAuthName || toInternalAppName;
- const clientType = getClientType(maybePreAppIntent);
- const setupVPN = true; /* True until apps have been deployed to support key-less accounts*/
-
- const theme = getThemeFromLocation(location, searchParams);
- const loader = theme ? (
-
-
- ) : (
-
-
- {
- const result = await handleOAuthFork({ api: silentApi, paths });
- if (result.type === 'invalid') {
- handleInvalidFork();
- return;
- }
- if (result.type === 'switch') {
- await handleActiveSessions(result.payload.activeSessionsResult, result.payload.fork);
- return;
- }
- await handleLoginResult(result.payload);
- return;
- }}
- >
- {loader}
-
-
-
- {
- const result = await handleProtonFork({ api: silentApi, paths });
- if (result.type === 'invalid') {
- handleInvalidFork();
- return;
- }
- if (result.type === 'switch') {
- await handleActiveSessions(result.payload.activeSessionsResult, result.payload.fork);
- return;
- }
- await handleLoginResult(result.payload);
- return;
- }}
- >
- {loader}
-
-
-
- {
- const result = await handleDesktopFork({ api: silentApi, paths });
- await handleActiveSessions(result.payload.activeSessionsResult, result.payload.fork);
- }}
- >
- {loader}
-
-
-
-
- {
- const state: OAuthPartnersCallbackState = {
- type: 'callback',
- payload: {
- token,
- uid,
- },
- };
- const loginLocationState: LoginLocationState = {
- type: 'oauth-partners',
- payload: state,
- location: SSO_PATHS.OAUTH_PARTNERS,
- };
- try {
- handleLoginResult(loginLocationState);
- } catch (error) {}
- }}
- onLogin={({ username, token, flow }) => {
- const state: LoginContainerState = {
- authTypeData: {
- type: AuthType.ExternalSSO,
- },
- externalSSO: {
- token,
- flow,
- },
- username,
- };
- history.replace(paths.login, state);
- }}
- >
- {loader}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- history.replace({ pathname: `${UNAUTHENTICATED_ROUTES.UNSUBSCRIBE}`, hash: jwt });
- }}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {locationState?.type === 'auth-ext' && (
-
-
- )}
- {locationState?.type === 'auth-desktop' && (
-
-
- )}
- {locationState?.type === 'oauth-partners' && (
-
-
- {
- if (sessions?.sessions) {
- setActiveSessions(sessions.sessions);
- }
- const state: LoginContainerState | undefined = email
- ? {
- username: email,
- }
- : undefined;
- history.replace(paths.login, state);
- }}
- toApp={maybePreAppIntent}
- productParam={productParam}
- />
-
-
- )}
-
-
-
-
- {hasInitialSessionBlockingLoading && (
-
- {
- const activeSessionsResult = await handleGetActiveSessions();
- const result = await handleActiveSessions(activeSessionsResult, undefined);
- setHasInitialSessionBlockingLoading(result === completeResult);
- }}
- >
- {loader}
-
-
- )}
-
-
-
-
-
-
-
-
-
- {
- history.replace(
- (activeSessions || []).length >= 1
- ? SSO_PATHS.SWITCH
- : paths.login
- );
- }}
- />
-
-
-
-
-
-
-
-
- {
- history.replace(paths.login);
- }}
- />
-
-
-
- history.push(paths.login) : undefined
- }
- onPreSubmit={handlePreSubmit}
- onStartAuth={handleStartAuth}
- />
-
-
- history.push(paths.login) : undefined
- }
- onPreSubmit={handlePreSubmit}
- onStartAuth={handleStartAuth}
- />
-
-
-
-
- history.replace(
- getSanitizedLocationDescriptorObject({
- pathname: paths.signup,
- search: '?mode=sps',
- state: { invite: inviteData },
- })
- )
- }
- onInvalid={() => history.push(paths.signup)}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- history.push(SSO_PATHS.SWITCH)
- : undefined
- }
- setupVPN={setupVPN}
- paths={paths}
- onPreSubmit={handlePreSubmit}
- onStartAuth={handleStartAuth}
- />
-
-
- {locationState?.type === 'confirm-oauth' && (
-
-
- {
- if (locationState?.type !== 'confirm-oauth') {
- throw new Error('Missing state');
- }
- const uidApi = getUIDApi(
- locationState.payload.session.data.UID,
- normalApi
- );
- const url = await produceOAuthFork({
- api: uidApi,
- oauthData:
- locationState.payload.data.payload.oauthData,
- });
- replaceUrl(url);
- }}
- onCancel={() => {
- // Force a hard refresh to get active sessions to refresh when signing up
- window.location.pathname = SSO_PATHS.SWITCH;
- }}
- />
-
-
- )}
- {locationState?.type === 'reauth' && (
-
-
- {
- history.push(SSO_PATHS.SWITCH);
- }}
- paths={paths}
- onLogin={handleLogin}
- state={locationState.payload}
- onPreSubmit={handlePreSubmit}
- />
-
-
- )}
- {locationState?.type === 'app-switcher' && (
-
-
- {
- history.push(SSO_PATHS.SWITCH);
- }}
- state={locationState.payload}
- />
-
-
- )}
-
-
-
-
-
-
-
-
-
- );
-};
-
-const PublicApp = () => {
- const { store, authentication, api, sessions } = useInstance(bootstrapApp);
-
- return (
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default PublicApp;
diff --git a/applications/account/src/app/content/PublicAppEntry.tsx b/applications/account/src/app/content/PublicAppEntry.tsx
new file mode 100644
index 00000000000..8d5898221d3
--- /dev/null
+++ b/applications/account/src/app/content/PublicAppEntry.tsx
@@ -0,0 +1,79 @@
+import { BrowserRouter } from 'react-router-dom';
+
+import { registerSessionListener } from '@proton/account/accountSessions/registerSessionListener';
+import { writeAccountSessions } from '@proton/account/accountSessions/storage';
+import { createAuthentication, createUnleash, init } from '@proton/account/bootstrap';
+import ApiProvider from '@proton/components/containers/api/ApiProvider';
+import ErrorBoundary from '@proton/components/containers/app/ErrorBoundary';
+import ProtonApp from '@proton/components/containers/app/ProtonApp';
+import StandardErrorPage from '@proton/components/containers/app/StandardErrorPage';
+import AuthenticationProvider from '@proton/components/containers/authentication/Provider';
+import ModalsChildren from '@proton/components/containers/modals/Children';
+import NotificationsChildren from '@proton/components/containers/notifications/Children';
+import { initMainHost } from '@proton/cross-storage/lib';
+import useInstance from '@proton/hooks/useInstance';
+import { ProtonStoreProvider } from '@proton/redux-shared-store';
+import createApi from '@proton/shared/lib/api/createApi';
+import { handleLogoutFromURL } from '@proton/shared/lib/authentication/handleLogoutFromURL';
+import { getPersistedSessions } from '@proton/shared/lib/authentication/persistedSessionStorage';
+import { initElectronClassnames } from '@proton/shared/lib/helpers/initElectronClassnames';
+import { initSafariFontFixClassnames } from '@proton/shared/lib/helpers/initSafariFontFixClassnames';
+import { telemetry } from '@proton/shared/lib/telemetry';
+import { createUnauthenticatedApi } from '@proton/shared/lib/unauthApi/unAuthenticatedApi';
+
+import config from '../config';
+import locales from '../locales';
+import { extendStore, setupStore } from '../store/public-store';
+import { PublicAppInitial } from './PublicAppInitial';
+import { PublicAppThemeProvider } from './theme/PublicAppThemeProvider';
+
+const bootstrapApp = () => {
+ const api = createApi({ config });
+ const initialSessions = getPersistedSessions();
+ const initialSessionsLength = initialSessions.length;
+ writeAccountSessions(initialSessions);
+ registerSessionListener({ type: 'all' });
+ handleLogoutFromURL({ api });
+ const authentication = createAuthentication({ initialAuth: false });
+ init({ config, authentication, locales });
+ telemetry.init({ config, uid: authentication.UID });
+ initMainHost();
+ initElectronClassnames();
+ initSafariFontFixClassnames();
+ const unauthenticatedApi = createUnauthenticatedApi(api);
+ const unleashClient = createUnleash({ api: unauthenticatedApi.apiCallback });
+ extendStore({ config, api, authentication, unleashClient, unauthenticatedApi });
+ const store = setupStore();
+ return {
+ authentication,
+ store,
+ api,
+ sessions: {
+ initialSessionsLength,
+ },
+ };
+};
+
+const PublicApp = () => {
+ const { store, authentication, api, sessions } = useInstance(bootstrapApp);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default PublicApp;
diff --git a/applications/account/src/app/content/PublicAppInitial.tsx b/applications/account/src/app/content/PublicAppInitial.tsx
new file mode 100644
index 00000000000..520d1282ea2
--- /dev/null
+++ b/applications/account/src/app/content/PublicAppInitial.tsx
@@ -0,0 +1,283 @@
+import { Suspense, lazy, useState } from 'react';
+import { Route, Switch, useHistory } from 'react-router-dom';
+
+import type * as H from 'history';
+
+import type { OnLoginCallback, OnLoginCallbackResult } from '@proton/components/containers/app/interface';
+import { useSilentApi } from '@proton/components/hooks/useSilentApi';
+import {
+ getEmailSessionForkSearchParameter,
+ getLocalIDForkSearchParameter,
+} from '@proton/shared/lib/authentication/fork';
+import type { ActiveSession, GetActiveSessionsResult } from '@proton/shared/lib/authentication/persistedSessionHelper';
+import { getActiveSessions } from '@proton/shared/lib/authentication/persistedSessionHelper';
+import { SSO_PATHS } from '@proton/shared/lib/constants';
+import { replaceUrl } from '@proton/shared/lib/helpers/browser';
+
+import { readForkState } from '../public/persistedForkState';
+import { type ProductParams, getProductParams } from '../signup/searchParams';
+import useLocationWithoutLocale from '../useLocationWithoutLocale';
+import AccountEffect from './AccountAutoLogin';
+import AccountLoaderPage from './AccountLoaderPage';
+import type { PublicAppInteractiveProps } from './PublicAppInteractive';
+import type { ProduceForkData } from './actions/forkInterface';
+import { getActiveSessionLoginResult } from './actions/getActiveSessionLoginResult';
+import { getLoginResult } from './actions/getLoginResult';
+import type { LoginLocationState, LoginResult } from './actions/interface';
+import { handleDesktopFork } from './fork/handleDesktopFork';
+import { handleOAuthFork } from './fork/handleOAuthFork';
+import { handleProtonFork } from './fork/handleProtonFork';
+import { getPaths, getPreAppIntent } from './helper';
+import { getLocalRedirect } from './localRedirect';
+import { addSession } from './session';
+
+const LazyPublicApp = lazy(
+ () =>
+ import(
+ /* webpackChunkName: "PublicAppInteractive" */
+ /* webpackPrefetch: true */
+ /* webpackPreload: true */
+ /* webpackFetchPriority: "high" */
+ './PublicAppInteractive'
+ )
+);
+
+export const getProductParamsFromLocation = (location: H.Location, searchParams: URLSearchParams): ProductParams => {
+ const { product, productParam } = getProductParams(location.pathname, searchParams);
+ return { product, productParam };
+};
+
+const completeResult: OnLoginCallbackResult = { state: 'complete' };
+const inputResult: OnLoginCallbackResult = { state: 'input' };
+
+const loginPaths = [
+ SSO_PATHS.LOGIN,
+ SSO_PATHS.MAIL_SIGN_IN,
+ SSO_PATHS.CALENDAR_SIGN_IN,
+ SSO_PATHS.DRIVE_SIGN_IN,
+ SSO_PATHS.DOCS_SIGN_IN,
+ SSO_PATHS.VPN_SIGN_IN,
+ SSO_PATHS.PASS_SIGN_IN,
+ SSO_PATHS.WALLET_SIGN_IN,
+ SSO_PATHS.LUMO_SIGN_IN,
+ SSO_PATHS.MEET_SIGN_IN,
+];
+
+const ephemeralLoginPaths = [SSO_PATHS.APP_SWITCHER, SSO_PATHS.REAUTH];
+
+export const PublicAppInitial = ({ sessions }: { sessions: { initialSessionsLength: number } }) => {
+ const silentApi = useSilentApi();
+ const history = useHistory();
+ const location = useLocationWithoutLocale<{ from?: H.Location }>();
+ const [forkState, setForkState] = useState(readForkState);
+ const [activeSessions, setActiveSessions] = useState();
+ const [maybeHasActiveSessions] = useState(Boolean(sessions.initialSessionsLength));
+ const [locationState, setLocationState] = useState(null);
+
+ const searchParams = new URLSearchParams(location.search);
+
+ const [
+ {
+ productParams: { product: maybeQueryAppIntent, productParam },
+ initialSearchParams,
+ maybeLocalRedirect,
+ },
+ ] = useState(() => {
+ const productParams = getProductParamsFromLocation(location, searchParams);
+ return {
+ productParams,
+ initialLocation: location,
+ initialSearchParams: searchParams,
+ maybeLocalRedirect: getLocalRedirect(location, productParams),
+ };
+ });
+
+ const [hasInitialSessionBlockingLoading, setHasInitialSessionBlockingLoading] = useState(() => {
+ return (
+ maybeHasActiveSessions &&
+ ((maybeLocalRedirect && maybeLocalRedirect.type !== 'prompt-login') ||
+ location.pathname === '/' ||
+ [...loginPaths, ...ephemeralLoginPaths].some((pathname) => location.pathname === pathname))
+ );
+ });
+
+ const handleLoginResult = (result: LoginResult) => {
+ if (result.type === 'done') {
+ const url = result.payload.url;
+ replaceUrl(url.toString());
+ return completeResult;
+ }
+ setLocationState(result);
+ if (result.location) {
+ history.push(result.location);
+ }
+ const payload = result.payload;
+ if (payload && 'session' in payload) {
+ setActiveSessions((previousSessions) => {
+ return addSession(previousSessions, payload.session);
+ });
+ }
+ return inputResult;
+ };
+
+ const maybePreAppIntent = getPreAppIntent({
+ forkState,
+ localRedirect: maybeLocalRedirect,
+ queryAppIntent: maybeQueryAppIntent,
+ });
+ const paths = getPaths({
+ maybeLocalePrefix: location.localePrefix,
+ forkState,
+ app: maybePreAppIntent,
+ productParam,
+ searchParams: initialSearchParams,
+ });
+
+ const handleLogin: OnLoginCallback = async (session) => {
+ const result = await getLoginResult({
+ api: silentApi,
+ session,
+ localRedirect: maybeLocalRedirect,
+ initialSearchParams,
+ forkState,
+ preAppIntent: maybePreAppIntent,
+ paths,
+ });
+ return handleLoginResult(result);
+ };
+
+ const handleGetActiveSessions = async () => {
+ const result = await getActiveSessions({
+ api: silentApi,
+ localID: getLocalIDForkSearchParameter(initialSearchParams),
+ email: getEmailSessionForkSearchParameter(initialSearchParams),
+ });
+ setActiveSessions(result.sessions);
+ return result;
+ };
+
+ const handleActiveSessions = async (
+ sessionsResult: GetActiveSessionsResult,
+ newForkState = forkState
+ ): Promise => {
+ const maybePreAppIntent = getPreAppIntent({
+ forkState: newForkState,
+ localRedirect: maybeLocalRedirect,
+ queryAppIntent: maybeQueryAppIntent,
+ });
+ const paths = getPaths({
+ maybeLocalePrefix: location.localePrefix,
+ forkState: newForkState,
+ app: maybePreAppIntent,
+ productParam,
+ searchParams: initialSearchParams,
+ });
+ const result = await getActiveSessionLoginResult({
+ api: silentApi,
+ sessionsResult,
+ forkState: newForkState,
+ localRedirect: maybeLocalRedirect,
+ initialSearchParams,
+ preAppIntent: maybePreAppIntent,
+ paths,
+ });
+ setForkState(newForkState);
+ setActiveSessions(sessionsResult.sessions);
+ return handleLoginResult(result);
+ };
+
+ const hasBackToSwitch = activeSessions === undefined ? maybeHasActiveSessions : activeSessions.length >= 1;
+
+ const loader = {
+ const activeSessionsResult = await handleGetActiveSessions();
+ const result = await handleActiveSessions(activeSessionsResult, undefined);
+ setHasInitialSessionBlockingLoading(result === completeResult);
+ }}
+ >
+ {loader}
+
+ ) : null;
+
+ const props: PublicAppInteractiveProps = {
+ loader,
+ location,
+ locationState,
+ handleLoginResult,
+ hasBackToSwitch,
+ handleLogin,
+ handleGetActiveSessions,
+ activeSessions,
+ blockingLoginEffect,
+ paths,
+ maybePreAppIntent,
+ forkState,
+ productParam,
+ searchParams,
+ initialSearchParams,
+ setActiveSessions,
+ initialSessionsLength: sessions.initialSessionsLength,
+ loginPaths,
+ };
+
+ return (
+
+
+ {
+ const result = await handleOAuthFork({ api: silentApi, paths });
+ if (result.type === 'invalid') {
+ history.replace(paths.login);
+ return;
+ }
+ if (result.type === 'switch') {
+ await handleActiveSessions(result.payload.activeSessionsResult, result.payload.fork);
+ return;
+ }
+ handleLoginResult(result.payload);
+ return;
+ }}
+ >
+ {loader}
+
+
+
+ {
+ const result = await handleProtonFork({ api: silentApi, paths });
+ if (result.type === 'invalid') {
+ history.replace(paths.login);
+ return;
+ }
+ if (result.type === 'switch') {
+ await handleActiveSessions(result.payload.activeSessionsResult, result.payload.fork);
+ return;
+ }
+ handleLoginResult(result.payload);
+ return;
+ }}
+ >
+ {loader}
+
+
+
+ {
+ const result = await handleDesktopFork({ api: silentApi, paths });
+ await handleActiveSessions(result.payload.activeSessionsResult, result.payload.fork);
+ }}
+ >
+ {loader}
+
+
+
+
+
+
+
+ );
+};
diff --git a/applications/account/src/app/content/PublicAppInteractive.tsx b/applications/account/src/app/content/PublicAppInteractive.tsx
new file mode 100644
index 00000000000..ad33906b7fa
--- /dev/null
+++ b/applications/account/src/app/content/PublicAppInteractive.tsx
@@ -0,0 +1,597 @@
+import { type Dispatch, type ReactNode, type SetStateAction, useCallback, useEffect, useState } from 'react';
+import { Redirect, Route, Switch, useHistory } from 'react-router-dom';
+
+import type * as H from 'history';
+
+import { loadCrypto } from '@proton/account/bootstrap';
+import UnauthenticatedApiProvider from '@proton/components/containers/api/UnauthenticatedApiProvider';
+import type { OnLoginCallback } from '@proton/components/containers/app/interface';
+import UnAuthenticated from '@proton/components/containers/authentication/UnAuthenticated';
+import ForceRefreshContext from '@proton/components/containers/forceRefresh/context';
+import { AuthType } from '@proton/components/containers/login/interface';
+import PublicAppSetup from '@proton/components/containers/publicAppSetup/PublicAppSetup';
+import useApi from '@proton/components/hooks/useApi';
+import { getUIDApi } from '@proton/shared/lib/api/helpers/customConfig';
+import type { ProductParam } from '@proton/shared/lib/apps/product';
+import { getIsPassApp, getIsVPNApp, getToAppName } from '@proton/shared/lib/authentication/apps';
+import { produceOAuthFork } from '@proton/shared/lib/authentication/fork';
+import type { ActiveSession, GetActiveSessionsResult } from '@proton/shared/lib/authentication/persistedSessionHelper';
+import { APPS, type APP_NAMES, CLIENT_TYPES, SSO_PATHS } from '@proton/shared/lib/constants';
+import { replaceUrl } from '@proton/shared/lib/helpers/browser';
+import { FlagProvider } from '@proton/unleash';
+import noop from '@proton/utils/noop';
+
+import forgotUsernamePage from '../../pages/forgot-username';
+import resetPasswordPage from '../../pages/reset-password';
+import locales from '../locales';
+import LoginContainer, { type LoginContainerState } from '../login/LoginContainer';
+import { getLoginMeta } from '../login/loginPagesJson';
+import AppSwitcherContainer from '../public/AppSwitcherContainer';
+import AuthDesktop from '../public/AuthDesktop';
+import AuthExtension from '../public/AuthExtension';
+import CallScheduledPage from '../public/CallScheduledPage';
+import CloseTicketContainer from '../public/CloseTicketContainer';
+import DisableAccountContainer from '../public/DisableAccountContainer';
+import EmailForwardingContainer, { EmailForwardingRequest } from '../public/EmailForwardingContainer';
+import EmailUnsubscribeContainer from '../public/EmailUnsubscribeContainer';
+import ForgotUsernameContainer from '../public/ForgotUsernameContainer';
+import GroupInviteContainer, { GroupInviteRequest } from '../public/GroupInviteContainer';
+import GroupMembershipsContainer from '../public/GroupMembershipsContainer';
+import InboxDesktopFreeTrialEnded from '../public/InboxDesktopFreeTrialEnded';
+import JoinMagicLinkContainer from '../public/JoinMagicLinkContainer';
+import OAuthConfirmForkContainer from '../public/OAuthConfirmForkContainer';
+import OAuthPartnersContainer, { type OAuthPartnersCallbackState } from '../public/OAuthPartnersContainer';
+import ReAuthContainer from '../public/ReAuthContainer';
+import RemoveEmailContainer from '../public/RemoveEmailContainer';
+import SigninHelpContainer from '../public/SigninHelpContainer';
+import SwitchAccountContainer from '../public/SwitchAccountContainer';
+import VerifyEmailContainer from '../public/VerifyEmailContainer';
+import SignInWithAnotherDeviceContainer from '../public/signInWithAnotherDevice/SignInWithAnotherDeviceContainer';
+import ResetPasswordContainer from '../reset/ResetPasswordContainer';
+import SignupInviteContainer from '../signup/SignupInviteContainer';
+import { getSignupMeta } from '../signup/signupPagesJson';
+import SingleSignupContainer from '../single-signup/SingleSignupContainer';
+import { extraThunkArguments } from '../store/public-thunk';
+import type useLocationWithoutLocale from '../useLocationWithoutLocale';
+import AccountPublicApp from './AccountPublicApp';
+import ExternalSSOConsumer from './ExternalSSOConsumer';
+import SingleSignupSwitchContainer from './SingleSignupSwitchContainer';
+import { type ProduceForkData, SSOType } from './actions/forkInterface';
+import { getSanitizedLocationDescriptorObject } from './actions/getSanitizedLocationDescriptorObject';
+import type { LoginLocationState, LoginResult } from './actions/interface';
+import { type Paths, UNAUTHENTICATED_ROUTES } from './helper';
+
+let cryptoWorkerPromise: Promise | undefined;
+
+const handlePreload = () => {
+ if (!cryptoWorkerPromise) {
+ cryptoWorkerPromise = loadCrypto({
+ appName: APPS.PROTONACCOUNT,
+ unleashClient: undefined,
+ });
+ }
+};
+
+let started = false;
+
+const handleStartFlags = () => {
+ if (!started) {
+ const unleashClient = extraThunkArguments.unleashClient;
+ unleashClient.start().catch(noop);
+ started = true;
+ }
+};
+
+// Feature flags are not needed in these routes. That allows us to prevent creating an unauth session if only these routes would be requested.
+const UnleashFlagStarter = ({ location }: { location: H.Location }) => {
+ useEffect(() => {
+ if (![SSO_PATHS.SWITCH].some((pathname) => pathname === location.pathname)) {
+ handleStartFlags();
+ }
+ }, [location.pathname]);
+ return null;
+};
+
+const handlePreSubmit = async () => {
+ handlePreload();
+ // The crypto worked must be loaded when signup/login/reset are performed
+ await cryptoWorkerPromise;
+};
+
+const handleStartAuth = () => {
+ return extraThunkArguments.unauthenticatedApi.startUnAuthFlow();
+};
+
+const getClientType = (toApp: APP_NAMES | undefined) => {
+ if (getIsVPNApp(toApp)) {
+ return CLIENT_TYPES.VPN;
+ }
+ if (getIsPassApp(toApp)) {
+ return CLIENT_TYPES.PASS;
+ }
+ return CLIENT_TYPES.MAIL;
+};
+
+export interface PublicAppInteractiveProps {
+ loader: ReactNode;
+ location: ReturnType;
+ handleLogin: OnLoginCallback;
+ handleLoginResult: (result: LoginResult) => void;
+ handleGetActiveSessions: () => Promise;
+ locationState: LoginLocationState | null;
+ activeSessions: ActiveSession[] | undefined;
+ hasBackToSwitch: boolean;
+ paths: Paths;
+ blockingLoginEffect: ReactNode | null;
+ maybePreAppIntent: APP_NAMES | undefined;
+ forkState: ProduceForkData | null;
+ productParam: ProductParam;
+ searchParams: URLSearchParams;
+ initialSearchParams: URLSearchParams;
+ setActiveSessions: Dispatch>;
+ initialSessionsLength: number;
+ loginPaths: string[];
+}
+
+const PublicAppInteractive = ({
+ loader,
+ location,
+ handleLogin,
+ handleLoginResult,
+ handleGetActiveSessions,
+ locationState,
+ activeSessions,
+ hasBackToSwitch,
+ paths,
+ blockingLoginEffect,
+ maybePreAppIntent,
+ forkState,
+ productParam,
+ searchParams,
+ initialSearchParams,
+ setActiveSessions,
+ initialSessionsLength,
+ loginPaths,
+}: PublicAppInteractiveProps) => {
+ const normalApi = useApi();
+ const history = useHistory();
+ const [, setState] = useState(1);
+ const refresh = useCallback(() => setState((i) => i + 1), []);
+
+ const handleAddAccount = () => {
+ history.push(paths.login);
+ };
+
+ const toOAuthName = (() => {
+ if (forkState?.type === SSOType.OAuth) {
+ return forkState.payload.oauthData.clientInfo.Name;
+ }
+ if (locationState?.type === 'confirm-oauth') {
+ return locationState.payload.data.payload.oauthData.clientInfo.Name;
+ }
+ })();
+
+ const toInternalAppName = maybePreAppIntent && getToAppName(maybePreAppIntent);
+
+ const toAppName = toOAuthName || toInternalAppName;
+ const clientType = getClientType(maybePreAppIntent);
+ const setupVPN = true; /* True until apps have been deployed to support key-less accounts*/
+
+ return (
+
+
+
+ {
+ const state: OAuthPartnersCallbackState = {
+ type: 'callback',
+ payload: {
+ token,
+ uid,
+ },
+ };
+ const loginLocationState: LoginLocationState = {
+ type: 'oauth-partners',
+ payload: state,
+ location: SSO_PATHS.OAUTH_PARTNERS,
+ };
+ try {
+ handleLoginResult(loginLocationState);
+ } catch (error) {}
+ }}
+ onLogin={({ username, token, flow }) => {
+ const state: LoginContainerState = {
+ authTypeData: {
+ type: AuthType.ExternalSSO,
+ },
+ externalSSO: {
+ token,
+ flow,
+ },
+ username,
+ };
+ history.replace(paths.login, state);
+ }}
+ >
+ {loader}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ history.replace({ pathname: `${UNAUTHENTICATED_ROUTES.UNSUBSCRIBE}`, hash: jwt });
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {locationState?.type === 'auth-ext' && (
+
+
+ )}
+ {locationState?.type === 'auth-desktop' && (
+
+
+ )}
+ {locationState?.type === 'oauth-partners' && (
+
+
+ {
+ if (sessions?.sessions) {
+ setActiveSessions(sessions.sessions);
+ }
+ const state: LoginContainerState | undefined = email
+ ? {
+ username: email,
+ }
+ : undefined;
+ history.replace(paths.login, state);
+ }}
+ toApp={maybePreAppIntent}
+ productParam={productParam}
+ />
+
+
+ )}
+
+
+
+
+ {blockingLoginEffect && {blockingLoginEffect} }
+
+
+
+
+
+
+
+
+
+ {
+ history.replace(
+ (activeSessions || []).length >= 1
+ ? SSO_PATHS.SWITCH
+ : paths.login
+ );
+ }}
+ />
+
+
+
+
+
+
+
+
+ {
+ history.replace(paths.login);
+ }}
+ />
+
+
+
+ history.push(paths.login) : undefined}
+ onPreSubmit={handlePreSubmit}
+ onStartAuth={handleStartAuth}
+ />
+
+
+ history.push(paths.login) : undefined}
+ onPreSubmit={handlePreSubmit}
+ onStartAuth={handleStartAuth}
+ />
+
+
+
+
+ history.replace(
+ getSanitizedLocationDescriptorObject({
+ pathname: paths.signup,
+ search: '?mode=sps',
+ state: { invite: inviteData },
+ })
+ )
+ }
+ onInvalid={() => history.push(paths.signup)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ history.push(SSO_PATHS.SWITCH)
+ : undefined
+ }
+ setupVPN={setupVPN}
+ paths={paths}
+ onPreSubmit={handlePreSubmit}
+ onStartAuth={handleStartAuth}
+ />
+
+
+ {locationState?.type === 'confirm-oauth' && (
+
+
+ {
+ if (locationState?.type !== 'confirm-oauth') {
+ throw new Error('Missing state');
+ }
+ const uidApi = getUIDApi(
+ locationState.payload.session.data.UID,
+ normalApi
+ );
+ const url = await produceOAuthFork({
+ api: uidApi,
+ oauthData: locationState.payload.data.payload.oauthData,
+ });
+ replaceUrl(url);
+ }}
+ onCancel={() => {
+ // Force a hard refresh to get active sessions to refresh when signing up
+ window.location.pathname = SSO_PATHS.SWITCH;
+ }}
+ />
+
+
+ )}
+ {locationState?.type === 'reauth' && (
+
+
+ {
+ history.push(SSO_PATHS.SWITCH);
+ }}
+ paths={paths}
+ onLogin={handleLogin}
+ state={locationState.payload}
+ onPreSubmit={handlePreSubmit}
+ />
+
+
+ )}
+ {locationState?.type === 'app-switcher' && (
+
+
+ {
+ history.push(SSO_PATHS.SWITCH);
+ }}
+ state={locationState.payload}
+ />
+
+
+ )}
+
+
+
+
+
+
+
+
+ );
+};
+
+export default PublicAppInteractive;
diff --git a/applications/account/src/app/content/SingleSignupSwitchContainer.tsx b/applications/account/src/app/content/SingleSignupSwitchContainer.tsx
index 8d883397f4b..06b693c25f9 100644
--- a/applications/account/src/app/content/SingleSignupSwitchContainer.tsx
+++ b/applications/account/src/app/content/SingleSignupSwitchContainer.tsx
@@ -59,6 +59,7 @@ const SingleSignupSwitchContainer = ({
location.pathname === SSO_PATHS.START ||
location.pathname === SSO_PATHS.FIRST_EMAIL ||
location.pathname === SSO_PATHS.MEET_SIGNUP ||
+ location.pathname === SSO_PATHS.GREENLAND_SIGNUP ||
isReferral;
if (renderContextSignup) {
diff --git a/applications/account/src/app/content/actions/getActiveSessionLoginResult.ts b/applications/account/src/app/content/actions/getActiveSessionLoginResult.ts
index 06d2c098ec7..a509b99334e 100644
--- a/applications/account/src/app/content/actions/getActiveSessionLoginResult.ts
+++ b/applications/account/src/app/content/actions/getActiveSessionLoginResult.ts
@@ -9,7 +9,7 @@ import { type APP_NAMES, SSO_PATHS } from '@proton/shared/lib/constants';
import type { Api } from '@proton/shared/lib/interfaces';
import type { OAuthPartnersInitiateState } from '../../public/OAuthPartnersContainer';
-import { getReAuthState } from '../../public/ReAuthContainer';
+import { getReAuthState } from '../../public/reauthContainerState';
import type { Paths } from '../helper';
import type { LocalRedirect } from '../localRedirect';
import { type ProduceForkData, SSOType } from './forkInterface';
diff --git a/applications/account/src/app/content/actions/getLoginResult.ts b/applications/account/src/app/content/actions/getLoginResult.ts
index 514635ebca5..4dc872e6bb7 100644
--- a/applications/account/src/app/content/actions/getLoginResult.ts
+++ b/applications/account/src/app/content/actions/getLoginResult.ts
@@ -15,8 +15,8 @@ import { getEncryptedSetupBlob, getRequiresAddressSetup } from '@proton/shared/l
import noop from '@proton/utils/noop';
import type { AppSwitcherState } from '../../public/AppSwitcherContainer';
-import { getReAuthState } from '../../public/ReAuthContainer';
import { getOrganization } from '../../public/organization';
+import { getReAuthState } from '../../public/reauthContainerState';
import type { Paths } from '../helper';
import type { LocalRedirect } from '../localRedirect';
import { type ProduceForkData, SSOType } from './forkInterface';
diff --git a/applications/account/src/app/content/actions/interface.ts b/applications/account/src/app/content/actions/interface.ts
index e24714a14b0..eb60c95b216 100644
--- a/applications/account/src/app/content/actions/interface.ts
+++ b/applications/account/src/app/content/actions/interface.ts
@@ -6,7 +6,7 @@ import type { AppSwitcherState } from '../../public/AppSwitcherContainer';
import type { AuthDesktopState } from '../../public/AuthDesktop';
import type { AuthExtensionState } from '../../public/AuthExtension';
import type { OAuthPartnersCallbackState, OAuthPartnersInitiateState } from '../../public/OAuthPartnersContainer';
-import type { ReAuthState } from '../../public/ReAuthContainer';
+import type { ReAuthState } from '../../public/reauthContainerState';
import type { ProduceForkData, SSOType } from './forkInterface';
type LoginLocationStateData = {
diff --git a/applications/account/src/app/content/bootstrap.ts b/applications/account/src/app/content/bootstrap.ts
index 755cbb0eedc..87aa6c6b392 100644
--- a/applications/account/src/app/content/bootstrap.ts
+++ b/applications/account/src/app/content/bootstrap.ts
@@ -10,8 +10,8 @@ import * as bootstrap from '@proton/account/bootstrap';
import { bootstrapEvent } from '@proton/account/bootstrap/action';
import { coreEventLoopV6 } from '@proton/account/coreEventLoop';
import { getDecryptedPersistedState } from '@proton/account/persist/helper';
-import { createCalendarModelEventManager } from '@proton/calendar';
import { calendarEventLoopV6 } from '@proton/calendar/calendarEventLoop';
+import { createCalendarModelEventManager } from '@proton/calendar/calendarModelEventManager';
import { initMainHost } from '@proton/cross-storage';
import { FeatureCode, fetchFeatures } from '@proton/features';
import { contactEventLoopV6 } from '@proton/mail/store/contactEventLoop';
@@ -27,7 +27,6 @@ import { isElectronMail } from '@proton/shared/lib/helpers/desktop';
import { initElectronClassnames } from '@proton/shared/lib/helpers/initElectronClassnames';
import { initSafariFontFixClassnames } from '@proton/shared/lib/helpers/initSafariFontFixClassnames';
import type { ProtonConfig } from '@proton/shared/lib/interfaces';
-import initLogicalProperties from '@proton/shared/lib/logical/logical';
import { telemetry } from '@proton/shared/lib/telemetry';
import noop from '@proton/utils/noop';
@@ -35,9 +34,6 @@ import locales from '../locales';
import type { AccountState } from '../store/store';
import { extendStore, setupStore } from '../store/store';
-const getAppContainer = () =>
- import(/* webpackChunkName: "MainContainer" */ './SetupMainContainer').then((result) => result.default);
-
export const bootstrapApp = async ({ config, signal }: { config: ProtonConfig; signal?: AbortSignal }) => {
const pathname = window.location.pathname;
const searchParams = new URLSearchParams(window.location.search);
@@ -47,7 +43,6 @@ export const bootstrapApp = async ({ config, signal }: { config: ProtonConfig; s
bootstrap.init({ config, authentication, locales });
initMainHost();
initElectronClassnames();
- initLogicalProperties();
initSafariFontFixClassnames();
startLogoutListener();
@@ -58,7 +53,6 @@ export const bootstrapApp = async ({ config, signal }: { config: ProtonConfig; s
}
const run = async () => {
- const appContainerPromise = getAppContainer();
const sessionResult = await bootstrap.loadSession({ api, authentication, pathname, searchParams });
const history = bootstrap.createHistory({ sessionResult, pathname });
@@ -99,7 +93,7 @@ export const bootstrapApp = async ({ config, signal }: { config: ProtonConfig; s
dispatch(welcomeFlagsActions.initial(userSettings));
const [scopes] = await Promise.all([
- bootstrap.initUser({ appName, user, userSettings }),
+ bootstrap.enableTelemetryBasedOnUserSettings({ userSettings }),
bootstrap.loadLocales({ userSettings, locales }),
]);
@@ -108,8 +102,7 @@ export const bootstrapApp = async ({ config, signal }: { config: ProtonConfig; s
const userPromise = loadUser();
- const [MainContainer, userData] = await Promise.all([
- appContainerPromise,
+ const [userData] = await Promise.all([
userPromise,
bootstrap.loadCrypto({ appName, unleashClient }),
unleashPromise,
@@ -240,7 +233,6 @@ export const bootstrapApp = async ({ config, signal }: { config: ProtonConfig; s
eventManager,
unleashClient,
history,
- MainContainer,
};
};
diff --git a/applications/account/src/app/content/fork/handleDesktopFork.ts b/applications/account/src/app/content/fork/handleDesktopFork.ts
index 3877dc58823..0d966973d21 100644
--- a/applications/account/src/app/content/fork/handleDesktopFork.ts
+++ b/applications/account/src/app/content/fork/handleDesktopFork.ts
@@ -76,6 +76,9 @@ export const handleDesktopFork = async ({ api }: { api: Api; paths: Paths }): Pr
...forkParameters,
localID: undefined,
app: desktopForkParameters.app,
+ // Force reauth for cli-pass
+ // TODO: This can potentially be done for all pass forks, but starting out like this
+ prompt: desktopForkParameters.qrCodePayload.childClientId === 'cli-pass' ? 'login' : forkParameters.prompt,
};
return {
diff --git a/applications/account/src/app/content/routes.ts b/applications/account/src/app/content/routes.ts
index 076f3c8d8d5..4a17798f736 100644
--- a/applications/account/src/app/content/routes.ts
+++ b/applications/account/src/app/content/routes.ts
@@ -29,7 +29,7 @@ export const getRoutes = ({
isSessionRecoveryAvailable,
isReferralProgramEnabled,
recoveryNotification,
- isBreachesAccountDashboardEnabled,
+ isRecoveryContactsEnabled,
showVPNDashboard,
showVPNDashboardVariant,
isUserGroupsFeatureEnabled,
@@ -41,7 +41,6 @@ export const getRoutes = ({
canDisplayPassReports,
memberships,
groups,
- isUserGroupsMembershipFeatureEnabled,
canB2BHidePhotos,
isB2BDrive,
isB2BAuthLogsEnabled,
@@ -61,9 +60,14 @@ export const getRoutes = ({
showPassDashboardVariant,
showDriveDashboard,
showDriveDashboardVariant,
+ showMeetDashboard,
+ showMeetDashboardVariant,
isAuthenticatorAvailable,
hasPendingInvitations,
+ isGroupOwner,
isOLESEnabled,
+ isCategoryViewEnabled,
+ isRolesAndPermissionsEnabled,
}: Arguments) => {
return {
account: getAccountAppRoutes({
@@ -73,15 +77,14 @@ export const getRoutes = ({
addresses,
isDataRecoveryAvailable,
isSessionRecoveryAvailable,
+ isRecoveryContactsEnabled,
isReferralProgramEnabled,
recoveryNotification,
organization,
- isBreachesAccountDashboardEnabled,
showVPNDashboard,
showVPNDashboardVariant,
showThemeSelection,
assistantKillSwitch,
- isUserGroupsMembershipFeatureEnabled,
memberships,
isZoomIntegrationEnabled,
isProtonMeetIntegrationEnabled,
@@ -94,6 +97,8 @@ export const getRoutes = ({
showPassDashboardVariant,
showDriveDashboard,
showDriveDashboardVariant,
+ showMeetDashboard,
+ showMeetDashboardVariant,
hasPendingInvitations,
isOLESEnabled,
}),
@@ -103,6 +108,7 @@ export const getRoutes = ({
addresses,
organization,
isCryptoPostQuantumOptInEnabled,
+ isCategoryViewEnabled,
}),
calendar: getCalendarAppRoutes({
app,
@@ -131,6 +137,8 @@ export const getRoutes = ({
isSsoForPbsEnabled,
isRetentionPoliciesEnabled,
isOLESEnabled,
+ isGroupOwner,
+ isRolesAndPermissionsEnabled,
}),
vpn: getVpnAppRoutes({ app }),
wallet: getWalletAppRoutes(),
diff --git a/applications/account/src/app/content/theme/PublicAppThemeProvider.tsx b/applications/account/src/app/content/theme/PublicAppThemeProvider.tsx
new file mode 100644
index 00000000000..ed5e1b4d326
--- /dev/null
+++ b/applications/account/src/app/content/theme/PublicAppThemeProvider.tsx
@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+import ThemeProvider from '@proton/components/containers/themes/ThemeProvider';
+import { APPS } from '@proton/shared/lib/constants';
+
+import { getInitialPublicAppThemeSetting, getShouldPersistTheme } from './getPublicAppThemeSetting';
+
+export const PublicAppThemeProvider = ({ children }: { children: ReactNode }) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/applications/account/src/app/content/theme/SetTheme.tsx b/applications/account/src/app/content/theme/SetTheme.tsx
new file mode 100644
index 00000000000..c78b8d1057a
--- /dev/null
+++ b/applications/account/src/app/content/theme/SetTheme.tsx
@@ -0,0 +1,17 @@
+import { useLayoutEffect } from 'react';
+
+import { useTheme } from '@proton/components/containers/themes/ThemeProvider';
+import type { ThemeTypes } from '@proton/shared/lib/themes/constants';
+
+export const SetTheme = ({ theme: maybeTheme }: { theme?: ThemeTypes }) => {
+ const theme = useTheme();
+
+ useLayoutEffect(() => {
+ theme.setThemeSetting();
+ if (maybeTheme !== undefined) {
+ theme.setTheme(maybeTheme);
+ }
+ }, [maybeTheme]);
+
+ return null;
+};
diff --git a/applications/account/src/app/content/theme/ThemeToggleDropdown.tsx b/applications/account/src/app/content/theme/ThemeToggleDropdown.tsx
new file mode 100644
index 00000000000..5acd346304f
--- /dev/null
+++ b/applications/account/src/app/content/theme/ThemeToggleDropdown.tsx
@@ -0,0 +1,76 @@
+import { useCallback, useRef, useState } from 'react';
+
+import { Dropdown, DropdownButton, DropdownMenu, DropdownMenuButton, useTheme } from '@proton/components';
+import { ThemeModeSetting } from '@proton/shared/lib/themes/constants';
+import clsx from '@proton/utils/clsx';
+
+import { getPublicAppThemeSetting } from './getPublicAppThemeSetting';
+import { publicThemeModeConfig } from './publicThemeModeConfig';
+import { setThemeModeToStorage } from './publicThemeStorage';
+import { sendThemeToggleDropdownOpen, sendThemeToggleThemeSelect } from './themeToggleTelemetry';
+
+export const ThemeToggleDropdown = () => {
+ const anchorRef = useRef(null);
+ const [isOpen, setIsOpen] = useState(false);
+ const toggle = useCallback(() => {
+ setIsOpen((prev) => {
+ const newIsOpen = !prev;
+ if (newIsOpen) {
+ sendThemeToggleDropdownOpen();
+ }
+ return newIsOpen;
+ });
+ }, []);
+ const close = useCallback(() => setIsOpen(false), []);
+
+ const theme = useTheme();
+ const mode = theme.settings.Mode;
+
+ return (
+ <>
+
+ {publicThemeModeConfig[mode].icon}
+
+
+
+ {[ThemeModeSetting.Light, ThemeModeSetting.Dark, ThemeModeSetting.Auto].map(
+ (themeMode: ThemeModeSetting) => {
+ const config = publicThemeModeConfig[themeMode];
+ const isSelected = mode === themeMode;
+ return (
+ {
+ setThemeModeToStorage(themeMode);
+ sendThemeToggleThemeSelect({ themeMode });
+ theme.setThemeSetting(getPublicAppThemeSetting({ themeMode }));
+ close();
+ }}
+ aria-pressed={isSelected}
+ >
+
+ {config.icon}
+
+ {config.label()}
+ {config.description?.()}
+
+
+
+ );
+ }
+ )}
+
+
+
+ );
+};
diff --git a/applications/account/src/app/content/theme/getPublicAppThemeSetting.ts b/applications/account/src/app/content/theme/getPublicAppThemeSetting.ts
new file mode 100644
index 00000000000..c2db2d278c4
--- /dev/null
+++ b/applications/account/src/app/content/theme/getPublicAppThemeSetting.ts
@@ -0,0 +1,107 @@
+import { getStoredThemeString } from '@proton/components/containers/themes/themeCookieStorage';
+import { isElectronApp } from '@proton/shared/lib/helpers/desktop';
+import { ThemeModeSetting } from '@proton/shared/lib/themes/constants';
+import {
+ PROTON_DEFAULT_THEME,
+ type ThemeSetting,
+ getDefaultThemeSetting,
+ getParsedThemeSetting,
+} from '@proton/shared/lib/themes/themes';
+
+import { getThemeFromLocation } from './getThemeFromLocation';
+import { PUBLIC_THEME_DARK, PUBLIC_THEME_LIGHT, getThemeSettingFromMode } from './getThemeSettingFromMode';
+import { getThemeModeFromStorage } from './publicThemeStorage';
+
+const getThemeModeSettingFromString = (value: string | null | undefined): ThemeModeSetting | undefined => {
+ switch (value) {
+ case 'light':
+ return ThemeModeSetting.Light;
+ case 'dark':
+ return ThemeModeSetting.Dark;
+ case 'auto':
+ return ThemeModeSetting.Auto;
+ }
+};
+
+const getThemeFromCookie = (defaultThemeSetting: ThemeSetting) => {
+ const cookieTheme = getStoredThemeString();
+ if (cookieTheme !== undefined) {
+ const parsedCookieTheme = getParsedThemeSetting(cookieTheme);
+ // User explicitly chose AUTO - respect cookie's Mode for the actual theme,
+ // but set Mode to AUTO so dropdown shows AUTO.
+ const isDark = parsedCookieTheme.Mode === ThemeModeSetting.Dark;
+ const isAuto = parsedCookieTheme.Mode === ThemeModeSetting.Auto;
+ const theme = isDark ? PUBLIC_THEME_DARK : PUBLIC_THEME_LIGHT;
+ return {
+ ...defaultThemeSetting,
+ Mode: ThemeModeSetting.Auto,
+ LightTheme: isAuto ? PUBLIC_THEME_LIGHT : theme,
+ DarkTheme: isAuto ? PUBLIC_THEME_DARK : theme,
+ };
+ }
+};
+
+// This function is called on initial load and when changing themes
+export const getPublicAppThemeSetting = ({ themeMode }: { themeMode: ThemeModeSetting | undefined }): ThemeSetting => {
+ const defaultThemeSetting = getDefaultThemeSetting(PROTON_DEFAULT_THEME);
+
+ if (themeMode !== undefined) {
+ // 4. In case the public theme is set to auto, use the cookie preference if it exists
+ if (themeMode === ThemeModeSetting.Auto) {
+ const cookieTheme = getThemeFromCookie(defaultThemeSetting);
+ if (cookieTheme !== undefined) {
+ return cookieTheme;
+ }
+ }
+
+ // 3. PublicTheme local storage (in case it's set to light or dark)
+ return { ...defaultThemeSetting, ...getThemeSettingFromMode(themeMode) };
+ }
+
+ // 4. In case no public theme has been set, use the cookie preference
+ const cookieTheme = getThemeFromCookie(defaultThemeSetting);
+ if (cookieTheme !== undefined) {
+ return cookieTheme;
+ }
+
+ // 5. System preference
+ return { ...defaultThemeSetting, ...getThemeSettingFromMode(ThemeModeSetting.Light) };
+};
+
+// This function is called once on initial load
+// Priority order:
+// 1. URL param (?theme=light/dark/auto)
+// 2. Location based
+// 3. PublicTheme local storage (in case it's set to light or dark)
+// 4. Theme cookie from user's account settings
+// 5. System preference
+export const getInitialPublicAppThemeSetting = (): ThemeSetting => {
+ const defaultThemeSetting = getDefaultThemeSetting(PROTON_DEFAULT_THEME);
+ const searchParams = new URLSearchParams(window.location.search);
+
+ // 1. Location based
+ const themeFromLocation = getThemeFromLocation(window.location, searchParams);
+ if (themeFromLocation !== null) {
+ return { ...defaultThemeSetting, ...themeFromLocation };
+ }
+
+ if (isElectronApp) {
+ return defaultThemeSetting;
+ }
+
+ // 2. URL param (?theme=light/dark/auto)
+ const paramThemeMode = getThemeModeSettingFromString(searchParams.get('theme'));
+ if (paramThemeMode !== undefined) {
+ return { ...defaultThemeSetting, ...getThemeSettingFromMode(paramThemeMode) };
+ }
+
+ // 3. PublicTheme local storage (in case it's set to light or dark)
+ const storedThemeMode = getThemeModeFromStorage();
+ return getPublicAppThemeSetting({ themeMode: storedThemeMode });
+};
+
+// Persist the theme to cookie in case there's no other theme present, this slightly improves the experience for users
+// who pick dark and then load an app for the first time
+export const getShouldPersistTheme = () => {
+ return !Boolean(getStoredThemeString());
+};
diff --git a/applications/account/src/app/content/theme/getThemeFromLocation.ts b/applications/account/src/app/content/theme/getThemeFromLocation.ts
new file mode 100644
index 00000000000..eac1ab9994b
--- /dev/null
+++ b/applications/account/src/app/content/theme/getThemeFromLocation.ts
@@ -0,0 +1,63 @@
+import { PLANS } from '@proton/payments/core/constants';
+import { getHas2025OfferCoupon } from '@proton/payments/core/subscription/helpers';
+import { SSO_PATHS } from '@proton/shared/lib/constants';
+import { ThemeModeSetting, ThemeTypes } from '@proton/shared/lib/themes/constants';
+import type { ThemeSetting } from '@proton/shared/lib/themes/themes';
+
+/**
+ * Primary purpose of this functionality is to ensure that the initial loader page has the same theme
+ * as the rest of the page to avoid a flash
+ */
+export const getThemeFromLocation = (
+ location: Location,
+ searchParams: URLSearchParams
+): Partial | null => {
+ const hasBFCoupon = getHas2025OfferCoupon(searchParams.get('coupon')?.toUpperCase());
+ const hasVisionary = searchParams.get('plan')?.toLowerCase() === PLANS.VISIONARY;
+ const hasDarkTheme = searchParams.get('theme') === 'dark';
+
+ if (
+ (location.pathname.includes('signup') && (hasBFCoupon || hasVisionary || hasDarkTheme)) ||
+ (location.pathname === SSO_PATHS.PASS_SIGNUP && searchParams.get('mode') === 'ctx') ||
+ location.pathname === SSO_PATHS.PASS_SIGNUP_B2B ||
+ location.pathname === SSO_PATHS.MAIL_SIGNUP_B2B ||
+ location.pathname === SSO_PATHS.DRIVE_SIGNUP_B2B ||
+ location.pathname === SSO_PATHS.LUMO_SIGNUP_B2B ||
+ location.pathname === SSO_PATHS.BUSINESS_SIGNUP
+ ) {
+ return {
+ DarkTheme: ThemeTypes.Carbon,
+ Mode: ThemeModeSetting.Dark,
+ };
+ }
+
+ if (location.pathname === SSO_PATHS.WALLET_SIGNUP) {
+ return {
+ LightTheme: ThemeTypes.StorefrontWallet,
+ Mode: ThemeModeSetting.Light,
+ };
+ }
+
+ if (
+ location.pathname.includes('signup') ||
+ location.pathname === SSO_PATHS.REFERAL_SIGNUP ||
+ location.pathname === SSO_PATHS.REFERAL_PLAN_SELECTION ||
+ location.pathname === SSO_PATHS.GREENLAND_SIGNUP ||
+ location.pathname === SSO_PATHS.START ||
+ location.pathname === SSO_PATHS.PASS_SIGNUP ||
+ location.pathname === SSO_PATHS.MAIL_SIGNUP ||
+ location.pathname === SSO_PATHS.CALENDAR_SIGNUP ||
+ location.pathname === SSO_PATHS.DRIVE_SIGNUP ||
+ location.pathname === SSO_PATHS.DOCS_SIGNUP ||
+ location.pathname === SSO_PATHS.VPN_SIGNUP ||
+ location.pathname === SSO_PATHS.LUMO_SIGNUP ||
+ location.pathname === SSO_PATHS.MEET_SIGNUP
+ ) {
+ return {
+ LightTheme: ThemeTypes.Storefront,
+ Mode: ThemeModeSetting.Light,
+ };
+ }
+
+ return null;
+};
diff --git a/applications/account/src/app/content/theme/getThemeSettingFromMode.ts b/applications/account/src/app/content/theme/getThemeSettingFromMode.ts
new file mode 100644
index 00000000000..f78d0cf496d
--- /dev/null
+++ b/applications/account/src/app/content/theme/getThemeSettingFromMode.ts
@@ -0,0 +1,13 @@
+import { type ThemeModeSetting, ThemeTypes } from '@proton/shared/lib/themes/constants';
+import type { ThemeSetting } from '@proton/shared/lib/themes/themes';
+
+export const PUBLIC_THEME_LIGHT = ThemeTypes.Duotone;
+export const PUBLIC_THEME_DARK = ThemeTypes.Carbon;
+
+export const getThemeSettingFromMode = (themeMode: ThemeModeSetting): Partial => {
+ return {
+ Mode: themeMode,
+ LightTheme: PUBLIC_THEME_LIGHT,
+ DarkTheme: PUBLIC_THEME_DARK,
+ };
+};
diff --git a/applications/account/src/app/content/theme/publicThemeModeConfig.tsx b/applications/account/src/app/content/theme/publicThemeModeConfig.tsx
new file mode 100644
index 00000000000..e463b423567
--- /dev/null
+++ b/applications/account/src/app/content/theme/publicThemeModeConfig.tsx
@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+
+import { c } from 'ttag';
+
+import { getStoredThemeString } from '@proton/components/containers/themes/themeCookieStorage';
+import { IcCircleHalfFilled } from '@proton/icons/icons/IcCircleHalfFilled';
+import { IcMoon } from '@proton/icons/icons/IcMoon';
+import { IcSun } from '@proton/icons/icons/IcSun';
+import { BRAND_NAME } from '@proton/shared/lib/constants';
+import { ThemeModeSetting } from '@proton/shared/lib/themes/constants';
+
+const getAutoModeDescription = () => {
+ const cookieTheme = getStoredThemeString();
+ if (cookieTheme !== undefined) {
+ return () => c('Theme').t`Use ${BRAND_NAME} settings`;
+ }
+ return () => c('Theme').t`Sync with system`;
+};
+
+export const publicThemeModeConfig: Record<
+ ThemeModeSetting,
+ { label: () => string; description?: () => string; icon: ReactNode; next: ThemeModeSetting; value: string }
+> = {
+ [ThemeModeSetting.Light]: {
+ // Translator: Light as in "Light theme" for the ui
+ label: () => c('Theme').t`Light`,
+ icon:
-
+
+
-
+ )}
+
+
);
};
-const AppSwitcherContainer = ({ onLogin, onSwitch, state }: Props) => {
- const isDelightfulProductSwitcherEnabled = useFlag('DelightfulProductSwitcher');
-
- if (isDelightfulProductSwitcherEnabled) {
- return xsmall') {
+ background: var(--background-elevated);
+ }
+
+ [data-theme-mode='dark'] & {
+ @include im.media('>xsmall') {
+ border: 1px solid var(--border-weak);
+ }
+ }
&-main-header {
display: flex;
@@ -22,14 +33,16 @@ im.$media-expressions: $media-expressions;
justify-content: space-between;
align-items: center;
- @include im.media('>xsmall') {
- display: grid;
- grid-template-columns: repeat(3, minmax(auto, 100%));
- justify-content: space-between;
- }
+ &-grid {
+ @include im.media('>xsmall') {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(auto, 100%));
+ justify-content: space-between;
+ }
- @include im.media('>small') {
- grid-template-columns: 30vw minmax(max-content, 100%) 30vw;
+ @include im.media('>small') {
+ grid-template-columns: 30vw minmax(max-content, 100%) 30vw;
+ }
}
> * {
@@ -39,7 +52,6 @@ im.$media-expressions: $media-expressions;
> div:last-child {
display: flex;
- flex-wrap: wrap;
justify-self: flex-end;
> * {
@@ -54,6 +66,14 @@ im.$media-expressions: $media-expressions;
background: linear-gradient(68.66deg, #e8e2ff 1.3%, #f7f5ff 50%);
}
+ [data-theme-mode='dark'] & {
+ @include im.media('>xsmall') {
+ --scrollbar-thumb-color: #413085;
+
+ background: radial-gradient(#221850 15%, #191333 35%, var(--background-lowered));
+ }
+ }
+
&--dark {
@include im.media('>xsmall') {
--scrollbar-thumb-color: #413085;
diff --git a/applications/account/src/app/public/Layout.tsx b/applications/account/src/app/public/Layout.tsx
index 28a04902c4e..19d7308c3d7 100644
--- a/applications/account/src/app/public/Layout.tsx
+++ b/applications/account/src/app/public/Layout.tsx
@@ -12,6 +12,7 @@ import { getStaticURL } from '@proton/shared/lib/helpers/url';
import { locales } from '@proton/shared/lib/i18n/locales';
import clsx from '@proton/utils/clsx';
+import { ThemeToggleDropdown } from '../content/theme/ThemeToggleDropdown';
import BackButton from './BackButton';
import LanguageSelect from './LanguageSelect';
import LayoutFooter from './LayoutFooter';
@@ -25,6 +26,7 @@ export interface Props {
bottomRight?: ReactNode;
topRight?: ReactNode;
hasDecoration?: boolean;
+ hasThemeToggle?: boolean;
onBack?: () => void;
hasWelcome?: boolean;
headerClassName?: string;
@@ -66,6 +68,7 @@ const Layout = ({
centeredContent,
layoutClassName,
topRight,
+ hasThemeToggle = true,
}: Props) => {
const { APP_VERSION, APP_NAME } = useConfig();
const appVersion = getAppVersion(APP_VERSION);
@@ -74,10 +77,7 @@ const Layout = ({
const theme = useTheme();
const protonLogo = (
-
-
+
+ );
+};
+
+export default PrivateAppLoaderPage;
diff --git a/applications/account/src/app/content/PublicApp.tsx b/applications/account/src/app/content/PublicApp.tsx
index d76ccafe392..e69de29bb2d 100644
--- a/applications/account/src/app/content/PublicApp.tsx
+++ b/applications/account/src/app/content/PublicApp.tsx
@@ -1,870 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { BrowserRouter, Redirect, Route, Switch, useHistory } from 'react-router-dom';
-
-import type * as H from 'history';
-
-import { registerSessionListener } from '@proton/account/accountSessions/registerSessionListener';
-import { writeAccountSessions } from '@proton/account/accountSessions/storage';
-import { createAuthentication, createUnleash, init, loadCrypto } from '@proton/account/bootstrap';
-import type { OnLoginCallback, OnLoginCallbackResult } from '@proton/components';
-import {
- ApiProvider,
- AuthenticationProvider,
- ErrorBoundary,
- ModalsChildren,
- NotificationsChildren,
- ProtonApp,
- StandardErrorPage,
- UnAuthenticated,
- UnauthenticatedApiProvider,
-} from '@proton/components';
-import ForceRefreshContext from '@proton/components/containers/forceRefresh/context';
-import { AuthType } from '@proton/components/containers/login/interface';
-import PublicAppSetup from '@proton/components/containers/publicAppSetup/PublicAppSetup';
-import useApi from '@proton/components/hooks/useApi';
-import { useSilentApi } from '@proton/components/hooks/useSilentApi';
-import { initMainHost } from '@proton/cross-storage/lib';
-import useInstance from '@proton/hooks/useInstance';
-import { ProtonStoreProvider } from '@proton/redux-shared-store';
-import createApi from '@proton/shared/lib/api/createApi';
-import { getUIDApi } from '@proton/shared/lib/api/helpers/customConfig';
-import { getIsPassApp, getIsVPNApp, getToAppName } from '@proton/shared/lib/authentication/apps';
-import {
- getEmailSessionForkSearchParameter,
- getLocalIDForkSearchParameter,
- produceOAuthFork,
-} from '@proton/shared/lib/authentication/fork';
-import { handleLogoutFromURL } from '@proton/shared/lib/authentication/handleLogoutFromURL';
-import type { ActiveSession, GetActiveSessionsResult } from '@proton/shared/lib/authentication/persistedSessionHelper';
-import { getActiveSessions } from '@proton/shared/lib/authentication/persistedSessionHelper';
-import { getPersistedSessions } from '@proton/shared/lib/authentication/persistedSessionStorage';
-import type { APP_NAMES } from '@proton/shared/lib/constants';
-import { APPS, CLIENT_TYPES, SSO_PATHS } from '@proton/shared/lib/constants';
-import { replaceUrl } from '@proton/shared/lib/helpers/browser';
-import { initElectronClassnames } from '@proton/shared/lib/helpers/initElectronClassnames';
-import { initSafariFontFixClassnames } from '@proton/shared/lib/helpers/initSafariFontFixClassnames';
-import { telemetry } from '@proton/shared/lib/telemetry';
-import { createUnauthenticatedApi } from '@proton/shared/lib/unauthApi/unAuthenticatedApi';
-import { FlagProvider } from '@proton/unleash';
-import noop from '@proton/utils/noop';
-
-import forgotUsernamePage from '../../pages/forgot-username';
-import resetPasswordPage from '../../pages/reset-password';
-import config from '../config';
-import locales from '../locales';
-import LoginContainer, { type LoginContainerState } from '../login/LoginContainer';
-import { getLoginMeta } from '../login/loginPagesJson';
-import AppSwitcherContainer from '../public/AppSwitcherContainer';
-import AuthDesktop from '../public/AuthDesktop';
-import AuthExtension from '../public/AuthExtension';
-import CallScheduledPage from '../public/CallScheduledPage';
-import CloseTicketContainer from '../public/CloseTicketContainer';
-import DisableAccountContainer from '../public/DisableAccountContainer';
-import EmailForwardingContainer, { EmailForwardingRequest } from '../public/EmailForwardingContainer';
-import EmailUnsubscribeContainer from '../public/EmailUnsubscribeContainer';
-import ForgotUsernameContainer from '../public/ForgotUsernameContainer';
-import GroupInviteContainer, { GroupInviteRequest } from '../public/GroupInviteContainer';
-import GroupMembershipsContainer from '../public/GroupMembershipsContainer';
-import InboxDesktopFreeTrialEnded from '../public/InboxDesktopFreeTrialEnded';
-import JoinMagicLinkContainer from '../public/JoinMagicLinkContainer';
-import OAuthConfirmForkContainer from '../public/OAuthConfirmForkContainer';
-import OAuthPartnersContainer, { type OAuthPartnersCallbackState } from '../public/OAuthPartnersContainer';
-import ReAuthContainer from '../public/ReAuthContainer';
-import RemoveEmailContainer from '../public/RemoveEmailContainer';
-import SigninHelpContainer from '../public/SigninHelpContainer';
-import SwitchAccountContainer from '../public/SwitchAccountContainer';
-import VerifyEmailContainer from '../public/VerifyEmailContainer';
-import { readForkState } from '../public/persistedForkState';
-import SignInWithAnotherDeviceContainer from '../public/signInWithAnotherDevice/SignInWithAnotherDeviceContainer';
-import ResetPasswordContainer from '../reset/ResetPasswordContainer';
-import SignupInviteContainer from '../signup/SignupInviteContainer';
-import { type ProductParams, getProductParams, getThemeFromLocation } from '../signup/searchParams';
-import { getSignupMeta } from '../signup/signupPagesJson';
-import SingleSignupContainer from '../single-signup/SingleSignupContainer';
-import { extendStore, setupStore } from '../store/public-store';
-import { extraThunkArguments } from '../store/public-thunk';
-import useLocationWithoutLocale from '../useLocationWithoutLocale';
-import AccountEffect from './AccountAutoLogin';
-import AccountLoaderPage from './AccountLoaderPage';
-import AccountPublicApp from './AccountPublicApp';
-import ExternalSSOConsumer from './ExternalSSOConsumer';
-import SingleSignupSwitchContainer from './SingleSignupSwitchContainer';
-import { type ProduceForkData, SSOType } from './actions/forkInterface';
-import { getActiveSessionLoginResult } from './actions/getActiveSessionLoginResult';
-import { getLoginResult } from './actions/getLoginResult';
-import { getSanitizedLocationDescriptorObject } from './actions/getSanitizedLocationDescriptorObject';
-import type { LoginLocationState, LoginResult } from './actions/interface';
-import { handleDesktopFork } from './fork/handleDesktopFork';
-import { handleOAuthFork } from './fork/handleOAuthFork';
-import { handleProtonFork } from './fork/handleProtonFork';
-import { UNAUTHENTICATED_ROUTES, getPaths, getPreAppIntent } from './helper';
-import { getLocalRedirect } from './localRedirect';
-import { addSession } from './session';
-
-const bootstrapApp = () => {
- const api = createApi({ config, sendLocaleHeaders: true });
- const initialSessions = getPersistedSessions();
- const initialSessionsLength = initialSessions.length;
- const initialSessionsLengthBool = Boolean(initialSessionsLength);
- writeAccountSessions(initialSessions);
- registerSessionListener({ type: 'all' });
- handleLogoutFromURL({ api });
- const authentication = createAuthentication({ initialAuth: false });
- init({ config, authentication, locales });
- telemetry.init({ config, uid: authentication.UID });
- initMainHost();
- initElectronClassnames();
- initSafariFontFixClassnames();
- const unauthenticatedApi = createUnauthenticatedApi(api);
- const unleashClient = createUnleash({ api: unauthenticatedApi.apiCallback });
- extendStore({ config, api, authentication, unleashClient, unauthenticatedApi });
- const store = setupStore();
- return {
- authentication,
- store,
- api,
- sessions: {
- initialSessionsLength,
- initialSessionsLengthBool,
- },
- };
-};
-
-export const getProductParamsFromLocation = (location: H.Location, searchParams: URLSearchParams): ProductParams => {
- const { product, productParam } = getProductParams(location.pathname, searchParams);
- return { product, productParam };
-};
-
-let cryptoWorkerPromise: Promise
+ {textToDisplay}
+
+
+
+ {c('Action').t`Welcome`}
+{c('Info').t`Privacy and security starts here`}
+ {error?.type === 'unsupported-app' && ( +
+ {
isMeetAvailable,
isAuthenticatorAvailable,
})}
+ localID={persistedSession.localID}
onExplore={async (app) => {
await onLogin({
...session,
@@ -160,20 +156,10 @@ const ProductSwitcher = ({ onLogin, onSwitch, state }: Props) => {
});
}}
/>
-
-
+
+
@@ -118,7 +117,8 @@ const Layout = ({
@@ -139,19 +139,14 @@ const Layout = ({
- {protonLogoBrand}
)}
-
- {stepper}
-
- {topRight ||
- (hasDecoration && (
-
+
+ )}
+ {stepper}
+
+ {topRight || (hasDecoration &&
+
{bottomRight}
{ return (
diff --git a/applications/account/src/app/public/Main.tsx b/applications/account/src/app/public/Main.tsx
index 2e3eec021b2..2f770c88b2d 100644
--- a/applications/account/src/app/public/Main.tsx
+++ b/applications/account/src/app/public/Main.tsx
@@ -2,8 +2,6 @@ import type { HTMLProps } from 'react';
import clsx from '@proton/utils/clsx';
-import { usePublicTheme } from '../containers/PublicThemeProvider';
-
interface Props extends HTMLProps {
center?: boolean;
disableShadow?: boolean;
@@ -11,14 +9,11 @@ interface Props extends HTMLProps {
}
const Main = ({ padding = true, children, className, center = true, disableShadow, ...rest }: Props) => {
- const theme = usePublicTheme();
-
return (
{
const [loading, withLoading] = useLoading();
+
const children = (
(({ User, ...rest }
const nameToDisplay = User.DisplayName || User.Name || User.Email || '';
const initials = getInitials(nameToDisplay);
return (
-
+