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

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>