Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-11-13 11:15:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve register loading screen

Browse Source
This commit is contained in:
mrjvs 2023-11-17 19:20:17 +01:00
parent 328414ab06
commit 567c6a3894
1 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/pages/parts/auth/TrustBackendPart.tsx
View File

@ -1,3 +1,5 @@
import { useMemo } from "react";
import { useHistory } from "react-router-dom";
import { useAsync } from "react-use"; import { useAsync } from "react-use";
import { MetaResponse, getBackendMeta } from "@/backend/accounts/meta"; import { MetaResponse, getBackendMeta } from "@/backend/accounts/meta";
@ -8,6 +10,8 @@ import {
LargeCardButtons, LargeCardButtons,
LargeCardText, LargeCardText,
} from "@/components/layout/LargeCard"; } from "@/components/layout/LargeCard";
import { Loading } from "@/components/layout/Loading";
import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
import { conf } from "@/setup/config"; import { conf } from "@/setup/config";
interface TrustBackendPartProps { interface TrustBackendPartProps {
@ -15,18 +19,30 @@ interface TrustBackendPartProps {
} }
export function TrustBackendPart(props: TrustBackendPartProps) { export function TrustBackendPart(props: TrustBackendPartProps) {
const result = useAsync(async () => { const history = useHistory();
const url = conf().BACKEND_URL; const backendUrl = useBackendUrl();
return { const backendHostname = useMemo(
domain: new URL(url).hostname, () => new URL(backendUrl).hostname,
data: await getBackendMeta(conf().BACKEND_URL), [backendUrl]
}; );
}, []); const result = useAsync(() => {
return getBackendMeta(conf().BACKEND_URL);
}, [backendUrl]);
if (result.loading) return <p>loading...</p>; let cardContent = (
<>
if (result.error || !result.value) <h3 className="text-white font-bold text-lg">Failed to reach backend</h3>
return <p>Failed to talk to backend, did you configure it correctly?</p>; <p>Did you configure it correctly?</p>
</>
);
if (result.loading) cardContent = <Loading />;
if (result.value)
cardContent = (
<>
<h3 className="text-white font-bold text-lg">{result.value.name}</h3>
{result.value.description ? <p>{result.value.description}</p> : null}
</>
);
return ( return (
<LargeCard> <LargeCard>
@ -34,29 +50,20 @@ export function TrustBackendPart(props: TrustBackendPartProps) {
title="Do you trust this host?" title="Do you trust this host?"
icon={<Icon icon={Icons.CIRCLE_EXCLAMATION} />} icon={<Icon icon={Icons.CIRCLE_EXCLAMATION} />}
> >
Do you trust <span className="text-white">{result.value.domain}</span>? Do you trust <span className="text-white">{backendHostname}</span>?
</LargeCardText> </LargeCardText>
<div className="border border-authentication-border rounded-xl px-4 py-8 flex flex-col items-center space-y-2 my-8"> <div className="border border-authentication-border rounded-xl px-4 py-8 flex flex-col items-center space-y-2 my-8">
<h3 className="text-white font-bold text-lg"> {cardContent}
{result.value.data.name}
</h3>
{result.value.data.description ? (
<p>{result.value.data.description}</p>
) : null}
</div> </div>
<LargeCardButtons> <LargeCardButtons>
<Button <Button
theme="purple" theme="purple"
onClick={() => props.onNext?.(result.value.data)} onClick={() => result.value && props.onNext?.(result.value)}
> >
I pledge my life to the United States I pledge my life to the United States
</Button> </Button>
<Button <Button theme="secondary" onClick={() => history.push("/")}>
theme="secondary"
// eslint-disable-next-line no-return-assign, no-restricted-globals
onClick={() => (location.href = "https://youtu.be/of0O-lS-OqQ")}
>
I WILL NEVER SUCCUMB! I WILL NEVER SUCCUMB!
</Button> </Button>
</LargeCardButtons> </LargeCardButtons>