sam/Foxnouns.NET
sam/Foxnouns.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

improve login page

Browse source
This commit is contained in:
sam 2024-09-11 19:13:54 +02:00
parent 4ac0001795
commit 116d0577a7
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
6 changed files with 238 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

70
Foxnouns.Frontend/app/root.tsx
View file

@ -6,6 +6,8 @@ import {
Scripts,
ScrollRestoration,
useLoaderData,
useRouteError,
useRouteLoaderData,
} from "@remix-run/react";
import { LoaderFunctionArgs } from "@remix-run/node";
import { useChangeLanguage } from "remix-i18next/react";
@ -20,6 +22,7 @@ import { ApiError, ErrorCode } from "./lib/api/error";
import "./app.scss";
import getLocalSettings from "./lib/settings.server";
import { LANGUAGE } from "~/env.server";
import { errorCodeDesc } from "./components/ErrorAlert";
export const loader = async ({ request }: LoaderFunctionArgs) => {
const meta = await serverRequest<Meta>("GET", "/meta");
@ -51,13 +54,29 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
};
export function Layout({ children }: { children: React.ReactNode }) {
const { settings, locale } = useLoaderData<typeof loader>();
const { locale, settings } = useRouteLoaderData<typeof loader>("root") || {
meta: {
users: {
total: 0,
active_month: 0,
active_week: 0,
active_day: 0,
},
members: 0,
version: "",
hash: "",
},
};
const { i18n } = useTranslation();
i18n.language = locale;
useChangeLanguage(locale);
i18n.language = locale || "en";
useChangeLanguage(locale || "en");
return (
<html lang={locale} data-bs-theme={settings.dark_mode ? "dark" : "light"} dir={i18n.dir()}>
<html
lang={locale || "en"}
data-bs-theme={settings?.dark_mode ? "dark" : "light"}
dir={i18n.dir()}
>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@ -73,6 +92,49 @@ export function Layout({ children }: { children: React.ReactNode }) {
);
}
export function ErrorBoundary() {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const error: any = useRouteError();
const { t } = useTranslation();
console.log(error);
const errorElem =
"code" in error && "message" in error ? (
<ApiErrorElem error={error as ApiError} />
) : (
<>{t("error.errors.generic-error")}</>
);
return (
<html lang="en">
<head>
<title>
<>{t("error.title")} - pronouns.cc</>
</title>
<MetaComponent />
<Links />
</head>
<body>
{errorElem}
<Scripts />
</body>
</html>
);
}
function ApiErrorElem({ error }: { error: ApiError }) {
const { t } = useTranslation();
const errorDesc = errorCodeDesc(t, error.code);
return (
<>
<h4>{t("error.heading")}</h4>
<p>{errorDesc}</p>
</>
);
}
export default function App() {
const { meta, meUser, settings } = useLoaderData<typeof loader>();