1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-22 14:57:40 +01:00
smov/src/pages/parts/auth/TrustBackendPart.tsx
2023-12-29 21:14:02 +01:00

87 lines
2.5 KiB
TypeScript

import { useMemo } from "react";
import { Trans, useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { useAsync } from "react-use";
import { MetaResponse, getBackendMeta } from "@/backend/accounts/meta";
import { Button } from "@/components/buttons/Button";
import { Icon, Icons } from "@/components/Icon";
import {
LargeCard,
LargeCardButtons,
LargeCardText,
} from "@/components/layout/LargeCard";
import { Loading } from "@/components/layout/Loading";
import { MwLink } from "@/components/text/Link";
import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
interface TrustBackendPartProps {
onNext?: (meta: MetaResponse) => void;
}
export function TrustBackendPart(props: TrustBackendPartProps) {
const navigate = useNavigate();
const backendUrl = useBackendUrl();
const hostname = useMemo(() => new URL(backendUrl).hostname, [backendUrl]);
const result = useAsync(() => {
return getBackendMeta(backendUrl);
}, [backendUrl]);
const { t } = useTranslation();
let cardContent = (
<>
<h3 className="text-white font-bold text-lg">
{t("auth.trust.failed.title")}
</h3>
<p>{t("auth.trust.failed.text")}</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 className="text-center">{result.value.description}</p>
) : null}
</>
);
return (
<LargeCard>
<LargeCardText
title={t("auth.trust.title")}
icon={<Icon icon={Icons.CIRCLE_EXCLAMATION} />}
>
<Trans
i18nKey="auth.trust.host"
values={{
hostname,
}}
>
<span className="text-white" />
</Trans>
</LargeCardText>
<div className="border border-authentication-border rounded-xl px-4 py-8 flex flex-col items-center space-y-2 my-8">
{cardContent}
</div>
<LargeCardButtons>
<Button theme="secondary" onClick={() => navigate("/")}>
{t("auth.trust.no")}
</Button>
<Button
theme="purple"
onClick={() => result.value && props.onNext?.(result.value)}
>
{t("auth.trust.yes")}
</Button>
</LargeCardButtons>
<p className="text-center mt-6">
<Trans i18nKey="auth.hasAccount">
<MwLink to="/login">.</MwLink>
</Trans>
</p>
</LargeCard>
);
}