display posture check errors

Author: j-chmielewski

new-ui/src/shared/components/LocationCard/LocationCard.tsx

@@ -21,6 +21,7 @@ import { LocationCardMfaMobileView } from './views/LocationCardMfaMobileView/Loc
 import { LocationCardMfaOidcView } from './views/LocationCardMfaOidcView/LocationCardMfaOidcView';
 import { LocationCardMfaSettings } from './views/LocationCardMfaSettings/LocationCardMfaSettings';
 import { LocationCardMfaTotpView } from './views/LocationCardMfaTotpView/LocationCardMfaTotpView';
+import { LocationCardPostureCheckFailView } from './views/LocationCardPostureCheckFailView/LocationCardPostureCheckFailView';
 
 interface Props {
   location: LocationInfo;
@@ -39,7 +40,7 @@ const views: Record<LocationCardViewsValue, ReactNode> = {
   [LocationCardViews.MfaSettings]: <LocationCardMfaSettings />,
   [LocationCardViews.Connecting]: null,
   [LocationCardViews.Connected]: <ConnectedView />,
-  [LocationCardViews.PostureCheckFail]: null,
+  [LocationCardViews.PostureCheckFail]: <LocationCardPostureCheckFailView />,
 };
 
 interface InnerProps {

new-ui/src/shared/components/LocationCard/api/startClientMfaSession.ts

@@ -9,9 +9,12 @@ import type {
 export const CLIENT_MFA_ENDPOINT = 'api/v1/client-mfa';
 
 export class MfaStartError extends Error {
-  constructor(message: string) {
+  public readonly status?: number;
+
+  constructor(message: string, status?: number) {
     super(message);
     this.name = 'MfaStartError';
+    this.status = status;
   }
 }
 
@@ -26,6 +29,9 @@ type MfaStartErrorResponse = {
   error?: string;
 };
 
+export const shouldShowPostureError = (err: unknown, location: LocationInfo): boolean =>
+  err instanceof MfaStartError && err.status === 403 && location.posture_check_required;
+
 type StartClientMfaSessionParams = {
   instance: InstanceInfo;
   location: LocationInfo;
@@ -74,8 +80,14 @@ export const startClientMfaSession = async ({
     });
 
     if (!response.ok) {
-      const data = (await response.json()) as MfaStartErrorResponse;
-      throw new MfaStartError(data.error ?? 'Failed to start MFA');
+      let message = 'Failed to start MFA';
+      try {
+        const data = (await response.json()) as MfaStartErrorResponse;
+        message = data.error ?? message;
+      } catch {
+        // Keep the response status even if the proxy sends a malformed error body.
+      }
+      throw new MfaStartError(message, response.status);
     }
 
     return {

new-ui/src/shared/components/LocationCard/context/context.tsx

@@ -8,7 +8,9 @@ interface LocationCardContextValue {
   instance: InstanceInfo;
   currentView: LocationCardViewsValue;
   previousView: LocationCardViewsValue | null;
+  postureError: string | null;
   setView: (view: LocationCardViewsValue) => void;
+  setPostureError: (error: string | null) => void;
   startMfa: () => void;
 }
 
@@ -34,6 +36,7 @@ export const LocationCardProvider = ({
   children,
 }: LocationCardProviderProps) => {
   const [previousView, setPreviousView] = useState<LocationCardViewsValue | null>(null);
+  const [postureError, setPostureError] = useState<string | null>(null);
   const [currentView, setCurrentView] = useState<LocationCardViewsValue>(
     location.active ? LocationCardViews.Connected : LocationCardViews.Default,
   );
@@ -68,7 +71,9 @@ export const LocationCardProvider = ({
       value={{
         currentView,
         previousView,
+        postureError,
         setView,
+        setPostureError,
         location,
         instance,
         startMfa,

new-ui/src/shared/components/LocationCard/hooks/useMfaConnect.ts

@@ -5,7 +5,11 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { api } from '../../../rust-api/api';
 import { getInstancesQueryOptions } from '../../../rust-api/query';
 import type { EdgeRequestHeaders } from '../../../rust-api/types';
-import { CLIENT_MFA_ENDPOINT, startClientMfaSession } from '../api/startClientMfaSession';
+import {
+  CLIENT_MFA_ENDPOINT,
+  shouldShowPostureError,
+  startClientMfaSession,
+} from '../api/startClientMfaSession';
 import { useLocationCardContext } from '../context/context';
 import { LocationCardViews } from '../context/types';
 
@@ -18,7 +22,7 @@ type MfaErrorResponse = {
 };
 
 export const useMfaConnect = (method: 0 | 1) => {
-  const { location, setView } = useLocationCardContext();
+  const { location, setPostureError, setView } = useLocationCardContext();
 
   const [token, setToken] = useState<string | null>(null);
   const [isStarting, setIsStarting] = useState(false);
@@ -62,6 +66,11 @@ export const useMfaConnect = (method: 0 | 1) => {
         setRequestHeaders(headers);
         setToken(response.token);
       } catch (err) {
+        if (shouldShowPostureError(err, location)) {
+          setPostureError(err.message);
+          setView(LocationCardViews.PostureCheckFail);
+          return;
+        }
         setStartError(err instanceof Error ? err.message : 'Failed to start MFA');
       } finally {
         setIsStarting(false);

new-ui/src/shared/components/LocationCard/hooks/useMfaMobileConnect.ts

@@ -3,7 +3,11 @@ import { useMutation } from '@tanstack/react-query';
 import { error } from '@tauri-apps/plugin-log';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { api } from '../../../rust-api/api';
-import { CLIENT_MFA_ENDPOINT, startClientMfaSession } from '../api/startClientMfaSession';
+import {
+  CLIENT_MFA_ENDPOINT,
+  shouldShowPostureError,
+  startClientMfaSession,
+} from '../api/startClientMfaSession';
 import { useLocationCardContext } from '../context/context';
 import { LocationCardViews } from '../context/types';
 
@@ -13,7 +17,7 @@ type TokenData = {
 };
 
 export const useMfaMobileConnect = () => {
-  const { location, instance, setView } = useLocationCardContext();
+  const { location, instance, setPostureError, setView } = useLocationCardContext();
 
   const [isStarting, setIsStarting] = useState(false);
   const [startError, setStartError] = useState<string | null>(null);
@@ -146,14 +150,19 @@ export const useMfaMobileConnect = () => {
 
       setTokenData({ token: response.token, challenge: response.challenge });
     } catch (e) {
+      if (shouldShowPostureError(e, location)) {
+        setPostureError(e.message);
+        setView(LocationCardViews.PostureCheckFail);
+        return;
+      }
       setStartError(
         e instanceof Error ? e.message : 'Failed to start mobile authentication',
       );
       error(`Mobile MFA start network error for location ${location.id}: ${e}`);
     } finally {
       setIsStarting(false);
     }
-  }, [instance, location]);
+  }, [instance, location, setPostureError, setView]);
 
   const reset = useCallback(() => {
     if (wsRef.current) {

new-ui/src/shared/components/LocationCard/hooks/useMfaOidcConnect.ts

@@ -4,7 +4,11 @@ import { error } from '@tauri-apps/plugin-log';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { api } from '../../../rust-api/api';
 import { getInstancesQueryOptions } from '../../../rust-api/query';
-import { CLIENT_MFA_ENDPOINT, startClientMfaSession } from '../api/startClientMfaSession';
+import {
+  CLIENT_MFA_ENDPOINT,
+  shouldShowPostureError,
+  startClientMfaSession,
+} from '../api/startClientMfaSession';
 import { useLocationCardContext } from '../context/context';
 import { LocationCardViews } from '../context/types';
 
@@ -15,7 +19,7 @@ type MfaFinishResponse = { preshared_key: string };
 type MfaErrorResponse = { error: string };
 
 export const useMfaOidcConnect = () => {
-  const { location, setView } = useLocationCardContext();
+  const { location, setPostureError, setView } = useLocationCardContext();
 
   const [isStarting, setIsStarting] = useState(false);
   const [startError, setStartError] = useState<string | null>(null);
@@ -136,14 +140,19 @@ export const useMfaOidcConnect = () => {
       await api.openLink(`${instance.proxy_url}openid/mfa?token=${response.token}`);
       startPolling(response.token, instance.proxy_url, headers);
     } catch (e) {
+      if (shouldShowPostureError(e, location)) {
+        setPostureError(e.message);
+        setView(LocationCardViews.PostureCheckFail);
+        return;
+      }
       setStartError(
         e instanceof Error ? e.message : 'Failed to start OIDC authentication',
       );
       error(`OIDC MFA start network error for location ${location.id}: ${e}`);
     } finally {
       setIsStarting(false);
     }
-  }, [instance, location, startPolling, stopPolling]);
+  }, [instance, location, setPostureError, setView, startPolling, stopPolling]);
 
   return { start, isStarting, startError, isPolling, pollError };
 };

new-ui/src/shared/components/LocationCard/views/LocationCardPostureCheckFailView/LocationCardPostureCheckFailView.tsx

@@ -0,0 +1,56 @@
+import './style.scss';
+import { ThemeSpacing } from '../../../../types';
+import { Button } from '../../../Button/Button';
+import { ButtonVariant } from '../../../Button/types';
+import { Controls } from '../../../Controls/Controls';
+import { Divider } from '../../../Divider/Divider';
+import { IconKind } from '../../../Icon';
+import { IconButton } from '../../../IconButton/IconButton';
+import { IconButtonVariant } from '../../../IconButton/types';
+import { SizedBox } from '../../../SizedBox/SizedBox';
+import { LocationViewHeader } from '../../components/LocationViewHeader/LocationViewHeader';
+import { useLocationCardContext } from '../../context/context';
+import { LocationCardViews } from '../../context/types';
+
+export const LocationCardPostureCheckFailView = () => {
+  const { postureError, previousView, setPostureError, setView } =
+    useLocationCardContext();
+
+  const retryView =
+    previousView && previousView !== LocationCardViews.PostureCheckFail
+      ? previousView
+      : LocationCardViews.Default;
+
+  const goToDefault = () => {
+    setPostureError(null);
+    setView(LocationCardViews.Default);
+  };
+
+  const tryAgain = () => {
+    setPostureError(null);
+    setView(retryView);
+  };
+
+  return (
+    <div className="location-card-posture-check-fail-view">
+      <Divider spacing={ThemeSpacing.Md} />
+      <LocationViewHeader title="Posture check failed">
+        <p className="error">
+          {postureError ?? 'Your device did not pass posture check.'}
+        </p>
+      </LocationViewHeader>
+      <SizedBox height={ThemeSpacing.Xl} />
+      <Controls>
+        <IconButton
+          variant={IconButtonVariant.BigSelected}
+          icon={IconKind.ArrowBig}
+          iconRotation="left"
+          onClick={goToDefault}
+        />
+        <div className="right">
+          <Button text="Try again" variant={ButtonVariant.Primary} onClick={tryAgain} />
+        </div>
+      </Controls>
+    </div>
+  );
+};

new-ui/src/shared/components/LocationCard/views/LocationCardPostureCheckFailView/style.scss

@@ -0,0 +1,7 @@
+.location-card-posture-check-fail-view {
+  .location-card-view-header {
+    p.error {
+      color: var(--fg-critical);
+    }
+  }
+}