@entropy-softworks/ui 2026.7.31

package/src/screens/auth/PrivacyPolicyScreen.tsx

@@ -0,0 +1,249 @@
+import React from "react";
+import { Linking, ScrollView, Text, 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 { IconButton } from "../../components/button";
+import { EntropyByline } from "../../components/entropy-mark";
+import { useAppConfig } from "../../context/AppConfigContext";
+import type { LegalSection } from "./TermsOfServiceScreen";
+
+export interface PrivacyPolicyScreenProps {
+  /**
+   * Per-app section list. When omitted, falls back to
+   * `AppConfig.privacyText` (rendered as a single section) or a generic
+   * placeholder.
+   */
+  sections?: LegalSection[];
+  /** Optional highlight bullet list (vault renders four privacy bullets). */
+  highlights?: string[];
+  buildLabel?: string;
+  effectiveDate?: string;
+  supportEmail?: string;
+  organisationName?: string;
+}
+
+export function PrivacyPolicyScreen({
+  sections,
+  highlights,
+  buildLabel,
+  effectiveDate,
+  supportEmail = "support@entropysoftworks.com",
+  organisationName,
+}: PrivacyPolicyScreenProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const router = useNavigation();
+  const { appName, privacyText } = useAppConfig();
+
+  const resolvedSections: LegalSection[] =
+    sections ??
+    (privacyText
+      ? [{ title: "Privacy", content: privacyText }]
+      : [{ title: "Privacy Policy", content: `Privacy policy for ${appName}.` }]);
+
+  const today =
+    effectiveDate ??
+    new Date().toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+
+  const org = organisationName ?? appName;
+
+  return (
+    <SafeAreaView className="flex-1" style={{ backgroundColor: isDark ? "#000000" : "#FFFFFF" }}>
+      <StatusBar style={isDark ? "light" : "dark"} />
+
+      <View className="flex-1" style={{ backgroundColor: isDark ? "#000000" : "#FFFFFF" }}>
+        <View className="px-6 pt-4 pb-6">
+          <View className="flex-row items-center justify-between mb-6">
+            <IconButton variant="ghost" size="sm" onPress={() => router.back()}>
+              <Ionicons name="arrow-back" size={20} color={isDark ? "#FFFFFF" : "#000000"} />
+            </IconButton>
+
+            {buildLabel ? (
+              <Text className="text-xs" style={{ color: isDark ? "#999999" : "#666666" }}>
+                {buildLabel}
+              </Text>
+            ) : null}
+          </View>
+
+          <Text
+            className="font-sans-bold mb-3"
+            style={{ fontSize: 36, color: isDark ? "#FFFFFF" : "#000000" }}
+          >
+            Privacy Policy
+          </Text>
+
+          <Text className="font-mono text-sm" style={{ color: isDark ? "#999999" : "#666666" }}>
+            Effective Date: {today}
+          </Text>
+        </View>
+
+        <ScrollView
+          className="flex-1 px-6"
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{ paddingBottom: 40 }}
+        >
+          <View
+            className="rounded-lg mb-4 p-4"
+            style={{
+              backgroundColor: isDark ? "#1A1A1A" : "#F9F9F9",
+              borderWidth: 1,
+              borderColor: isDark ? "#333333" : "#E5E5E5",
+            }}
+          >
+            <Text
+              className="font-mono text-base"
+              style={{ color: isDark ? "#E5E5E5" : "#333333", lineHeight: 24 }}
+            >
+              This Privacy Policy explains how we collect, use, disclose, and safeguard your
+              information when you use {appName}.
+            </Text>
+          </View>
+
+          {highlights && highlights.length > 0 ? (
+            <View
+              className="rounded-lg mb-4 p-4"
+              style={{
+                backgroundColor: isDark ? "#1A2E1A" : "#F0FFF4",
+                borderWidth: 1,
+                borderColor: isDark ? "#4A7C4A" : "#9AE6B4",
+              }}
+            >
+              <Text
+                className="font-sans-medium text-lg mb-3"
+                style={{ color: isDark ? "#9AE6B4" : "#22543D" }}
+              >
+                Key Privacy Features
+              </Text>
+              <View className="gap-2">
+                {highlights.map((item, idx) => (
+                  <View key={idx} className="flex-row items-center">
+                    <Ionicons
+                      name="checkmark-circle"
+                      size={16}
+                      color={isDark ? "#4ADE80" : "#16A34A"}
+                    />
+                    <Text
+                      className="font-mono ml-2 text-sm"
+                      style={{ color: isDark ? "#9AE6B4" : "#22543D" }}
+                    >
+                      {item}
+                    </Text>
+                  </View>
+                ))}
+              </View>
+            </View>
+          ) : null}
+
+          <View className="gap-4">
+            {resolvedSections.map((section, index) => (
+              <View
+                key={index}
+                className="rounded-lg p-4"
+                style={{
+                  backgroundColor: isDark ? "#0A0A0A" : "#FFFFFF",
+                  borderWidth: 1,
+                  borderColor: isDark ? "#333333" : "#E5E5E5",
+                }}
+              >
+                <Text
+                  className="font-sans-medium text-lg mb-2"
+                  style={{ color: isDark ? "#FFFFFF" : "#000000" }}
+                >
+                  {section.title}
+                </Text>
+                <Text
+                  className="font-mono text-sm"
+                  style={{ color: isDark ? "#999999" : "#666666", lineHeight: 22 }}
+                >
+                  {section.content}
+                </Text>
+              </View>
+            ))}
+
+            <View
+              className="rounded-lg p-4"
+              style={{
+                backgroundColor: isDark ? "#0A0A0A" : "#FFFFFF",
+                borderWidth: 1,
+                borderColor: isDark ? "#333333" : "#E5E5E5",
+              }}
+            >
+              <Text
+                className="font-sans-medium text-lg mb-2"
+                style={{ color: isDark ? "#FFFFFF" : "#000000" }}
+              >
+                Contact
+              </Text>
+              <Text
+                className="font-mono text-sm"
+                style={{ color: isDark ? "#999999" : "#666666", lineHeight: 22 }}
+              >
+                For privacy-related questions or concerns email{" "}
+                <Text
+                  className="font-mono text-sm underline"
+                  style={{ color: isDark ? "#6BA3E5" : "#4A90E2" }}
+                  onPress={() => Linking.openURL(`mailto:${supportEmail}`)}
+                >
+                  {supportEmail}
+                </Text>
+              </Text>
+            </View>
+          </View>
+
+          <View
+            className="rounded-lg mt-6 p-4"
+            style={{
+              backgroundColor: isDark ? "#1A2332" : "#F0F8FF",
+              borderWidth: 1,
+              borderColor: isDark ? "#2A3F5F" : "#D0E0FF",
+            }}
+          >
+            <View className="flex-row items-start">
+              <Ionicons
+                name="shield-checkmark"
+                size={20}
+                color="#4A90E2"
+                style={{ marginTop: 2, marginRight: 8 }}
+              />
+              <View className="flex-1">
+                <Text
+                  className="font-sans-medium text-sm mb-2"
+                  style={{ color: isDark ? "#FFFFFF" : "#000000" }}
+                >
+                  Your Consent
+                </Text>
+                <Text
+                  className="font-mono text-xs"
+                  style={{ color: isDark ? "#999999" : "#666666", lineHeight: 20 }}
+                >
+                  By using {appName}, you consent to this Privacy Policy and agree to its terms.
+                </Text>
+              </View>
+            </View>
+          </View>
+
+          <View className="mt-8 items-center">
+            <Text
+              className="font-mono text-xs text-center"
+              style={{ color: isDark ? "#666666" : "#999999" }}
+            >
+              © {new Date().getFullYear()} {org}. All rights reserved.
+            </Text>
+            <View style={{ marginTop: 20 }}>
+              <EntropyByline size={16} />
+            </View>
+          </View>
+        </ScrollView>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+export default PrivacyPolicyScreen;

package/src/screens/auth/RegisterScreen.tsx

@@ -0,0 +1,430 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { KeyboardAvoidingView, Platform, 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 * as Haptics from "expo-haptics";
+import { Heading, MutedText, Text } from "../../components/text";
+import { Button, IconButton } from "../../components/button";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "../../components/card";
+import { EmailInput, Input, PasswordInput } from "../../components/input";
+import { Checkbox } from "../../components/checkbox";
+import { Separator, SeparatorWithText } from "../../components/separator";
+import PasswordStrengthMeter from "../../components/auth/PasswordStrengthMeter";
+import PwnedPasswordWarning from "../../components/auth/PwnedPasswordWarning";
+import ShakeField from "../../forms/shake-field";
+import FormError from "../../forms/form-error";
+import { useAuth } from "../../hooks/useAuth";
+import { useShakeAnimation } from "../../hooks/useShakeAnimation";
+import { validateEmail } from "../../utils/validation";
+import { checkPasswordPwned, debounce, getPwnedMessage } from "../../services/hibp";
+import { getCachedPolicy } from "../../services/hibp-cache";
+import { useAppConfig } from "../../context/AppConfigContext";
+
+const SCROLL_CONTENT_STYLE = { flexGrow: 1 } as const;
+const DEFAULT_POLICY = { enabled: false, enforce: false, block_threshold: 0 };
+
+export interface RegisterScreenProps {
+  /** Optional widget rendered top-right (vault wires its admin cog here). */
+  topAccessory?: React.ReactNode;
+  /** Optional social-auth block rendered under the create-account button. */
+  socialAuth?: React.ReactNode;
+  /** Master-password field label. */
+  passwordLabel?: string;
+  /** Master-password field placeholder. */
+  passwordPlaceholder?: string;
+}
+
+export function RegisterScreen({
+  topAccessory,
+  socialAuth,
+  passwordLabel = "Password",
+  passwordPlaceholder = "Create a strong password",
+}: RegisterScreenProps = {}) {
+  const { register: authRegister } = useAuth();
+  const router = useNavigation();
+  const { appName, Logo, routes } = useAppConfig();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [agreeToTerms, setAgreeToTerms] = useState(false);
+  const [displayName, setDisplayName] = useState("");
+  const [errors, setErrors] = useState<{
+    email?: string;
+    displayName?: string;
+    password?: string;
+    confirmPassword?: string;
+    terms?: string;
+  }>({});
+
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const [pwnedPasswordInfo, setPwnedPasswordInfo] = useState<{
+    title: string;
+    message: string;
+    severity: "error" | "warning" | "info";
+    count: number;
+  } | null>(null);
+  const emailShake = useShakeAnimation();
+  const displayNameShake = useShakeAnimation();
+  const passwordShake = useShakeAnimation();
+  const confirmShake = useShakeAnimation();
+  const termsShake = useShakeAnimation();
+
+  const firstError =
+    errors.email ?? errors.displayName ?? errors.password ?? errors.confirmPassword ?? errors.terms;
+
+  const checkPasswordDebounced = useMemo(
+    () =>
+      debounce(async (pass: string) => {
+        const policy = getCachedPolicy() ?? DEFAULT_POLICY;
+        if (!policy.enabled || pass.length < 8) {
+          setPwnedPasswordInfo(null);
+          return;
+        }
+        const result = await checkPasswordPwned(pass);
+        if (result.isPwned) {
+          const message = getPwnedMessage(result);
+          setPwnedPasswordInfo({ ...message, count: result.count });
+        } else {
+          setPwnedPasswordInfo(null);
+        }
+      }, 1000),
+    []
+  );
+
+  useEffect(() => () => checkPasswordDebounced.cancel(), [checkPasswordDebounced]);
+
+  const validateForm = () => {
+    const newErrors: typeof errors = {};
+
+    if (!email) {
+      newErrors.email = "Email is required";
+    } else if (!validateEmail(email)) {
+      newErrors.email = "Please enter a valid email";
+    }
+
+    if (!displayName) {
+      newErrors.displayName = "Display name is required";
+    } else if (displayName.length > 100) {
+      newErrors.displayName = "Display name must be 100 characters or less";
+    }
+
+    if (!password) {
+      newErrors.password = "Password is required";
+    } else if (password.length < 8) {
+      newErrors.password = "Password must be at least 8 characters";
+    }
+
+    if (!confirmPassword) {
+      newErrors.confirmPassword = "Please confirm your password";
+    } else if (password !== confirmPassword) {
+      newErrors.confirmPassword = "Passwords do not match";
+    }
+
+    if (!agreeToTerms) {
+      newErrors.terms = "You must agree to the terms and privacy policy";
+    }
+
+    return newErrors;
+  };
+
+  const handleRegister = async () => {
+    // Re-entry guard. The HIBP probe and register POST both run
+    // network round-trips; a double-submit before `setIsLoading(true)`
+    // lands would otherwise duplicate-fire the register endpoint
+    // (and depending on idempotency could create a second account
+    // attempt with the same email).
+    if (isLoading) {
+      return;
+    }
+    const newErrors = validateForm();
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      if (newErrors.email) {
+        emailShake.shake();
+      }
+      if (newErrors.displayName) {
+        displayNameShake.shake();
+      }
+      if (newErrors.password) {
+        passwordShake.shake();
+      }
+      if (newErrors.confirmPassword) {
+        confirmShake.shake();
+      }
+      if (newErrors.terms) {
+        termsShake.shake();
+      }
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+      return;
+    }
+    setErrors({});
+
+    setIsLoading(true);
+
+    const hibpPolicy = getCachedPolicy() ?? DEFAULT_POLICY;
+    if (hibpPolicy.enabled) {
+      const pwnedResult = await checkPasswordPwned(password);
+      if (pwnedResult.isPwned) {
+        const message = getPwnedMessage(pwnedResult);
+        setPwnedPasswordInfo({ ...message, count: pwnedResult.count });
+        if (hibpPolicy.enforce && pwnedResult.count > hibpPolicy.block_threshold) {
+          await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+          passwordShake.shake();
+          confirmShake.shake();
+          setIsLoading(false);
+          return;
+        }
+      } else {
+        setPwnedPasswordInfo(null);
+      }
+    }
+
+    try {
+      const emailParts = email.split("@");
+      const username = (emailParts[0] || "user").replace(/[^a-zA-Z0-9_]/g, "_").toLowerCase();
+
+      await authRegister(email.trim().toLowerCase(), username, password, displayName.trim());
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    } catch (error) {
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+
+      const errorMessage = error instanceof Error ? error.message : "Registration failed";
+
+      if (errorMessage.includes("email") && errorMessage.includes("exists")) {
+        setErrors({ email: "This email is already registered" });
+        emailShake.shake();
+      } else if (errorMessage.includes("username") && errorMessage.includes("exists")) {
+        setErrors({ email: "An account with this email already exists" });
+        emailShake.shake();
+      } else if (errorMessage.includes("password")) {
+        setErrors({ password: errorMessage });
+        passwordShake.shake();
+      } else {
+        setErrors({ email: errorMessage });
+        emailShake.shake();
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <SafeAreaView className="flex-1 bg-background">
+      <StatusBar style={isDark ? "light" : "dark"} />
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        className="flex-1"
+      >
+        <ScrollView
+          className="flex-1"
+          contentContainerStyle={SCROLL_CONTENT_STYLE}
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+        >
+          <View className="flex-1 justify-between px-6">
+            <View className="mt-4">
+              <IconButton
+                variant="ghost"
+                size="sm"
+                onPress={() => router.push(routes.welcome)}
+                accessibilityLabel="Go back"
+                accessibilityRole="button"
+              >
+                <Ionicons name="arrow-back" size={24} color={isDark ? "#FFFFFF" : "#000000"} />
+              </IconButton>
+            </View>
+            {topAccessory}
+
+            <View className="flex-1 items-center justify-center">
+              <View className="mb-6 items-center">
+                <View className="flex-row items-center">
+                  <Logo width={72} height={72} style={{ marginRight: -2 }} />
+                  <Heading className="text-4xl">{appName}</Heading>
+                </View>
+              </View>
+
+              <Card className="w-full max-w-[360px]">
+                <CardHeader>
+                  <CardTitle>Create Account</CardTitle>
+                </CardHeader>
+
+                <CardContent className="gap-3">
+                  <ShakeField shake={emailShake} label="Email">
+                    <EmailInput
+                      value={email}
+                      onChangeText={(text) => {
+                        setEmail(text);
+                        if (errors.email) {
+                          setErrors({ ...errors, email: undefined });
+                        }
+                      }}
+                      autoFocus
+                      placeholder="you@example.com"
+                      autoComplete="email"
+                      invalid={!!errors.email}
+                      accessibilityLabel="Email address"
+                      testID="signup-email-input"
+                    />
+                  </ShakeField>
+
+                  <ShakeField shake={displayNameShake} label="Display Name">
+                    <Input
+                      value={displayName}
+                      onChangeText={(text) => {
+                        setDisplayName(text);
+                        if (errors.displayName) {
+                          setErrors({ ...errors, displayName: undefined });
+                        }
+                      }}
+                      placeholder="Your display name"
+                      leftIcon={
+                        <Ionicons
+                          name="person-outline"
+                          size={20}
+                          color={isDark ? "#A3A3A3" : "#737373"}
+                        />
+                      }
+                      autoCapitalize="words"
+                      autoCorrect={false}
+                      maxLength={100}
+                      invalid={!!errors.displayName}
+                      accessibilityLabel="Display name"
+                      testID="signup-displayname-input"
+                    />
+                  </ShakeField>
+
+                  <View>
+                    <ShakeField shake={passwordShake} label={passwordLabel}>
+                      <PasswordInput
+                        value={password}
+                        onChangeText={(text) => {
+                          setPassword(text);
+                          if (errors.password) {
+                            setErrors({ ...errors, password: undefined });
+                          }
+                          checkPasswordDebounced(text);
+                        }}
+                        placeholder={passwordPlaceholder}
+                        autoComplete="password-new"
+                        invalid={!!errors.password}
+                        accessibilityLabel={passwordLabel}
+                        testID="signup-password-input"
+                      />
+                    </ShakeField>
+                    <View className="mt-2">
+                      <PasswordStrengthMeter password={password} />
+                      <PwnedPasswordWarning pwnedInfo={pwnedPasswordInfo} />
+                    </View>
+                  </View>
+
+                  <ShakeField shake={confirmShake} label="Confirm Password">
+                    <PasswordInput
+                      value={confirmPassword}
+                      onChangeText={(text) => {
+                        setConfirmPassword(text);
+                        if (errors.confirmPassword) {
+                          setErrors({ ...errors, confirmPassword: undefined });
+                        }
+                      }}
+                      placeholder="Re-enter your password"
+                      autoComplete="password-new"
+                      returnKeyType="done"
+                      onSubmitEditing={handleRegister}
+                      invalid={!!errors.confirmPassword}
+                      accessibilityLabel="Confirm password"
+                      testID="signup-confirm-password-input"
+                    />
+                  </ShakeField>
+
+                  <Separator className="my-2" />
+
+                  <ShakeField shake={termsShake} rotate={false}>
+                    <View className="flex-row items-start gap-2">
+                      <Checkbox
+                        checked={agreeToTerms}
+                        onCheckedChange={(checked) => {
+                          setAgreeToTerms(!!checked);
+                          if (errors.terms) {
+                            setErrors({ ...errors, terms: undefined });
+                          }
+                        }}
+                        accessibilityLabel="Agree to terms of service and privacy policy"
+                        accessibilityRole="checkbox"
+                      />
+                      <Text className="flex-1 text-sm">
+                        I agree to the{" "}
+                        <Text
+                          className="text-sm underline"
+                          onPress={() => router.push(routes.termsOfService)}
+                          accessibilityRole="link"
+                          accessibilityLabel="Terms of Service"
+                        >
+                          Terms of Service
+                        </Text>{" "}
+                        and{" "}
+                        <Text
+                          className="text-sm underline"
+                          onPress={() => router.push(routes.privacyPolicy)}
+                          accessibilityRole="link"
+                          accessibilityLabel="Privacy Policy"
+                        >
+                          Privacy Policy
+                        </Text>
+                      </Text>
+                    </View>
+                  </ShakeField>
+                </CardContent>
+
+                <CardFooter className="flex-col gap-3 border-t-0">
+                  <MutedText className="text-center text-sm">
+                    Already have an account?{" "}
+                    <Text
+                      className="text-sm text-foreground underline"
+                      onPress={() => router.push(routes.login)}
+                      accessibilityRole="link"
+                      accessibilityLabel="Sign in"
+                    >
+                      Sign In
+                    </Text>
+                  </MutedText>
+
+                  <FormError message={firstError} />
+
+                  <Button
+                    className="w-full"
+                    isLoading={isLoading}
+                    onPress={handleRegister}
+                    disabled={Platform.OS === "web" && !email && !password}
+                    accessibilityLabel="Create account"
+                    accessibilityRole="button"
+                    accessibilityHint="Double tap to create your account"
+                    testID="signup-submit"
+                  >
+                    Create Account
+                  </Button>
+
+                  {socialAuth ? (
+                    <>
+                      <SeparatorWithText />
+                      {socialAuth}
+                    </>
+                  ) : null}
+                </CardFooter>
+              </Card>
+
+              <View className="mb-6" />
+            </View>
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+export default RegisterScreen;