Release 2025-05-19

2025-05-19 10:23:36 +00:00
parent 2657f936bc
commit 565e9a0ad1
267 changed files with 49417 additions and 0 deletions
--- a/web/src/pages/account/edit.astro
+++ b/web/src/pages/account/edit.astro
@@ -0,0 +1,145 @@
+---
+import { Icon } from 'astro-icon/components'
+import { actions, isInputError } from 'astro:actions'
+
+import Button from '../../components/Button.astro'
+import { karmaUnlocksById } from '../../constants/karmaUnlocks'
+import MiniLayout from '../../layouts/MiniLayout.astro'
+import { makeKarmaUnlockMessage } from '../../lib/karmaUnlocks'
+import { makeLoginUrl } from '../../lib/redirectUrls'
+
+const user = Astro.locals.user
+if (!user) {
+  return Astro.redirect(makeLoginUrl(Astro.url, { message: 'Login to edit your profile' }))
+}
+
+const result = Astro.getActionResult(actions.account.update)
+if (result && !result.error) {
+  return Astro.redirect('/account')
+}
+const inputErrors = isInputError(result?.error) ? result.error.fields : {}
+---
+
+<MiniLayout
+  pageTitle={`Edit Profile - ${user.name}`}
+  description="Edit your user profile"
+  ogImage={{ template: 'generic', title: 'Edit Profile' }}
+  layoutHeader={{
+    icon: 'ri:edit-line',
+    title: 'Edit profile',
+    subtitle: 'Update your account information',
+  }}
+  breadcrumbs={[
+    {
+      name: 'Accounts',
+      url: '/account',
+    },
+    {
+      name: 'Edit profile',
+    },
+  ]}
+>
+  <form method="POST" action={actions.account.update} class="space-y-4" enctype="multipart/form-data">
+    <input transition:persist type="hidden" name="id" value={user.id} />
+
+    <div>
+      <label class="text-day-200 mb-2 block text-sm" for="displayName">Display Name</label>
+      <input
+        transition:persist
+        type="text"
+        id="displayName"
+        name="displayName"
+        value={user.displayName ?? ''}
+        maxlength={100}
+        class="border-day-500/30 bg-night-800 text-day-300 placeholder:text-day-500 focus:border-day-500 focus:ring-day-500 w-full rounded-md border px-3 py-2 disabled:cursor-not-allowed disabled:opacity-60"
+        disabled={!user.karmaUnlocks.displayName}
+      />
+      {
+        inputErrors.displayName && (
+          <p class="mt-1 text-sm text-red-400">{inputErrors.displayName.join(', ')}</p>
+        )
+      }
+      {
+        !user.karmaUnlocks.displayName && (
+          <p class="text-day-400 mt-2 flex items-center gap-2 rounded-md text-sm">
+            <Icon name="ri:information-line" class="size-4" />
+            {makeKarmaUnlockMessage(karmaUnlocksById.displayName)}
+            <a href="/karma" class="hover:text-day-300 underline">
+              Learn about karma
+            </a>
+          </p>
+        )
+      }
+    </div>
+
+    <div>
+      <label class="text-day-200 mb-2 block text-sm" for="link">Website URL</label>
+      <input
+        transition:persist
+        type="url"
+        id="link"
+        name="link"
+        value={user.link ?? ''}
+        placeholder="https://example.com"
+        class="border-day-500/30 bg-night-800 text-day-300 placeholder:text-day-500 focus:border-day-500 focus:ring-day-500 w-full rounded-md border px-3 py-2 disabled:cursor-not-allowed disabled:opacity-60"
+        disabled={!user.karmaUnlocks.websiteLink}
+      />
+      {inputErrors.link && <p class="mt-1 text-sm text-red-400">{inputErrors.link.join(', ')}</p>}
+      {
+        !user.karmaUnlocks.websiteLink && (
+          <p class="text-day-400 mt-2 flex items-center gap-2 rounded-md text-sm">
+            <Icon name="ri:information-line" class="size-4" />
+            {makeKarmaUnlockMessage(karmaUnlocksById.websiteLink)}
+            <a href="/karma" class="hover:text-day-300 underline">
+              Learn about karma
+            </a>
+          </p>
+        )
+      }
+    </div>
+
+    <div>
+      <label class="text-day-200 mb-2 block text-sm" for="pictureFile"> Profile Picture </label>
+      <div class="mt-2 space-y-2">
+        <input
+          transition:persist
+          type="file"
+          name="pictureFile"
+          id="pictureFile"
+          accept="image/*"
+          class="border-day-500/30 bg-night-800 text-day-300 file:bg-day-500/30 file:text-day-300 focus:border-day-500 focus:ring-day-500 block w-full rounded-md border p-2 file:mr-3 file:rounded-md file:border-0 file:px-3 file:py-1 disabled:cursor-not-allowed disabled:opacity-60"
+          disabled={!user.karmaUnlocks.profilePicture}
+        />
+        <p class="text-day-400 text-xs">
+          Upload a square image for best results. Supported formats: JPG, PNG, WebP, AVIF, JXL. Max size: 5MB.
+        </p>
+      </div>
+      {
+        inputErrors.pictureFile && (
+          <p class="mt-1 text-sm text-red-400">{inputErrors.pictureFile.join(', ')}</p>
+        )
+      }
+      {
+        !user.karmaUnlocks.profilePicture && (
+          <p class="text-day-400 mt-2 flex items-center gap-2 rounded-md text-sm">
+            <Icon name="ri:information-line" class="size-4" />
+            You need 200 karma to have a profile picture.
+            <a href="/karma" class="hover:text-day-300 underline">
+              Learn about karma
+            </a>
+          </p>
+        )
+      }
+    </div>
+
+    <Button
+      type="submit"
+      icon="ri:save-line"
+      label="Save"
+      color="success"
+      shadow
+      size="md"
+      class="mt-4 w-full"
+    />
+  </form>
+</MiniLayout>