@entropy-softworks/ui 2026.7.31

package/src/screens/auth/ServerConfigScreen.tsx

@@ -0,0 +1,388 @@
+import React, { useEffect, useState } from "react";
+import {
+  ActivityIndicator,
+  Alert,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  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 AuthService from "../../services/auth.service";
+import { getDefaultBaseUrl } from "../../services/api-config";
+import { useAppConfig } from "../../context/AppConfigContext";
+import { getErrorMessage } from "../../utils/error";
+
+export interface ServerConfigScreenProps {
+  /**
+   * Path appended to the configured URL when running the connection
+   * test. Defaults to `/api/health`. Server is expected to return JSON
+   * with `{ status: "healthy", version: "..." }`.
+   */
+  healthCheckPath?: string;
+  /** Optional help bullets rendered at the bottom. */
+  helpBullets?: string[];
+  /** Default number of retry attempts when testing. Default 3. */
+  defaultMaxRetries?: number;
+  /** Default request timeout in seconds. Default 30. */
+  defaultTimeoutSeconds?: number;
+}
+
+export function ServerConfigScreen({
+  healthCheckPath = "/api/health",
+  helpBullets,
+  defaultMaxRetries = 3,
+  defaultTimeoutSeconds = 30,
+}: ServerConfigScreenProps = {}) {
+  const router = useNavigation();
+  const { appName } = useAppConfig();
+  const defaultUrl = getDefaultBaseUrl();
+
+  const [serverUrl, setServerUrl] = useState("");
+  const [isTestingConnection, setIsTestingConnection] = useState(false);
+  const [connectionStatus, setConnectionStatus] = useState<
+    "idle" | "testing" | "success" | "error"
+  >("idle");
+  const [testAttempt, setTestAttempt] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  useEffect(() => {
+    try {
+      setServerUrl(AuthService.getBaseUrl());
+    } catch {
+      setServerUrl(defaultUrl);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [defaultUrl]);
+
+  const testConnectionWithRetry = async (
+    url: string,
+    attemptNumber: number = 1
+  ): Promise<boolean> => {
+    const timeoutMs = defaultTimeoutSeconds * 1000;
+
+    try {
+      setTestAttempt(attemptNumber);
+      const formattedUrl = url.endsWith("/") ? url.slice(0, -1) : url;
+      const healthUrl = `${formattedUrl}${healthCheckPath}`;
+
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+
+      const response = await fetch(healthUrl, {
+        method: "GET",
+        signal: controller.signal,
+        headers: { Accept: "application/json" },
+      });
+
+      clearTimeout(timeoutId);
+
+      if (response.ok) {
+        const data = await response.json();
+        if (data.status === "healthy" && data.version) {
+          return true;
+        }
+      }
+
+      if (attemptNumber < defaultMaxRetries) {
+        await new Promise((resolve) => setTimeout(resolve, attemptNumber * 1000));
+        return await testConnectionWithRetry(url, attemptNumber + 1);
+      }
+
+      return false;
+    } catch {
+      if (attemptNumber < defaultMaxRetries) {
+        await new Promise((resolve) => setTimeout(resolve, attemptNumber * 1000));
+        return await testConnectionWithRetry(url, attemptNumber + 1);
+      }
+
+      return false;
+    }
+  };
+
+  const testConnection = async () => {
+    if (!serverUrl) {
+      Alert.alert("Error", "Please enter a server URL");
+      return;
+    }
+
+    setIsTestingConnection(true);
+    setConnectionStatus("testing");
+    setTestAttempt(0);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+
+    try {
+      const success = await testConnectionWithRetry(serverUrl);
+      setIsTestingConnection(false);
+
+      if (success) {
+        setConnectionStatus("success");
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+        Alert.alert(
+          "Success",
+          "Connection successful! Server is reachable and responding correctly.",
+          [{ text: "OK" }]
+        );
+      } else {
+        setConnectionStatus("error");
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+        Alert.alert(
+          "Connection Failed",
+          `Unable to reach the server after ${defaultMaxRetries} attempts. Please check the URL and try again.`,
+          [{ text: "OK" }]
+        );
+      }
+    } catch {
+      setIsTestingConnection(false);
+      setConnectionStatus("error");
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+      Alert.alert(
+        "Connection Error",
+        "An unexpected error occurred while testing the connection.",
+        [{ text: "OK" }]
+      );
+    }
+  };
+
+  const handleSave = async () => {
+    if (!serverUrl) {
+      Alert.alert("Error", "Please enter a server URL");
+      return;
+    }
+
+    const sanitizedUrl = serverUrl.trim();
+
+    try {
+      const url = new URL(sanitizedUrl);
+      if (url.protocol === "http:" && !["localhost", "127.0.0.1"].includes(url.hostname)) {
+        Alert.alert(
+          "HTTPS Required",
+          "Non-localhost connections require HTTPS. Please use an https:// URL.",
+          [{ text: "OK" }]
+        );
+        return;
+      }
+    } catch {
+      // setBaseUrl validates and surfaces the error
+    }
+
+    try {
+      await AuthService.setBaseUrl(sanitizedUrl);
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      Alert.alert("Configuration Saved", "Server settings have been saved.", [
+        { text: "OK", onPress: () => router.back() },
+      ]);
+    } catch (e) {
+      Alert.alert("Save Failed", `Unable to save the configuration: ${getErrorMessage(e)}`, [
+        { text: "OK" },
+      ]);
+    }
+  };
+
+  const handleUseDefault = () => {
+    setServerUrl(defaultUrl);
+    setConnectionStatus("idle");
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  };
+
+  const handleClearConfiguration = () => {
+    Alert.alert(
+      "Clear Configuration",
+      "This will reset all server settings to defaults. Are you sure?",
+      [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Clear",
+          style: "destructive",
+          onPress: async () => {
+            try {
+              await AuthService.resetBaseUrl();
+              setServerUrl(defaultUrl);
+              setConnectionStatus("idle");
+              Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+              Alert.alert("Success", "Configuration has been reset to defaults.");
+            } catch {
+              Alert.alert("Error", "Failed to clear configuration.");
+            }
+          },
+        },
+      ]
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <SafeAreaView className="flex-1 bg-background">
+        <View className="flex-1 items-center justify-center">
+          <ActivityIndicator size="large" color={isDark ? "white" : "black"} />
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  const bullets = helpBullets ?? [
+    `Default server is hosted at ${defaultUrl}`,
+    "Ensure your server is running and the /api/health endpoint is accessible",
+    "Use HTTPS for secure connections",
+  ];
+
+  return (
+    <SafeAreaView className="flex-1 bg-background">
+      <StatusBar style="auto" />
+      <ScrollView className="flex-1">
+        <View className="px-6 py-6">
+          <View className="mb-8 flex-row items-center justify-between">
+            <Pressable
+              onPress={() => router.back()}
+              accessibilityRole="button"
+              accessibilityLabel="Go back"
+              className="active:scale-98 h-10 w-10 items-center justify-center rounded-lg bg-secondary"
+            >
+              <Ionicons name="close" size={24} color={isDark ? "white" : "black"} />
+            </Pressable>
+            <Text className="text-lg font-semibold text-foreground">Server Configuration</Text>
+            <View className="h-10 w-10" />
+          </View>
+
+          <View className="mb-6 rounded-lg bg-secondary p-4">
+            <View className="flex-row items-start">
+              <Ionicons
+                name="information-circle"
+                size={24}
+                color={isDark ? "#3b82f6" : "#2563eb"}
+              />
+              <View className="ml-3 flex-1">
+                <Text className="mb-1 text-sm font-semibold text-foreground">
+                  Self-Hosted Server
+                </Text>
+                <Text className="text-xs text-muted-foreground">
+                  Configure your own {appName} server for complete control over your data. Default
+                  server: {defaultUrl}
+                </Text>
+              </View>
+            </View>
+          </View>
+
+          <View className="mb-6">
+            <Text className="mb-2 text-sm font-medium text-foreground">Server URL</Text>
+            <View className="flex-row items-center rounded-lg border border-border bg-background px-3 py-3">
+              <Ionicons
+                name="globe-outline"
+                size={20}
+                color={isDark ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.5)"}
+              />
+              <TextInput
+                value={serverUrl}
+                onChangeText={(text) => {
+                  setServerUrl(text);
+                  setConnectionStatus("idle");
+                }}
+                placeholder={defaultUrl}
+                placeholderTextColor={isDark ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.5)"}
+                autoCapitalize="none"
+                autoCorrect={false}
+                keyboardType="url"
+                accessibilityLabel="Server URL"
+                className="ml-2 flex-1 text-base text-foreground"
+              />
+              {connectionStatus === "success" && (
+                <Ionicons name="checkmark-circle" size={20} color="#22c55e" />
+              )}
+              {connectionStatus === "error" && (
+                <Ionicons name="close-circle" size={20} color="#ef4444" />
+              )}
+            </View>
+          </View>
+
+          <Pressable
+            onPress={testConnection}
+            disabled={isTestingConnection}
+            accessibilityRole="button"
+            accessibilityLabel="Test connection"
+            className="active:scale-98 mb-3 w-full rounded-lg border border-border bg-background px-6 py-4"
+          >
+            {isTestingConnection ? (
+              <View className="flex-row items-center justify-center">
+                <ActivityIndicator size="small" color={isDark ? "white" : "black"} />
+                <Text className="ml-2 text-base font-semibold text-foreground">
+                  Testing Connection
+                  {testAttempt > 0 ? ` (Attempt ${testAttempt}/${defaultMaxRetries})` : "..."}
+                </Text>
+              </View>
+            ) : (
+              <View className="flex-row items-center justify-center">
+                <Ionicons name="wifi-outline" size={20} color={isDark ? "white" : "black"} />
+                <Text className="ml-2 text-base font-semibold text-foreground">
+                  Test Connection
+                </Text>
+              </View>
+            )}
+          </Pressable>
+
+          <Pressable
+            onPress={handleUseDefault}
+            accessibilityRole="button"
+            accessibilityLabel="Use default server"
+            className="active:scale-98 mb-3 w-full rounded-lg border border-border bg-background px-6 py-4"
+          >
+            <View className="flex-row items-center justify-center">
+              <Ionicons name="cloud-outline" size={20} color={isDark ? "white" : "black"} />
+              <Text className="ml-2 text-base font-semibold text-foreground">
+                Use Default Server
+              </Text>
+            </View>
+          </Pressable>
+
+          <Pressable
+            onPress={handleClearConfiguration}
+            accessibilityRole="button"
+            accessibilityLabel="Clear all settings"
+            className="active:scale-98 mb-3 w-full rounded-lg border border-destructive bg-background px-6 py-3"
+          >
+            <View className="flex-row items-center justify-center">
+              <Ionicons name="trash-outline" size={20} color="#ef4444" />
+              <Text className="ml-2 text-base font-medium text-destructive">
+                Clear All Settings
+              </Text>
+            </View>
+          </Pressable>
+
+          <Pressable
+            onPress={handleSave}
+            accessibilityRole="button"
+            accessibilityLabel="Save configuration"
+            className="active:scale-98 mb-6 w-full rounded-lg bg-primary px-6 py-4"
+          >
+            <Text className="text-center text-base font-semibold text-primary-foreground">
+              Save Configuration
+            </Text>
+          </Pressable>
+
+          <View className="rounded-lg bg-card p-4">
+            <Text className="mb-3 text-sm font-semibold text-foreground">Need Help?</Text>
+            <View className="space-y-2">
+              {bullets.map((bullet, idx) => (
+                <View key={idx} className="flex-row items-start">
+                  <Text className="mr-2 text-sm text-muted-foreground">•</Text>
+                  <Text className="flex-1 text-sm text-muted-foreground">{bullet}</Text>
+                </View>
+              ))}
+            </View>
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default ServerConfigScreen;

package/src/screens/auth/TermsOfServiceScreen.tsx

@@ -0,0 +1,236 @@
+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";
+
+export interface LegalSection {
+  title: string;
+  content: string;
+}
+
+export interface TermsOfServiceScreenProps {
+  /**
+   * Per-app section list. When omitted, the screen falls back to
+   * `AppConfig.termsText` (rendered as a single section) or a generic
+   * placeholder.
+   */
+  sections?: LegalSection[];
+  /**
+   * Optional version/build label rendered in the header (vault uses
+   * `v1.2.3 (4567)` here). Apps that don't ship build metadata can
+   * omit this.
+   */
+  buildLabel?: string;
+  /** Effective-date label override. Defaults to today's date. */
+  effectiveDate?: string;
+  /** Support email surfaced in the contact section. */
+  supportEmail?: string;
+  /** Footer organisation name. Defaults to `appName`. */
+  organisationName?: string;
+  /** Footer license blurb. Defaults to "Open Source • MIT License". */
+  licenseLabel?: string;
+}
+
+export function TermsOfServiceScreen({
+  sections,
+  buildLabel,
+  effectiveDate,
+  supportEmail = "support@entropysoftworks.com",
+  organisationName,
+  licenseLabel = "Open Source • MIT License",
+}: TermsOfServiceScreenProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const router = useNavigation();
+  const { appName, termsText } = useAppConfig();
+
+  const resolvedSections: LegalSection[] =
+    sections ??
+    (termsText
+      ? [{ title: "Terms", content: termsText }]
+      : [{ title: "Terms of Service", content: `Terms of service 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" }}
+          >
+            Terms of Service
+          </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 }}
+            >
+              These Terms of Service (&quot;Terms&quot;) govern your use of {appName} and related
+              services. By using {appName}, you agree to be bound by these Terms.
+            </Text>
+          </View>
+
+          <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 questions about these Terms of Service, please contact us by email at{" "}
+                <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="information-circle"
+                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" }}
+                >
+                  Important Notice
+                </Text>
+                <Text
+                  className="font-mono text-xs"
+                  style={{ color: isDark ? "#999999" : "#666666", lineHeight: 20 }}
+                >
+                  By creating an account or using {appName}, you acknowledge that you have read,
+                  understood, and agree to be bound by these Terms of Service. If you do not agree,
+                  please discontinue use of the application.
+                </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>
+            {licenseLabel ? (
+              <Text
+                className="font-mono text-xs text-center mt-2"
+                style={{ color: isDark ? "#666666" : "#999999" }}
+              >
+                {licenseLabel}
+              </Text>
+            ) : null}
+            <View style={{ marginTop: 20 }}>
+              <EntropyByline size={16} />
+            </View>
+          </View>
+        </ScrollView>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+export default TermsOfServiceScreen;