Change input on verify with security key

new-ui/src/pages/full/ConfigureMfaPage/components/MfaCodeVerification/MfaCodeVerification.tsx

@@ -1,28 +1,22 @@
 import './style.scss';
-import type { ReactNode } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import { Button } from '../../../../../shared/components/Button/Button';
 import { ButtonVariant } from '../../../../../shared/components/Button/types';
-import { CodeInput } from '../../../../../shared/components/CodeInput/CodeInput';
 import { Controls } from '../../../../../shared/components/Controls/Controls';
 import { Icon, type IconKindValue } from '../../../../../shared/components/Icon';
 import { FullPage } from '../../../../../shared/layouts/FullPage/FullPage';
 import { isPresent } from '../../../../../shared/utils/isPresent';
 
-const codeLength = 6;
-
-interface Props {
+interface Props extends PropsWithChildren {
   id: string;
   icon: IconKindValue;
   title: string;
   description: string[];
-  code: string | null;
-  error: string | null;
-  onCodeChange: (value: string) => void;
-  onSubmit: (pastedCode?: string) => void;
+  onSubmit: () => void;
+  submitText?: string;
   leaveText: string;
   onLeave: () => void;
   extraAction?: ReactNode;
-  codeLoading?: boolean;
   isLeaving?: boolean;
   leaveDisabled?: boolean;
   submitLoading?: boolean;
@@ -34,14 +28,12 @@ export const MfaCodeVerification = ({
   icon,
   title,
   description,
-  code,
-  error,
-  onCodeChange,
+  children,
   onSubmit,
+  submitText = 'Continue',
   leaveText,
   onLeave,
   extraAction,
-  codeLoading = false,
   isLeaving = false,
   leaveDisabled = false,
   submitLoading = false,
@@ -57,14 +49,7 @@ export const MfaCodeVerification = ({
             <span key={line}>{line}</span>
           ))}
         </p>
-        <CodeInput
-          length={codeLength}
-          value={code}
-          onChange={onCodeChange}
-          error={error}
-          onSubmit={onSubmit}
-          loading={codeLoading}
-        />
+        {children}
       </div>
       <Controls>
         <Button
@@ -77,7 +62,7 @@ export const MfaCodeVerification = ({
         <div className="right">
           {isPresent(extraAction) && extraAction}
           <Button
-            text="Continue"
+            text={submitText}
             variant={ButtonVariant.Primary}
             loading={submitLoading}
             disabled={submitDisabled}

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

@@ -1,5 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { CodeInput } from '../../../../../shared/components/CodeInput/CodeInput';
 import { IconKind } from '../../../../../shared/components/Icon';
 import { ResendEmailButton } from '../../../../../shared/components/ResendEmailButton/ResendEmailButton';
 import { useResendCooldown } from '../../../../../shared/hooks/useResendCooldown';
@@ -114,11 +115,7 @@ export const ConfigureVerifyEmailStep = ({ onCancel, onSessionExpired }: Props)
         `We've sent a verification code to your email address.`,
         `Enter the 6-digit code to continue setting up MFA.`,
       ]}
-      code={code}
-      error={error}
-      onCodeChange={handleCodeChange}
       onSubmit={handleSubmit}
-      codeLoading={isBusy}
       leaveText={leaveText}
       onLeave={leave}
       isLeaving={isLeaving}
@@ -133,6 +130,15 @@ export const ConfigureVerifyEmailStep = ({ onCancel, onSessionExpired }: Props)
           onClick={handleResend}
         />
       }
-    />
+    >
+      <CodeInput
+        length={CODE_LENGTH}
+        value={code}
+        onChange={handleCodeChange}
+        error={error}
+        onSubmit={handleSubmit}
+        loading={isBusy}
+      />
+    </MfaCodeVerification>
   );
 };

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

@@ -1,17 +1,13 @@
+import './style.scss';
 import { Enter } from '@fluentui/keyboard-keys';
 import { useState } from 'react';
-import { Button } from '../../../../../shared/components/Button/Button';
-import { ButtonVariant } from '../../../../../shared/components/Button/types';
-import { Controls } from '../../../../../shared/components/Controls/Controls';
-import { FullPageTitle } from '../../../../../shared/components/FullPageTitle/FullPageTitle';
+import { IconKind } from '../../../../../shared/components/Icon';
 import { Input } from '../../../../../shared/components/Input/Input';
-import { Fido2TouchPrompt } from '../../../../../shared/components/LocationCard/components/Fido2TouchPrompt/Fido2TouchPrompt';
-import { FullPage } from '../../../../../shared/layouts/FullPage/FullPage';
 import { fido2CollectsPinInApp } from '../../../../../shared/rust-api/fido2';
 import { isPresent } from '../../../../../shared/utils/isPresent';
+import { MfaCodeVerification } from '../../components/MfaCodeVerification/MfaCodeVerification';
 import { useLeaveVerification } from '../../hooks/useLeaveVerification';
 import { useConfigureVerifyFido2 } from './useConfigureVerifyFido2';
-import '../style.scss';
 
 interface Props {
   onCancel: () => void;
@@ -44,65 +40,48 @@ export const ConfigureVerifyFido2Step = ({ onCancel, onSessionExpired }: Props)
     leave();
   };
 
+  let description = collectsPin
+    ? 'Insert your key and enter its PIN to continue.'
+    : 'Insert your security key and continue in the prompt your system shows.';
+  if (isAwaitingTouch) description = 'The key is blinking. Tap it to confirm.';
+
   return (
-    <FullPage
+    <MfaCodeVerification
       id="configure-verify-fido2-step"
-      className="configure-mfa-verify-page"
-      hideScrollContainer
-      withControls
+      icon={IconKind.SoftwareKey}
+      title="Verify with your security key"
+      description={[description]}
+      onSubmit={handleVerify}
+      submitText="Verify"
+      leaveText={leaveText}
+      onLeave={() => {
+        void handleLeave();
+      }}
+      isLeaving={isLeaving}
+      submitLoading={isVerifying}
     >
-      <FullPageTitle title="Verify with your security key" />
-      {isAwaitingTouch && <Fido2TouchPrompt />}
-      {!isAwaitingTouch && (
-        <>
-          <p className="description">
-            <span>
-              {collectsPin
-                ? 'Insert your security key and enter its PIN to continue.'
-                : 'Insert your security key and continue in the prompt your system shows.'}
-            </span>
-          </p>
-          {collectsPin && (
-            <div
-              className="pin-track"
-              onKeyDown={(e) => {
-                if (e.key === Enter) handleVerify();
-              }}
-            >
-              <Input
-                type="password"
-                label="PIN"
-                autoFocus
-                value={pin}
-                onChange={(value) => {
-                  setPin(isPresent(value) ? String(value) : null);
-                  setError(null);
-                }}
-                error={error}
-              />
-            </div>
-          )}
-          {!collectsPin && isPresent(error) && <p className="error">{error}</p>}
-        </>
-      )}
-      <Controls>
-        <Button
-          text={leaveText}
-          variant={ButtonVariant.Secondary}
-          loading={isLeaving}
-          onClick={() => {
-            void handleLeave();
+      {!isAwaitingTouch && collectsPin && (
+        <div
+          className="pin-track"
+          onKeyDown={(e) => {
+            if (e.key === Enter) handleVerify();
           }}
-        />
-        <div className="right">
-          <Button
-            text="Verify"
-            variant={ButtonVariant.Primary}
-            loading={isVerifying}
-            onClick={handleVerify}
+        >
+          <Input
+            type="password"
+            autoFocus
+            value={pin}
+            onChange={(value) => {
+              setPin(isPresent(value) ? String(value) : null);
+              setError(null);
+            }}
+            error={error}
           />
         </div>
-      </Controls>
-    </FullPage>
+      )}
+      {!isAwaitingTouch && !collectsPin && isPresent(error) && (
+        <p className="error">{error}</p>
+      )}
+    </MfaCodeVerification>
   );
 };

new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/style.scss

@@ -0,0 +1,12 @@
+#configure-verify-fido2-step > .content {
+  & > .pin-track {
+    width: 100%;
+    max-width: 321px;
+    text-align: left;
+  }
+
+  & > .error {
+    font: var(--t-body-sm-400);
+    color: var(--fg-critical);
+  }
+}

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

@@ -1,5 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 import { useCallback, useState } from 'react';
+import { CodeInput } from '../../../../../shared/components/CodeInput/CodeInput';
 import { IconKind } from '../../../../../shared/components/Icon';
 import { api } from '../../../../../shared/rust-api/api';
 import { MfaMethod } from '../../../../../shared/rust-api/types';
@@ -68,17 +69,22 @@ export const ConfigureVerifyTotpStep = ({ onCancel, onSessionExpired }: Props) =
       icon={IconKind.MobileLock}
       title="Security code from your authenticator app."
       description={[`Enter the 6-digit code from your Authenticator app to continue.`]}
-      code={code}
-      error={error}
-      onCodeChange={handleCodeChange}
       onSubmit={handleSubmit}
-      codeLoading={isSubmitting}
       leaveText={leaveText}
       onLeave={leave}
       isLeaving={isLeaving}
       leaveDisabled={isSubmitting}
       submitLoading={isSubmitting}
       submitDisabled={isLeaving}
-    />
+    >
+      <CodeInput
+        length={CODE_LENGTH}
+        value={code}
+        onChange={handleCodeChange}
+        error={error}
+        onSubmit={handleSubmit}
+        loading={isSubmitting}
+      />
+    </MfaCodeVerification>
   );
 };

new-ui/src/pages/full/ConfigureMfaPage/verify/style.scss

@@ -21,15 +21,4 @@
     font: var(--t-body-sm-400);
     color: var(--fg-critical);
   }
-
-  & > .pin-track {
-    padding-bottom: var(--spacing-3xl);
-    box-sizing: border-box;
-  }
-
-  & > .fido2-touch-prompt {
-    width: 100%;
-    padding-top: var(--spacing-xl);
-    box-sizing: border-box;
-  }
 }