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

Just a test release

Browse Source
This commit is contained in:
pluja
2025-05-19 11:22:11 +00:00
parent 565e9a0ad1
commit 22579d10c5
5 changed files with 77 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/actions/account.ts
View File

@@ -159,6 +159,7 @@ export const accountActions = {
.optional()
.nullable(),
pictureFile: imageFileSchema,
removePicture: z.coerce.boolean().default(false),
}),
handler: async (input, context) => {
if (input.id !== context.locals.user.id) {
@@ -204,14 +205,14 @@ export const accountActions = {
input.pictureFile.name,
`users/pictures/${String(context.locals.user.id)}`
)
: null
: undefined
const user = await prisma.user.update({
where: { id: context.locals.user.id },
data: {
displayName: input.displayName ?? null,
link: input.link ?? null,
picture: pictureUrl,
picture: input.removePicture ? null : (pictureUrl ?? undefined),
},
})

17
web/src/components/InputFile.astro
View File

@@ -10,15 +10,27 @@ type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId'> &
accept?: string
disabled?: boolean
multiple?: boolean
removeCheckbox?: {
name: string
label: string
}
}
const { accept, disabled, multiple, ...wrapperProps } = Astro.props
const { accept, disabled, multiple, removeCheckbox, ...wrapperProps } = Astro.props
const inputId = Astro.locals.makeId(`input-${wrapperProps.name}`)
const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
---
<InputWrapper inputId={inputId} {...wrapperProps}>
{
!!removeCheckbox && (
<label class="flex cursor-pointer items-center gap-2 py-1 pl-1 text-sm leading-none">
<input transition:persist type="checkbox" name={removeCheckbox.name} data-remove-checkbox />
{removeCheckbox.label || 'Remove'}
</label>
)
}
<input
transition:persist
type="file"
@@ -27,7 +39,8 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
baseInputClassNames.input,
baseInputClassNames.file,
hasError && baseInputClassNames.error,
disabled && baseInputClassNames.disabled
disabled && baseInputClassNames.disabled,
'[&:is(:has([data-remove-checkbox]:checked)_~_*)]:hidden'
)}
required={wrapperProps.required}
disabled={disabled}

18
web/src/components/InputImageFile.astro
View File

@@ -8,20 +8,26 @@ import type { ComponentProps } from 'astro/types'
type Props = Omit<ComponentProps<typeof InputFile>, 'accept'> & {
square?: boolean
value?: string | null
}
const { class: className, square, ...inputFileProps } = Astro.props
const { class: className, square, value, ...inputFileProps } = Astro.props
---
<div class={cn('flex flex-wrap items-center justify-center gap-4', className)} data-preview-image>
<InputFile accept={ACCEPTED_IMAGE_TYPES.join(',')} class="min-w-0 flex-1 basis-2xs" {...inputFileProps} />
<InputFile
accept={ACCEPTED_IMAGE_TYPES.join(',')}
class="min-w-0 flex-1 basis-[calc(var(--spacing)*32)]"
{...inputFileProps}
/>
<img
src="#"
src={value}
alt="Preview"
class={cn(
'block w-26.5 rounded object-cover',
'no-js:hidden not-[[src]]:hidden [&[src=""]]:hidden [&[src="#"]]:hidden',
square && 'aspect-square'
'block h-24 rounded object-cover',
square && 'aspect-square',
'no-js:hidden not-[[src]]:hidden [&[src=""]]:hidden',
'[&:is(:has([data-remove-checkbox]:checked)_~_*)]:hidden'
)}
/>
</div>

2
web/src/components/InputWrapper.astro
View File

@@ -66,7 +66,7 @@ const hasError = !!error && error.length > 0
{
!!description && (
<div class="prose prose-sm prose-invert text-day-400 text-xs text-pretty">
<div class="prose prose-sm prose-invert prose-a:text-current prose-a:font-normal hover:prose-a:text-day-300 prose-a:transition-colors text-day-400 text-xs text-pretty">
<Markdown content={description} />
</div>
)

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

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