pulsate-dev · laminne · Oct 8, 2024 · Oct 8, 2024 · Oct 8, 2024 · Oct 8, 2024
diff --git a/app/components/login.module.css b/app/components/login.module.css
@@ -0,0 +1,9 @@
+.loginForm {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  h1 {
+    text-align: center;
+  }
+}
diff --git a/app/lib/login.ts b/app/lib/login.ts
@@ -0,0 +1,36 @@
+export type LoginArgs = {
+  name: string;
+  passphrase: string;
+};
+
+export const login = async ({
+  name,
+  passphrase,
+}: LoginArgs): Promise<
+  | { error: string }
+  | {
+      authorization_token: string;
+    }
+> => {
+  try {
+    const response = await fetch("http://localhost:3000/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ name, passphrase, captcha_token: "" }),
+    });
+
+    if (!response.ok) {
+      console.error(response);
+      if (response.status === 400) {
+        throw new Error("Invalid credentials");
+      }
+      throw new Error("Unknown error");
+    }
+    const { authorization_token } = await response.json();
+    return { authorization_token };
+  } catch (e) {
+    return { error: (e as Error).message };
+  }
+};
diff --git a/app/root.module.css b/app/root.module.css
@@ -0,0 +1,10 @@
+.root {
+  width: 50svw;
+  max-width: 60rem;
+  height: 100vh;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0.5rem;
+  border: solid;
+  border-width: 0 0.5px;
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,4 +1,5 @@
 import { Links, Meta, Outlet, Scripts } from "@remix-run/react";
+import styles from "~/root.module.css";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -9,7 +10,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body>
+      <body className={styles.root}>
         {children}
         <Scripts />
       </body>

diff --git a/app/routes/login.tsx b/app/routes/login.tsx
@@ -0,0 +1,70 @@
+import { ActionFunctionArgs } from "@remix-run/node";
+import { Form, MetaFunction, useActionData } from "@remix-run/react";
+import { useEffect } from "react";
+import styles from "~/components/login.module.css";
+import { login } from "~/lib/login";
+
+export const meta: MetaFunction = () => {
+  return [
+    {
+      title: "Log in | Caramel",
+    },
+    {
+      content: "noindex",
+    },
+  ];
+};
+
+export const action = async ({
+  request,
+}: ActionFunctionArgs): Promise<
+  | { authorization_token: string }
+  | {
+      error: string;
+    }
+> => {
+  const formData = await request.formData();
+  const name = formData.get("name") as string;
+  const passphrase = formData.get("passphrase") as string;
+  return login({ name, passphrase });
+};
+
+export default function Login() {
+  const data = useActionData<typeof action>();
+
+  useEffect(() => {
+    if (!data) return;
+    if ("error" in data) return;
+
+    localStorage.setItem("authToken", data.authorization_token);
+    // FIXME: Should use redirect() ?
+    window.location.href = "/";
+  }, [data]);
+
+  return (
+    <>
+      <h1 className={styles.loginForm}>Welcome back</h1>
+
+      {(() => {
+        if (!data) return null;
+        if ("error" in data) return <p>{data.error}</p>;
+        return <p>Logged in</p>;
+      })()}
+
+      <Form method="post" className={styles.loginForm}>
+        <label htmlFor="name">Account name [required]</label>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          required
+          placeholder="@[email protected]"
+        />
+        <label htmlFor="password">Passphrase [required]</label>
+        <input type="password" id="password" name="passphrase" required />
+
+        <button type="submit">Log in</button>
+      </Form>
+    </>
+  );
+}
diff --git a/app/styles/login.css b/app/styles/login.css
@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}