@entropy-softworks/ui 2026.9.9 → 2026.9.11

package/src/screens/auth/AuthPage.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import { ScrollView, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { StatusBar } from "expo-status-bar";
+import { useColorScheme } from "nativewind";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/card";
+import { Heading, MutedText } from "../../components/text";
+
+/**
+ * Which shape an auth screen takes.
+ *
+ * `card` is a dialog floated in the middle of the viewport: a title, a
+ * description, the content and the actions, all inside a bordered panel. It is
+ * right on a desktop portal and it is what every consumer of these screens has
+ * always had.
+ *
+ * `screen` is the phone shape — heading at the top, content filling the space
+ * below it, actions at the bottom, no panel. A card on a phone is a panel
+ * floated over nothing, with its own padding inside the screen's padding, and
+ * next to a flow built the other way it reads as something from another app.
+ *
+ * The default stays `card` so nothing changes for anyone who does not ask.
+ */
+export type AuthPageLayout = "card" | "screen";
+
+export interface AuthPageProps {
+  layout?: AuthPageLayout;
+  title: string;
+  subtitle?: string | null;
+  /** Drawn above the title in the card layout, and nowhere in the screen one. */
+  icon?: React.ReactNode;
+  /** Top-left of the page, outside the content — a sign-out control, usually. */
+  corner?: React.ReactNode;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  /** Card width. Ignored by the screen layout, which has the whole width. */
+  maxWidth?: number;
+}
+
+export function AuthPage({
+  layout = "card",
+  title,
+  subtitle,
+  icon,
+  corner,
+  children,
+  footer,
+  maxWidth = 440,
+}: AuthPageProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  if (layout === "screen") {
+    return (
+      <SafeAreaView className="flex-1 bg-background dark:bg-black">
+        <StatusBar style={isDark ? "light" : "dark"} />
+        <ScrollView
+          className="flex-1"
+          contentContainerStyle={{ flexGrow: 1 }}
+          keyboardShouldPersistTaps="handled"
+        >
+          <View className="flex-1 px-6 pb-10 pt-4">
+            {/* The corner control sits in the 40px above the heading rather
+                than absolutely over the content, which is where the card
+                layout puts it. Same row every screen in the flow leaves for a
+                back control, so the headings all land in the same place. */}
+            <View className="mb-4 h-10 flex-row items-center">{corner}</View>
+
+            <Heading
+              className="text-3xl"
+              numberOfLines={1}
+              adjustsFontSizeToFit
+              minimumFontScale={0.7}
+            >
+              {title}
+            </Heading>
+            {subtitle ? (
+              <MutedText className="mt-2 text-base leading-6">{subtitle}</MutedText>
+            ) : null}
+
+            <View className="flex-1 pt-6">{children}</View>
+            {footer ? <View className="gap-2 pt-6">{footer}</View> : null}
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    );
+  }
+
+  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"
+      >
+        {corner ? <View className="absolute left-6 top-4 mt-4 self-start">{corner}</View> : null}
+
+        <Card className="w-full" style={{ maxWidth }}>
+          <CardHeader className="items-center">
+            {icon}
+            <CardTitle className="text-center text-2xl">{title}</CardTitle>
+            {subtitle ? (
+              <CardDescription className="text-center text-base">{subtitle}</CardDescription>
+            ) : null}
+          </CardHeader>
+
+          <CardContent className="gap-4 pb-3">{children}</CardContent>
+
+          {footer ? (
+            <CardFooter className="flex-col items-stretch gap-1 border-t-0 pt-0">
+              {footer}
+            </CardFooter>
+          ) : null}
+        </Card>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default AuthPage;

package/src/screens/auth/AuthScreen.tsx

@@ -279,6 +279,18 @@ export interface AuthScreenProps {
    * hidden too, since there is no stage behind it.
    */
   showWelcome?: boolean;
+  /**
+   * Card title, e.g. "Log in to Entropy".
+   *
+   * Undefined renders no heading, which is the right default for an app whose
+   * own login the user reached deliberately -- the surrounding brand already
+   * says where they are. Set it on an identity provider, where the user is
+   * frequently redirected in from a relying application and the card is the
+   * only thing on screen that can say whose credentials to type.
+   */
+  title?: string;
+  /** Optional line under `title`. Ignored unless `title` is set. */
+  subtitle?: string;
 }
 
 /**
@@ -314,6 +326,8 @@ export function AuthScreen({
   onSignUp,
   signUpSuccessMessage = "Account created. Check your email to verify the address, then sign in.",
   showWelcome = true,
+  title,
+  subtitle,
 }: AuthScreenProps = {}) {
   const {
     login: authLogin,
@@ -1139,6 +1153,24 @@ export function AuthScreen({
                               that otherwise all collects above the footer.
                               Applies to both modes — the header is shared. */}
                             <CardHeader className="gap-5 pb-3 pt-5">
+                              {/* WHOSE login this is.
+                                Without it the card is a pair of unlabelled
+                                fields under a Sign In / Sign Up toggle, which
+                                is fine when the user arrived from the app they
+                                are signing into and actively confusing when an
+                                OIDC redirect dropped them here from somewhere
+                                else -- the case an identity provider is FOR.
+                                Rendered above the toggle so it reads as a
+                                title for the card rather than a label for
+                                whichever mode happens to be selected. */}
+                              {title ? (
+                                <View className="gap-1">
+                                  <CardTitle>{title}</CardTitle>
+                                  {subtitle ? (
+                                    <MutedText className="text-sm leading-5">{subtitle}</MutedText>
+                                  ) : null}
+                                </View>
+                              ) : null}
                               {signUpEnabled ? (
                                 <SegmentedToggle<Mode>
                                   value={mode}

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>
   );
 }