feat: add auth, hosts, & keychains ownership

frontend/pages/auth/login.tsx

@@ -0,0 +1,92 @@
+import { Text, ScrollView, Card, Separator } from "tamagui";
+import React from "react";
+import FormField from "@/components/ui/form";
+import { InputField } from "@/components/ui/input";
+import { useZForm } from "@/hooks/useZForm";
+import { router, Stack } from "expo-router";
+import Button from "@/components/ui/button";
+import ThemeSwitcher from "@/components/containers/theme-switcher";
+import { useMutation } from "@tanstack/react-query";
+import { z } from "zod";
+import { ErrorAlert } from "@/components/ui/alert";
+import { loginResultSchema, loginSchema } from "./schema";
+import api from "@/lib/api";
+import Icons from "@/components/ui/icons";
+import authStore from "@/stores/auth";
+
+export default function LoginPage() {
+  const form = useZForm(loginSchema);
+
+  const login = useMutation({
+    mutationFn: async (body: z.infer<typeof loginSchema>) => {
+      const res = await api("/auth/login", { method: "POST", body });
+      const { data } = loginResultSchema.safeParse(res);
+      if (!data) {
+        throw new Error("Invalid response!");
+      }
+      return data;
+    },
+    onSuccess(data) {
+      authStore.setState({ token: data.sessionId });
+      router.replace("/");
+    },
+  });
+
+  const onSubmit = form.handleSubmit((values) => {
+    login.mutate(values);
+  });
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          contentStyle: {
+            width: "100%",
+            maxWidth: 600,
+            marginHorizontal: "auto",
+          },
+          title: "Login",
+          headerRight: () => (
+            <ThemeSwitcher bg="$colorTransparent" $gtSm={{ mr: "$3" }} />
+          ),
+        }}
+      />
+
+      <ScrollView
+        contentContainerStyle={{
+          padding: "$4",
+          pb: "$12",
+          justifyContent: "center",
+          flexGrow: 1,
+        }}
+      >
+        <Card bordered p="$4" gap="$4">
+          <Text fontSize="$8">Login</Text>
+
+          <ErrorAlert error={login.error} />
+
+          <FormField vertical label="Username/Email">
+            <InputField form={form} name="username" />
+          </FormField>
+          <FormField vertical label="Password">
+            <InputField form={form} name="password" secureTextEntry />
+          </FormField>
+
+          <Separator />
+
+          <Button
+            icon={<Icons name="lock" size={16} />}
+            onPress={onSubmit}
+            isLoading={login.isPending}
+          >
+            Connect
+          </Button>
+
+          <Button onPress={() => router.push("/server")} bg="$colorTransparent">
+            Change Server
+          </Button>
+        </Card>
+      </ScrollView>
+    </>
+  );
+}

frontend/pages/auth/schema.ts

@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const loginSchema = z.object({
+  username: z.string(),
+  password: z.string(),
+});
+
+export const loginResultSchema = z.object({
+  sessionId: z.string().min(40),
+});