diff --git a/src/backend/accounts/meta.ts b/src/backend/accounts/meta.ts index 1747a7a3..ec6b94be 100644 --- a/src/backend/accounts/meta.ts +++ b/src/backend/accounts/meta.ts @@ -1,6 +1,7 @@ import { ofetch } from "ofetch"; export interface MetaResponse { + version: string; name: string; description?: string; hasCaptcha: boolean; diff --git a/src/pages/admin/AdminPage.tsx b/src/pages/admin/AdminPage.tsx index d98660d2..fd5c671f 100644 --- a/src/pages/admin/AdminPage.tsx +++ b/src/pages/admin/AdminPage.tsx @@ -5,6 +5,8 @@ import { ConfigValuesPart } from "@/pages/parts/admin/ConfigValuesPart"; import { TMDBTestPart } from "@/pages/parts/admin/TMDBTestPart"; import { WorkerTestPart } from "@/pages/parts/admin/WorkerTestPart"; +import { BackendTestPart } from "../parts/admin/BackendTestPart"; + export function AdminPage() { return ( @@ -13,6 +15,7 @@ export function AdminPage() { Useful tools to test out your current deployment + diff --git a/src/pages/parts/admin/BackendTestPart.tsx b/src/pages/parts/admin/BackendTestPart.tsx new file mode 100644 index 00000000..555a20f7 --- /dev/null +++ b/src/pages/parts/admin/BackendTestPart.tsx @@ -0,0 +1,128 @@ +import { useState } from "react"; +import { useAsyncFn } from "react-use"; + +import { MetaResponse, getBackendMeta } from "@/backend/accounts/meta"; +import { Button } from "@/components/Button"; +import { Icon, Icons } from "@/components/Icon"; +import { Box } from "@/components/layout/Box"; +import { Spinner } from "@/components/layout/Spinner"; +import { Divider } from "@/components/utils/Divider"; +import { Heading2 } from "@/components/utils/Text"; +import { conf } from "@/setup/config"; + +export function BackendTestPart() { + const backendUrl = conf().BACKEND_URL; + + const [status, setStatus] = useState<{ + hasTested: boolean; + success: boolean; + errorText: string; + value: MetaResponse | null; + }>({ + hasTested: false, + success: false, + errorText: "", + value: null, + }); + + const [testState, runTests] = useAsyncFn(async () => { + setStatus({ + hasTested: false, + success: false, + errorText: "", + value: null, + }); + + try { + const backendData = await getBackendMeta(backendUrl); + return setStatus({ + hasTested: true, + success: true, + errorText: + "Failed to call backend, double check the URL key and your internet connection", + value: backendData, + }); + } catch (err) { + return setStatus({ + hasTested: true, + success: false, + errorText: + "Failed to call backend, double check the URL key and your internet connection", + value: null, + }); + } + }, [setStatus]); + + return ( + <> + Backend API test + +
+
+ {status.hasTested && status.success ? ( + <> +

+ + Version: + + {status.value?.version} +

+

+ + Backend name: + + {status.value?.name} +

+

+ + Description: + + {status.value?.description ?? "Not set"} +

+

+ + Captcha enabled: + + {status.value?.hasCaptcha ? "Yes" : "No"} +

+ + + ) : null} +
+
+
+ {!status.hasTested ? ( +

Run the test to validate backend

+ ) : status.success ? ( +

+ + Backend is working as expected +

+ ) : ( +
+

+ + Backend is not working +

+

{status.errorText}

+
+ )} + +
+
+ + ); +} diff --git a/src/pages/parts/admin/TMDBTestPart.tsx b/src/pages/parts/admin/TMDBTestPart.tsx index 33d35144..de9b53f4 100644 --- a/src/pages/parts/admin/TMDBTestPart.tsx +++ b/src/pages/parts/admin/TMDBTestPart.tsx @@ -77,7 +77,13 @@ export function TMDBTestPart() {

) : ( <> -

TMDB is not working

+

+ + TMDB is not working +

{status.errorText}

)}