review fixes

Author: filipslezaklab

new-ui/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@biomejs/biome": "2.5.14",
     "@floating-ui/react": "^0.27.20",
+    "@fluentui/keyboard-keys": "^9.0.9",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",
     "@tanstack/react-form": "^1.33.5",

new-ui/pnpm-lock.yaml

@@ -15,7 +15,7 @@ import { useStartMfaConfiguration } from './hooks/useStartMfaConfiguration';
 
 export const AddPage = () => {
   const navigate = useNavigate();
-  const { data: instances } = useQuery(getInstancesQueryOptions);
+  const { data: instances, isPending } = useQuery(getInstancesQueryOptions);
 
   const mfaInstances = useMemo(
     () => mfaConfigurableInstances(instances ?? []),
@@ -40,7 +40,7 @@ export const AddPage = () => {
           actionText="Add instance"
           description={`Establish a secure connection to your Defguard instance effortlessly by configuring it with a single token—no manual setup.`}
         />
-        {!tunnelsDisabled(instances ?? []) && (
+        {!isPending && !tunnelsDisabled(instances ?? []) && (
           <AddCard
             image="wireguard"
             onClick={() => {
@@ -53,7 +53,7 @@ export const AddPage = () => {
             description={`Add and configure a WireGuard tunnel to securely route traffic through an encrypted connection using predefined configuration.`}
           />
         )}
-        {mfaInstances.length > 0 && (
+        {!isPending && mfaInstances.length > 0 && (
           <AddCard
             image="lock"
             title="Add new MFA method"

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

@@ -38,18 +38,22 @@ export const ConfigureVerifyEmailStep = ({ onCancel, onSessionExpired }: Props)
     fallback: 'Verification failed',
   });
 
+  // A second call invalidates the code already sent, so fire once, StrictMode included.
+  const requestedFor = useRef<string | null>(null);
+
   const { mutate: requestCode, isPending: isRequestingCode } = useMutation({
     mutationFn: async () => {
       if (!isPresent(sessionId)) {
         throw new Error('No MFA configuration session');
       }
       await api.mfaConfigSendCode(sessionId);
     },
-    onError: handleApiError,
+    onError: (err) => {
+      requestedFor.current = null;
+      handleApiError(err);
+    },
   });
 
-  // A second call invalidates the code already sent, so fire once, StrictMode included.
-  const requestedFor = useRef<string | null>(null);
   useEffect(() => {
     if (!isPresent(sessionId)) return;
     if (requestedFor.current === sessionId) return;
@@ -73,18 +77,29 @@ export const ConfigureVerifyEmailStep = ({ onCancel, onSessionExpired }: Props)
     onSettled: onCancel,
   });
 
+  const isBusy = isRequestingCode || isSubmitting || isCancelling;
+
   const handleSubmit = useCallback(
     (pastedCode?: string) => {
+      if (isBusy) return;
       const toSubmit = (pastedCode ?? code)?.trim();
       if (toSubmit?.length !== CODE_LENGTH) {
         setError('Enter a valid code');
         return;
       }
       submitCode(toSubmit);
     },
-    [code, submitCode],
+    [code, isBusy, submitCode],
   );
 
+  const handleResend = useCallback(() => {
+    if (isBusy || !isPresent(sessionId)) return;
+    requestedFor.current = sessionId;
+    setCode(null);
+    setError(null);
+    requestCode();
+  }, [isBusy, requestCode, sessionId]);
+
   // Only real input clears the error, CodeInput's own reset passes ''.
   const handleCodeChange = useCallback((value: string) => {
     setCode(value);
@@ -103,17 +118,15 @@ export const ConfigureVerifyEmailStep = ({ onCancel, onSessionExpired }: Props)
         <span>{`We've sent a verification code to your email address.`}</span>
         <span>{`Please check your inbox and enter the 6-digit code from the email to continue.`}</span>
       </p>
-      <div
-        className="code-track"
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') handleSubmit();
-        }}
-      >
+      <div className="code-track">
         <CodeInput
           length={CODE_LENGTH}
           value={code}
           onChange={handleCodeChange}
           error={error}
+          onSubmit={() => {
+            handleSubmit();
+          }}
           onSuccessPaste={(value) => {
             handleSubmit(value);
           }}
@@ -129,10 +142,18 @@ export const ConfigureVerifyEmailStep = ({ onCancel, onSessionExpired }: Props)
           }}
         />
         <div className="right">
+          <Button
+            text="Resend code"
+            variant={ButtonVariant.Secondary}
+            loading={isRequestingCode}
+            disabled={isSubmitting || isCancelling}
+            onClick={handleResend}
+          />
           <Button
             text="Verify"
             variant={ButtonVariant.Primary}
-            loading={isRequestingCode || isSubmitting}
+            loading={isSubmitting}
+            disabled={isRequestingCode || isCancelling}
             onClick={() => {
               handleSubmit();
             }}

new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyEmailStep/ConfigureVerifyEmailStep.tsx

@@ -54,16 +54,19 @@ export const ConfigureVerifyTotpStep = ({ onCancel, onSessionExpired }: Props) =
     onSettled: onCancel,
   });
 
+  const isBusy = isSubmitting || isCancelling;
+
   const handleSubmit = useCallback(
     (pastedCode?: string) => {
+      if (isBusy) return;
       const toSubmit = (pastedCode ?? code)?.trim();
       if (toSubmit?.length !== CODE_LENGTH) {
         setError('Enter a valid code');
         return;
       }
       submitCode(toSubmit);
     },
-    [code, submitCode],
+    [code, isBusy, submitCode],
   );
 
   // Only real input clears the error, CodeInput's own reset passes ''.
@@ -84,17 +87,15 @@ export const ConfigureVerifyTotpStep = ({ onCancel, onSessionExpired }: Props) =
         <span>{`Open the authentication app you use with Defguard.`}</span>
         <span>{`Enter the 6-digit code it currently displays to continue.`}</span>
       </p>
-      <div
-        className="code-track"
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') handleSubmit();
-        }}
-      >
+      <div className="code-track">
         <CodeInput
           length={CODE_LENGTH}
           value={code}
           onChange={handleCodeChange}
           error={error}
+          onSubmit={() => {
+            handleSubmit();
+          }}
           onSuccessPaste={(value) => {
             handleSubmit(value);
           }}
@@ -114,6 +115,7 @@ export const ConfigureVerifyTotpStep = ({ onCancel, onSessionExpired }: Props) =
             text="Verify"
             variant={ButtonVariant.Primary}
             loading={isSubmitting}
+            disabled={isCancelling}
             onClick={() => {
               handleSubmit();
             }}

new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyTotpStep/ConfigureVerifyTotpStep.tsx

@@ -96,16 +96,19 @@ export const ConfigureFactorStep = ({ onCancel, onSessionExpired }: Props) => {
     onSettled: onCancel,
   });
 
+  const isBusy = isStartingSetup || isFinishingSetup || isCancelling;
+
   const handleSubmit = useCallback(
     (pastedCode?: string) => {
+      if (isBusy) return;
       const toSubmit = (pastedCode ?? code)?.trim();
       if (toSubmit?.length !== CODE_LENGTH) {
         setError('Enter a valid code');
         return;
       }
       finishSetup(toSubmit);
     },
-    [code, finishSetup],
+    [code, finishSetup, isBusy],
   );
 
   // Only real input clears the error, CodeInput's own reset passes ''.
@@ -136,17 +139,15 @@ export const ConfigureFactorStep = ({ onCancel, onSessionExpired }: Props) => {
           ? `Enter 6-digit code from authentication app`
           : `Enter 6-digit code from email`}
       </p>
-      <div
-        className="code-track"
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') handleSubmit();
-        }}
-      >
+      <div className="code-track">
         <CodeInput
           length={CODE_LENGTH}
           value={code}
           onChange={handleCodeChange}
           error={error}
+          onSubmit={() => {
+            handleSubmit();
+          }}
           onSuccessPaste={(value) => {
             handleSubmit(value);
           }}
@@ -166,6 +167,7 @@ export const ConfigureFactorStep = ({ onCancel, onSessionExpired }: Props) => {
             text="Configure"
             variant={ButtonVariant.Primary}
             loading={isStartingSetup || isFinishingSetup}
+            disabled={isCancelling}
             onClick={() => {
               handleSubmit();
             }}

new-ui/src/pages/full/ConfigureMfaPage/wizard/ConfigureFactorStep/ConfigureFactorStep.tsx

@@ -1,4 +1,5 @@
 import './style.scss';
+import { Enter } from '@fluentui/keyboard-keys';
 import { useMutation } from '@tanstack/react-query';
 import { listen } from '@tauri-apps/api/event';
 import { hostname } from '@tauri-apps/plugin-os';
@@ -101,6 +102,7 @@ export const ConfigureFido2Step = ({ onCancel, onSessionExpired }: Props) => {
   });
 
   const handleSubmit = useCallback(() => {
+    if (isRegistering || isCancelling) return;
     if (!isPresent(name) || name.trim().length === 0) {
       setError('Name your security key');
       return;
@@ -111,14 +113,14 @@ export const ConfigureFido2Step = ({ onCancel, onSessionExpired }: Props) => {
     }
     setError(null);
     register();
-  }, [collectsPin, name, pin, register]);
+  }, [collectsPin, isCancelling, isRegistering, name, pin, register]);
 
   return (
     <div
       id="configure-fido2-step"
       className="step-content"
       onKeyDown={(e) => {
-        if (e.key === 'Enter') handleSubmit();
+        if (e.key === Enter) handleSubmit();
       }}
     >
       <header>
@@ -164,6 +166,7 @@ export const ConfigureFido2Step = ({ onCancel, onSessionExpired }: Props) => {
             text="Register"
             variant={ButtonVariant.Primary}
             loading={isRegistering}
+            disabled={isCancelling}
             onClick={handleSubmit}
           />
         </div>

new-ui/src/pages/full/ConfigureMfaPage/wizard/ConfigureFido2Step/ConfigureFido2Step.tsx

@@ -5,7 +5,10 @@ import { ButtonVariant } from '../../../../../shared/components/Button/types';
 import { Controls } from '../../../../../shared/components/Controls/Controls';
 import { useAppData } from '../../../../../shared/providers/AppDataContext';
 import { isPresent } from '../../../../../shared/utils/isPresent';
-import { useConfigureMfaStore } from '../../hooks/useConfigureMfaStore';
+import {
+  discardMfaConfiguration,
+  useConfigureMfaStore,
+} from '../../hooks/useConfigureMfaStore';
 import bannerSrc from './assets/banner.png';
 
 export const ConfigureFinishStep = () => {
@@ -31,7 +34,7 @@ export const ConfigureFinishStep = () => {
               }
               // Reset once the page is gone, or this step re-renders on an empty store.
               void navigate({ to: '/full/overview', replace: true }).then(() => {
-                useConfigureMfaStore.getState().reset();
+                void discardMfaConfiguration();
               });
             }}
           />

new-ui/src/pages/full/ConfigureMfaPage/wizard/ConfigureFinishStep/ConfigureFinishStep.tsx

@@ -1,3 +1,4 @@
+import { Enter } from '@fluentui/keyboard-keys';
 import { useCallback, useEffect, useState } from 'react';
 import { useShallow } from 'zustand/shallow';
 import { Button } from '../../../../../../../shared/components/Button/Button';
@@ -79,7 +80,7 @@ export const ConnectModalMfaEmail = () => {
     <div
       id="mfa-email-view"
       onKeyDown={(e) => {
-        if (e.key === 'Enter') handleVerify();
+        if (e.key === Enter) handleVerify();
       }}
     >
       <p className="view-description">

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

@@ -1,3 +1,4 @@
+import { Enter } from '@fluentui/keyboard-keys';
 import { Fragment, useCallback, useEffect, useState } from 'react';
 import { useShallow } from 'zustand/shallow';
 import { Button } from '../../../../../../../shared/components/Button/Button';
@@ -62,7 +63,7 @@ export const ConnectModalMfaFido2 = () => {
     <div
       id="mfa-fido2-view"
       onKeyDown={(e) => {
-        if (e.key === 'Enter') handleVerify();
+        if (e.key === Enter) handleVerify();
       }}
     >
       {isAwaitingTouch ? (