@entropy-softworks/ui 2026.7.31

package/src/screens/auth/VerifyEmailScreen.tsx

@@ -0,0 +1,310 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Platform, ScrollView, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+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 { 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";
+
+export function VerifyEmailScreen() {
+  const { refreshUser, logout, user } = useAuth();
+  const { routes } = useAppConfig();
+  const router = useNavigation();
+  const verifiedRef = useRef(false);
+  const autoSubmittingRef = useRef(false);
+
+  const proceedAfterVerification = useCallback(async () => {
+    const freshUser = await AuthService.refreshUserData();
+    await refreshUser();
+    if (freshUser?.onboarding_step === "mfa_enrollment") {
+      router.replace(routes.mfaEnroll);
+    } else if (freshUser?.onboarding_step === "import") {
+      router.replace(routes.importData);
+    } else {
+      // `complete`, null, an unknown step, or a missing freshUser
+      // record — fall through to home rather than leave the user
+      // stuck on the verify-email screen after the server has
+      // accepted their code. The consumer's route guard re-evaluates
+      // and bounces if onboarding actually isn't done.
+      router.replace(routes.home);
+    }
+  }, [refreshUser, router, routes]);
+
+  const params = useLocalSearchParams<{ email?: string; code?: string }>();
+  const [code, setCode] = useState("");
+  const [error, setError] = useState("");
+  const [autoSubmitCode, setAutoSubmitCode] = useState<string | null>(null);
+
+  useEffect(() => {
+    let urlCode: string | null = null;
+    if (params.code) {
+      urlCode = params.code;
+    } else if (Platform.OS === "web") {
+      const urlParams = new URLSearchParams(window.location.search);
+      urlCode = urlParams.get("code");
+    }
+    if (urlCode) {
+      setCode(urlCode);
+      setAutoSubmitCode(urlCode);
+    }
+  }, [params.code]);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [resendCooldown, setResendCooldown] = useState(0);
+
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  useEffect(() => {
+    // `cancelled` guards the async hop inside the tick — without it,
+    // a `refreshUserData()` that resolves after this effect's
+    // cleanup fired would still call Toast / Haptics / refreshUser
+    // on a stale closure (and the cleanup-cleared interval can't
+    // help once the await is already in flight).
+    let cancelled = false;
+    const interval = setInterval(async () => {
+      if (verifiedRef.current) {
+        return;
+      }
+      try {
+        const freshUser = await AuthService.refreshUserData();
+        if (cancelled) {
+          return;
+        }
+        if (freshUser?.email_verified) {
+          verifiedRef.current = true;
+          clearInterval(interval);
+          Toast.show({
+            type: "success",
+            text1: "Email verified!",
+            text2: "Your email has been verified successfully.",
+            visibilityTime: 3000,
+          });
+          await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+          if (cancelled) {
+            return;
+          }
+          await refreshUser();
+          if (cancelled) {
+            return;
+          }
+          void proceedAfterVerification();
+        }
+      } catch {
+        // Silently ignore polling errors
+      }
+    }, 5000);
+
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, [refreshUser, proceedAfterVerification]);
+
+  useEffect(() => {
+    if (user?.email_verified && !verifiedRef.current) {
+      verifiedRef.current = true;
+      void proceedAfterVerification();
+    }
+  }, [user?.email_verified, proceedAfterVerification]);
+
+  useEffect(() => {
+    if (resendCooldown <= 0) {
+      return;
+    }
+    const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
+    return () => clearTimeout(timer);
+  }, [resendCooldown]);
+
+  const handleVerify = async () => {
+    if (!code.trim()) {
+      setError("Verification code is required");
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      await AuthService.verifyEmail(code.trim());
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+      Toast.show({
+        type: "success",
+        text1: "Email verified!",
+        text2: "Your email has been verified successfully.",
+        visibilityTime: 3000,
+      });
+      await refreshUser();
+      void proceedAfterVerification();
+    } catch (e: unknown) {
+      setError(getErrorMessage(e, "Invalid verification code"));
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (autoSubmitCode && !isLoading && !autoSubmittingRef.current) {
+      autoSubmittingRef.current = true;
+      setAutoSubmitCode(null);
+      (async () => {
+        setIsLoading(true);
+        try {
+          await AuthService.verifyEmail(autoSubmitCode.trim());
+          await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+          Toast.show({
+            type: "success",
+            text1: "Email verified!",
+            text2: "Your email has been verified successfully.",
+            visibilityTime: 3000,
+          });
+          await refreshUser();
+          void proceedAfterVerification();
+        } catch (e: unknown) {
+          setError(getErrorMessage(e, "Invalid verification code"));
+          await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+        } finally {
+          setIsLoading(false);
+        }
+      })();
+    }
+  }, [autoSubmitCode, isLoading, refreshUser, proceedAfterVerification]);
+
+  const handleResend = async () => {
+    if (resendCooldown > 0) {
+      return;
+    }
+    try {
+      await AuthService.resendVerification();
+      setResendCooldown(30);
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+      Toast.show({
+        type: "success",
+        text1: "Verification email sent",
+        text2: "Check your inbox.",
+        visibilityTime: 3000,
+      });
+    } catch (e: unknown) {
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+      Toast.show({
+        type: "error",
+        text1: "Couldn't resend",
+        text2: getErrorMessage(e, "Please try again in a moment."),
+        visibilityTime: 4000,
+      });
+    }
+  };
+
+  return (
+    <SafeAreaView className="flex-1 bg-background">
+      <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
+            variant="ghost"
+            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={handleResend}
+                  accessibilityRole="button"
+                  accessibilityLabel="Resend verification code"
+                >
+                  Resend
+                </Text>
+              )}
+            </MutedText>
+          </CardContent>
+
+          <CardFooter className="flex-col items-center gap-1 border-t-0 pt-0">
+            <Button
+              className="h-14 w-full"
+              onPress={handleVerify}
+              isLoading={isLoading}
+              accessibilityLabel="Continue"
+              accessibilityRole="button"
+              accessibilityHint="Double tap to verify your email"
+              testID="verify-submit"
+            >
+              Continue
+            </Button>
+
+            <Button
+              variant="ghost"
+              className="w-full"
+              onPress={() => logout()}
+              accessibilityLabel="Sign out"
+              accessibilityRole="button"
+            >
+              Sign Out
+            </Button>
+          </CardFooter>
+        </Card>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default VerifyEmailScreen;

package/src/screens/auth/WelcomeScreen.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { Platform, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Link } from "expo-router";
+import { useNavigation } from "../../context/NavigationContext";
+import { StatusBar } from "expo-status-bar";
+import { useColorScheme } from "nativewind";
+import { Heading, MutedText, Text } from "../../components/text";
+import { Button } from "../../components/button";
+import { useAppConfig } from "../../context/AppConfigContext";
+
+export interface WelcomeScreenProps {
+  /**
+   * Optional decorative widget rendered between the brand block and the
+   * action buttons (e.g. vault's PasswordDemoAnimation). Apps with
+   * nothing to render here can omit it.
+   */
+  decoration?: React.ReactNode;
+  /**
+   * Optional widget rendered top-left/right of the screen. Vault uses
+   * this for its admin server-settings cog.
+   */
+  topAccessory?: React.ReactNode;
+}
+
+export function WelcomeScreen({ decoration, topAccessory }: WelcomeScreenProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const router = useNavigation();
+  const { appName, Logo, routes, tagline } = useAppConfig();
+
+  return (
+    <SafeAreaView className="flex-1 bg-background">
+      <StatusBar style={isDark ? "light" : "dark"} />
+      <View className="flex-1 items-center justify-center px-6 py-8">
+        {topAccessory}
+
+        <View className="mb-6 items-center">
+          <View className="mb-1 flex-row items-center">
+            <Logo width={72} height={72} style={{ marginRight: -2 }} />
+            <Heading className="text-4xl">{appName}</Heading>
+          </View>
+          {tagline ? <Text className="font-mono text-base text-foreground">{tagline}</Text> : null}
+        </View>
+
+        {decoration ? (
+          <View className={Platform.OS === "web" ? "mb-6 pt-6 pb-4" : "mb-4 pt-3 pb-3"}>
+            {decoration}
+          </View>
+        ) : null}
+
+        <View className="w-full max-w-[360px] gap-3">
+          <Button className="w-full" onPress={() => router.push(routes.login)}>
+            Sign In
+          </Button>
+          <Button variant="outline" className="w-full" onPress={() => router.push(routes.register)}>
+            Create Account
+          </Button>
+        </View>
+      </View>
+
+      <View className="px-5 pb-6">
+        <MutedText className="text-center text-xs">
+          By continuing, you agree to our{" "}
+          <Link href={routes.termsOfService} asChild>
+            <Text className="text-xs text-foreground underline">Terms of Service</Text>
+          </Link>{" "}
+          and{" "}
+          <Link href={routes.privacyPolicy} asChild>
+            <Text className="text-xs text-foreground underline">Privacy Policy</Text>
+          </Link>
+        </MutedText>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+export default WelcomeScreen;

package/src/screens/auth/index.ts

@@ -0,0 +1,36 @@
+export { WelcomeScreen, type WelcomeScreenProps } from "./WelcomeScreen";
+export { ForgotPasswordScreen } from "./ForgotPasswordScreen";
+export { MfaChallengeScreen } from "./MfaChallengeScreen";
+export {
+  TermsOfServiceScreen,
+  type TermsOfServiceScreenProps,
+  type LegalSection,
+} from "./TermsOfServiceScreen";
+export { VerifyEmailScreen } from "./VerifyEmailScreen";
+export { PrivacyPolicyScreen, type PrivacyPolicyScreenProps } from "./PrivacyPolicyScreen";
+export { ResetPasswordScreen, type ResetPasswordScreenProps } from "./ResetPasswordScreen";
+export { LoginScreen, type LoginScreenProps } from "./LoginScreen";
+export { AuthScreen, type AuthScreenProps, type AuthFormTransition } from "./AuthScreen";
+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 {
+  AccountPickerScreen,
+  type AccountPickerScreenProps,
+  type PickableAccount,
+} from "./AccountPickerScreen";
+export {
+  PasskeyEnrollScreen,
+  type PasskeyEnrollScreenProps,
+} from "./PasskeyEnrollScreen";
+export { ErrorScreen, type ErrorScreenProps } from "./ErrorScreen";
+export {
+  ExpiredLinkScreen,
+  type ExpiredLinkScreenProps,
+} from "./ExpiredLinkScreen";

package/src/screens/index.ts

@@ -0,0 +1 @@
+export * from "./auth";

package/src/services/__tests__/api-config.test.ts

@@ -0,0 +1,67 @@
+import {
+  __resetApiConfigStoreForTests,
+  configureApi,
+  getBaseUrl,
+  getDefaultBaseUrl,
+  getStoragePrefix,
+  resetBaseUrl,
+  setBaseUrl,
+} from "../api-config";
+
+// `Platform.OS` defaults to native under the babel-preset-expo jest preset,
+// so getSessionToken / storeSessionToken / secureStore behave as native here.
+// The test focuses on the URL + prefix state machine which is platform-agnostic.
+
+beforeEach(() => {
+  __resetApiConfigStoreForTests();
+});
+
+describe("configureApi", () => {
+  it("captures the apiBaseUrl and storagePrefix on first call", () => {
+    configureApi({ apiBaseUrl: "https://api.example.com", storagePrefix: "demo" });
+    expect(getBaseUrl()).toBe("https://api.example.com");
+    expect(getDefaultBaseUrl()).toBe("https://api.example.com");
+    expect(getStoragePrefix()).toBe("demo");
+  });
+
+  it("locks the storage prefix after the first call", () => {
+    configureApi({ apiBaseUrl: "https://a.example.com", storagePrefix: "first" });
+    configureApi({ apiBaseUrl: "https://b.example.com", storagePrefix: "second" });
+    expect(getStoragePrefix()).toBe("first");
+  });
+
+  it("throws when getBaseUrl is called before configure", () => {
+    expect(() => getBaseUrl()).toThrow(/configureApi/);
+    expect(() => getDefaultBaseUrl()).toThrow(/configureApi/);
+  });
+});
+
+describe("setBaseUrl / resetBaseUrl", () => {
+  beforeEach(() => {
+    configureApi({ apiBaseUrl: "https://default.example.com", storagePrefix: "demo" });
+  });
+
+  it("accepts https URLs", async () => {
+    await setBaseUrl("https://override.example.com");
+    expect(getBaseUrl()).toBe("https://override.example.com");
+  });
+
+  it("accepts http://localhost", async () => {
+    await setBaseUrl("http://localhost:8080/api");
+    expect(getBaseUrl()).toBe("http://localhost:8080/api");
+  });
+
+  it("rejects non-HTTPS, non-localhost URLs", async () => {
+    await expect(setBaseUrl("http://example.com")).rejects.toThrow(/HTTPS/);
+  });
+
+  it("rejects malformed URLs", async () => {
+    await expect(setBaseUrl("not-a-url")).rejects.toThrow(/Invalid/);
+  });
+
+  it("reset restores the configured default", async () => {
+    await setBaseUrl("https://override.example.com");
+    await resetBaseUrl();
+    expect(getBaseUrl()).toBe("https://default.example.com");
+  });
+});

package/src/services/__tests__/favicon.test.ts

@@ -0,0 +1,88 @@
+import {
+  buildFaviconUrl,
+  customIconId,
+  customIconRef,
+  isCustomIconRef,
+  resolveIcon,
+} from "../favicon";
+import { __resetApiConfigStoreForTests, configureApi } from "../api-config";
+
+beforeEach(() => {
+  __resetApiConfigStoreForTests();
+  configureApi({ apiBaseUrl: "https://api.example.com", storagePrefix: "demo" });
+});
+
+describe("buildFaviconUrl", () => {
+  it("returns null for missing input", () => {
+    expect(buildFaviconUrl(null)).toBeNull();
+    expect(buildFaviconUrl(undefined)).toBeNull();
+    expect(buildFaviconUrl("")).toBeNull();
+    expect(buildFaviconUrl("   ")).toBeNull();
+  });
+
+  it("promotes bare hostnames to https", () => {
+    const url = buildFaviconUrl("github.com");
+    expect(url).toContain("https%3A%2F%2Fgithub.com");
+  });
+
+  it("preserves explicit http URLs", () => {
+    const url = buildFaviconUrl("http://example.com");
+    expect(url).toContain("http%3A%2F%2Fexample.com");
+  });
+
+  it("rejects non-http(s) schemes", () => {
+    expect(buildFaviconUrl("ftp://x.example.com")).toBeNull();
+    expect(buildFaviconUrl("file:///etc/passwd")).toBeNull();
+  });
+
+  it("uses the configured base URL", () => {
+    expect(buildFaviconUrl("github.com")).toMatch(/^https:\/\/api\.example\.com\/favicon\?/);
+  });
+
+  it("respects a custom faviconPath", () => {
+    expect(buildFaviconUrl("github.com", "/icons/proxy")).toMatch(
+      /^https:\/\/api\.example\.com\/icons\/proxy\?/
+    );
+  });
+});
+
+describe("customIconRef helpers", () => {
+  it("round-trips a custom upload reference", () => {
+    expect(customIconRef("abc-123")).toBe("custom:abc-123");
+    expect(isCustomIconRef("custom:abc-123")).toBe(true);
+    expect(customIconId("custom:abc-123")).toBe("abc-123");
+  });
+
+  it("rejects non-custom strings", () => {
+    expect(isCustomIconRef("https://example.com/favicon.png")).toBe(false);
+    expect(customIconId(null)).toBeNull();
+    expect(customIconId("")).toBeNull();
+    expect(customIconId("custom:")).toBeNull();
+  });
+});
+
+describe("resolveIcon", () => {
+  it("prefers a custom upload over a site URL", () => {
+    expect(resolveIcon({ iconUrl: "custom:42", siteUrl: "github.com" })).toEqual({
+      kind: "upload",
+      uploadId: "42",
+    });
+  });
+
+  it("passes through a literal icon URL", () => {
+    const r = resolveIcon({ iconUrl: "https://cdn.example.com/icon.png" });
+    expect(r).toEqual({ kind: "url", uri: "https://cdn.example.com/icon.png" });
+  });
+
+  it("derives a favicon URL from the site when no iconUrl is set", () => {
+    const r = resolveIcon({ siteUrl: "github.com" });
+    expect(r.kind).toBe("url");
+    if (r.kind === "url") {
+      expect(r.uri).toMatch(/api\.example\.com\/favicon\?/);
+    }
+  });
+
+  it("returns kind=none when neither resolves", () => {
+    expect(resolveIcon({})).toEqual({ kind: "none" });
+  });
+});

package/src/services/__tests__/hibp-cache.test.ts

@@ -0,0 +1,37 @@
+import { clearCachedPolicy, getCachedPolicy, getHibpPolicy, setCachedPolicy } from "../hibp-cache";
+
+beforeEach(() => {
+  clearCachedPolicy();
+});
+
+describe("hibp policy cache", () => {
+  it("starts empty", () => {
+    expect(getCachedPolicy()).toBeNull();
+  });
+
+  it("round-trips a policy through set/get", () => {
+    const p = { enabled: true, enforce: false, block_threshold: 5 };
+    setCachedPolicy(p);
+    expect(getCachedPolicy()).toEqual(p);
+  });
+
+  it("clear empties the cache", () => {
+    setCachedPolicy({ enabled: true, enforce: true, block_threshold: 0 });
+    clearCachedPolicy();
+    expect(getCachedPolicy()).toBeNull();
+  });
+
+  it("getHibpPolicy falls back to a conservative default", () => {
+    clearCachedPolicy();
+    const fallback = getHibpPolicy();
+    expect(fallback.enabled).toBe(true);
+    expect(fallback.enforce).toBe(true);
+    expect(fallback.block_threshold).toBe(1000);
+  });
+
+  it("getHibpPolicy returns the cached entry when present", () => {
+    const p = { enabled: false, enforce: false, block_threshold: 7 };
+    setCachedPolicy(p);
+    expect(getHibpPolicy()).toEqual(p);
+  });
+});

package/src/services/__tests__/hibp.test.ts

@@ -0,0 +1,39 @@
+import { getPwnedMessage } from "../hibp";
+import { clearCachedPolicy, setCachedPolicy } from "../hibp-cache";
+
+beforeEach(() => {
+  clearCachedPolicy();
+});
+
+describe("getPwnedMessage", () => {
+  it("reports info when the lookup failed", () => {
+    const r = getPwnedMessage({ isPwned: null, count: 0, error: "offline" });
+    expect(r.severity).toBe("info");
+    expect(r.title).toMatch(/Unable/i);
+  });
+
+  it("reports info when the password is safe", () => {
+    const r = getPwnedMessage({ isPwned: false, count: 0 });
+    expect(r.severity).toBe("info");
+    expect(r.title).toMatch(/Safe/i);
+  });
+
+  it("reports warning by default on a breach hit (no enforcement)", () => {
+    setCachedPolicy({ enabled: true, enforce: false, block_threshold: 0 });
+    const r = getPwnedMessage({ isPwned: true, count: 42 });
+    expect(r.severity).toBe("warning");
+  });
+
+  it("escalates to error when the policy enforces and count exceeds the threshold", () => {
+    setCachedPolicy({ enabled: true, enforce: true, block_threshold: 100 });
+    const r = getPwnedMessage({ isPwned: true, count: 101 });
+    expect(r.severity).toBe("error");
+    expect(r.title).toMatch(/Compromised/i);
+  });
+
+  it("stays at warning when the count is below the enforcement threshold", () => {
+    setCachedPolicy({ enabled: true, enforce: true, block_threshold: 100 });
+    const r = getPwnedMessage({ isPwned: true, count: 50 });
+    expect(r.severity).toBe("warning");
+  });
+});