Add logout button if failing to load profile from original backend url

This commit is contained in:
mrjvs 2023-12-13 00:56:15 +01:00
parent c48b82148a
commit a76b9ed39c
2 changed files with 25 additions and 3 deletions

View File

@ -260,7 +260,8 @@
"loadingUserError": { "loadingUserError": {
"text": "Failed to load your profile", "text": "Failed to load your profile",
"textWithReset": "Failed to load your profile from your custom server, want to reset back to the default server?", "textWithReset": "Failed to load your profile from your custom server, want to reset back to the default server?",
"reset": "Reset custom server" "reset": "Reset custom server",
"logout": "Logout"
}, },
"migration": { "migration": {
"failed": "Failed to migrate your data.", "failed": "Failed to migrate your data.",

View File

@ -15,6 +15,7 @@ import { useAsync } from "react-use";
import { Button } from "@/components/buttons/Button"; import { Button } from "@/components/buttons/Button";
import { Icon, Icons } from "@/components/Icon"; import { Icon, Icons } from "@/components/Icon";
import { Loading } from "@/components/layout/Loading"; import { Loading } from "@/components/layout/Loading";
import { useAuth } from "@/hooks/auth/useAuth";
import { useAuthRestore } from "@/hooks/auth/useAuthRestore"; import { useAuthRestore } from "@/hooks/auth/useAuthRestore";
import { useBackendUrl } from "@/hooks/auth/useBackendUrl"; import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
import { ErrorBoundary } from "@/pages/errors/ErrorBoundary"; import { ErrorBoundary } from "@/pages/errors/ErrorBoundary";
@ -57,14 +58,22 @@ function LoadingScreen(props: { type: "user" | "lazy" }) {
function ErrorScreen(props: { function ErrorScreen(props: {
children: ReactNode; children: ReactNode;
showResetButton?: boolean; showResetButton?: boolean;
showLogoutButton?: boolean;
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { logout } = useAuth();
const setBackendUrl = useAuthStore((s) => s.setBackendUrl); const setBackendUrl = useAuthStore((s) => s.setBackendUrl);
const resetBackend = useCallback(() => { const resetBackend = useCallback(() => {
setBackendUrl(null); setBackendUrl(null);
// eslint-disable-next-line no-restricted-globals // eslint-disable-next-line no-restricted-globals
location.reload(); location.reload();
}, [setBackendUrl]); }, [setBackendUrl]);
const logoutFromBackend = useCallback(() => {
logout().then(() => {
// eslint-disable-next-line no-restricted-globals
location.reload();
});
}, [logout]);
return ( return (
<LargeTextPart <LargeTextPart
@ -80,6 +89,13 @@ function ErrorScreen(props: {
</Button> </Button>
</div> </div>
) : null} ) : null}
{props.showLogoutButton ? (
<div className="mt-6">
<Button theme="secondary" onClick={logoutFromBackend}>
{t("screens.loadingUserError.logout")}
</Button>
</div>
) : null}
</LargeTextPart> </LargeTextPart>
); );
} }
@ -90,12 +106,17 @@ function AuthWrapper() {
const userBackendUrl = useBackendUrl(); const userBackendUrl = useBackendUrl();
const { t } = useTranslation(); const { t } = useTranslation();
const isCustomUrl = backendUrl !== userBackendUrl;
if (status.loading) return <LoadingScreen type="user" />; if (status.loading) return <LoadingScreen type="user" />;
if (status.error) if (status.error)
return ( return (
<ErrorScreen showResetButton={backendUrl !== userBackendUrl}> <ErrorScreen
showResetButton={isCustomUrl}
showLogoutButton={!isCustomUrl}
>
{t( {t(
backendUrl !== userBackendUrl isCustomUrl
? "screens.loadingUserError.textWithReset" ? "screens.loadingUserError.textWithReset"
: "screens.loadingUserError.text" : "screens.loadingUserError.text"
)} )}