@entropy-softworks/ui 2026.7.31

package/src/screens/auth/ConsentScreen.tsx

@@ -0,0 +1,118 @@
+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 { MutedText, Text } from "../../components/text";
+import { Button } from "../../components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/card";
+
+/** One requested scope, with an optional human-readable description. */
+export interface ConsentScope {
+  scope: string;
+  description?: string;
+}
+
+export interface ConsentScreenProps {
+  /** The relying party's display name (heading). */
+  clientName: string;
+  /** The scopes the client is requesting. */
+  scopes: ConsentScope[];
+  /** Approve — the app records the grant and resumes the authorize request. */
+  onAllow: () => void;
+  /** Decline — the app bounces the client with `access_denied`. */
+  onDeny: () => void;
+  isLoading?: boolean;
+  error?: string;
+}
+
+/**
+ * OIDC consent prompt (OIDC Core §3.1.2.4). Presentational + prop-driven: the
+ * host app fetches the request detail, records the decision, and navigates —
+ * this screen only renders the scopes and the allow/deny choice, so it stays
+ * transport-agnostic and reusable across apps.
+ */
+export function ConsentScreen({
+  clientName,
+  scopes,
+  onAllow,
+  onDeny,
+  isLoading,
+  error,
+}: ConsentScreenProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  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"
+      >
+        <Card className="w-full max-w-[400px]">
+          <CardHeader>
+            <CardTitle>Authorize {clientName}</CardTitle>
+            <CardDescription>
+              {clientName} wants access to your account. Review what it can do.
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent className="gap-3">
+            {scopes.length === 0 ? (
+              <MutedText className="text-sm">
+                Basic sign-in (no additional access requested).
+              </MutedText>
+            ) : (
+              scopes.map((s) => (
+                <View key={s.scope} className="flex-row gap-2">
+                  <Text className="text-sm text-foreground">•</Text>
+                  <View className="flex-1">
+                    <Text className="text-sm text-foreground">{s.scope}</Text>
+                    {s.description ? (
+                      <MutedText className="text-xs">{s.description}</MutedText>
+                    ) : null}
+                  </View>
+                </View>
+              ))
+            )}
+            {error ? (
+              <Text className="text-sm text-destructive">{error}</Text>
+            ) : null}
+          </CardContent>
+
+          <CardFooter className="flex-col gap-3 border-t-0">
+            <Button
+              className="w-full"
+              onPress={onAllow}
+              isLoading={isLoading}
+              accessibilityLabel={`Allow ${clientName}`}
+              accessibilityRole="button"
+            >
+              Allow
+            </Button>
+            <Button
+              className="w-full"
+              variant="outline"
+              onPress={onDeny}
+              accessibilityLabel="Deny access"
+              accessibilityRole="button"
+            >
+              Deny
+            </Button>
+          </CardFooter>
+        </Card>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default ConsentScreen;

package/src/screens/auth/ErrorScreen.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { StatusBar } from "expo-status-bar";
+import { useColorScheme } from "nativewind";
+import { MutedText } from "../../components/text";
+import { Button } from "../../components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/card";
+
+export interface ErrorScreenProps {
+  /** Machine error code (e.g. `unknown_client`), shown for support/debugging. */
+  code?: string;
+  title?: string;
+  message?: string;
+  /** Optional retry action. */
+  onRetry?: () => void;
+  /** Optional "back to safety" action (e.g. home / sign-in). */
+  onHome?: () => void;
+  homeLabel?: string;
+}
+
+/**
+ * Polished terminal error screen for the auth surfaces (a failed authorize, an
+ * unexpected server error, …). Presentational; the host app maps codes to
+ * copy and wires the actions.
+ */
+export function ErrorScreen({
+  code,
+  title = "Something went wrong",
+  message = "We couldn't complete that request. Please try again.",
+  onRetry,
+  onHome,
+  homeLabel = "Back to sign in",
+}: ErrorScreenProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  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"
+      >
+        <Card className="w-full max-w-[380px]">
+          <CardHeader>
+            <CardTitle>{title}</CardTitle>
+            <CardDescription>{message}</CardDescription>
+          </CardHeader>
+
+          {code ? (
+            <CardContent>
+              <MutedText className="font-mono text-xs">code: {code}</MutedText>
+            </CardContent>
+          ) : null}
+
+          {onRetry || onHome ? (
+            <CardFooter className="flex-col gap-3 border-t-0">
+              {onRetry ? (
+                <Button
+                  className="w-full"
+                  onPress={onRetry}
+                  accessibilityLabel="Try again"
+                  accessibilityRole="button"
+                >
+                  Try again
+                </Button>
+              ) : null}
+              {onHome ? (
+                <Button
+                  className="w-full"
+                  variant="outline"
+                  onPress={onHome}
+                  accessibilityLabel={homeLabel}
+                  accessibilityRole="button"
+                >
+                  {homeLabel}
+                </Button>
+              ) : null}
+            </CardFooter>
+          ) : null}
+        </Card>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default ErrorScreen;

package/src/screens/auth/ExpiredLinkScreen.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { StatusBar } from "expo-status-bar";
+import { useColorScheme } from "nativewind";
+import { Button } from "../../components/button";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/card";
+
+export interface ExpiredLinkScreenProps {
+  title?: string;
+  message?: string;
+  /** Request a fresh link (e.g. resend verification / reset). */
+  onRequestNew?: () => void;
+  requestLabel?: string;
+  /** Return to sign in. */
+  onHome?: () => void;
+  homeLabel?: string;
+}
+
+/**
+ * Shown when a one-time link (email verification, password reset, magic link)
+ * has expired or was already used. Presentational; the host app wires the
+ * "request a new link" + "back to sign in" actions.
+ */
+export function ExpiredLinkScreen({
+  title = "This link has expired",
+  message = "For your security, this link is no longer valid. Request a new one to continue.",
+  onRequestNew,
+  requestLabel = "Send a new link",
+  onHome,
+  homeLabel = "Back to sign in",
+}: ExpiredLinkScreenProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  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"
+      >
+        <Card className="w-full max-w-[380px]">
+          <CardHeader>
+            <CardTitle>{title}</CardTitle>
+            <CardDescription>{message}</CardDescription>
+          </CardHeader>
+
+          {onRequestNew || onHome ? (
+            <CardFooter className="flex-col gap-3 border-t-0">
+              {onRequestNew ? (
+                <Button
+                  className="w-full"
+                  onPress={onRequestNew}
+                  accessibilityLabel={requestLabel}
+                  accessibilityRole="button"
+                >
+                  {requestLabel}
+                </Button>
+              ) : null}
+              {onHome ? (
+                <Button
+                  className="w-full"
+                  variant="outline"
+                  onPress={onHome}
+                  accessibilityLabel={homeLabel}
+                  accessibilityRole="button"
+                >
+                  {homeLabel}
+                </Button>
+              ) : null}
+            </CardFooter>
+          ) : null}
+        </Card>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default ExpiredLinkScreen;

package/src/screens/auth/ForgotPasswordScreen.tsx

@@ -0,0 +1,182 @@
+import React, { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { type Href } 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 { MutedText, Text } from "../../components/text";
+import { Button, IconButton } from "../../components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/card";
+import { EmailInput } from "../../components/input";
+import AuthService from "../../services/auth.service";
+import { validateEmail } from "../../utils/validation";
+import { useAppConfig } from "../../context/AppConfigContext";
+
+export function ForgotPasswordScreen() {
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [sent, setSent] = useState(false);
+
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const router = useNavigation();
+  const { routes } = useAppConfig();
+
+  const handleSubmit = async () => {
+    // Re-entry guard against double-submit (button + form-submit
+    // keypress) firing before React flushes `setIsLoading(true)`
+    // and disables the button.
+    if (isLoading) {
+      return;
+    }
+    if (!email) {
+      setError("Email is required");
+      return;
+    }
+    if (!validateEmail(email)) {
+      setError("Please enter a valid email address");
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      await AuthService.forgotPassword(email);
+    } catch (e: unknown) {
+      // Deliberately swallow — the server is supposed to respond
+      // identically for known and unknown emails, but a 5xx (or a
+      // rate-limit, network blip, etc.) would otherwise let the UI
+      // branch on "did this email exist or not?". Surface the same
+      // confirmation regardless; the server retries on its own
+      // schedule and ops can read the failure from the server logs.
+      if (__DEV__) {
+        console.warn("[forgot-password] request failed; showing generic confirmation:", e);
+      }
+    }
+    await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    setSent(true);
+    setIsLoading(false);
+  };
+
+  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={() => router.back()}
+            accessibilityLabel="Go back"
+            accessibilityRole="button"
+          >
+            <Ionicons name="arrow-back" size={24} color={isDark ? "#FFFFFF" : "#000000"} />
+          </IconButton>
+        </View>
+
+        <Card className="w-full max-w-[360px]">
+          <CardHeader>
+            <CardTitle>{sent ? "Check your email" : "Forgot password?"}</CardTitle>
+            <CardDescription>
+              {sent
+                ? `If an account exists for ${email}, you will receive a password reset code.`
+                : "Enter your email to reset your password"}
+            </CardDescription>
+          </CardHeader>
+
+          {!sent ? (
+            <>
+              <CardContent className="gap-4">
+                <EmailInput
+                  label="Email"
+                  value={email}
+                  onChangeText={(text) => {
+                    setEmail(text);
+                    if (error) {
+                      setError("");
+                    }
+                  }}
+                  error={error}
+                  autoFocus
+                  returnKeyType="done"
+                  onSubmitEditing={handleSubmit}
+                  accessibilityLabel="Email address"
+                />
+              </CardContent>
+
+              <CardFooter className="flex-col gap-3 border-t-0">
+                <Button
+                  className="w-full"
+                  onPress={handleSubmit}
+                  isLoading={isLoading}
+                  accessibilityLabel="Reset your password"
+                  accessibilityRole="button"
+                >
+                  Reset your password
+                </Button>
+
+                <MutedText className="text-center text-sm">
+                  Remember your password?{" "}
+                  <Text
+                    className="text-sm text-foreground underline"
+                    onPress={() => router.push(routes.login)}
+                    accessibilityRole="link"
+                    accessibilityLabel="Sign in"
+                  >
+                    Sign In
+                  </Text>
+                </MutedText>
+              </CardFooter>
+            </>
+          ) : (
+            <CardFooter className="flex-col gap-3 border-t-0">
+              <Button
+                className="w-full"
+                onPress={() =>
+                  router.push({
+                    pathname: routes.resetPassword,
+                    params: { email },
+                  } as Href)
+                }
+                accessibilityLabel="Enter reset code"
+                accessibilityRole="button"
+              >
+                Enter reset code
+              </Button>
+
+              <MutedText className="text-center text-sm">
+                Didn't receive the code?{" "}
+                <Text
+                  className="text-sm text-foreground underline"
+                  onPress={() => {
+                    setSent(false);
+                    setError("");
+                  }}
+                  accessibilityRole="button"
+                  accessibilityLabel="Resend reset email"
+                >
+                  Resend
+                </Text>
+              </MutedText>
+            </CardFooter>
+          )}
+        </Card>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default ForgotPasswordScreen;

package/src/screens/auth/ImportDataScreen.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import { ScrollView, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useNavigation } from "../../context/NavigationContext";
+import { StatusBar } from "expo-status-bar";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import Toast from "react-native-toast-message";
+import { MutedText } from "../../components/text";
+import { Button } from "../../components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/card";
+import AuthService from "../../services/auth.service";
+import { useAuth } from "../../hooks/useAuth";
+import { useAppConfig } from "../../context/AppConfigContext";
+import { getErrorMessage } from "../../utils/error";
+
+export interface ImportDataScreenProps {
+  /**
+   * Optional custom import flow. When provided, the screen renders this
+   * instead of the default skip-only UI — call `onComplete` after a
+   * successful import and the screen advances onboarding + navigates to
+   * home. Vault wires its `parseBitwardenExport` + `VaultFacade` + key
+   * manager unlock flow through this slot.
+   */
+  renderImport?: (props: { onComplete: () => void; onSkip: () => void }) => React.ReactNode;
+}
+
+export function ImportDataScreen({ renderImport }: ImportDataScreenProps = {}) {
+  const router = useNavigation();
+  const { refreshUser } = useAuth();
+  const { appName, routes } = useAppConfig();
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  const completeAndNavigate = async () => {
+    try {
+      await AuthService.completeOnboarding();
+      await refreshUser();
+      router.replace(routes.home);
+    } catch (e: unknown) {
+      Toast.show({
+        type: "error",
+        text1: getErrorMessage(e, "Failed to complete onboarding"),
+        visibilityTime: 3000,
+      });
+    }
+  };
+
+  if (renderImport) {
+    return (
+      <SafeAreaView className="flex-1 bg-background">
+        <StatusBar style={isDark ? "light" : "dark"} />
+        {renderImport({ onComplete: completeAndNavigate, onSkip: completeAndNavigate })}
+      </SafeAreaView>
+    );
+  }
+
+  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"
+      >
+        <Card className="w-full max-w-[420px]">
+          <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="checkmark-done-outline"
+                size={32}
+                color={isDark ? "#FFFFFF" : "#000000"}
+              />
+            </View>
+            <CardTitle className="text-center">You&apos;re all set</CardTitle>
+            <CardDescription className="text-center">
+              Your {appName} account is ready. Continue to start using it.
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent>
+            <MutedText className="text-center text-sm">
+              Nothing to migrate here — apps that need a data-import step wire a custom
+              `renderImport` slot.
+            </MutedText>
+          </CardContent>
+
+          <CardFooter className="border-t-0">
+            <Button
+              className="w-full"
+              onPress={completeAndNavigate}
+              accessibilityLabel={`Continue to ${appName}`}
+              accessibilityRole="button"
+              testID="import-continue"
+            >
+              Continue to {appName}
+            </Button>
+          </CardFooter>
+        </Card>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default ImportDataScreen;