feat(frontend): working email login

This commit is contained in:
sam 2024-09-10 21:24:40 +02:00
parent 498d79de4e
commit be34c4c77e
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
8 changed files with 85 additions and 13 deletions

View file

@ -81,11 +81,11 @@ public class AuthService(IClock clock, DatabaseContext db, ISnowflakeGenerator s
var user = await db.Users.FirstOrDefaultAsync(u =>
u.AuthMethods.Any(a => a.AuthType == AuthType.Email && a.RemoteId == email), ct);
if (user == null)
throw new ApiError.NotFound("No user with that email address found, or password is incorrect");
throw new ApiError.NotFound("No user with that email address found, or password is incorrect", ErrorCode.UserNotFound);
var pwResult = await Task.Run(() => _passwordHasher.VerifyHashedPassword(user, user.Password!, password), ct);
if (pwResult == PasswordVerificationResult.Failed)
throw new ApiError.NotFound("No user with that email address found, or password is incorrect");
if (pwResult == PasswordVerificationResult.Failed) // TODO: this seems to fail on some valid passwords?
throw new ApiError.NotFound("No user with that email address found, or password is incorrect", ErrorCode.UserNotFound);
if (pwResult == PasswordVerificationResult.SuccessRehashNeeded)
{
user.Password = await Task.Run(() => _passwordHasher.HashPassword(user, password), ct);

View file

@ -36,7 +36,7 @@ export default function MainNavbar({
</fetcher.Form>
</NavDropdown>
) : (
<Nav.Link to="/auth/login" as={Link}>
<Nav.Link to="/auth/log-in" as={Link}>
{t("navbar.log-in")}
</Nav.Link>
);

View file

@ -0,0 +1,7 @@
import { User } from "~/lib/api/user";
export type AuthResponse = {
user: User;
token: string;
expires_at: string;
};

View file

@ -7,8 +7,7 @@ import {
ScrollRestoration,
useLoaderData,
} from "@remix-run/react";
import { LoaderFunction } from "@remix-run/node";
import SSRProvider from "react-bootstrap/SSRProvider";
import { LoaderFunctionArgs } from "@remix-run/node";
import { useChangeLanguage } from "remix-i18next/react";
import { useTranslation } from "react-i18next";
@ -22,7 +21,7 @@ import "./app.scss";
import getLocalSettings from "./lib/settings.server";
import { LANGUAGE } from "~/env.server";
export const loader: LoaderFunction = async ({ request }) => {
export const loader = async ({ request }: LoaderFunctionArgs) => {
const meta = await serverRequest<Meta>("GET", "/meta");
const token = getCookie(request, "pronounscc-token");
@ -66,7 +65,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
<Links />
</head>
<body>
<SSRProvider>{children}</SSRProvider>
{children}
<ScrollRestoration />
<Scripts />
</body>

View file

@ -1,4 +1,4 @@
import { json, LoaderFunction, MetaFunction } from "@remix-run/node";
import { json, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
import { redirect, useLoaderData } from "@remix-run/react";
import { User } from "~/lib/api/user";
import serverRequest from "~/lib/request.server";
@ -9,7 +9,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
return [{ title: `@${user.username} - pronouns.cc` }];
};
export const loader: LoaderFunction = async ({ params }) => {
export const loader = async ({ params }: LoaderFunctionArgs) => {
let username = params.username!;
if (!username.startsWith("@")) throw redirect(`/@${username}`);
username = username.substring("@".length);

View file

@ -0,0 +1,62 @@
import { MetaFunction, json, LoaderFunctionArgs, ActionFunction, redirect } from "@remix-run/node";
import { Form as RemixForm } from "@remix-run/react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import { useTranslation } from "react-i18next";
import i18n from "~/i18next.server";
import serverRequest, { writeCookie } from "~/lib/request.server";
import { AuthResponse } from "~/lib/api/auth";
export const meta: MetaFunction<typeof loader> = ({ data }) => {
return [{ title: `${data?.meta.title || "Log in"} - pronouns.cc` }];
};
export const loader = async ({ request }: LoaderFunctionArgs) => {
const t = await i18n.getFixedT(request);
return json({
meta: { title: t("log-in.title") },
});
};
export const action: ActionFunction = async ({ request }) => {
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 },
});
return redirect("/", {
status: 303,
headers: {
"Set-Cookie": writeCookie("pronounscc-token", resp.token),
},
});
};
export default function LoginPage() {
const { t } = useTranslation();
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>
<Button variant="primary" type="submit">
{t("log-in.log-in-button")}
</Button>
</Form>
</RemixForm>
);
}

View file

@ -1,5 +1,3 @@
import i18n from "./app/i18n.js";
export default {
locales: i18n.supportedLngs,
locales: ["en"],
};

View file

@ -8,5 +8,11 @@
"theme-auto": "Automatic",
"theme-dark": "Dark",
"theme-light": "Light"
},
"log-in": {
"title": "Log in",
"email": "Email address",
"password": "Password",
"log-in-button": "Log in"
}
}