From d38f553c4fea62ca0b865d2b600fb4c69b6ea081 Mon Sep 17 00:00:00 2001
From: Brendan Allan <brendonovich@outlook.com>
Date: Fri, 13 Sep 2024 17:13:38 +0800
Subject: [PATCH] use 127.0.0.1 and fix auth error

---
 apps/desktop/src/routes/(main)/index.tsx      | 34 ++++-----
 apps/desktop/src/routes/permissions.tsx       | 75 ++++++++++---------
 .../app/api/desktop/session/request/route.ts  |  2 +-
 3 files changed, 58 insertions(+), 53 deletions(-)

diff --git a/apps/desktop/src/routes/(main)/index.tsx b/apps/desktop/src/routes/(main)/index.tsx
index 8dd04d1a..67ab15e0 100644
--- a/apps/desktop/src/routes/(main)/index.tsx
+++ b/apps/desktop/src/routes/(main)/index.tsx
@@ -79,29 +79,28 @@ export default function () {
     }
   });
 
-  const windowsData = createMemo(() => windows.data ?? []);
-  const audioDevicesData = createMemo(() => audioDevices.data ?? []);
-  const camerasData = createMemo(() => cameras() ?? []);
-
   createUpdateCheck();
 
   return (
     <div class="flex flex-col p-[1rem] gap-[0.75rem] text-[0.875rem] font-[400] bg-gray-50">
       <Show when={auth() && options.data}>
         {(options) => {
-          const selectedWindow = createMemo(() => {
+          const selectedWindow = () => {
             const d = options().captureTarget;
             if (d.type !== "window") return;
-            return windowsData().find((data) => data.id === d.id);
-          });
+            return windows.data?.find((data) => data.id === d.id);
+          };
 
-          const audioDevice = () =>
-            audioDevicesData().find((d) => d.name === options().audioInputName);
+          const audioDevice = () => {
+            return audioDevices.data?.find(
+              (d) => d.name === options().audioInputName
+            );
+          };
 
           return (
             <>
               <KSelect<CaptureWindow | null>
-                options={windowsData()}
+                options={windows.data ?? []}
                 optionValue="id"
                 optionTextValue="name"
                 placeholder="Window"
@@ -185,7 +184,7 @@ export default function () {
                     class={topRightAnimateClasses}
                   >
                     <Show
-                      when={windowsData().length > 0}
+                      when={(windows.data ?? []).length > 0}
                       fallback={
                         <div class="p-2 text-gray-500">
                           No windows available
@@ -203,10 +202,7 @@ export default function () {
               <div class="flex flex-col gap-[0.25rem] items-stretch">
                 <label class="text-gray-400 text-[0.875rem]">Camera</label>
                 <KSelect<CameraOption>
-                  options={[
-                    { deviceId: "", label: "No Camera" },
-                    ...camerasData(),
-                  ]}
+                  options={[{ deviceId: "", label: "No Camera" }, ...cameras()]}
                   optionValue="deviceId"
                   optionTextValue="label"
                   placeholder="No Camera"
@@ -232,8 +228,10 @@ export default function () {
                 >
                   <KSelect.Trigger class="h-[2rem] px-[0.375rem] flex flex-row gap-[0.375rem] border rounded-lg border-gray-200 w-full items-center disabled:text-gray-400 transition-colors KSelect">
                     <IconCapCamera class="text-gray-400 size-[1.25rem]" />
-                    <KSelect.Value<CameraOption> class="flex-1 text-left truncate">
-                      {(state) => <>{state.selectedOption().label}</>}
+                    <KSelect.Value<
+                      CameraOption | undefined
+                    > class="flex-1 text-left truncate">
+                      {(state) => <>{state.selectedOption()?.label}</>}
                     </KSelect.Value>
                     <button
                       type="button"
@@ -277,7 +275,7 @@ export default function () {
               <div class="flex flex-col gap-[0.25rem] items-stretch">
                 <label class="text-gray-400">Microphone</label>
                 <KSelect<{ name: string }>
-                  options={[{ name: "No Audio" }, ...audioDevicesData()]}
+                  options={[{ name: "No Audio" }, ...(audioDevices.data ?? [])]}
                   optionValue="name"
                   optionTextValue="name"
                   placeholder="No Audio"
diff --git a/apps/desktop/src/routes/permissions.tsx b/apps/desktop/src/routes/permissions.tsx
index 60c81830..229f4d5f 100644
--- a/apps/desktop/src/routes/permissions.tsx
+++ b/apps/desktop/src/routes/permissions.tsx
@@ -1,24 +1,17 @@
-import { cx } from "cva";
 import { Button } from "@cap/ui-solid";
 import { exit } from "@tauri-apps/plugin-process";
 
-import {
-  commands,
-  OSPermission,
-  OSPermissionStatus,
-  OSPermissionsCheck,
-} from "../utils/tauri";
+import { commands, type OSPermissionStatus } from "../utils/tauri";
 import {
   createEffect,
   createResource,
   Suspense,
-  Switch,
-  Match,
   createSignal,
   Show,
 } from "solid-js";
 import { createTimer } from "@solid-primitives/timer";
 import { getCurrentWindow } from "@tauri-apps/api/window";
+import { Transition } from "solid-transition-group";
 
 function isPermitted(status?: OSPermissionStatus): boolean {
   return status === "granted" || status === "notNeeded";
@@ -85,32 +78,46 @@ export default function () {
         </p>
       </div>
       <Suspense fallback={<div class="w-full flex-1" />}>
-        <div class="flex flex-col items-start gap-1">
-          <h4 class="font-[500] text-[0.875rem]">
-            {currentStep().name} Permission
-          </h4>
-          <div class="w-full flex gap-2">
-            <Show
-              when={currentStepStatus() !== "denied"}
-              fallback={
-                <Button onClick={openSettings} class="flex-1">
-                  Open Settings
+        <Transition
+          mode="outin"
+          enterActiveClass="transition-opacity"
+          exitActiveClass="transition-opacity"
+          enterClass="opacity-0"
+          exitToClass="opacity-0"
+        >
+          <Show when={currentStep()} keyed>
+            <div class="flex flex-col items-start gap-1">
+              <h4 class="font-[500] text-[0.875rem]">
+                {currentStep().name} Permission
+              </h4>
+              <div class="w-full flex gap-2">
+                <Show
+                  when={currentStepStatus() !== "denied"}
+                  fallback={
+                    <Button onClick={openSettings} class="flex-1">
+                      Open Settings
+                    </Button>
+                  }
+                >
+                  <Button
+                    onClick={requestPermission}
+                    disabled={currentStepStatus() !== "empty"}
+                    class="flex-1"
+                  >
+                    Grant
+                  </Button>
+                </Show>
+                <Button
+                  variant="secondary"
+                  class="flex-1"
+                  onClick={() => exit()}
+                >
+                  Quit
                 </Button>
-              }
-            >
-              <Button
-                onClick={requestPermission}
-                disabled={currentStepStatus() !== "empty"}
-                class="flex-1"
-              >
-                Grant
-              </Button>
-            </Show>
-            <Button variant="secondary" class="flex-1" onClick={() => exit()}>
-              Quit
-            </Button>
-          </div>
-        </div>
+              </div>
+            </div>
+          </Show>
+        </Transition>
       </Suspense>
     </div>
   );
diff --git a/apps/web/app/api/desktop/session/request/route.ts b/apps/web/app/api/desktop/session/request/route.ts
index 50b0223a..661a902c 100644
--- a/apps/web/app/api/desktop/session/request/route.ts
+++ b/apps/web/app/api/desktop/session/request/route.ts
@@ -39,7 +39,7 @@ export async function GET(req: NextRequest) {
   }
 
   const returnUrl = new URL(
-    `http://localhost:${port}?token=${tokenValue}&expires=${decodedToken?.exp}`
+    `http://127.0.0.1:${port}?token=${tokenValue}&expires=${decodedToken?.exp}`
   );
 
   return Response.redirect(returnUrl.href);