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>();

102
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,50 +24,85 @@ 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);
const resp = await serverRequest<AuthResponse>("POST", "/auth/email/login", { try {
body: { email, password }, const resp = await serverRequest<AuthResponse>("POST", "/auth/email/login", {
}); body: { email, password },
});
return redirect("/", { return redirect("/", {
status: 303, status: 303,
headers: { headers: {
"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 (
<RemixForm action="/auth/log-in" method="POST"> <Row xs={1} lg="auto">
<Form as="div"> <Col>
<Form.Group className="mb-3" controlId="email"> <h2>{t("log-in.form-title")}</h2>
<Form.Label>{t("log-in.email")}</Form.Label> {actionData?.error && <LoginError error={actionData.error} />}
<Form.Control name="email" type="email" required /> <RemixForm action="/auth/log-in" method="POST">
</Form.Group> <Form as="div">
<Form.Group className="mb-3" controlId="password"> <Form.Group className="mb-3" controlId="email">
<Form.Label>{t("log-in.password")}</Form.Label> <Form.Label>{t("log-in.email")}</Form.Label>
<Form.Control name="password" type="password" required /> <Form.Control name="email" type="email" required />
</Form.Group> </Form.Group>
<Form.Group className="mb-3" controlId="password">
<Form.Label>{t("log-in.password")}</Form.Label>
<Form.Control name="password" type="password" required />
</Form.Group>
<Button variant="primary" type="submit"> <Button variant="primary" type="submit">
{t("log-in.log-in-button")} {t("log-in.log-in-button")}
</Button> </Button>
</Form> <Button as={Link} to="/auth/register">
</RemixForm> {t("log-in.register-with-email")}
</Button>
</Form>
</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")}</>;
}

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

@ -1,18 +1,35 @@
{ {
"navbar": { "error": {
"view-profile": "View profile", "heading": "An error occurred",
"settings": "Settings", "errors": {
"log-out": "Log out", "authentication-error": "There was an error validating your credentials.",
"log-in": "Log in or sign up", "authentication-required": "You need to log in.",
"theme": "Theme", "bad-request": "Server rejected your input, please check anything for errors.",
"theme-auto": "Automatic", "forbidden": "You are not allowed to perform that action.",
"theme-dark": "Dark", "generic-error": "An unknown error occurred.",
"theme-light": "Light" "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.",
"log-in": { "user-not-found": "User not found, please check your spelling and try again."
"title": "Log in", }
"email": "Email address", },
"password": "Password", "navbar": {
"log-in-button": "Log in" "view-profile": "View profile",
} "settings": "Settings",
"log-out": "Log out",
"log-in": "Log in or sign up",
"theme": "Theme",
"theme-auto": "Automatic",
"theme-dark": "Dark",
"theme-light": "Light"
},
"log-in": {
"title": "Log in",
"form-title": "",
"email": "Email address",
"password": "Password",
"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."
}
} }