feat(frontend): working email login
This commit is contained in:
parent
498d79de4e
commit
be34c4c77e
8 changed files with 85 additions and 13 deletions
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
7
Foxnouns.Frontend/app/lib/api/auth.ts
Normal file
7
Foxnouns.Frontend/app/lib/api/auth.ts
Normal file
|
@ -0,0 +1,7 @@
|
|||
import { User } from "~/lib/api/user";
|
||||
|
||||
export type AuthResponse = {
|
||||
user: User;
|
||||
token: string;
|
||||
expires_at: string;
|
||||
};
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
|
62
Foxnouns.Frontend/app/routes/auth.log-in/route.tsx
Normal file
62
Foxnouns.Frontend/app/routes/auth.log-in/route.tsx
Normal 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>
|
||||
);
|
||||
}
|
|
@ -1,5 +1,3 @@
|
|||
import i18n from "./app/i18n.js";
|
||||
|
||||
export default {
|
||||
locales: i18n.supportedLngs,
|
||||
locales: ["en"],
|
||||
};
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue