sam/Foxnouns.NET
sam/Foxnouns.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
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");
};

6
Foxnouns.Frontend/app/lib/api/auth.ts
View file

@ -5,3 +5,9 @@ export type AuthResponse = {
token: string; token: string;
expires_at: string; expires_at: string;
}; };
export type AuthUrls = {
discord?: string;
google?: string;
tumblr?: string;
};

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;

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

@ -6,6 +6,8 @@ import {
Scripts, Scripts,
ScrollRestoration, ScrollRestoration,
useLoaderData, useLoaderData,
useRouteError,
useRouteLoaderData,
} 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";
@ -20,6 +22,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");
@ -51,13 +54,29 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
}; };
export function Layout({ children }: { children: React.ReactNode }) { 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(); const { i18n } = useTranslation();
i18n.language = locale; i18n.language = locale || "en";
useChangeLanguage(locale); useChangeLanguage(locale || "en");
return ( 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> <head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <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() { export default function App() {
const { meta, meUser, settings } = useLoaderData<typeof loader>(); const { meta, meUser, settings } = useLoaderData<typeof loader>();

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

@ -1,11 +1,23 @@
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, useActionData, useLoaderData } 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 ButtonGroup from "react-bootstrap/ButtonGroup";
import ListGroup from "react-bootstrap/ListGroup";
import { Container, Row, Col } from "react-bootstrap";
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, AuthUrls } 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 +25,110 @@ 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 });
return redirect("/?err=already-logged-in", 303);
} catch (e) {
// ignore
}
}
const urls = await serverRequest<AuthUrls>("POST", "/auth/urls");
return json({ return json({
meta: { title: t("log-in.title") }, meta: { title: t("log-in.title") },
urls,
}); });
}; };
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 { urls } = useLoaderData<typeof loader>();
const actionData = useActionData<typeof action>();
return ( return (
<RemixForm action="/auth/log-in" method="POST"> <Container>
<Form as="div"> <Row>
<Form.Group className="mb-3" controlId="email"> <Col md className="mb-4">
<Form.Label>{t("log-in.email")}</Form.Label> <h2>{t("log-in.form-title")}</h2>
<Form.Control name="email" type="email" required /> {actionData?.error && <LoginError error={actionData.error} />}
</Form.Group> <RemixForm action="/auth/log-in" method="POST">
<Form.Group className="mb-3" controlId="password"> <Form as="div">
<Form.Label>{t("log-in.password")}</Form.Label> <Form.Group className="mb-3" controlId="email">
<Form.Control name="password" type="password" required /> <Form.Label>{t("log-in.email")}</Form.Label>
</Form.Group> <Form.Control name="email" type="email" required />
</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"> <ButtonGroup>
{t("log-in.log-in-button")} <Button variant="primary" type="submit">
</Button> {t("log-in.log-in-button")}
</Form> </Button>
</RemixForm> <Button as="a" href="/auth/register" variant="secondary">
{t("log-in.register-with-email")}
</Button>
</ButtonGroup>
</Form>
</RemixForm>
</Col>
<Col md>
<h2>{t("log-in.3rd-party.title")}</h2>
<p>{t("log-in.3rd-party.desc")}</p>
<ListGroup>
{urls.discord && (
<ListGroup.Item action href={urls.discord}>
{t("log-in.3rd-party.discord")}
</ListGroup.Item>
)}
{urls.google && (
<ListGroup.Item action href={urls.google}>
{t("log-in.3rd-party.google")}
</ListGroup.Item>
)}
{urls.tumblr && (
<ListGroup.Item action href={urls.tumblr}>
{t("log-in.3rd-party.tumblr")}
</ListGroup.Item>
)}
</ListGroup>
</Col>
</Row>
</Container>
); );
} }
function LoginError({ error }: { error: ApiError }) {
const { t } = useTranslation();
if (error.code !== ErrorCode.UserNotFound) return <ErrorAlert error={error} />;
return <>{t("log-in.invalid-credentials")}</>;
}

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

@ -1,4 +1,18 @@
{ {
"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."
},
"title": "Error"
},
"navbar": { "navbar": {
"view-profile": "View profile", "view-profile": "View profile",
"settings": "Settings", "settings": "Settings",
@ -11,8 +25,18 @@
}, },
"log-in": { "log-in": {
"title": "Log in", "title": "Log in",
"form-title": "Log in with email",
"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 service",
"desc": "If you prefer, you can also log in with one of these services:",
"discord": "Log in with Discord",
"google": "Log in with Google",
"tumblr": "Log in with Tumblr"
},
"invalid-credentials": "Invalid email address or password, please check your spelling and try again."
} }
} }