TZGyn
/
kon.sh
mirror of https://github.com/TZGyn/shortener
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: TZGyn:18abdd3f7f6d6a1c2b13394d47dec8aa2043f71a
Branches Tags
TZGyn:main
..
compare: TZGyn:580818107d36c6f0e14c653e58fd80788b776052
Branches Tags
TZGyn:main

4 Commits
18abdd3f7f ... 580818107d

Author SHA1 Message Date
TZGyn 580818107d
update qr logo upload to preview uploaded image in the input field 1 year ago
TZGyn 45377ffe66
move settings save buttons to end instead of start 1 year ago
TZGyn 886cdff387
update billing page ui 1 year ago
TZGyn 7ea42df559
hide shortener card ios | android badge if no ios | android links 1 year ago
8 changed files with 101 additions and 15 deletions
Show Stats

6
frontend/src/lib/components/ShortenerCard.svelte
Unescape Escape View File

@ -187,10 +187,10 @@
<QrCode size={20} />
{/if}
</a>
{#if shortener.ios || shortener.android}
{#if (shortener.ios && shortener.ios_link) || (shortener.android && shortener.android_link)}
<Separator orientation="vertical" class="hidden sm:block" />
{/if}
{#if shortener.ios}
{#if shortener.ios && shortener.ios_link}
<Tooltip.Root>
<Tooltip.Trigger class="hidden gap-2 sm:inline-flex">
<Badge variant="outline" class="flex gap-2">iOS</Badge>
@ -200,7 +200,7 @@
</Tooltip.Content>
</Tooltip.Root>
{/if}
{#if shortener.android}
{#if shortener.android && shortener.android_link}
<Tooltip.Root>
<Tooltip.Trigger class="hidden gap-2 sm:inline-flex">
<Badge variant="outline" class="flex gap-2">

5
frontend/src/routes/(app)/dashboard/billing/+page.svelte
Unescape Escape View File

@ -45,10 +45,11 @@
<h2 class="text-2xl font-bold tracking-tight">Pricing</h2>
<p class="text-muted-foreground">Checkout our pricings here.</p>
</div>
<Separator class="my-4 lg:my-6" />
<Separator class="mt-4 lg:mt-6" />
<ScrollArea>
<div class="flex w-full flex-wrap-reverse justify-center gap-8">
<div
class="flex w-full flex-wrap-reverse justify-center gap-8 pt-6">
<div class="flex w-[400px] gap-8 rounded-lg border p-8">
<div class="flex w-full flex-col gap-3 text-start">
<h2 class="text-2xl font-bold">Free</h2>

51
frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/form.svelte
Unescape Escape View File

@ -18,6 +18,8 @@
export let qrImageBase64: string | null = null
export let isPro: boolean = false
let qrImageInput: HTMLInputElement
const form = superForm(data, {
validators: zodClient(formSchema),
invalidateAll: 'force',
@ -79,13 +81,54 @@
<Form.Label>
Image <span class="text-brand">(Pro)</span>
</Form.Label>
<Input
<div>
{#if !$formData.qrImage && !qrImageBase64}
<button
on:click={(e) => {
e.preventDefault()
qrImageInput.click()
}}>
<div
class="flex h-16 w-16 items-center justify-center rounded-lg border-4 border-dashed">
</div>
</button>
{:else}
<button
on:click={(e) => {
e.preventDefault()
qrImageInput.click()
}}>
<div
class="flex h-16 w-16 items-center justify-center rounded-lg">
<img
src={$formData.qrImage
? URL.createObjectURL($formData.qrImage)
: qrImageBase64}
alt={'image'}
width={64}
height={64} />
</div>
</button>
{/if}
</div>
<Form.Description>Click to edit</Form.Description>
<input
{...attrs}
hidden
bind:this={qrImageInput}
accept="image/png, image/jpeg"
type="file"
disabled={!isPro}
on:input={(e) =>
($formData.qrImage = e.currentTarget.files?.item(0))} />
on:input={(e) => {
const file = e.currentTarget.files?.item(0)
if (!file) return
if (file.size > 2097152) {
toast.error('Too Big! Max file size is 2MB')
return
}
$formData.qrImage = file
}} />
</Form.Control>
<Form.FieldErrors />
</Form.Field>
@ -180,7 +223,7 @@
</Button>
</div>
</Form.Field>
<Form.Button class="w-fit">
<Form.Button class="w-fit self-end">
{#if $submitting}
<LoaderCircle class="animate-spin" />
{/if}

1
frontend/src/routes/(app)/dashboard/projects/[id]/settings/schema.ts
Unescape Escape View File

@ -14,6 +14,7 @@ export const formSchema = z.object({
qrDotStyle: z.custom<'square' | 'rounded'>(),
qrImage: z
.instanceof(File, { message: 'Please upload a file' })
.refine((file) => file.size <= 2097152, `Max image size is 2MB.`)
.refine(
(file) =>
file.type === 'image/jpeg' || file.type === 'image/png',

2
frontend/src/routes/(app)/dashboard/settings/account/+page.svelte
Unescape Escape View File

@ -106,7 +106,7 @@
<Form.Description>Change Your Email</Form.Description>
<Form.FieldErrors />
</Form.Field>
<Form.Button class="w-fit">
<Form.Button class="w-fit self-end">
{#if $submitting}
<LoaderCircle class="animate-spin" />
{/if}

48
frontend/src/routes/(app)/dashboard/settings/qr/+page.svelte
Unescape Escape View File

@ -14,6 +14,8 @@
export let data: PageData
let qrImageInput: HTMLInputElement
const form = superForm(data.form, {
validators: zodClient(formSchema),
invalidateAll: 'force',
@ -76,13 +78,51 @@
<Form.Label>
Image <span class="text-brand">(Pro)</span>
</Form.Label>
<Input
<div>
{#if !$formData.qrImage && !data.qrImageBase64}
<button
on:click={(e) => {
e.preventDefault()
qrImageInput.click()
}}>
<div
class="flex h-16 w-16 items-center justify-center rounded-lg border-4 border-dashed">
</div>
</button>
{:else}
<button
on:click={(e) => {
e.preventDefault()
qrImageInput.click()
}}>
<img
src={$formData.qrImage
? URL.createObjectURL($formData.qrImage)
: data.qrImageBase64}
alt={'image'}
width={64}
height={64} />
</button>
{/if}
</div>
<Form.Description>Click to edit</Form.Description>
<input
{...attrs}
hidden
bind:this={qrImageInput}
accept="image/png, image/jpeg"
type="file"
disabled={data.user.plan === 'free'}
on:input={(e) =>
($formData.qrImage = e.currentTarget.files?.item(0))} />
on:input={(e) => {
const file = e.currentTarget.files?.item(0)
if (!file) return
if (file.size > 2097152) {
toast.error('Too Big! Max file size is 2MB')
return
}
$formData.qrImage = file
}} />
</Form.Control>
<Form.FieldErrors />
</Form.Field>
@ -178,7 +218,7 @@
</div>
</Form.Field>
<Form.Button class="w-fit">
<Form.Button class="w-fit self-end">
{#if $submitting}
<LoaderCircle class="animate-spin" />
{/if}

1
frontend/src/routes/(app)/dashboard/settings/qr/schema.ts
Unescape Escape View File

@ -13,6 +13,7 @@ export const formSchema = z.object({
qrDotStyle: z.custom<'square' | 'rounded'>(),
qrImage: z
.instanceof(File, { message: 'Please upload a file' })
.refine((file) => file.size <= 2097152, `Max image size is 2MB.`)
.refine(
(file) =>
file.type === 'image/jpeg' || file.type === 'image/png',

2
frontend/src/routes/(app)/dashboard/settings/security/+page.svelte
Unescape Escape View File

@ -99,7 +99,7 @@
<Form.Description>Confirm New Password</Form.Description>
<Form.FieldErrors />
</Form.Field>
<Form.Button class="w-fit">
<Form.Button class="w-fit self-end">
{#if $submitting}
<LoaderCircle class="animate-spin" />
{/if}

Write Preview
Loading…
Cancel
Save