161 lines
6.4 KiB
Plaintext
161 lines
6.4 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components'
|
|
import { actions, isInputError } from 'astro:actions'
|
|
|
|
import { karmaUnlocksById } from '../../constants/karmaUnlocks'
|
|
import BaseLayout from '../../layouts/BaseLayout.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 : {}
|
|
---
|
|
|
|
<BaseLayout
|
|
pageTitle={`Edit Profile - ${user.name}`}
|
|
description="Edit your user profile"
|
|
ogImage={{ template: 'generic', title: 'Edit Profile' }}
|
|
widthClassName="max-w-screen-md"
|
|
breadcrumbs={[
|
|
{
|
|
name: 'Accounts',
|
|
url: '/account',
|
|
},
|
|
{
|
|
name: 'Edit profile',
|
|
},
|
|
]}
|
|
>
|
|
<section class="border-night-400 bg-night-400/5 rounded-lg border p-6 shadow-sm backdrop-blur-xs">
|
|
<div class="mb-6 flex items-center justify-between">
|
|
<h1 class="font-title text-day-200 text-2xl font-bold tracking-wider">Edit Profile</h1>
|
|
<a
|
|
href="/account"
|
|
class="border-day-500/30 bg-day-500/10 text-day-400 hover:bg-day-500/20 focus:ring-day-500 inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm shadow-xs transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
|
|
>
|
|
<Icon name="ri:arrow-left-line" class="size-4" />
|
|
Back to Profile
|
|
</a>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div class="flex gap-3 pt-4">
|
|
<button
|
|
type="submit"
|
|
class="border-day-500/30 bg-day-500/10 text-day-400 hover:bg-day-500/20 focus:ring-day-500 inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm shadow-xs transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
|
|
>
|
|
<Icon name="ri:save-line" class="size-4" />
|
|
Save Changes
|
|
</button>
|
|
<a
|
|
href="/account"
|
|
class="border-night-500/30 bg-night-500/10 text-night-400 hover:bg-night-500/20 focus:ring-night-500 inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm shadow-xs transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
|
|
>
|
|
Cancel
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</BaseLayout>
|