feature(mobile): Add a page for testing connection to server

apps/mobile/app/_layout.tsx

@@ -48,10 +48,19 @@ export default function RootLayout() {
                 contentClassName="bg-gray-100 dark:bg-background"
                 screenOptions={{
                   headerShown: false,
+                  headerTransparent: true,
                 }}
               >
                 <Stack.Screen name="index" />
                 <Stack.Screen name="sharing" />
+                <Stack.Screen
+                  name="test-connection"
+                  options={{
+                    title: "Test Connection",
+                    headerShown: true,
+                    presentation: "modal",
+                  }}
+                />
               </StyledStack>
               <StatusBar style="auto" />
             </View>

apps/mobile/app/signin.tsx

@@ -3,19 +3,23 @@ import {
   Keyboard,
   KeyboardAvoidingView,
   Platform,
+  Pressable,
   Text,
   TouchableWithoutFeedback,
   View,
 } from "react-native";
-import { Redirect } from "expo-router";
+import { Redirect, useRouter } from "expo-router";
 import Logo from "@/components/Logo";
 import { TailwindResolver } from "@/components/TailwindResolver";
-import { Button } from "@/components/ui/Button";
+import { Button, buttonVariants } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
 import useAppSettings from "@/lib/settings";
 import { api } from "@/lib/trpc";
+import { cn } from "@/lib/utils";
+import { Bug } from "lucide-react-native";
 
 export default function Signin() {
+  const router = useRouter();
   const { settings, setSettings } = useAppSettings();
   const [serverAddress, setServerAddress] = useState(settings.address);
 
@@ -109,12 +113,29 @@ export default function Signin() {
               onChangeText={(e) => setFormData((s) => ({ ...s, password: e }))}
             />
           </View>
-          <Button
-            className="w-full"
-            label="Sign In"
-            onPress={onSignin}
-            disabled={isPending}
-          />
+          <View className="flex flex-row items-center justify-between gap-2">
+            <Button
+              className="flex-1"
+              label="Sign In"
+              onPress={onSignin}
+              disabled={isPending}
+            />
+            <Pressable
+              className={cn(
+                buttonVariants({ variant: "default" }),
+                !settings.address && "bg-gray-500",
+              )}
+              onPress={() => router.push("/test-connection")}
+              disabled={!settings.address}
+            >
+              <TailwindResolver
+                comp={(styles) => (
+                  <Bug size={20} color={styles?.color?.toString()} />
+                )}
+                className="text-background"
+              />
+            </Pressable>
+          </View>
         </View>
       </TouchableWithoutFeedback>
     </KeyboardAvoidingView>

apps/mobile/app/test-connection.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { Platform, Text, View } from "react-native";
+import * as Clipboard from "expo-clipboard";
+import { Button } from "@/components/ui/Button";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
+import { Input } from "@/components/ui/Input";
+import useAppSettings from "@/lib/settings";
+import { cn } from "@/lib/utils";
+
+export default function TestConnection() {
+  const { settings, isLoading } = useAppSettings();
+  const [text, setText] = React.useState("");
+  const [randomId, setRandomId] = React.useState(Math.random());
+  const [status, setStatus] = React.useState<"running" | "success" | "error">(
+    "running",
+  );
+
+  const appendText = (text: string) => {
+    setText((prev) => prev + (prev ? "\n\n" : "") + text);
+  };
+
+  React.useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+    setStatus("running");
+    appendText("Running connection test ...");
+    function runTest() {
+      const request = new XMLHttpRequest();
+      request.onreadystatechange = () => {
+        if (request.readyState !== 4) {
+          return;
+        }
+
+        if (request.status === 0) {
+          appendText("Network connection failed: " + request.responseText);
+          setStatus("error");
+          return;
+        }
+
+        if (request.status !== 200) {
+          appendText("Recieve non success error code: " + request.status);
+          appendText("Got the following response:");
+          appendText(request.responseText);
+          setStatus("error");
+        }
+        if (request.status === 200) {
+          appendText("ALL GOOD");
+          setStatus("success");
+        }
+      };
+
+      appendText("Using address: " + settings.address);
+      request.open("GET", `${settings.address}`);
+      request.send();
+    }
+    runTest();
+  }, [settings.address, randomId]);
+
+  return (
+    <CustomSafeAreaView>
+      <View className="m-4 flex flex-col gap-2 p-2">
+        <Button
+          className="w-full"
+          label="Copy Diagnostics Result"
+          onPress={async () => {
+            await Clipboard.setStringAsync(text);
+          }}
+        />
+        <Button
+          className="w-full"
+          label="Retry"
+          onPress={() => {
+            setText("");
+            setRandomId(Math.random());
+          }}
+        />
+        <View
+          className={cn(
+            "w-full rounded-md p-2",
+            status === "running" && "bg-primary/50",
+            status === "success" && "bg-green-500",
+            status === "error" && "bg-red-500",
+          )}
+        >
+          <Text
+            className={cn(
+              "w-full text-center",
+              status === "running" && "text-primary-foreground",
+              status === "success" && "text-white",
+              status === "error" && "text-white",
+            )}
+          >
+            {status === "running" && "Running connection test ..."}
+            {status === "success" && "Connection test successful"}
+            {status === "error" && "Connection test failed"}
+          </Text>
+        </View>
+        <Input
+          className="h-fit leading-6"
+          style={{
+            fontFamily: Platform.OS === "ios" ? "Courier New" : "monospace",
+          }}
+          multiline={true}
+          scrollEnabled={true}
+          value={text}
+          onChangeText={setText}
+          editable={false}
+        />
+      </View>
+    </CustomSafeAreaView>
+  );
+}

apps/mobile/package.json

@@ -24,6 +24,7 @@
     "expo": "~50.0.11",
     "expo-build-properties": "^0.11.1",
     "expo-checkbox": "^3.0.0",
+    "expo-clipboard": "^5.0.1",
     "expo-config-plugin-ios-share-extension": "^0.0.4",
     "expo-constants": "~15.4.5",
     "expo-dev-client": "^3.3.9",