feat: add account settings

.npmrc

@@ -0,0 +1 @@
+npm config set legacy-peer-deps true

src/actions/index.ts

@@ -1,7 +1,11 @@
 import { login } from "./login";
 import { signup } from "./signup";
+import { settings } from "./settings";
+import { logout } from "./logout";
 
 export const server = {
   login,
   signup,
+  settings,
+  logout,
 };

src/actions/logout.ts

@@ -0,0 +1,14 @@
+import { ActionError, defineAction } from "astro:actions";
+import { lucia } from "@lib/auth/index";
+
+export const logout = defineAction({
+  accept: "form",
+  handler: async (_, { locals: {user, session}}) => {
+    if (!user || !session) throw new ActionError({
+      code: "UNAUTHORIZED",
+      message: "You must be logged in to log out."
+    })
+
+    await lucia.invalidateSession(session.id);
+  },
+});

src/actions/settings.ts

@@ -0,0 +1,33 @@
+import { ActionError, defineAction } from "astro:actions";
+import { z } from "astro:schema";
+import { emptyString, slug } from "@lib/schema";
+import { db, users } from "@lib/db";
+import { hashOptions } from "@lib/auth/index";
+import { hash } from "@node-rs/argon2";
+import { eq } from "drizzle-orm";
+
+export const settings = defineAction({
+  accept: "form",
+  input: z.object({
+    name: emptyString().nullable().or(z.string()),
+    slug: emptyString().nullable().or(slug()),
+    password: emptyString().nullable().or(z.string()),
+  }),
+  handler: async ({name, slug, password}, {locals: {user}}) => {
+    if (!user)
+      throw new ActionError({
+        code: "UNAUTHORIZED",
+        message: "You need to be logged in to edit your preferences."
+      })
+
+    if (name == user.name) name = null;
+    if (slug == user.slug) slug = null;
+    if (!(name || slug || password)) return;
+
+    await db.update(users).set({
+      name: name ?? undefined,
+      slug: slug ?? undefined,
+      password: password ? await hash(password, hashOptions) : undefined,
+    }).where(eq(users.id, user.id))
+  },
+});

src/actions/signup.ts

@@ -1,11 +1,10 @@
-import { ActionError, defineAction } from "astro:actions";
+import { defineAction } from "astro:actions";
 import { z } from "astro:schema";
 import { slug } from "@lib/schema";
 import { db, users } from "@lib/db";
 import { lucia, hashOptions } from "@lib/auth/index";
 import { hash } from "@node-rs/argon2";
 import { generateIdFromEntropySize } from "lucia";
-import { eq } from "drizzle-orm";
 
 export const signup = defineAction({
   accept: "form",
@@ -15,17 +14,6 @@ export const signup = defineAction({
     password: z.string(),
   }),
   handler: async ({name, slug, password}, {cookies}) => {
-    const [existingUser] = await db
-      .select()
-      .from(users)
-      .where(eq(users.slug, slug));
-
-    if (existingUser)
-      throw new ActionError({
-        code: "BAD_REQUEST",
-        message: "The provided slug already exists.",
-      });
-
     const id = generateIdFromEntropySize(10);
     await db.insert(users).values({
       id,

src/comps/forms/Button.astro

@@ -11,6 +11,7 @@ type Props = astroHTML.JSX.ButtonHTMLAttributes;
     background: #eee;
     border-radius: 0.5em;
     text-align: center;
+    transition: background 0.2s;
   }
   button:hover {
     cursor: pointer;

src/comps/forms/Input.astro

@@ -5,13 +5,7 @@ interface Props extends astroHTML.JSX.InputHTMLAttributes {
   id?: string;
 }
 
-const {
-  name,
-  id = `${name}-input`,
-  label,
-  placeholder = "Click to type...",
-  type,
-} = Astro.props;
+const { name, id = `${name}-input`, label, placeholder, type } = Astro.props;
 ---
 
 <div class="input-field">

src/lib/schema/index.ts

@@ -2,6 +2,8 @@ import { z } from "astro:schema";
 import slugify from "@sindresorhus/slugify";
 import zxcvbn from "zxcvbn";
 
+export const emptyString = () => z.literal("").transform(() => null);
+
 export const slug = () =>
   z.preprocess(
     (val) => slugify(z.string().parse(val)),

src/pages/account/index.astro

@@ -1,8 +1,5 @@
 ---
-import Layout from "@layouts/Layout.astro";
-
 const { user } = Astro.locals;
-if (!user) return Astro.redirect("/account/signup");
+if (user) return Astro.redirect("/account/settings");
+else return Astro.redirect("/account/signup");
 ---
-
-<Layout title="Account">Welcome, {user.name}!</Layout>

src/pages/account/settings.astro

@@ -0,0 +1,40 @@
+---
+import Layout from "@layouts/Layout.astro";
+import Form from "@comps/forms/Form.astro";
+import Input from "@comps/forms/Input.astro";
+import Button from "@comps/forms/Button.astro";
+import { actions } from "astro:actions";
+
+const { user } = Astro.locals;
+if (!user) return Astro.redirect("/account/signup");
+---
+
+<Layout title="Settings">
+  <Form method="POST" action={"/account/settings" + actions.settings}>
+    <Input name="name" label="Name" value={user.name} />
+    <Input name="slug" label="Handle" value={user.slug} />
+    <Input type="password" name="password" label="Password" />
+    <Button>Update</Button>
+  </Form>
+  <h2>Account Management</h2>
+  <Form>
+    <Button formmethod="POST" formaction={"/account/signup" + actions.logout}
+      >Log out</Button
+    >
+  </Form>
+</Layout>
+
+<script>
+  import { slug } from "@lib/schema";
+
+  const nameInput = document.getElementById("name-input") as HTMLInputElement;
+  const slugInput = document.getElementById("slug-input") as HTMLInputElement;
+
+  function setSlug(this: HTMLInputElement) {
+    const { success, data } = slug().safeParse(this.value);
+    if (success) slugInput.value = data;
+  }
+
+  nameInput.addEventListener("input", setSlug);
+  slugInput.addEventListener("input", setSlug);
+</script>