From d345ad06f6ee89ba405a0fbf04df28ed9de107bb Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Sun, 13 Oct 2024 10:16:58 -0500
Subject: [PATCH] Building out front end to start wiring everything up

---
 App.tsx                                       | 15 ++--------
 api/mutators/auth.ts                          | 12 ++++++++
 api/mutators/storage.ts                       |  2 +-
 api/queries.ts                                |  7 +++++
 api/queries/public.ts                         | 11 +++++++
 api/types/jellyfin-credentials.ts             |  6 ++--
 components/Login/component.tsx                | 16 +++++++++-
 components/Login/helpers/quick-connect.tsx    |  0
 components/Login/helpers/server-address.tsx   |  0
 .../Login/helpers/server-authentication.tsx   | 30 +++++++++++++++++++
 components/Login/helpers/server-library.tsx   |  0
 components/Login/helpers/sign-in.tsx          |  8 +++++
 components/jellify.tsx                        | 13 +++++++-
 enums/mutation-keys.ts                        |  3 +-
 enums/query-keys.ts                           |  2 ++
 15 files changed, 107 insertions(+), 18 deletions(-)
 create mode 100644 api/mutators/auth.ts
 create mode 100644 api/queries/public.ts
 create mode 100644 components/Login/helpers/quick-connect.tsx
 create mode 100644 components/Login/helpers/server-address.tsx
 create mode 100644 components/Login/helpers/server-authentication.tsx
 create mode 100644 components/Login/helpers/server-library.tsx
 create mode 100644 components/Login/helpers/sign-in.tsx

diff --git a/App.tsx b/App.tsx
index 94cb55d2..d68eb69f 100644
--- a/App.tsx
+++ b/App.tsx
@@ -14,7 +14,6 @@ import {
   Colors,
 } from 'react-native/Libraries/NewAppScreen';
 import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
 import { usePlayer } from './player/queries';
 import Login from './components/Login/component';
 import Player from './components/Player/component';
@@ -60,9 +59,6 @@ function App(): React.JSX.Element {
     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
   };
 
-  
-const RootStack = createStackNavigator();
-
   return (
     <NavigationContainer>
       <SafeAreaView style={backgroundStyle}>
@@ -70,14 +66,9 @@ const RootStack = createStackNavigator();
           barStyle={isDarkMode ? 'light-content' : 'dark-content'}
           backgroundColor={backgroundStyle.backgroundColor}
         />
-        <RootStack.Navigator>
-        <RootStack.Group>
-          <RootStack.Screen name="Jellify" component={Jellify} />
-        </RootStack.Group>
-        <RootStack.Group screenOptions={{ presentation: 'modal' }}>
-          <RootStack.Screen name="Player" component={Player} />
-        </RootStack.Group>
-      </RootStack.Navigator>
+        isAuthenticated ? (
+          <Jellify />
+        ) ? <Login />
       </SafeAreaView>
     </NavigationContainer>
   );
diff --git a/api/mutators/auth.ts b/api/mutators/auth.ts
new file mode 100644
index 00000000..8f76f0fd
--- /dev/null
+++ b/api/mutators/auth.ts
@@ -0,0 +1,12 @@
+import { useMutation } from "@tanstack/react-query";
+import { usePublicApi } from "../queries";
+import { useServerUrl } from "../queries/storage";
+import { JellyfinCredentials } from "../types/jellyfin-credentials";
+import { MutationKeys } from "../../enums/mutation-keys";
+
+export const authenticateWithCredentials = useMutation({
+    mutationKey: [MutationKeys.AuthenticationWithCredentials],
+    mutationFn: (credentials: JellyfinCredentials) => {
+        return usePublicApi(useServerUrl.data!).data!.authenticateUserByName(credentials.username, credentials.password!);
+    },
+})
\ No newline at end of file
diff --git a/api/mutators/storage.ts b/api/mutators/storage.ts
index ea3eb2e0..36d7ae81 100644
--- a/api/mutators/storage.ts
+++ b/api/mutators/storage.ts
@@ -27,6 +27,6 @@ export const serverUrl = useMutation({
 export const credentials = useMutation({
     mutationKey: [MutationKeys.Credentials],
     mutationFn: (credentials: JellyfinCredentials) => {
-        return Keychain.setInternetCredentials(useServerUrl.data!, credentials.username, credentials.accessToken);
+        return Keychain.setInternetCredentials(useServerUrl.data!, credentials.username, credentials.accessToken!);
     },
 });
\ No newline at end of file
diff --git a/api/queries.ts b/api/queries.ts
index d285e17c..91c1c792 100644
--- a/api/queries.ts
+++ b/api/queries.ts
@@ -18,6 +18,13 @@ export const client : Jellyfin  = new Jellyfin({
     }
 });
 
+export const usePublicApi = (serverUrl: string) => useQuery({
+    queryKey: [QueryKeys.PublicApi, serverUrl],
+    queryFn: ({ queryKey }) => {
+        return client.createApi(serverUrl);
+    }
+})
+
 export const useApi = useQuery({
     queryKey: [QueryKeys.Api],
     queryFn: () => {
diff --git a/api/queries/public.ts b/api/queries/public.ts
new file mode 100644
index 00000000..df58a2b9
--- /dev/null
+++ b/api/queries/public.ts
@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { QueryKeys } from "../../enums/query-keys";
+import { usePublicApi } from "../queries";
+import { getSystemApi } from "@jellyfin/sdk/lib/utils/api/system-api";
+
+export const usePublicSystemInfo = (serverUrl: string) => useQuery({
+    queryKey: [QueryKeys.PublicSystemInfo, serverUrl],
+    queryFn: ({ queryKey }) => {
+        return getSystemApi(usePublicApi(queryKey[1]).data!).getPublicSystemInfo()
+    }
+});
\ No newline at end of file
diff --git a/api/types/jellyfin-credentials.ts b/api/types/jellyfin-credentials.ts
index ab817afd..aeeaeb6c 100644
--- a/api/types/jellyfin-credentials.ts
+++ b/api/types/jellyfin-credentials.ts
@@ -1,10 +1,12 @@
 
 export class JellyfinCredentials {
     username: string;
-    accessToken: string;
+    password?: string | undefined;
+    accessToken?: string | undefined;
 
-    constructor(username: string, accessToken: string) {
+    constructor(username: string, password?: string | undefined, accessToken?: string | undefined) {
         this.username = username;
+        this.password = password;
         this.accessToken = accessToken;
     }
 }
\ No newline at end of file
diff --git a/components/Login/component.tsx b/components/Login/component.tsx
index 201e811f..762a2659 100644
--- a/components/Login/component.tsx
+++ b/components/Login/component.tsx
@@ -1,8 +1,22 @@
+import { createStackNavigator } from "@react-navigation/stack";
 import { Text } from "react-native";
+import SignIn from "./helpers/sign-in";
+
 
 export default function Login(): React.JSX.Element {
 
+    const Stack = createStackNavigator();
+
     return (
-        <Text></Text>
+        <Stack.Screen
+            name="SignIn"
+            component={SignIn}
+            options={{
+            title: 'Welcome to Jellify',
+            // When logging out, a pop animation feels intuitive
+            // You can remove this if you want the default 'push' animation
+            animationTypeForReplace: 'pop',
+            }}
+        />
     );
 }
\ No newline at end of file
diff --git a/components/Login/helpers/quick-connect.tsx b/components/Login/helpers/quick-connect.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/components/Login/helpers/server-address.tsx b/components/Login/helpers/server-address.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/components/Login/helpers/server-authentication.tsx b/components/Login/helpers/server-authentication.tsx
new file mode 100644
index 00000000..a5dccc51
--- /dev/null
+++ b/components/Login/helpers/server-authentication.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { View, TextInput, Button } from "react-native";
+import { authenticateWithCredentials } from "../../../api/mutators/auth";
+
+
+export default function ServerAuthentication(): React.JSX.Element {
+    const [username, setUsername] = React.useState('');
+    const [password, setPassword] = React.useState('');
+
+    return (
+        <View>
+            <TextInput
+                placeholder="Username"
+                value={username}
+                onChangeText={setUsername}
+            />
+            <TextInput
+                placeholder="Password"
+                value={password}
+                onChangeText={setPassword}
+                secureTextEntry
+            />
+            <Button title="Sign in" onPress={() => signInHandler(username, password)} />
+        </View>
+    );
+}
+
+function signInHandler(username: string, password: string) {
+    return authenticateWithCredentials.mutate({username, password})
+}
\ No newline at end of file
diff --git a/components/Login/helpers/server-library.tsx b/components/Login/helpers/server-library.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/components/Login/helpers/sign-in.tsx b/components/Login/helpers/sign-in.tsx
new file mode 100644
index 00000000..d625bba5
--- /dev/null
+++ b/components/Login/helpers/sign-in.tsx
@@ -0,0 +1,8 @@
+import { Text } from "react-native";
+
+export default function SignIn(): React.JSX.Element {
+
+    return (
+        <Text></Text>
+    )
+}
\ No newline at end of file
diff --git a/components/jellify.tsx b/components/jellify.tsx
index d461524b..98c313bf 100644
--- a/components/jellify.tsx
+++ b/components/jellify.tsx
@@ -1,8 +1,19 @@
+import { createStackNavigator } from "@react-navigation/stack";
 import { Text } from "react-native";
+import Player from "./Player/component";
 
 export default function Jellify(): React.JSX.Element {
+    
+    const RootStack = createStackNavigator();
 
     return (
-        <Text></Text>
+        <RootStack.Navigator>
+          <RootStack.Group>
+            <RootStack.Screen name="Jellify" component={Jellify} />
+          </RootStack.Group>
+          <RootStack.Group screenOptions={{ presentation: 'modal' }}>
+            <RootStack.Screen name="Player" component={Player} />
+          </RootStack.Group>
+        </RootStack.Navigator>
     );
 }
\ No newline at end of file
diff --git a/enums/mutation-keys.ts b/enums/mutation-keys.ts
index 94b5834e..0db7fddf 100644
--- a/enums/mutation-keys.ts
+++ b/enums/mutation-keys.ts
@@ -1,5 +1,6 @@
 export enum MutationKeys {
+    AuthenticationWithCredentials = "AUTH_WITH_CREDS",
     AccessToken = "ACCESS_TOKEN",
     Credentials = "CREDENTIALS",
-    ServerUrl = "SERVER_URL"
+    ServerUrl = "SERVER_URL",
 }
\ No newline at end of file
diff --git a/enums/query-keys.ts b/enums/query-keys.ts
index 1326ed73..64f65754 100644
--- a/enums/query-keys.ts
+++ b/enums/query-keys.ts
@@ -17,4 +17,6 @@ export enum QueryKeys {
     ReportPlaybackStarted = "REPORT_PLAYBACK_STARTED",
     ReportPlaybackStopped = "REPORT_PLAYBACK_STOPPED",
     ServerUrl = "SERVER_URL",
+    PublicSystemInfo = "PublicSystemInfo",
+    PublicApi = "PublicApi",
 }
\ No newline at end of file