improve login page
This commit is contained in:
parent
4ac0001795
commit
116d0577a7
GPG key ID:
B4EF20DDE721CAA1
6 changed files with 238 additions and 34 deletions
38
Foxnouns.Frontend/app/components/ErrorAlert.tsx
Normal file
38
Foxnouns.Frontend/app/components/ErrorAlert.tsx
Normal 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");
|
||||
};
|
||||
|
|
@ -5,3 +5,9 @@ export type AuthResponse = {
|
|||
token: string;
|
||||
expires_at: string;
|
||||
};
|
||||
|
||||
export type AuthUrls = {
|
||||
discord?: string;
|
||||
google?: string;
|
||||
tumblr?: string;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -39,6 +39,8 @@ export default async function serverRequest<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 {
|
||||
const header = req.headers.get("Cookie");
|
||||
if (!header) return undefined;
|
||||
|
|
|
|||
|
|
@ -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>();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,23 @@
|
|||
import { MetaFunction, json, LoaderFunctionArgs, ActionFunction, redirect } from "@remix-run/node";
|
||||
import { Form as RemixForm } from "@remix-run/react";
|
||||
import {
|
||||
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 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 i18n from "~/i18next.server";
|
||||
import serverRequest, { writeCookie } from "~/lib/request.server";
|
||||
import { AuthResponse } from "~/lib/api/auth";
|
||||
import serverRequest, { getToken, writeCookie } from "~/lib/request.server";
|
||||
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 }) => {
|
||||
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) => {
|
||||
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({
|
||||
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 email = body.get("email") as string | null;
|
||||
const password = body.get("password") as string | null;
|
||||
|
||||
console.log(email, password);
|
||||
|
||||
const resp = await serverRequest<AuthResponse>("POST", "/auth/email/login", {
|
||||
body: { email, password },
|
||||
});
|
||||
try {
|
||||
const resp = await serverRequest<AuthResponse>("POST", "/auth/email/login", {
|
||||
body: { email, password },
|
||||
});
|
||||
|
||||
return redirect("/", {
|
||||
status: 303,
|
||||
headers: {
|
||||
"Set-Cookie": writeCookie("pronounscc-token", resp.token),
|
||||
},
|
||||
});
|
||||
return redirect("/", {
|
||||
status: 303,
|
||||
headers: {
|
||||
"Set-Cookie": writeCookie("pronounscc-token", resp.token),
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
return json({ error: e as ApiError });
|
||||
}
|
||||
};
|
||||
|
||||
export default function LoginPage() {
|
||||
const { t } = useTranslation();
|
||||
const { urls } = useLoaderData<typeof loader>();
|
||||
const actionData = useActionData<typeof action>();
|
||||
|
||||
return (
|
||||
<RemixForm action="/auth/log-in" method="POST">
|
||||
<Form as="div">
|
||||
<Form.Group className="mb-3" controlId="email">
|
||||
<Form.Label>{t("log-in.email")}</Form.Label>
|
||||
<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>
|
||||
<Container>
|
||||
<Row>
|
||||
<Col md className="mb-4">
|
||||
<h2>{t("log-in.form-title")}</h2>
|
||||
{actionData?.error && <LoginError error={actionData.error} />}
|
||||
<RemixForm action="/auth/log-in" method="POST">
|
||||
<Form as="div">
|
||||
<Form.Group className="mb-3" controlId="email">
|
||||
<Form.Label>{t("log-in.email")}</Form.Label>
|
||||
<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">
|
||||
{t("log-in.log-in-button")}
|
||||
</Button>
|
||||
</Form>
|
||||
</RemixForm>
|
||||
<ButtonGroup>
|
||||
<Button variant="primary" type="submit">
|
||||
{t("log-in.log-in-button")}
|
||||
</Button>
|
||||
<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")}</>;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue