feat(jellyfin-auth): changed frontend server add flow to use the Quick Connect feature to get the api token

frontend/src/Lib/QuickConnect.ts

@@ -0,0 +1,37 @@
+import axios from "axios";
+
+const DeviceInfoString = "MediaBrowser Client=JellyGlass, Device=JellyGlass, DeviceId=JellyGlass, Version=1";
+
+interface QuickConnectInfo {
+  Code: string;
+  Secret: string;
+  Authenticated: boolean
+}
+
+export interface QuickConnectAuth {
+  AccessToken: string;
+}
+
+export const BeginQuickConnect = async (url: string, callback: (apiToken: string) => void, isCancelled: () => boolean): Promise<string> => {
+  const response = await axios.post<QuickConnectInfo>(`${url}/QuickConnect/Initiate`, {}, { headers: { Authorization: DeviceInfoString } });
+
+  setTimeout(() => { PollQuickConnect(url, response.data, callback, isCancelled) });
+
+  return response.data.Code;
+}
+
+const PollQuickConnect = async (url: string, info: QuickConnectInfo, callback: (apiToken: string) => void, isCancelled: () => boolean) => {
+  if (isCancelled()) {
+    return;
+  }
+
+  const response = await axios.get<QuickConnectInfo>(`${url}/QuickConnect/Connect?secret=${info.Secret}`, { headers: { Authorization: DeviceInfoString } });
+
+  if (response.data.Authenticated) {
+    const authResponse = await axios.post<QuickConnectAuth>(`${url}/Users/AuthenticateWithQuickConnect`, { Secret: response.data.Secret })
+    callback(authResponse.data.AccessToken);
+  }
+  else {
+    setTimeout(() => { PollQuickConnect(url, response.data, callback, isCancelled) }, 5000)
+  }
+}

frontend/src/Pages/Admin/ServerManagement/ServerManagement.tsx

@@ -1,17 +1,18 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Button, Form, Spinner, Table } from "react-bootstrap";
 import { AddServer, getServerList, RemoveServer, type Server } from "../../../Lib/Servers";
 import { useImmer } from "use-immer";
 import styles from "../Management.module.scss";
+import { BeginQuickConnect } from "../../../Lib/QuickConnect";
 
 
 const ServerManagement = () => {
   const [servers, setServers] = useImmer<Array<Server> | undefined>(undefined);
+  const [addCancelled, setAddCancelled] = useState(false);
 
   const [addServerInfo, setAddServerInfo] = useImmer({
     url: "",
     owner: "",
-    apiToken: ""
   });
 
   useEffect(() => {
@@ -37,8 +38,26 @@ const ServerManagement = () => {
     })
   }
 
-  const onServerAdd = () => {
-    AddServer(addServerInfo.owner, addServerInfo.url, addServerInfo.apiToken).then(result => {
+  const onQuickConnect = () => {
+    //start quick connect request
+    //show quick connect code to user (modal)
+    //poll quick connect state until it's authenticated
+    //fetch quick connect credentials
+    //onServerAdd(token);
+    BeginQuickConnect(addServerInfo.url, onServerAdd, () => addCancelled).then(quickConnectCode => {
+      //show modal with code
+      alert(`Your quick connect code is ${quickConnectCode}`);
+    }).catch(err => {
+      //alert user to error
+      //possibly clear fields?
+      console.log(err);
+      alert(err);
+    });
+  }
+
+  const onServerAdd = (apiToken: string) => {
+    //hide quick connect modal
+    AddServer(addServerInfo.owner, addServerInfo.url, apiToken).then(result => {
       if (result.errored) {
         alert("Server was added, but is not working. Check the logs for details");
       }
@@ -52,7 +71,6 @@ const ServerManagement = () => {
         }
 
         setAddServerInfo(draft => {
-          draft.apiToken = "";
           draft.owner = "";
           draft.url = "";
         });
@@ -74,11 +92,7 @@ const ServerManagement = () => {
           <Form.Label>Url</Form.Label>
           <Form.Control type="text" placeholder="Url" onChange={e => setAddServerInfo(draft => { draft.url = e.target.value })} value={addServerInfo.url} />
         </Form.Group>
-        <Form.Group className="mb-3">
-          <Form.Label>ApiToken</Form.Label>
-          <Form.Control type="text" placeholder="ApiToken" onChange={e => setAddServerInfo(draft => { draft.apiToken = e.target.value })} value={addServerInfo.apiToken} />
-        </Form.Group>
-        <Button className={styles.formButton} onClick={() => onServerAdd()}>Add Server</Button>
+        <Button className={styles.formButton} onClick={() => onQuickConnect()}>Quick Connect</Button>
       </Form>
       <Table className={styles.table} bordered striped>
         <thead>