sam/Foxnouns.NET
sam/Foxnouns.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(frontend): working email login

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Foxnouns.Backend/Services/AuthService.cs
View file

@ -81,11 +81,11 @@ public class AuthService(IClock clock, DatabaseContext db, ISnowflakeGenerator s
var user = await db.Users.FirstOrDefaultAsync(u => var user = await db.Users.FirstOrDefaultAsync(u =>
u.AuthMethods.Any(a => a.AuthType == AuthType.Email && a.RemoteId == email), ct); u.AuthMethods.Any(a => a.AuthType == AuthType.Email && a.RemoteId == email), ct);
if (user == null) 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); var pwResult = await Task.Run(() => _passwordHasher.VerifyHashedPassword(user, user.Password!, password), ct);
if (pwResult == PasswordVerificationResult.Failed) 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"); throw new ApiError.NotFound("No user with that email address found, or password is incorrect", ErrorCode.UserNotFound);
if (pwResult == PasswordVerificationResult.SuccessRehashNeeded) if (pwResult == PasswordVerificationResult.SuccessRehashNeeded)
{ {
user.Password = await Task.Run(() => _passwordHasher.HashPassword(user, password), ct); user.Password = await Task.Run(() => _passwordHasher.HashPassword(user, password), ct);

2
Foxnouns.Frontend/app/components/nav/Navbar.tsx
View file

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

7
Foxnouns.Frontend/app/lib/api/auth.ts Normal file
View file

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

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

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

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

62
Foxnouns.Frontend/app/routes/auth.log-in/route.tsx Normal file
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>
);
}

4
Foxnouns.Frontend/i18next-parser.config.js
View file

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

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

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