From 8fe32c68cefe02a48f41a09895895ee0c9237eb8 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Thu, 20 Feb 2025 19:07:38 -0700
Subject: [PATCH] require env config for fedapi stuff

---
 src/pages/onboarding/Onboarding.tsx          | 147 ++++++++++---------
 src/pages/parts/settings/ConnectionsPart.tsx | 116 ++++++++-------
 src/pages/parts/settings/SetupPart.tsx       |  15 +-
 src/setup/config.ts                          |   4 +
 4 files changed, 153 insertions(+), 129 deletions(-)

diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx
index 97d3ac7a..a05e4150 100644
--- a/src/pages/onboarding/Onboarding.tsx
+++ b/src/pages/onboarding/Onboarding.tsx
@@ -25,85 +25,89 @@ import {
   MiniCardContent,
 } from "@/pages/onboarding/utils";
 import { PageTitle } from "@/pages/parts/util/PageTitle";
+import { conf } from "@/setup/config";
 import { useAuthStore } from "@/stores/auth";
 import { getProxyUrls } from "@/utils/proxyUrls";
 
 import { PopupModal } from "../parts/home/PopupModal";
 
-export function OptionalDropdown() {
+export function FEDAPISetup() {
   const { t } = useTranslation();
   const [isExpanded, setIsExpanded] = useState(false);
   const febboxToken = useAuthStore((s) => s.febboxToken);
   const setFebboxToken = useAuthStore((s) => s.setFebboxToken);
 
-  return (
-    <div className="mt-12">
-      <SettingsCard>
-        <div className="flex justify-between items-center gap-4">
-          <div className="my-3">
-            <p className="text-white font-bold mb-3">
-              Optional: FED API (Febbox) token
-            </p>
-            <p className="max-w-[30rem] font-medium">
-              <Trans i18nKey="settings.connections.febbox.description">
-                Bring your own Febbox account to get the best streaming with 4K
-                quality, Dolby Atmos, and the best (fastest) load times!
-              </Trans>
-            </p>
-          </div>
-          <div>
-            <Toggle
-              onClick={() => setIsExpanded(!isExpanded)}
-              enabled={isExpanded}
-            />
-          </div>
-        </div>
-        {isExpanded ? (
-          <>
-            <Divider marginClass="my-6 px-8 box-content -mx-8" />
-
+  if (conf().ALLOW_FEBBOX_KEY) {
+    return (
+      <div className="mt-12">
+        <SettingsCard>
+          <div className="flex justify-between items-center gap-4">
             <div className="my-3">
+              <p className="text-white font-bold mb-3">
+                Optional: FED API (Febbox) token
+              </p>
               <p className="max-w-[30rem] font-medium">
                 <Trans i18nKey="settings.connections.febbox.description">
-                  To get your UI token:
-                  <br />
-                  1. Go to <MwLink to="https://febbox.com">
-                    febbox.com
-                  </MwLink>{" "}
-                  and log in with Google (use a fresh account!)
-                  <br />
-                  2. Open DevTools or inspect the page
-                  <br />
-                  3. Go to Application tab → Cookies
-                  <br />
-                  4. Copy the &quot;ui&quot; cookie.
-                  <br />
-                  5. Close the tab, but do NOT logout!
+                  Bring your own Febbox account to get the best streaming with
+                  4K quality, Dolby Atmos, and the best (fastest) load times!
                 </Trans>
               </p>
-              <p className="text-type-danger mt-2">
-                (Do not share this token!)
-              </p>
             </div>
+            <div>
+              <Toggle
+                onClick={() => setIsExpanded(!isExpanded)}
+                enabled={isExpanded}
+              />
+            </div>
+          </div>
+          {isExpanded ? (
+            <>
+              <Divider marginClass="my-6 px-8 box-content -mx-8" />
 
-            <Divider marginClass="my-6 px-8 box-content -mx-8" />
-            <p className="text-white font-bold mb-3">
-              {t("settings.connections.febbox.tokenLabel", "Token")}
-            </p>
-            <AuthInputBox
-              onChange={(newToken) => {
-                setFebboxToken(newToken);
-              }}
-              value={febboxToken ?? ""}
-              placeholder="eyABCdE..."
-              passwordToggleable
-            />
-          </>
-        ) : null}
-      </SettingsCard>
-    </div>
-  );
+              <div className="my-3">
+                <p className="max-w-[30rem] font-medium">
+                  <Trans i18nKey="settings.connections.febbox.description">
+                    To get your UI token:
+                    <br />
+                    1. Go to <MwLink to="https://febbox.com">
+                      febbox.com
+                    </MwLink>{" "}
+                    and log in with Google (use a fresh account!)
+                    <br />
+                    2. Open DevTools or inspect the page
+                    <br />
+                    3. Go to Application tab → Cookies
+                    <br />
+                    4. Copy the &quot;ui&quot; cookie.
+                    <br />
+                    5. Close the tab, but do NOT logout!
+                  </Trans>
+                </p>
+                <p className="text-type-danger mt-2">
+                  (Do not share this token!)
+                </p>
+              </div>
+
+              <Divider marginClass="my-6 px-8 box-content -mx-8" />
+              <p className="text-white font-bold mb-3">
+                {t("settings.connections.febbox.tokenLabel", "Token")}
+              </p>
+              <AuthInputBox
+                onChange={(newToken) => {
+                  setFebboxToken(newToken);
+                }}
+                value={febboxToken ?? ""}
+                placeholder="eyABCdE..."
+                passwordToggleable
+              />
+            </>
+          ) : null}
+        </SettingsCard>
+      </div>
+    );
+  }
 }
+
 export function OnboardingPage() {
   const navigate = useNavigateOnboarding();
   const skipModal = useModal("skip");
@@ -177,13 +181,18 @@ export function OnboardingPage() {
                 might be slower due to shared bandwidth.
                 <br />
                 <br />
-                <strong>Optional FED API (Febbox) UI token</strong>
-                <br />
-                Bringing your own Febbox account allows you to unlock FED API,
-                our best source with 4K quality, Dolby Atmos, the most content,
-                and the best (fastest) load times. This the highly recommended!
-                <br />
-                <br />
+                {conf().ALLOW_FEBBOX_KEY && (
+                  <>
+                    <strong>Optional FED API (Febbox) UI token</strong>
+                    <br />
+                    Bringing your own Febbox account allows you to unlock FED
+                    API, our best source with 4K quality, Dolby Atmos, the most
+                    content, and the best (fastest) load times. This the highly
+                    recommended!
+                    <br />
+                    <br />
+                  </>
+                )}
                 If you have more questions on how this works, feel free to ask
                 on the{" "}
                 <a
@@ -327,7 +336,7 @@ export function OnboardingPage() {
           )}
         </div>
 
-        <OptionalDropdown />
+        <FEDAPISetup />
       </BiggerCenterContainer>
     </MinimalPageLayout>
   );
diff --git a/src/pages/parts/settings/ConnectionsPart.tsx b/src/pages/parts/settings/ConnectionsPart.tsx
index 4b4aa32f..05fa5f80 100644
--- a/src/pages/parts/settings/ConnectionsPart.tsx
+++ b/src/pages/parts/settings/ConnectionsPart.tsx
@@ -10,6 +10,7 @@ import { AuthInputBox } from "@/components/text-inputs/AuthInputBox";
 import { Divider } from "@/components/utils/Divider";
 import { Heading1 } from "@/components/utils/Text";
 import { SetupPart } from "@/pages/parts/settings/SetupPart";
+import { conf } from "@/setup/config";
 import { useAuthStore } from "@/stores/auth";
 
 interface ProxyEditProps {
@@ -176,68 +177,73 @@ function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) {
 
 function FebboxTokenEdit({ febboxToken, setFebboxToken }: FebboxTokenProps) {
   const { t } = useTranslation();
-
-  return (
-    <SettingsCard>
-      <div className="flex justify-between items-center gap-4">
-        <div className="my-3">
-          <p className="text-white font-bold mb-3">
-            Optional: FED API (Febbox) token
-          </p>
-          <p className="max-w-[30rem] font-medium">
-            <Trans i18nKey="settings.connections.febbox.description">
-              Bring your own Febbox account to get the best streaming with 4K
-              quality, Dolby Atmos, and the best (fastest) load times!
-            </Trans>
-          </p>
-        </div>
-        <div>
-          <Toggle
-            onClick={() => setFebboxToken((s) => (s === null ? "" : null))}
-            enabled={febboxToken !== null}
-          />
-        </div>
-      </div>
-      {febboxToken !== null ? (
-        <>
-          <Divider marginClass="my-6 px-8 box-content -mx-8" />
-
+  if (conf().ALLOW_FEBBOX_KEY) {
+    return (
+      <SettingsCard>
+        <div className="flex justify-between items-center gap-4">
           <div className="my-3">
+            <p className="text-white font-bold mb-3">
+              Optional: FED API (Febbox) token
+            </p>
             <p className="max-w-[30rem] font-medium">
               <Trans i18nKey="settings.connections.febbox.description">
-                To get your UI token:
-                <br />
-                1. Go to <MwLink to="https://febbox.com">febbox.com</MwLink> and
-                log in with Google (use a fresh account!)
-                <br />
-                2. Open DevTools or inspect the page
-                <br />
-                3. Go to Application tab → Cookies
-                <br />
-                4. Copy the &quot;ui&quot; cookie.
-                <br />
-                5. Close the tab, but do NOT logout!
+                Bring your own Febbox account to get the best streaming with 4K
+                quality, Dolby Atmos, and the best (fastest) load times!
               </Trans>
             </p>
-            <p className="text-type-danger mt-2">(Do not share this token!)</p>
           </div>
+          <div>
+            <Toggle
+              onClick={() => setFebboxToken((s) => (s === null ? "" : null))}
+              enabled={febboxToken !== null}
+            />
+          </div>
+        </div>
+        {febboxToken !== null ? (
+          <>
+            <Divider marginClass="my-6 px-8 box-content -mx-8" />
 
-          <Divider marginClass="my-6 px-8 box-content -mx-8" />
-          <p className="text-white font-bold mb-3">
-            {t("settings.connections.febbox.tokenLabel", "Token")}
-          </p>
-          <AuthInputBox
-            onChange={(newToken) => {
-              setFebboxToken(newToken);
-            }}
-            value={febboxToken ?? ""}
-            placeholder="eyABCdE..."
-            passwordToggleable
-          />
-        </>
-      ) : null}
-    </SettingsCard>
-  );
+            <div className="my-3">
+              <p className="max-w-[30rem] font-medium">
+                <Trans i18nKey="settings.connections.febbox.description">
+                  To get your UI token:
+                  <br />
+                  1. Go to <MwLink to="https://febbox.com">
+                    febbox.com
+                  </MwLink>{" "}
+                  and log in with Google (use a fresh account!)
+                  <br />
+                  2. Open DevTools or inspect the page
+                  <br />
+                  3. Go to Application tab → Cookies
+                  <br />
+                  4. Copy the &quot;ui&quot; cookie.
+                  <br />
+                  5. Close the tab, but do NOT logout!
+                </Trans>
+              </p>
+              <p className="text-type-danger mt-2">
+                (Do not share this token!)
+              </p>
+            </div>
+
+            <Divider marginClass="my-6 px-8 box-content -mx-8" />
+            <p className="text-white font-bold mb-3">
+              {t("settings.connections.febbox.tokenLabel", "Token")}
+            </p>
+            <AuthInputBox
+              onChange={(newToken) => {
+                setFebboxToken(newToken);
+              }}
+              value={febboxToken ?? ""}
+              placeholder="eyABCdE..."
+              passwordToggleable
+            />
+          </>
+        ) : null}
+      </SettingsCard>
+    );
+  }
 }
 
 export function ConnectionsPart(
diff --git a/src/pages/parts/settings/SetupPart.tsx b/src/pages/parts/settings/SetupPart.tsx
index 9886e196..e2b004b8 100644
--- a/src/pages/parts/settings/SetupPart.tsx
+++ b/src/pages/parts/settings/SetupPart.tsx
@@ -15,6 +15,7 @@ import {
   StatusCircleProps,
 } from "@/components/player/internals/StatusCircle";
 import { Heading3 } from "@/components/utils/Text";
+import { conf } from "@/setup/config";
 import { useAuthStore } from "@/stores/auth";
 
 const testUrl = "https://postman-echo.com/get";
@@ -26,7 +27,7 @@ type SetupData = {
   extension: Status;
   proxy: Status;
   defaultProxy: Status;
-  febboxTokenTest: Status;
+  febboxTokenTest?: Status;
 };
 
 function testProxy(url: string) {
@@ -100,7 +101,9 @@ function useIsSetup() {
       extension: extensionStatus,
       proxy: proxyStatus,
       defaultProxy: "success",
-      febboxTokenTest: febboxTokenStatus,
+      ...(conf().ALLOW_FEBBOX_KEY && {
+        febboxTokenTest: febboxTokenStatus,
+      }),
     };
   }, [proxyUrls, febboxToken]);
 
@@ -243,9 +246,11 @@ export function SetupPart() {
           >
             {t("settings.connections.setup.items.default")}
           </SetupCheckList>
-          <SetupCheckList status={setupStates.febboxTokenTest}>
-            Febbox UI token
-          </SetupCheckList>
+          {conf().ALLOW_FEBBOX_KEY && (
+            <SetupCheckList status={setupStates.febboxTokenTest || "unset"}>
+              Febbox UI token
+            </SetupCheckList>
+          )}
         </div>
         <div className="md:mt-5">
           <Button theme="purple" onClick={() => navigate("/onboarding")}>
diff --git a/src/setup/config.ts b/src/setup/config.ts
index ec4d63c2..f97b8a48 100644
--- a/src/setup/config.ts
+++ b/src/setup/config.ts
@@ -24,6 +24,7 @@ interface Config {
   ONBOARDING_FIREFOX_EXTENSION_INSTALL_LINK: string;
   ONBOARDING_PROXY_INSTALL_LINK: string;
   ALLOW_AUTOPLAY: boolean;
+  ALLOW_FEBBOX_KEY: boolean;
 }
 
 export interface RuntimeConfig {
@@ -44,6 +45,7 @@ export interface RuntimeConfig {
   ONBOARDING_CHROME_EXTENSION_INSTALL_LINK: string | null;
   ONBOARDING_FIREFOX_EXTENSION_INSTALL_LINK: string | null;
   ONBOARDING_PROXY_INSTALL_LINK: string | null;
+  ALLOW_FEBBOX_KEY: boolean;
 }
 
 const env: Record<keyof Config, undefined | string> = {
@@ -67,6 +69,7 @@ const env: Record<keyof Config, undefined | string> = {
   CDN_REPLACEMENTS: import.meta.env.VITE_CDN_REPLACEMENTS,
   HAS_ONBOARDING: import.meta.env.VITE_HAS_ONBOARDING,
   ALLOW_AUTOPLAY: import.meta.env.VITE_ALLOW_AUTOPLAY,
+  ALLOW_FEBBOX_KEY: import.meta.env.VITE_ALLOW_FEBBOX_KEY,
 };
 
 function coerceUndefined(value: string | null | undefined): string | undefined {
@@ -127,5 +130,6 @@ export function conf(): RuntimeConfig {
           .filter((s) => s.length > 0),
       )
       .filter((v) => v.length === 2), // The format is <beforeA>:<afterA>,<beforeB>:<afterB>
+    ALLOW_FEBBOX_KEY: getKey("ALLOW_FEBBOX_KEY", "false") === "true",
   };
 }