@entropy-softworks/ui 2026.9.8 → 2026.9.10

package/src/screens/auth/MfaEnrollScreen.tsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Pressable, ScrollView, View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { Pressable, View } from "react-native";
 import { useNavigation } from "../../context/NavigationContext";
-import { StatusBar } from "expo-status-bar";
 import { Ionicons } from "@expo/vector-icons";
 import { useColorScheme } from "nativewind";
 import * as Haptics from "expo-haptics";
@@ -11,14 +9,6 @@ import QRCode from "react-native-qrcode-svg";
 import Toast from "react-native-toast-message";
 import { MonoText, MutedText } from "../../components/text";
 import { Button } from "../../components/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../../components/card";
 import { withClickTracking } from "../../services/telemetry";
 import { Input } from "../../components/input";
 import { Separator } from "../../components/separator";
@@ -26,6 +16,7 @@ import AuthService from "../../services/auth.service";
 import { useAuth } from "../../hooks/useAuth";
 import { useAppConfig } from "../../context/AppConfigContext";
 import { getErrorMessage } from "../../utils/error";
+import { AuthPage, type AuthPageLayout } from "./AuthPage";
 
 type Step = "prompt" | "setup" | "verify" | "recovery" | "done";
 
@@ -36,9 +27,11 @@ export interface MfaEnrollScreenProps {
    * nothing in that slot.
    */
   authenticatorAppPromo?: React.ReactNode;
+  /** See `AuthPageLayout`. Defaults to the card, as it always was. */
+  layout?: AuthPageLayout;
 }
 
-export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps = {}) {
+export function MfaEnrollScreen({ authenticatorAppPromo, layout }: MfaEnrollScreenProps = {}) {
   const { refreshUser } = useAuth();
   const { colorScheme } = useColorScheme();
   const isDark = colorScheme === "dark";
@@ -159,236 +152,202 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
     }
   };
 
-  return (
-    <SafeAreaView className="flex-1 bg-background dark:bg-black">
-      <StatusBar style={isDark ? "light" : "dark"} />
-      <ScrollView
-        className="flex-1"
-        contentContainerClassName="flex-1 items-center justify-center p-6"
-        keyboardShouldPersistTaps="handled"
-      >
-        <Card className="w-full max-w-[400px]">
-          {step === "prompt" ? (
-            <>
-              <CardHeader className="items-center">
-                <View className="mb-3 h-16 w-16 items-center justify-center rounded-full bg-secondary dark:bg-neutral-800">
-                  <Ionicons
-                    name="shield-checkmark-outline"
-                    size={32}
-                    color={isDark ? "#FFFFFF" : "#000000"}
-                  />
-                </View>
-                <CardTitle className="text-center">Secure your account</CardTitle>
-                <CardDescription className="text-center">
-                  Add an extra layer of security with two-factor authentication (MFA). You&apos;ll
-                  need an authenticator app to generate verification codes.
-                </CardDescription>
-              </CardHeader>
-
-              {authenticatorAppPromo ? (
-                <CardContent className="gap-3">{authenticatorAppPromo}</CardContent>
-              ) : null}
-
-              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
-                <Button
-                  className="w-full"
-                  telemetryId="auth.mfa_enroll.start_setup"
-        onPress={handleStartSetup}
-                  isLoading={isLoading}
-                  accessibilityLabel="Enable MFA"
-                  accessibilityRole="button"
-                >
-                  Enable MFA
-                </Button>
-                <Button
-                  variant="ghost"
-                  className="w-full"
-                  telemetryId="auth.mfa_enroll.skip"
-        onPress={handleSkip}
-                  accessibilityLabel="Skip for now"
-                  accessibilityRole="button"
-                >
-                  Skip for now
-                </Button>
-              </CardFooter>
-            </>
-          ) : null}
-
-          {step === "setup" && setupData ? (
-            <>
-              <CardHeader className="items-center">
-                <CardTitle className="text-center">Scan QR code</CardTitle>
-                <CardDescription className="text-center">
-                  Open your authenticator app and scan this QR code, or enter the secret key
-                  manually.
-                </CardDescription>
-              </CardHeader>
-
-              <CardContent className="gap-4">
-                <View className="items-center">
-                  <View className="rounded-xl bg-white p-4">
-                    <QRCode
-                      value={setupData.uri}
-                      size={200}
-                      backgroundColor="#FFFFFF"
-                      color="#000000"
-                    />
-                  </View>
-                  <MutedText className="mt-2 text-center text-xs">
-                    Scan with your authenticator app
-                  </MutedText>
-                </View>
-
-                <Separator />
+  /**
+   * What the page says, per step.
+   *
+   * Held here rather than inline because the frame below takes one title and
+   * one subtitle, and three branches each rendering their own header is what
+   * made this screen three screens wearing the same card.
+   */
+  const page =
+    step === "prompt"
+      ? {
+          title: "Secure your account",
+          subtitle:
+            "Two-factor authentication asks for a code from an authenticator app as well as your password.",
+        }
+      : step === "setup"
+        ? {
+            title: "Scan the QR code",
+            subtitle: "Open your authenticator app and scan this, or enter the key by hand.",
+          }
+        : { title: "MFA is on", subtitle: "Save these recovery codes somewhere safe." };
 
-                <View>
-                  <MutedText className="mb-2 text-center text-xs font-medium">
-                    Can&apos;t scan? Enter the secret key manually
-                  </MutedText>
-                  <Pressable
-                    onPress={withClickTracking("auth.mfa_enroll.copy_to_clipboard", () => copyToClipboard(setupData.secret, "Secret"))}
-                    className="rounded-lg bg-secondary p-3 active:opacity-70 dark:bg-neutral-800"
-                    accessibilityRole="button"
-                    accessibilityLabel="Copy secret key"
-                    accessibilityHint="Double tap to copy the secret key to clipboard"
-                  >
-                    <MonoText className="text-center text-base font-bold tracking-widest">
-                      {setupData.secret}
-                    </MonoText>
-                  </Pressable>
-                  <MutedText className="mt-1 text-center text-xs">Tap to copy</MutedText>
-                </View>
+  return (
+    <AuthPage
+      layout={layout}
+      title={page.title}
+      subtitle={page.subtitle}
+      icon={
+        step === "setup" ? null : (
+          <View className="mb-3 h-16 w-16 items-center justify-center rounded-full bg-secondary dark:bg-neutral-800">
+            <Ionicons
+              name={step === "prompt" ? "shield-checkmark-outline" : "shield-checkmark"}
+              size={32}
+              color={isDark ? "#FFFFFF" : "#000000"}
+            />
+          </View>
+        )
+      }
+      maxWidth={400}
+      footer={
+        step === "prompt" ? (
+          <>
+            <Button
+              className="w-full"
+              telemetryId="auth.mfa_enroll.start_setup"
+              onPress={handleStartSetup}
+              isLoading={isLoading}
+              accessibilityLabel="Enable MFA"
+              accessibilityRole="button"
+            >
+              Enable MFA
+            </Button>
+            <Button
+              variant="ghost"
+              className="w-full"
+              telemetryId="auth.mfa_enroll.skip"
+              onPress={handleSkip}
+              accessibilityLabel="Skip for now"
+              accessibilityRole="button"
+            >
+              Skip for now
+            </Button>
+          </>
+        ) : step === "setup" ? (
+          <>
+            <Button
+              className="w-full"
+              telemetryId="auth.mfa_enroll.verify_code"
+              onPress={handleVerifyCode}
+              isLoading={isLoading}
+              disabled={code.length !== 6}
+              accessibilityLabel="Verify and enable MFA"
+              accessibilityRole="button"
+            >
+              Verify &amp; Enable
+            </Button>
+            <Button
+              variant="ghost"
+              className="w-full"
+              telemetryId="auth.mfa_enroll.skip_2"
+              onPress={handleSkip}
+              accessibilityLabel="Skip for now"
+              accessibilityRole="button"
+            >
+              Skip for now
+            </Button>
+          </>
+        ) : (
+          <Button
+            className="w-full"
+            telemetryId="auth.mfa_enroll.finish"
+            onPress={handleFinish}
+            accessibilityLabel={`Continue to ${appName}`}
+            accessibilityRole="button"
+          >
+            Continue to {appName}
+          </Button>
+        )
+      }
+    >
+      {step === "prompt" ? authenticatorAppPromo : null}
 
-                <Pressable
-                  onPress={withClickTracking("auth.mfa_enroll.copy_to_clipboard_2", () => copyToClipboard(setupData.uri, "URI"))}
-                  className="rounded-lg bg-secondary px-3 py-2 active:opacity-70 dark:bg-neutral-800"
-                  accessibilityRole="button"
-                  accessibilityLabel="Copy full OTP URI"
-                >
-                  <MutedText className="text-center text-xs">Copy full OTP URI</MutedText>
-                </Pressable>
+      {step === "setup" && setupData ? (
+        <>
+          <View className="items-center">
+            <View className="rounded-xl bg-white p-4">
+              <QRCode value={setupData.uri} size={200} backgroundColor="#FFFFFF" color="#000000" />
+            </View>
+          </View>
 
-                <Separator />
+          <Separator />
 
-                <View>
-                  <MutedText className="mb-1.5 text-center text-xs font-medium">
-                    Enter the 6-digit code from your authenticator
-                  </MutedText>
-                  <Input
-                    value={code}
-                    onChangeText={(text) => {
-                      setCode(text.replace(/[^0-9]/g, "").slice(0, 6));
-                      if (error) {
-                        setError("");
-                      }
-                    }}
-                    error={error}
-                    placeholder="000000"
-                    keyboardType="number-pad"
-                    className="text-center font-mono text-xl tracking-widest"
-                    returnKeyType="done"
-                    onSubmitEditing={handleVerifyCode}
-                    accessibilityLabel="Authenticator code"
-                  />
-                </View>
-              </CardContent>
+          <View>
+            <MutedText className="mb-2 text-center text-xs font-medium">
+              Can&apos;t scan? Enter the key by hand
+            </MutedText>
+            <Pressable
+              onPress={withClickTracking("auth.mfa_enroll.copy_to_clipboard", () =>
+                copyToClipboard(setupData.secret, "Secret")
+              )}
+              className="rounded-lg bg-secondary p-3 active:opacity-70 dark:bg-neutral-800"
+              accessibilityRole="button"
+              accessibilityLabel="Copy secret key"
+              accessibilityHint="Double tap to copy the secret key to clipboard"
+            >
+              <MonoText className="text-center text-base font-bold tracking-widest">
+                {setupData.secret}
+              </MonoText>
+            </Pressable>
+            <MutedText className="mt-1 text-center text-xs">Tap to copy</MutedText>
+          </View>
 
-              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
-                <Button
-                  className="w-full"
-                  telemetryId="auth.mfa_enroll.verify_code"
-        onPress={handleVerifyCode}
-                  isLoading={isLoading}
-                  disabled={code.length !== 6}
-                  accessibilityLabel="Verify and enable MFA"
-                  accessibilityRole="button"
-                >
-                  Verify & Enable
-                </Button>
-                <Button
-                  variant="ghost"
-                  className="w-full"
-                  telemetryId="auth.mfa_enroll.skip_2"
-        onPress={handleSkip}
-                  accessibilityLabel="Skip for now"
-                  accessibilityRole="button"
-                >
-                  Skip for now
-                </Button>
-              </CardFooter>
-            </>
-          ) : null}
+          <Pressable
+            onPress={withClickTracking("auth.mfa_enroll.copy_to_clipboard_2", () =>
+              copyToClipboard(setupData.uri, "URI")
+            )}
+            className="rounded-lg bg-secondary px-3 py-2 active:opacity-70 dark:bg-neutral-800"
+            accessibilityRole="button"
+            accessibilityLabel="Copy full OTP URI"
+          >
+            <MutedText className="text-center text-xs">Copy full OTP URI</MutedText>
+          </Pressable>
 
-          {step === "recovery" && setupData ? (
-            <>
-              <CardHeader className="items-center">
-                <View className="mb-3 h-16 w-16 items-center justify-center rounded-full bg-secondary dark:bg-neutral-800">
-                  <Ionicons
-                    name="shield-checkmark"
-                    size={32}
-                    color={isDark ? "#FFFFFF" : "#000000"}
-                  />
-                </View>
-                <CardTitle className="text-center">MFA enabled!</CardTitle>
-                <CardDescription className="text-center">
-                  Save these recovery codes in a safe place. You&apos;ll need them to access your
-                  account if you lose your authenticator device.
-                </CardDescription>
-              </CardHeader>
+          <Separator />
 
-              <CardContent className="gap-3">
-                <View className="rounded-lg border border-border bg-secondary p-4 dark:border-neutral-700 dark:bg-neutral-800">
-                  {setupData.recovery_codes.map((rc) => (
-                    <MonoText key={rc} className="text-center text-sm leading-6">
-                      {rc}
-                    </MonoText>
-                  ))}
-                </View>
+          <View>
+            <MutedText className="mb-1.5 text-center text-xs font-medium">
+              Enter the 6-digit code from your authenticator
+            </MutedText>
+            <Input
+              value={code}
+              onChangeText={(text) => {
+                setCode(text.replace(/[^0-9]/g, "").slice(0, 6));
+                if (error) {
+                  setError("");
+                }
+              }}
+              error={error}
+              placeholder="000000"
+              keyboardType="number-pad"
+              className="text-center font-mono text-xl tracking-widest"
+              returnKeyType="done"
+              onSubmitEditing={handleVerifyCode}
+              accessibilityLabel="Authenticator code"
+            />
+          </View>
+        </>
+      ) : null}
 
-                <Button
-                  variant="outline"
-                  className="w-full"
-                  telemetryId="auth.mfa_enroll.copy_to_clipboard_3"
-        onPress={() =>
-                    copyToClipboard(setupData.recovery_codes.join("\n"), "Recovery codes")
-                  }
-                  accessibilityLabel="Copy all recovery codes"
-                  accessibilityRole="button"
-                >
-                  {copied === "Recovery codes" ? "Copied!" : "Copy all codes"}
-                </Button>
+      {step === "recovery" && setupData ? (
+        <>
+          <View className="rounded-lg bg-secondary p-4 dark:bg-neutral-800">
+            {setupData.recovery_codes.map((rc) => (
+              <MonoText key={rc} className="text-center text-sm leading-6">
+                {rc}
+              </MonoText>
+            ))}
+          </View>
 
-                <View className="rounded-lg bg-secondary p-3 dark:bg-neutral-800">
-                  <View className="flex-row items-start gap-2">
-                    <Ionicons
-                      name="warning-outline"
-                      size={16}
-                      color={isDark ? "#F59E0B" : "#D97706"}
-                    />
-                    <MutedText className="flex-1 text-xs leading-4">
-                      Each code can only be used once. Store them securely — they cannot be
-                      recovered if lost.
-                    </MutedText>
-                  </View>
-                </View>
-              </CardContent>
+          <Button
+            variant="outline"
+            className="w-full"
+            telemetryId="auth.mfa_enroll.copy_to_clipboard_3"
+            onPress={() => copyToClipboard(setupData.recovery_codes.join("\n"), "Recovery codes")}
+            accessibilityLabel="Copy all recovery codes"
+            accessibilityRole="button"
+          >
+            {copied === "Recovery codes" ? "Copied!" : "Copy all codes"}
+          </Button>
 
-              <CardFooter className="border-t-0">
-                <Button
-                  className="w-full"
-                  telemetryId="auth.mfa_enroll.finish"
-        onPress={handleFinish}
-                  accessibilityLabel={`Continue to ${appName}`}
-                  accessibilityRole="button"
-                >
-                  Continue to {appName}
-                </Button>
-              </CardFooter>
-            </>
-          ) : null}
-        </Card>
-      </ScrollView>
-    </SafeAreaView>
+          <View className="flex-row items-start gap-2 rounded-lg bg-secondary p-3 dark:bg-neutral-800">
+            <Ionicons name="warning-outline" size={16} color={isDark ? "#F59E0B" : "#D97706"} />
+            <MutedText className="flex-1 text-xs leading-4">Each code works once.</MutedText>
+          </View>
+        </>
+      ) : null}
+    </AuthPage>
   );
 }