feat(frontend): start welcome page

Foxnouns.Frontend/app/routes/auth.callback.discord/route.tsx

@@ -1,4 +1,10 @@
-import { ActionFunctionArgs, json, redirect, LoaderFunctionArgs } from "@remix-run/node";
+import {
+	ActionFunctionArgs,
+	json,
+	redirect,
+	LoaderFunctionArgs,
+	MetaFunction,
+} from "@remix-run/node";
 import { type ApiError, ErrorCode, firstErrorFor } from "~/lib/api/error";
 import serverRequest, { writeCookie } from "~/lib/request.server";
 import { AuthResponse, CallbackResponse } from "~/lib/api/auth";
@@ -12,12 +18,18 @@ import {
 import { Trans, useTranslation } from "react-i18next";
 import { Form, Button, Alert } from "react-bootstrap";
 import ErrorAlert from "~/components/ErrorAlert";
+import i18n from "~/i18next.server";
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+	return [{ title: `${data?.meta.title || "Log in"} - pronouns.cc` }];
+};
 
 export const shouldRevalidate: ShouldRevalidateFunction = ({ actionResult }) => {
 	return !actionResult;
 };
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
+	const t = await i18n.getFixedT(request);
 	const url = new URL(request.url);
 
 	const code = url.searchParams.get("code");
@@ -32,7 +44,13 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 
 	if (resp.has_account) {
 		return json(
-			{ hasAccount: true, user: resp.user!, ticket: null, remoteUser: null },
+			{
+				meta: { title: t("log-in.callback.title.discord-success") },
+				hasAccount: true,
+				user: resp.user!,
+				ticket: null,
+				remoteUser: null,
+			},
 			{
 				headers: {
 					"Set-Cookie": writeCookie("pronounscc-token", resp.token!),
@@ -42,6 +60,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 	}
 
 	return json({
+		meta: { title: t("log-in.callback.title.discord-register") },
 		hasAccount: false,
 		user: null,
 		ticket: resp.ticket!,

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

@@ -5,7 +5,12 @@ import {
 	redirect,
 	ActionFunctionArgs,
 } from "@remix-run/node";
-import { Form as RemixForm, useActionData, useLoaderData } from "@remix-run/react";
+import {
+	Form as RemixForm,
+	ShouldRevalidateFunction,
+	useActionData,
+	useLoaderData,
+} from "@remix-run/react";
 import { Form, Button, ButtonGroup, ListGroup, Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import i18n from "~/i18next.server";
@@ -19,6 +24,10 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	return [{ title: `${data?.meta.title || "Log in"} - pronouns.cc` }];
 };
 
+export const shouldRevalidate: ShouldRevalidateFunction = ({ actionResult }) => {
+	return !actionResult;
+};
+
 export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const t = await i18n.getFixedT(request);
 	const token = getToken(request);

Foxnouns.Frontend/app/routes/auth.welcome/route.tsx

@@ -0,0 +1,52 @@
+import { LoaderFunctionArgs, redirect, json, MetaFunction } from "@remix-run/node";
+import i18n from "~/i18next.server";
+import serverRequest, { getToken } from "~/lib/request.server";
+import { User } from "~/lib/api/user";
+import { useTranslation } from "react-i18next";
+import { Link, useLoaderData } from "@remix-run/react";
+import { Button } from "react-bootstrap";
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+	return [{ title: `${data?.meta.title || "Welcome"} - pronouns.cc` }];
+};
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+	const t = await i18n.getFixedT(request);
+	const token = getToken(request);
+	let user: User;
+
+	if (token) {
+		try {
+			user = await serverRequest<User>("GET", "/users/@me", { token });
+		} catch (e) {
+			return redirect("/auth/log-in");
+		}
+	} else {
+		return redirect("/auth/log-in");
+	}
+
+	return json({ meta: { title: t("welcome.title") }, user });
+};
+
+export default function WelcomePage() {
+	const { t } = useTranslation();
+	const { user } = useLoaderData<typeof loader>();
+
+	return (
+		<div>
+			<h1>{t("welcome.header")}</h1>
+			<p>{t("welcome.blurb")}</p>
+			<h2>{t("welcome.customize-profile")}</h2>
+			<p>{t("welcome.customize-profile-blurb")}</p>
+			<h2>{t("welcome.create-members")}</h2>
+			<p>{t("welcome.create-members-blurb")}</p>
+			<h2>{t("welcome.custom-preferences")}</h2>
+			<p>{t("welcome.custom-preferences-blurb")}</p>
+			<Link to={`/@${user.username}`}>
+				<Button as="span" variant="primary">
+					{t("welcome.profile-button")}
+				</Button>
+			</Link>
+		</div>
+	);
+}

Foxnouns.Frontend/public/locales/en.json

@@ -32,6 +32,10 @@
   },
   "log-in": {
     "callback": {
+      "title": {
+        "discord-success": "Log in with Discord",
+        "discord-register": "Register with Discord"
+      },
       "success": "Successfully logged in!",
       "success-link": "Welcome back, <1>@{{username}}</1>!",
       "redirect-hint": "If you're not redirected to your profile in a few seconds, press the link above.",
@@ -58,5 +62,13 @@
       "tumblr": "Log in with Tumblr"
     },
     "invalid-credentials": "Invalid email address or password, please check your spelling and try again."
+  },
+  "welcome": {
+    "title": "Welcome",
+    "header": "Welcome to pronouns.cc!",
+    "customize-profile": "Customize your profile",
+    "create-members": "Create members",
+    "custom-preferences": "Customize your preferences",
+    "profile-button": "Go to your profile"
   }
 }

Foxnouns.Frontend/vite.config.ts

@@ -20,5 +20,9 @@ export default defineConfig({
 				changeOrigin: true,
 			},
 		},
+		hmr: {
+			host: "localhost",
+			protocol: "ws",
+		},
 	},
 });