kycnotme/web/src/pages/account/edit.astro

---
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>