feat: implement sign up page

Author: sunaurus

src/app/(utils)/getFormBoolean.ts

@@ -0,0 +1,4 @@
+export const getFormBoolean = (
+  formData: FormData,
+  fieldName: string,
+): boolean => formData.get(fieldName)?.toString() === "on";

src/app/Navbar.tsx

@@ -77,9 +77,14 @@ export const Navbar = async () => {
               />
             </StyledLink>
           ) : (
-            <StyledLink className={"text-neutral-200"} href={"/login"}>
-              {"Log in"}
-            </StyledLink>
+            <>
+              <StyledLink className={"mx-2 text-neutral-200"} href={"/login"}>
+                {"Log in"}
+              </StyledLink>
+              <StyledLink className={"text-neutral-200"} href={"/signup"}>
+                {"Sign up"}
+              </StyledLink>
+            </>
           )}
         </span>
       </nav>

src/app/apiClient.ts

@@ -16,9 +16,11 @@ const fetchWithNextConfig = async (
 ): Promise<Response> => {
   const additionalHeaders: Record<string, string> = {};
   const jwt = await getJwtFromAuthCookie();
+  let isAuthenticatedUser = false;
 
   if (jwt) {
     additionalHeaders["authorization"] = `Bearer ${jwt}`;
+    isAuthenticatedUser = true;
   }
 
   const incomingHeaders = headers();
@@ -33,15 +35,27 @@ const fetchWithNextConfig = async (
     additionalHeaders["x-real-ip"] = realIp;
   }
 
+  // Cache API responses for 15 seconds by default
+  let revalidate = 15;
+
+  // Don't cache responses for authenticated users
+  if (isAuthenticatedUser) {
+    revalidate = 0;
+  }
+
+  // Never cache captchas
+  if (input.toString().includes("/api/v3/user/get_captcha")) {
+    revalidate = 0;
+  }
+
   const res = await fetch(input, {
     ...init,
     headers: {
       ...init?.headers,
       ...additionalHeaders,
     },
     next: {
-      // Cache API responses for 15 seconds for logged out users
-      revalidate: jwt !== null ? 0 : 15,
+      revalidate,
     },
   });
 

src/app/create_post/PostEditor.tsx

@@ -76,7 +76,7 @@ export const PostEditor = (props: {
         />
       </div>
       <input
-        autoComplete={"false"}
+        autoComplete={"off"}
         className={"hidden"}
         id={"honey"}
         name={"honey"}

src/app/create_private_message/[userid]/PrivateMessageEditor.tsx

@@ -38,7 +38,7 @@ export const PrivateMessageEditor = (props: {
         />
       </div>
       <input
-        autoComplete={"false"}
+        autoComplete={"off"}
         className={"hidden"}
         id={"honey"}
         name={"honey"}

src/app/error.tsx

@@ -10,7 +10,7 @@ export const Error = ({
   return (
     <main className={"flex h-full flex-col items-center justify-center"}>
       <h2 className={"mt-20 text-center text-2xl"}>
-        {"Something went wrong!"}
+        {error.message ? `Error: ${error.message}` : "Something went wrong!"}
       </h2>
       <div>
         {
@@ -31,8 +31,8 @@ export const Error = ({
         </>
       )}
       <button
-        className={`bg-primary-500 hover:bg-primary-400 mt-4 rounded-md px-4 py-2 text-sm text-white
-          transition-colors`}
+        className={`mt-4 rounded-md bg-primary-500 px-4 py-2 text-sm text-white transition-colors
+          hover:bg-primary-400`}
         onClick={() => reset()}
       >
         {"Try again"}

src/app/login/authActions.ts

@@ -29,7 +29,7 @@ export const loginAction = async (
     throw new Error("Authentication failed");
   }
 
-  setAuthCookie(loginResponse.jwt);
+  await setAuthCookie(loginResponse.jwt);
 
   redirect(redirectUrl ?? "/");
 };
@@ -60,7 +60,7 @@ export const isLoggedIn = async (): Promise<boolean> => {
 
 const oneMonthMillis = 30 * 24 * 60 * 60 * 1000;
 
-const setAuthCookie = (token: string) => {
+export const setAuthCookie = async (token: string) => {
   cookies().set({
     name: AUTH_COOKIE_NAME,
     value: token,

src/app/login/page.tsx

@@ -10,7 +10,7 @@ const LoginPage = async (props: {
   return (
     <div
       className={
-        "flex min-h-full flex-1 flex-col items-center justify-center px-4 py-12 lg:px-8"
+        "mt-8 flex flex-1 flex-col items-center justify-center px-4 lg:px-8"
       }
     >
       {siteView.site.banner && (
@@ -35,10 +35,7 @@ const LoginPage = async (props: {
 
         <p className={"mt-10 text-center text-sm"}>
           {"No account?"}{" "}
-          <StyledLink
-            className={"hover:text-primary-400 font-semibold leading-6"}
-            href={"/signup"}
-          >
+          <StyledLink className={"font-semibold leading-6"} href={"/signup"}>
             {"Sign up here"}
           </StyledLink>
         </p>

src/app/login_reset/sent/page.tsx

@@ -1,15 +1,12 @@
-import { Input } from "@/app/(ui)/form/Input";
-import { SubmitButton } from "@/app/(ui)/button/SubmitButton";
-
-const ForgotPasswordPage = () => {
+const ResetLinkSentPage = () => {
   return (
     <div className={"m-2 lg:mx-4"}>
-      <h1 className={"text-xl font-bold"}>{"Forgot password"}</h1>
-      <div className={"mt-10 max-w-[600px] text-neutral-300"}>
+      <h1 className={"mb-2 text-xl font-bold"}>{"Forgot password"}</h1>
+      <div className={"max-w-[600px] text-neutral-300"}>
         {"A password reset link has been sent to your e-mail."}
       </div>
     </div>
   );
 };
 
-export default ForgotPasswordPage;
+export default ResetLinkSentPage;

src/app/settings/loggedInUserActions.ts

@@ -9,6 +9,7 @@ import {
   SortType,
 } from "lemmy-js-client";
 import { revalidatePath } from "next/cache";
+import { getFormBoolean } from "@/app/(utils)/getFormBoolean";
 
 export type UnreadCounts = {
   inbox: GetUnreadCountResponse;
@@ -47,20 +48,18 @@ export const updateSettingsAction = async (formData: FormData) => {
       | ListingType
       | undefined,
     default_sort_type: formData.get("sort")?.toString() as SortType | undefined,
-    show_nsfw: getFormBoolean(formData.get("nsfw_show")),
-    blur_nsfw: getFormBoolean(formData.get("nsfw_blur")),
-    auto_expand: getFormBoolean(formData.get("auto_expand")),
-    show_scores: getFormBoolean(formData.get("show_scores")),
-    bot_account: getFormBoolean(formData.get("is_bot")),
-    show_bot_accounts: getFormBoolean(formData.get("show_bots")),
-    show_read_posts: getFormBoolean(formData.get("show_read_posts")),
+    show_nsfw: getFormBoolean(formData, "nsfw_show"),
+    blur_nsfw: getFormBoolean(formData, "nsfw_blur"),
+    auto_expand: getFormBoolean(formData, "auto_expand"),
+    show_scores: getFormBoolean(formData, "show_scores"),
+    bot_account: getFormBoolean(formData, "is_bot"),
+    show_bot_accounts: getFormBoolean(formData, "show_bots"),
+    show_read_posts: getFormBoolean(formData, "show_read_posts"),
     send_notifications_to_email: getFormBoolean(
-      formData.get("notification_emails"),
+      formData,
+      "notification_emails",
     ),
   });
   revalidatePath("/settings");
   revalidatePath("/");
 };
-
-const getFormBoolean = (value: FormDataEntryValue | null): boolean =>
-  value?.toString() === "on";