External/kycnotme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Release 2025-05-19

Browse Source
This commit is contained in:
pluja
2025-05-19 10:19:49 +00:00
parent 046c4559e5
commit 2657f936bc
267 changed files with 0 additions and 49432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
web/src/pages/account/edit.astro
View File

@@ -1,160 +0,0 @@
---
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>