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

a

Browse source
This commit is contained in:
sam 2024-09-11 19:13:54 +02:00
parent 4ac0001795
commit 414e1c6107
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
5 changed files with 191 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
Foxnouns.Frontend/app/components/ErrorAlert.tsx Normal file
View file

@ -0,0 +1,38 @@
import { TFunction } from "i18next";
import Alert from "react-bootstrap/Alert";
import { useTranslation } from "react-i18next";
import { ApiError, ErrorCode } from "~/lib/api/error";
export default function ErrorAlert({ error }: { error: ApiError }) {
const { t } = useTranslation();
return (
<Alert variant="danger">
<Alert.Heading as="h4">{t("error.heading")}</Alert.Heading>
{errorCodeDesc(t, error.code)}
</Alert>
);
}
export const errorCodeDesc = (t: TFunction, code: ErrorCode) => {
switch (code) {
case ErrorCode.AuthenticationError:
return t("error.errors.authentication-error");
case ErrorCode.AuthenticationRequired:
return t("error.errors.authentication-required");
case ErrorCode.BadRequest:
return t("error.errors.bad-request");
case ErrorCode.Forbidden:
return t("error.errors.forbidden");
case ErrorCode.GenericApiError:
return t("error.errors.generic-error");
case ErrorCode.InternalServerError:
return t("error.errors.internal-server-error");
case ErrorCode.MemberNotFound:
return t("error.errors.member-not-found");
case ErrorCode.UserNotFound:
return t("error.errors.user-not-found");
}
return t("error.errors.generic-error");
};

2
Foxnouns.Frontend/app/lib/request.server.ts
View file

@ -39,6 +39,8 @@ export default async function serverRequest<T>(
return (await resp.json()) as T; return (await resp.json()) as T;
} }
export const getToken = (req: Request) => getCookie(req, "pronounscc-token");
export function getCookie(req: Request, cookieName: string): string | undefined { export function getCookie(req: Request, cookieName: string): string | undefined {
const header = req.headers.get("Cookie"); const header = req.headers.get("Cookie");
if (!header) return undefined; if (!header) return undefined;

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

@ -6,10 +6,11 @@ import {
Scripts, Scripts,
ScrollRestoration, ScrollRestoration,
useLoaderData, useLoaderData,
useRouteError,
} from "@remix-run/react"; } from "@remix-run/react";
import { LoaderFunctionArgs } from "@remix-run/node"; import { LoaderFunctionArgs } from "@remix-run/node";
import { useChangeLanguage } from "remix-i18next/react"; import { useChangeLanguage } from "remix-i18next/react";
import { useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import serverRequest, { getCookie, writeCookie } from "./lib/request.server"; import serverRequest, { getCookie, writeCookie } from "./lib/request.server";
import Meta from "./lib/api/meta"; import Meta from "./lib/api/meta";
@ -20,6 +21,7 @@ import { ApiError, ErrorCode } from "./lib/api/error";
import "./app.scss"; import "./app.scss";
import getLocalSettings from "./lib/settings.server"; import getLocalSettings from "./lib/settings.server";
import { LANGUAGE } from "~/env.server"; import { LANGUAGE } from "~/env.server";
import { errorCodeDesc } from "./components/ErrorAlert";
export const loader = async ({ request }: LoaderFunctionArgs) => { export const loader = async ({ request }: LoaderFunctionArgs) => {
const meta = await serverRequest<Meta>("GET", "/meta"); const meta = await serverRequest<Meta>("GET", "/meta");
@ -73,6 +75,47 @@ 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={LANGUAGE}>
<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() { export default function App() {
const { meta, meUser, settings } = useLoaderData<typeof loader>(); const { meta, meUser, settings } = useLoaderData<typeof loader>();

54
Foxnouns.Frontend/app/routes/auth.log-in/route.tsx
View file

@ -1,11 +1,22 @@
import { MetaFunction, json, LoaderFunctionArgs, ActionFunction, redirect } from "@remix-run/node"; import {
import { Form as RemixForm } from "@remix-run/react"; MetaFunction,
json,
LoaderFunctionArgs,
redirect,
ActionFunctionArgs,
} from "@remix-run/node";
import { Form as RemixForm, Link, useActionData } from "@remix-run/react";
import Form from "react-bootstrap/Form"; import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button"; import Button from "react-bootstrap/Button";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import i18n from "~/i18next.server"; import i18n from "~/i18next.server";
import serverRequest, { writeCookie } from "~/lib/request.server"; import serverRequest, { getToken, writeCookie } from "~/lib/request.server";
import { AuthResponse } from "~/lib/api/auth"; import { AuthResponse } from "~/lib/api/auth";
import { ApiError, ErrorCode } from "~/lib/api/error";
import ErrorAlert from "~/components/ErrorAlert";
import { User } from "~/lib/api/user";
export const meta: MetaFunction<typeof loader> = ({ data }) => { export const meta: MetaFunction<typeof loader> = ({ data }) => {
return [{ title: `${data?.meta.title || "Log in"} - pronouns.cc` }]; return [{ title: `${data?.meta.title || "Log in"} - pronouns.cc` }];
@ -13,19 +24,30 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
export const loader = async ({ request }: LoaderFunctionArgs) => { export const loader = async ({ request }: LoaderFunctionArgs) => {
const t = await i18n.getFixedT(request); const t = await i18n.getFixedT(request);
const token = getToken(request);
if (token) {
try {
await serverRequest<User>("GET", "/users/@me", { token });
throw redirect("/?err=already-logged-in", 303);
} catch (e) {
// ignore
}
}
return json({ return json({
meta: { title: t("log-in.title") }, meta: { title: t("log-in.title") },
}); });
}; };
export const action: ActionFunction = async ({ request }) => { export const action = async ({ request }: ActionFunctionArgs) => {
const body = await request.formData(); const body = await request.formData();
const email = body.get("email") as string | null; const email = body.get("email") as string | null;
const password = body.get("password") as string | null; const password = body.get("password") as string | null;
console.log(email, password); console.log(email, password);
try {
const resp = await serverRequest<AuthResponse>("POST", "/auth/email/login", { const resp = await serverRequest<AuthResponse>("POST", "/auth/email/login", {
body: { email, password }, body: { email, password },
}); });
@ -36,12 +58,20 @@ export const action: ActionFunction = async ({ request }) => {
"Set-Cookie": writeCookie("pronounscc-token", resp.token), "Set-Cookie": writeCookie("pronounscc-token", resp.token),
}, },
}); });
} catch (e) {
return json({ error: e as ApiError });
}
}; };
export default function LoginPage() { export default function LoginPage() {
const { t } = useTranslation(); const { t } = useTranslation();
const actionData = useActionData<typeof action>();
return ( return (
<Row xs={1} lg="auto">
<Col>
<h2>{t("log-in.form-title")}</h2>
{actionData?.error && <LoginError error={actionData.error} />}
<RemixForm action="/auth/log-in" method="POST"> <RemixForm action="/auth/log-in" method="POST">
<Form as="div"> <Form as="div">
<Form.Group className="mb-3" controlId="email"> <Form.Group className="mb-3" controlId="email">
@ -56,7 +86,23 @@ export default function LoginPage() {
<Button variant="primary" type="submit"> <Button variant="primary" type="submit">
{t("log-in.log-in-button")} {t("log-in.log-in-button")}
</Button> </Button>
<Button as={Link} to="/auth/register">
{t("log-in.register-with-email")}
</Button>
</Form> </Form>
</RemixForm> </RemixForm>
</Col>
<Col>
<h2>{t("log-in.3rd-party-title")}</h2>
</Col>
</Row>
); );
} }
function LoginError({ error }: { error: ApiError }) {
const { t } = useTranslation();
if (error.code !== ErrorCode.UserNotFound) return <ErrorAlert error={error} />;
return <>{t("log-in.invalid-credentials")}</>;
}

19
Foxnouns.Frontend/public/locales/en.json
View file

@ -1,4 +1,17 @@
{ {
"error": {
"heading": "An error occurred",
"errors": {
"authentication-error": "There was an error validating your credentials.",
"authentication-required": "You need to log in.",
"bad-request": "Server rejected your input, please check anything for errors.",
"forbidden": "You are not allowed to perform that action.",
"generic-error": "An unknown error occurred.",
"internal-server-error": "Server experienced an internal error, please try again later.",
"member-not-found": "Member not found, please check your spelling and try again.",
"user-not-found": "User not found, please check your spelling and try again."
}
},
"navbar": { "navbar": {
"view-profile": "View profile", "view-profile": "View profile",
"settings": "Settings", "settings": "Settings",
@ -11,8 +24,12 @@
}, },
"log-in": { "log-in": {
"title": "Log in", "title": "Log in",
"form-title": "",
"email": "Email address", "email": "Email address",
"password": "Password", "password": "Password",
"log-in-button": "Log in" "log-in-button": "Log in",
"register-with-email": "Register with email",
"3rd-party-title": "Log in with another account",
"invalid-credentials": "Invalid email address or password, please check your spelling and try again."
} }
} }