Just a test release
This commit is contained in:
pluja
@@ -1,8 +1,9 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components'
|
||||
import { actions, isInputError } from 'astro:actions'
|
||||
|
||||
import Button from '../../components/Button.astro'
|
||||
import InputImageFile from '../../components/InputImageFile.astro'
|
||||
import InputText from '../../components/InputText.astro'
|
||||
import { karmaUnlocksById } from '../../constants/karmaUnlocks'
|
||||
import MiniLayout from '../../layouts/MiniLayout.astro'
|
||||
import { makeKarmaUnlockMessage } from '../../lib/karmaUnlocks'
|
||||
@@ -42,95 +43,52 @@ const inputErrors = isInputError(result?.error) ? result.error.fields : {}
|
||||
<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>
|
||||
<InputText
|
||||
label="Display Name"
|
||||
name="displayName"
|
||||
error={inputErrors.displayName}
|
||||
inputProps={{
|
||||
value: user.displayName ?? '',
|
||||
maxlength: 100,
|
||||
disabled: !user.karmaUnlocks.displayName,
|
||||
}}
|
||||
description={!user.karmaUnlocks.displayName
|
||||
? `${makeKarmaUnlockMessage(karmaUnlocksById.displayName)} [Learn more](/karma)`
|
||||
: undefined}
|
||||
/>
|
||||
|
||||
<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>
|
||||
<InputText
|
||||
label="Website URL"
|
||||
name="link"
|
||||
error={inputErrors.link}
|
||||
inputProps={{
|
||||
value: user.link ?? '',
|
||||
type: 'url',
|
||||
placeholder: 'https://example.com',
|
||||
disabled: !user.karmaUnlocks.websiteLink,
|
||||
}}
|
||||
description={!user.karmaUnlocks.websiteLink
|
||||
? `${makeKarmaUnlockMessage(karmaUnlocksById.websiteLink)} [Learn more](/karma)`
|
||||
: undefined}
|
||||
/>
|
||||
|
||||
<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>
|
||||
<InputImageFile
|
||||
label="Profile Picture"
|
||||
name="pictureFile"
|
||||
value={user.picture}
|
||||
error={inputErrors.pictureFile}
|
||||
square
|
||||
disabled={!user.karmaUnlocks.profilePicture}
|
||||
description={!user.karmaUnlocks.profilePicture
|
||||
? `${makeKarmaUnlockMessage(karmaUnlocksById.profilePicture)} [Learn more](/karma)`
|
||||
: undefined}
|
||||
removeCheckbox={user.picture
|
||||
? {
|
||||
name: 'removePicture',
|
||||
label: 'Remove profile picture',
|
||||
}
|
||||
: undefined}
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
|
||||
Reference in New Issue
Block a user