@entropy-softworks/ui 2026.9.9 → 2026.9.11

package/src/screens/auth/VerifyEmailScreen.tsx

@@ -1,31 +1,27 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Platform, ScrollView, View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { Platform } from "react-native";
 import { useLocalSearchParams } from "expo-router";
 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";
 import Toast from "react-native-toast-message";
 import { MutedText, Text } from "../../components/text";
 import { Button, IconButton } from "../../components/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../../components/card";
 import { withClickTracking } from "../../services/telemetry";
 import { Input } from "../../components/input";
 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";
 
-export function VerifyEmailScreen() {
+export interface VerifyEmailScreenProps {
+  /** See `AuthPageLayout`. Defaults to the card, as it always was. */
+  layout?: AuthPageLayout;
+}
+
+export function VerifyEmailScreen({ layout }: VerifyEmailScreenProps = {}) {
   const { refreshUser, logout, user } = useAuth();
   const { routes } = useAppConfig();
   const router = useNavigation();
@@ -214,106 +210,87 @@ export function VerifyEmailScreen() {
   };
 
   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"
-      >
-        <View className="mt-4 self-start absolute top-4 left-6">
-          <IconButton
+    <AuthPage
+      layout={layout}
+      title="Verify your email"
+      subtitle={`Enter the verification code sent to ${params.email || "your email"}`}
+      corner={
+        <IconButton
+          variant="ghost"
+          telemetryId="auth.verify_email.logout"
+          onPress={() => logout()}
+          accessibilityLabel="Sign out"
+          accessibilityRole="button"
+        >
+          <Ionicons name="log-out-outline" size={24} color={isDark ? "#FFFFFF" : "#000000"} />
+        </IconButton>
+      }
+      footer={
+        <>
+          <Button
+            className="h-14 w-full"
+            telemetryId="auth.verify_email.verify"
+            onPress={handleVerify}
+            isLoading={isLoading}
+            accessibilityLabel="Continue"
+            accessibilityRole="button"
+            accessibilityHint="Double tap to verify your email"
+            testID="verify-submit"
+          >
+            Continue
+          </Button>
+
+          <Button
             variant="ghost"
-            telemetryId="auth.verify_email.logout"
+            className="w-full"
+            telemetryId="auth.verify_email.logout_2"
             onPress={() => logout()}
             accessibilityLabel="Sign out"
             accessibilityRole="button"
           >
-            <Ionicons name="log-out-outline" size={24} color={isDark ? "#FFFFFF" : "#000000"} />
-          </IconButton>
-        </View>
-
-        <Card className="w-full max-w-[440px]">
-          <CardHeader className="items-center">
-            <CardTitle className="text-center text-2xl">Verify your email</CardTitle>
-            <CardDescription className="text-center text-base">
-              {`Enter the verification code sent to\n${params.email || "your email"}`}
-            </CardDescription>
-          </CardHeader>
-
-          <CardContent className="gap-4 pb-3">
-            <Input
-              label="Verification Code"
-              labelClassName="text-base"
-              className="h-14"
-              value={code}
-              onChangeText={(text) => {
-                setCode(text);
-                if (error) {
-                  setError("");
-                }
-              }}
-              error={error}
-              placeholder="Paste your verification code"
-              autoCapitalize="none"
-              autoFocus
-              returnKeyType="done"
-              onSubmitEditing={handleVerify}
-              accessibilityLabel="Verification code"
-              testID="verify-code-input"
-            />
-
-            <MutedText className="text-center text-base">
-              Didn&apos;t receive the code?{" "}
-              {resendCooldown > 0 ? (
-                <Text className="text-base text-foreground">Resend ({resendCooldown})</Text>
-              ) : (
-                <Text
-                  className="text-base text-foreground underline"
-                  onPress={withClickTracking("auth.verify_email.resend", handleResend)}
-                  accessibilityRole="button"
-                  accessibilityLabel="Resend verification code"
-                >
-                  Resend
-                </Text>
-              )}
-            </MutedText>
-          </CardContent>
-
-          {/* `items-stretch`, like every other stacked footer in this package.
-              `CardFooter` defaults to `flex-row items-center`, and turning it
-              into a column leaves the centring behind — so a `w-full` child
-              resolves its percentage against a parent that is itself sizing to
-              its content. On Android that measured out wide, with the label
-              sitting in one half of a button twice the width it asked for. */}
-          <CardFooter className="flex-col items-stretch gap-1 border-t-0 pt-0">
-            <Button
-              className="h-14 w-full"
-              telemetryId="auth.verify_email.verify"
-              onPress={handleVerify}
-              isLoading={isLoading}
-              accessibilityLabel="Continue"
-              accessibilityRole="button"
-              accessibilityHint="Double tap to verify your email"
-              testID="verify-submit"
-            >
-              Continue
-            </Button>
+            Sign Out
+          </Button>
+        </>
+      }
+    >
+      <Input
+        label="Verification Code"
+        labelClassName="text-base"
+        className="h-14"
+        value={code}
+        onChangeText={(text) => {
+          setCode(text);
+          if (error) {
+            setError("");
+          }
+        }}
+        error={error}
+        placeholder="Enter the 6-digit code"
+        autoCapitalize="none"
+        keyboardType="number-pad"
+        autoFocus
+        returnKeyType="done"
+        onSubmitEditing={handleVerify}
+        accessibilityLabel="Verification code"
+        testID="verify-code-input"
+      />
 
-            <Button
-              variant="ghost"
-              className="w-full"
-              telemetryId="auth.verify_email.logout_2"
-              onPress={() => logout()}
-              accessibilityLabel="Sign out"
-              accessibilityRole="button"
-            >
-              Sign Out
-            </Button>
-          </CardFooter>
-        </Card>
-      </ScrollView>
-    </SafeAreaView>
+      <MutedText className="text-center text-base">
+        Didn&apos;t receive the code?{" "}
+        {resendCooldown > 0 ? (
+          <Text className="text-base text-foreground">Resend ({resendCooldown})</Text>
+        ) : (
+          <Text
+            className="text-base text-foreground underline"
+            onPress={withClickTracking("auth.verify_email.resend", handleResend)}
+            accessibilityRole="button"
+            accessibilityLabel="Resend verification code"
+          >
+            Resend
+          </Text>
+        )}
+      </MutedText>
+    </AuthPage>
   );
 }
 

package/src/screens/auth/index.ts

@@ -1,3 +1,4 @@
+export { AuthPage, type AuthPageProps, type AuthPageLayout } from "./AuthPage";
 export { WelcomeScreen, type WelcomeScreenProps } from "./WelcomeScreen";
 export { ForgotPasswordScreen } from "./ForgotPasswordScreen";
 export { MfaChallengeScreen } from "./MfaChallengeScreen";
@@ -6,7 +7,7 @@ export {
   type TermsOfServiceScreenProps,
   type LegalSection,
 } from "./TermsOfServiceScreen";
-export { VerifyEmailScreen } from "./VerifyEmailScreen";
+export { VerifyEmailScreen, type VerifyEmailScreenProps } from "./VerifyEmailScreen";
 export { PrivacyPolicyScreen, type PrivacyPolicyScreenProps } from "./PrivacyPolicyScreen";
 export { ResetPasswordScreen, type ResetPasswordScreenProps } from "./ResetPasswordScreen";
 export { LoginScreen, type LoginScreenProps } from "./LoginScreen";
@@ -15,22 +16,12 @@ export { MfaEnrollScreen, type MfaEnrollScreenProps } from "./MfaEnrollScreen";
 export { RegisterScreen, type RegisterScreenProps } from "./RegisterScreen";
 export { ServerConfigScreen, type ServerConfigScreenProps } from "./ServerConfigScreen";
 export { ImportDataScreen, type ImportDataScreenProps } from "./ImportDataScreen";
-export {
-  ConsentScreen,
-  type ConsentScreenProps,
-  type ConsentScope,
-} from "./ConsentScreen";
+export { ConsentScreen, type ConsentScreenProps, type ConsentScope } from "./ConsentScreen";
 export {
   AccountPickerScreen,
   type AccountPickerScreenProps,
   type PickableAccount,
 } from "./AccountPickerScreen";
-export {
-  PasskeyEnrollScreen,
-  type PasskeyEnrollScreenProps,
-} from "./PasskeyEnrollScreen";
+export { PasskeyEnrollScreen, type PasskeyEnrollScreenProps } from "./PasskeyEnrollScreen";
 export { ErrorScreen, type ErrorScreenProps } from "./ErrorScreen";
-export {
-  ExpiredLinkScreen,
-  type ExpiredLinkScreenProps,
-} from "./ExpiredLinkScreen";
+export { ExpiredLinkScreen, type ExpiredLinkScreenProps } from "./ExpiredLinkScreen";