Sharing state between active windows

new-ui/src/pages/compact/CompactLocationsPage/CompactLocationsPage.tsx

@@ -9,6 +9,7 @@ import { Divider } from '../../../shared/components/Divider/Divider';
 import { LocationCard } from '../../../shared/components/LocationCard/LocationCard';
 import { ScrollContainer } from '../../../shared/components/ScrollContainer/ScrollContainer';
 import { WindowHeader } from '../../../shared/components/WindowHeader/WindowHeader';
+import { useAppData } from '../../../shared/providers/AppDataContext';
 import { api } from '../../../shared/rust-api/api';
 import {
   getInstancesQueryOptions,
@@ -21,7 +22,7 @@ import { CompactPage } from '../CompactPage/CompactPage';
 import { InstanceSwitcher } from './components/InstanceSwitcher';
 
 export const CompactLocationsPage = () => {
-  const selection = useAppStore((s) => s.compactViewSelection);
+  const { viewSelection: selection, setViewSelection } = useAppData();
   const openLocation = useAppStore((s) => s.expandedLocation);
 
   const routeData = useLoaderData({ from: '/compact/' });
@@ -53,11 +54,9 @@ export const CompactLocationsPage = () => {
 
   useEffect(() => {
     if (selection === null || instanceInfo === undefined) {
-      useAppStore.setState({
-        compactViewSelection: { kind: 'instance', data: routeData.instances[0] },
-      });
+      setViewSelection({ kind: 'instance', data: routeData.instances[0] });
     }
-  }, [routeData.instances, instanceInfo, selection]);
+  }, [routeData.instances, instanceInfo, selection, setViewSelection]);
 
   return (
     <CompactPage

new-ui/src/pages/compact/CompactLocationsPage/components/InstanceSwitcher.tsx

@@ -5,26 +5,24 @@ import type {
   SelectOption,
   SelectOptionGroup,
 } from '../../../../shared/components/Select/types';
+import { useAppData } from '../../../../shared/providers/AppDataContext';
 import {
   getInstancesQueryOptions,
   getTunnelsQueryOptions,
 } from '../../../../shared/rust-api/query';
-import {
-  type CompactViewSelection,
-  useAppStore,
-} from '../../../../shared/store/useAppStore';
+import type { OverviewViewSelection } from '../../../../shared/rust-api/types';
 import { isPresent } from '../../../../shared/utils/isPresent';
 
 export const InstanceSwitcher = () => {
-  const selectedInstance = useAppStore((s) => s.compactViewSelection);
+  const { viewSelection: selectedInstance, setViewSelection } = useAppData();
 
   const { data: tunnels } = useQuery(getTunnelsQueryOptions);
   const { data: instances } = useQuery(getInstancesQueryOptions);
 
-  const groups = useMemo((): readonly SelectOptionGroup<CompactViewSelection>[] => {
+  const groups = useMemo((): readonly SelectOptionGroup<OverviewViewSelection>[] => {
     if (!isPresent(instances) || !isPresent(tunnels)) return [];
 
-    const instanceGroup: SelectOptionGroup<CompactViewSelection> = {
+    const instanceGroup: SelectOptionGroup<OverviewViewSelection> = {
       key: 'instances',
       label: 'Instances',
       options: instances.map((instance) => ({
@@ -34,7 +32,7 @@ export const InstanceSwitcher = () => {
       })),
     };
 
-    const tunnelGroup: SelectOptionGroup<CompactViewSelection> = {
+    const tunnelGroup: SelectOptionGroup<OverviewViewSelection> = {
       key: 'tunnels',
       label: 'Tunnels',
       options: tunnels.map((tunnel) => ({
@@ -52,7 +50,7 @@ export const InstanceSwitcher = () => {
     [groups],
   );
 
-  const selectedOption = useMemo((): SelectOption<CompactViewSelection> | undefined => {
+  const selectedOption = useMemo((): SelectOption<OverviewViewSelection> | undefined => {
     if (!isPresent(selectedInstance)) return undefined;
     for (const group of groups) {
       const found = group.options.find((o) => {
@@ -77,7 +75,7 @@ export const InstanceSwitcher = () => {
       groups={groups}
       value={selectedOption as never}
       onChange={(option) => {
-        useAppStore.setState({ compactViewSelection: option.value });
+        setViewSelection(option.value);
       }}
     />
   );

new-ui/src/pages/full/OverviewPage/OverviewPage.tsx

@@ -11,7 +11,6 @@ import { FullPage } from '../../../shared/layouts/FullPage/FullPage';
 import { useAppData } from '../../../shared/providers/AppDataContext';
 import { getLocationsQueryOptions } from '../../../shared/rust-api/query';
 import type { InstanceInfo } from '../../../shared/rust-api/types';
-import { useAppStore } from '../../../shared/store/useAppStore';
 import { ThemeSpacing } from '../../../shared/types';
 import { isPresent } from '../../../shared/utils/isPresent';
 import { ConnectModal } from './components/ConnectModal/ConnectModal';
@@ -23,7 +22,7 @@ const isWindows = platform() === 'windows';
 export const OverviewPage = () => {
   const [detailsOpen, setDetailsOpen] = useState(false);
   const { instances, tunnels } = useAppData();
-  const selection = useAppStore((s) => s.compactViewSelection);
+  const { viewSelection: selection } = useAppData();
 
   const queryInstanceId = useMemo(() => {
     if (!isPresent(selection)) return instances[0].id;

new-ui/src/pages/full/OverviewPage/components/ConnectModal/components/ConnectModalPostureCheckLoading/ConnectModalPostureCheckLoading.tsx

@@ -0,0 +1,11 @@
+import './style.scss';
+import { LoaderSpinner } from '../../../../../../../shared/components/LoaderSpinner/LoaderSpinner';
+
+export const ConnectModalPostureCheckLoading = () => {
+  return (
+    <div className="connect-modal-posture-check-loading">
+      <LoaderSpinner variant="primary" size={32} />
+      <p>Checking device requirements...</p>
+    </div>
+  );
+};

new-ui/src/pages/full/OverviewPage/components/ConnectModal/components/ConnectModalPostureCheckLoading/style.scss

@@ -0,0 +1,14 @@
+.connect-modal-posture-check-loading {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: var(--spacing-lg);
+  min-height: 220px;
+
+  p {
+    font: var(--t-body-xs-400);
+    color: var(--fg-white-100);
+    text-align: center;
+  }
+}

new-ui/src/pages/full/OverviewPage/components/ConnectModal/hooks/useConnectModalMfaOidc.ts

@@ -20,7 +20,7 @@ type MfaFinishResponse = { preshared_key: string };
 type MfaErrorResponse = { error: string };
 
 type Options = {
-  onPostureError?: () => void;
+  onPostureError?: (msg: string) => void;
   onSessionExpired?: () => void;
 };
 
@@ -146,7 +146,7 @@ export const useConnectModalMfaOidc = ({
       startPolling(response.token, instance.proxy_url, headers);
     } catch (e) {
       if (shouldShowPostureError(e, location)) {
-        onPostureError?.();
+        onPostureError?.(e.message);
         return;
       }
       setStartError(

new-ui/src/pages/full/OverviewPage/components/ConnectModal/style.scss

@@ -6,6 +6,8 @@
   }
 
   .controls {
+    width: 100%;
+
     .full {
       width: 100%;
     }

new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaEmail/ConnectModalMfaEmail.tsx

@@ -11,6 +11,7 @@ import { MfaStartMethod } from '../../../../../../../shared/components/LocationC
 import { useMfaConnect } from '../../../../../../../shared/components/LocationCard/hooks/useMfaConnect';
 import type { LocationInfo } from '../../../../../../../shared/rust-api/types';
 import { isPresent } from '../../../../../../../shared/utils/isPresent';
+import { ConnectModalPostureCheckLoading } from '../../components/ConnectModalPostureCheckLoading/ConnectModalPostureCheckLoading';
 import { ConnectModalView } from '../../hooks/types';
 import { useConnectModal } from '../../hooks/useConnectModal';
 
@@ -28,8 +29,10 @@ export const ConnectModalMfaEmail = () => {
       debounceMs: location?.posture_check_required ? MIN_POSTURE_LOADER_MS : 0,
       onSessionExpired: () =>
         useConnectModal.getState().setView(perviousView ?? ConnectModalView.MfaSettings),
-      onPostureError: () =>
-        useConnectModal.getState().setView(ConnectModalView.PostureCheckFail),
+      onPostureError: (msg) => {
+        useConnectModal.setState({ postureError: msg });
+        useConnectModal.getState().setView(ConnectModalView.PostureCheckFail);
+      },
     },
   );
 
@@ -57,6 +60,10 @@ export const ConnectModalMfaEmail = () => {
     if (verifyError) setError(verifyError);
   }, [verifyError]);
 
+  if (isStarting && location?.posture_check_required && !startError) {
+    return <ConnectModalPostureCheckLoading />;
+  }
+
   return (
     <div
       id="mfa-email-view"

new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaMobile/ConnectModalMfaMobile.tsx

@@ -7,6 +7,7 @@ import { Controls } from '../../../../../../../shared/components/Controls/Contro
 import { useMfaMobileConnect } from '../../../../../../../shared/components/LocationCard/hooks/useMfaMobileConnect';
 import { QrCard } from '../../../../../../../shared/components/QrCard/QrCard';
 import type { LocationInfo } from '../../../../../../../shared/rust-api/types';
+import { ConnectModalPostureCheckLoading } from '../../components/ConnectModalPostureCheckLoading/ConnectModalPostureCheckLoading';
 import { ConnectModalView } from '../../hooks/types';
 import { useConnectModal } from '../../hooks/useConnectModal';
 
@@ -20,8 +21,10 @@ export const ConnectModalMfaMobile = () => {
   const { start, isStarting, startError, qrValue, connectionError } = useMfaMobileConnect(
     location as LocationInfo,
     {
-      onPostureError: () =>
-        useConnectModal.getState().setView(ConnectModalView.PostureCheckFail),
+      onPostureError: (msg) => {
+        useConnectModal.setState({ postureError: msg });
+        useConnectModal.getState().setView(ConnectModalView.PostureCheckFail);
+      },
     },
   );
 
@@ -46,6 +49,10 @@ export const ConnectModalMfaMobile = () => {
 
   const errorMessage = startError ?? connectionError;
 
+  if (isStarting && location?.posture_check_required && !startError) {
+    return <ConnectModalPostureCheckLoading />;
+  }
+
   return (
     <div id="mfa-mobile-view">
       <p className="view-description">

new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaOidc/ConnectModalMfaOidc.tsx

@@ -3,20 +3,25 @@ import { useShallow } from 'zustand/shallow';
 import { Button } from '../../../../../../../shared/components/Button/Button';
 import { ButtonVariant } from '../../../../../../../shared/components/Button/types';
 import { Controls } from '../../../../../../../shared/components/Controls/Controls';
+import { ConnectModalPostureCheckLoading } from '../../components/ConnectModalPostureCheckLoading/ConnectModalPostureCheckLoading';
 import { ConnectModalView } from '../../hooks/types';
 import { useConnectModal } from '../../hooks/useConnectModal';
 import { useConnectModalMfaOidc } from '../../hooks/useConnectModalMfaOidc';
 
 type Screen = 'idle' | 'polling' | 'error';
 
 export const ConnectModalMfaOidc = () => {
-  const perviousView = useConnectModal(useShallow((s) => s.perviousView));
+  const [perviousView, location] = useConnectModal(
+    useShallow((s) => [s.perviousView, s.location]),
+  );
 
   const { start, isStarting, startError, isPolling, pollError } = useConnectModalMfaOidc({
     onSessionExpired: () =>
       useConnectModal.getState().setView(perviousView ?? ConnectModalView.MfaSettings),
-    onPostureError: () =>
-      useConnectModal.getState().setView(ConnectModalView.PostureCheckFail),
+    onPostureError: (msg) => {
+      useConnectModal.setState({ postureError: msg });
+      useConnectModal.getState().setView(ConnectModalView.PostureCheckFail);
+    },
   });
 
   const [screen, setScreen] = useState<Screen>('idle');
@@ -36,6 +41,10 @@ export const ConnectModalMfaOidc = () => {
 
   const errorMessage = startError ?? pollError;
 
+  if (isStarting && location?.posture_check_required && !startError) {
+    return <ConnectModalPostureCheckLoading />;
+  }
+
   return (
     <div id="mfa-oidc-view">
       {screen === 'idle' && (

new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaSettings/ConnectModalMfaSettings.tsx

@@ -11,13 +11,15 @@ import { IconButton } from '../../../../../../../shared/components/IconButton/Ic
 import { IconButtonVariant } from '../../../../../../../shared/components/IconButton/types';
 import { MfaSelector } from '../../../../../../../shared/components/LocationCard/components/MfaSelector/MfaSelector';
 import { SizedBox } from '../../../../../../../shared/components/SizedBox/SizedBox';
+import { useAppData } from '../../../../../../../shared/providers/AppDataContext';
 import { api } from '../../../../../../../shared/rust-api/api';
 import {
   LocationMfaMode,
   MfaMethod,
   type MfaMethodValue,
 } from '../../../../../../../shared/rust-api/types';
 import { ThemeSpacing } from '../../../../../../../shared/types';
+import { ConnectModalView } from '../../hooks/types';
 import { useConnectModal } from '../../hooks/useConnectModal';
 
 export const ConnectModalMfaSettings = () => {
@@ -26,14 +28,18 @@ export const ConnectModalMfaSettings = () => {
     meta: { invalidate: [['locations']] },
   });
 
+  const { locationMfaPreference, setLocationMfaPreference } = useAppData();
+
   const [perviousView, location] = useConnectModal(
     useShallow((s) => [s.perviousView, s.location]),
   );
 
   const locationDefaultMfaMethod = location?.mfa_method ?? MfaMethod.Totp;
 
   const [selectedMethod, setSelectedMethod] = useState<MfaMethodValue>(
-    location?.mfa_method ?? MfaMethod.Totp,
+    location
+      ? (locationMfaPreference[String(location.id)] ?? MfaMethod.Totp)
+      : MfaMethod.Totp,
   );
   const [setAsDefault, setSetAsDefault] = useState(true);
 
@@ -45,13 +51,32 @@ export const ConnectModalMfaSettings = () => {
   }, [location?.location_mfa_mode]);
 
   const handleSubmit = () => {
+    if (!location) return;
+    setLocationMfaPreference(location.id, selectedMethod);
     if (setAsDefault && selectedMethod !== locationDefaultMfaMethod && location) {
       setMfaMethod({ locationId: location.id, mfaMethod: selectedMethod });
+    } else {
     }
     if (perviousView === null) {
       useConnectModal.setState({ visible: false });
     } else {
-      useConnectModal.getState().setView(perviousView);
+      switch (selectedMethod) {
+        case 'totp':
+          useConnectModal.setState({ view: ConnectModalView.MfaTotp });
+          break;
+        case 'email':
+          useConnectModal.setState({ view: ConnectModalView.MfaEmail });
+          break;
+        case 'mobileapprove':
+          useConnectModal.setState({ view: ConnectModalView.MfaMobile });
+          break;
+        case 'oidc':
+          useConnectModal.setState({ view: ConnectModalView.MfaOidc });
+          break;
+        default:
+          useConnectModal.setState({ visible: false });
+          break;
+      }
     }
   };
 

new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaTotp/ConnectModalMfaTotp.tsx

@@ -11,6 +11,7 @@ import { MfaStartMethod } from '../../../../../../../shared/components/LocationC
 import { useMfaConnect } from '../../../../../../../shared/components/LocationCard/hooks/useMfaConnect';
 import type { LocationInfo } from '../../../../../../../shared/rust-api/types';
 import { isPresent } from '../../../../../../../shared/utils/isPresent';
+import { ConnectModalPostureCheckLoading } from '../../components/ConnectModalPostureCheckLoading/ConnectModalPostureCheckLoading';
 import { ConnectModalView } from '../../hooks/types';
 import { useConnectModal } from '../../hooks/useConnectModal';
 
@@ -28,8 +29,10 @@ export const ConnectModalMfaTotp = () => {
       debounceMs: location?.posture_check_required ? MIN_POSTURE_LOADER_MS : 0,
       onSessionExpired: () =>
         useConnectModal.getState().setView(perviousView ?? ConnectModalView.MfaSettings),
-      onPostureError: () =>
-        useConnectModal.getState().setView(ConnectModalView.PostureCheckFail),
+      onPostureError: (err) => {
+        useConnectModal.setState({ postureError: err });
+        useConnectModal.getState().setView(ConnectModalView.PostureCheckFail);
+      },
     },
   );
 
@@ -57,6 +60,10 @@ export const ConnectModalMfaTotp = () => {
     if (verifyError) setError(verifyError);
   }, [verifyError]);
 
+  if (isStarting && location?.posture_check_required && !startError) {
+    return <ConnectModalPostureCheckLoading />;
+  }
+
   return (
     <div
       id="mfa-totp-view"