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

update all pages to svelte 5 except analytics page

Browse Source
main
TZGyn 1 year ago
parent 3bd7de779e
commit 6d10c1932c
Signed by: TZGyn
GPG Key ID: 122EAF77AE81FD4A
34 changed files with 345 additions and 249 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,11 +1,10 @@
<script lang="ts">
import type { PageData } from './$types'
import * as Card from '$lib/components/ui/card'
import { Button } from '$lib/components/ui/button'
import { Separator } from '$lib/components/ui/separator'
import { BarChart, ExternalLink } from 'lucide-svelte'
export let data: PageData
let { data } = $props()
</script>
<div class="flex flex-col gap-4 px-10 py-8">

2
frontend/src/routes/(app)/dashboard/[...catchall]/+page.svelte
Unescape Escape View File

@ -9,7 +9,7 @@
<div class="text-4xl font-bold">404</div>
<div class="text-4xl font-bold">Page Not Found</div>
</div>
<Button on:click={() => goto('/dashboard')} class="w-fit">
<Button onclick={() => goto('/dashboard')} class="w-fit">
Return Home
</Button>
</div>

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

@ -5,14 +5,13 @@
import { Separator } from '$lib/components/ui/separator'
import * as Dialog from '$lib/components/ui/dialog'
import { Check, LoaderCircleIcon } from 'lucide-svelte'
import type { PageData } from './$types'
import { zodClient } from 'sveltekit-superforms/adapters'
import { cancelSubscriptionSchema } from './schema'
import { superForm } from 'sveltekit-superforms'
import { toast } from 'svelte-sonner'
import { ScrollArea } from '$lib/components/ui/scroll-area'
export let data: PageData
let { data } = $props()
let cancelPlanDialogOpen = false
@ -158,7 +157,7 @@
<Dialog.Footer>
<Button
variant={'outline'}
on:click={() => (cancelPlanDialogOpen = false)}>
onclick={() => (cancelPlanDialogOpen = false)}>
Cancel
</Button>
<form

2
frontend/src/routes/(app)/dashboard/billing/plan/pro/success/+page.svelte
Unescape Escape View File

@ -2,8 +2,6 @@
import { Button } from '$lib/components/ui/button'
import { CheckCircleIcon } from 'lucide-svelte'
import * as Dialog from '$lib/components/ui/dialog'
export let data
</script>
<Dialog.Root open>

37
frontend/src/routes/(app)/dashboard/links/(components)/form.svelte
Unescape Escape View File

@ -18,10 +18,16 @@
import { ScrollArea } from '$lib/components/ui/scroll-area'
import type { Project } from '$lib/db/types'
export let data: SuperValidated<Infer<FormSchema>>
export let projects: Project[]
export let dialogOpen: boolean
let shortenerCategory: any = undefined
let {
data,
projects,
dialogOpen = $bindable(),
}: {
data: SuperValidated<Infer<FormSchema>>
projects: Project[]
dialogOpen: boolean
} = $props()
let shortenerCategory = $state<any>(undefined)
const form = superForm(data, {
validators: zodClient(formSchema),
@ -40,9 +46,9 @@
const { form: formData, enhance, submitting } = form
let inputTimer: any
let previewData: any
let isPreviewLoading: boolean = false
let inputTimer = $state<any>()
let previewData = $state<any>()
let isPreviewLoading = $state(false)
const getMetadata = async () => {
isPreviewLoading = true
@ -108,7 +114,7 @@
{...attrs}
bind:value={$formData.link}
placeholder="https://example.com"
on:input={getMetadata} />
oninput={getMetadata} />
</Form.Control>
<Form.Description>Shortener link</Form.Description>
<Form.FieldErrors />
@ -167,8 +173,9 @@
bind:value={$formData.custom_code}
placeholder="abcde" />
</Form.Control>
<Form.Description
>Custom Code For The Shortener</Form.Description>
<Form.Description>
Custom Code For The Shortener
</Form.Description>
<Form.FieldErrors />
</Form.Field>
{/if}
@ -192,8 +199,9 @@
bind:value={$formData.ios_link}
placeholder="https://example.com" />
</Form.Control>
<Form.Description
>Shortener link for iOS</Form.Description>
<Form.Description>
Shortener link for iOS
</Form.Description>
<Form.FieldErrors />
</Form.Field>
{/if}
@ -217,8 +225,9 @@
bind:value={$formData.android_link}
placeholder="https://example.com" />
</Form.Control>
<Form.Description
>Shortener link for Android</Form.Description>
<Form.Description>
Shortener link for Android
</Form.Description>
<Form.FieldErrors />
</Form.Field>
{/if}

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

@ -1,5 +1,4 @@
<script lang="ts">
import type { PageData } from './$types'
import { page } from '$app/stores'
import { Button } from '$lib/components/ui/button'
@ -24,23 +23,23 @@
import type { Project, Shortener } from '$lib/db/types'
import type { Selected } from 'bits-ui'
export let data: PageData
let { data } = $props()
let dialogOpen = false
let dialogOpen = $state(false)
let search: string | null = ''
let searchUpdateTimeout: any
let search = $state<string | null>('')
let searchUpdateTimeout = $state<any>()
let pageNumber = 1
let perPage = 12
let sortBy: Selected<string> = {
let pageNumber = $state(1)
let perPage = $state(12)
let sortBy = $state<Selected<string>>({
label: 'Latest',
value: 'latest',
}
let selectedProject: Selected<string> = {
})
let selectedProject = $state<Selected<string>>({
label: 'All',
value: 'all',
}
})
const fetchShorteners = async (
page: number,
@ -72,8 +71,13 @@
}
}
$: projectLinkQROpen = !!$page.state.projectLinkQR
$: linkQROpen = !!$page.state.linkQR
let projectLinkQROpen = $state(!!$page.state.projectLinkQR)
let linkQROpen = $state(!!$page.state.linkQR)
$effect(() => {
projectLinkQROpen = !!$page.state.projectLinkQR
linkQROpen = !!$page.state.linkQR
})
</script>
<div
@ -152,14 +156,14 @@
placeholder="search"
autofocus
value={search}
on:input={({ target }) => {
oninput={({ target }) => {
clearTimeout(searchUpdateTimeout)
searchUpdateTimeout = setTimeout(() => {
search = target.value
pageNumber = 1
}, 500)
}} />
<Button disabled={!search} on:click={() => (search = '')}>
<Button disabled={!search} onclick={() => (search = '')}>
Clear
</Button>
</div>
@ -230,14 +234,14 @@
class="max-w-[250px]"
autofocus
value={search}
on:input={({ target }) => {
oninput={({ target }) => {
clearTimeout(searchUpdateTimeout)
searchUpdateTimeout = setTimeout(() => {
search = target.value
pageNumber = 1
}, 500)
}} />
<Button disabled={!search} on:click={() => (search = '')}>
<Button disabled={!search} onclick={() => (search = '')}>
Clear
</Button>
</div>
@ -346,7 +350,7 @@
<p class="text-muted-foreground">Add a new shortener</p>
</div>
<Button
on:click={() => {
onclick={() => {
dialogOpen = true
}}
class="w-fit">

15
frontend/src/routes/(app)/dashboard/links/[id]/edit/(components)/form.svelte
Unescape Escape View File

@ -14,8 +14,11 @@
import { Checkbox } from '$lib/components/ui/checkbox'
import { onMount } from 'svelte'
export let data: SuperValidated<Infer<FormSchema>>
export let code: string
let {
data,
code,
}: { data: SuperValidated<Infer<FormSchema>>; code: string } =
$props()
const form = superForm(data, {
validators: zodClient(formSchema),
@ -33,9 +36,9 @@
const { form: formData, enhance, submitting } = form
let inputTimer: any
let previewData: any
let isPreviewLoading: boolean = false
let inputTimer: any = $state()
let previewData: any = $state()
let isPreviewLoading: boolean = $state(false)
const getMetadata = async () => {
isPreviewLoading = true
@ -91,7 +94,7 @@
{...attrs}
bind:value={$formData.link}
placeholder="https://example.com"
on:input={getMetadata} />
oninput={getMetadata} />
</Form.Control>
<Form.Description>Shortener link</Form.Description>
<Form.FieldErrors />

6
frontend/src/routes/(app)/dashboard/links/[id]/edit/+page.svelte
Unescape Escape View File

@ -3,8 +3,10 @@
import type { PageData } from './$types'
import Form from './(components)/form.svelte'
export let data: PageData
export let shallowRouting = false
let {
data,
shallowRouting = $bindable(false),
}: { data: PageData; shallowRouting: boolean } = $props()
</script>
{#if !shallowRouting}

47
frontend/src/routes/(app)/dashboard/links/[id]/qr/(components)/qr.svelte
Unescape Escape View File

@ -1,20 +1,30 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button'
import { Button, buttonVariants } from '$lib/components/ui/button'
import { toast } from 'svelte-sonner'
import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js'
import { Badge } from '$lib/components/ui/badge'
import { browser } from '$app/environment'
import { cn } from '$lib/utils'
export let background = '#fff'
export let color = '#000'
export let value = ''
export let code = ''
export let cornerSquareStyle: 'dot' | 'square' | 'extra-rounded' =
'square'
export let dotStyle: 'square' | 'rounded' = 'square'
export let existingQrImage: string | null = null
let {
background = '#fff',
color = '#000',
value = '',
code = '',
cornerSquareStyle = 'square',
dotStyle = 'square',
existingQrImage = null,
}: {
background: string
color: string
value: string
code: string
cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
dotStyle: 'square' | 'rounded'
existingQrImage: string | null
} = $props()
let image = ''
let image = $state('')
const copyImageToClipboard = async () => {
if (!image) return
@ -70,7 +80,11 @@
image = URL.createObjectURL(blob)
}
$: value && browser && generateQrCode()
$effect(() => {
if (value && browser) {
generateQrCode()
}
})
</script>
<div class="flex h-full flex-col items-center gap-4">
@ -79,14 +93,16 @@
</Badge>
<img src={image} alt={value} width={300} height={300} />
<div class="flex w-full gap-4">
<Button class="w-full" on:click={copyImageToClipboard}>
<Button class="w-full" onclick={copyImageToClipboard}>
Copy Image
</Button>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} class="w-full">QR Link</Button>
<DropdownMenu.Trigger
class={cn(buttonVariants({ variant: 'default' }), 'w-full')}>
QR Link
</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Group>
<DropdownMenu.Item href={`/url/${code}/qr`} target="_blank">
Standard
</DropdownMenu.Item>
@ -95,6 +111,7 @@
target="_blank">
With Style
</DropdownMenu.Item>
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>

6
frontend/src/routes/(app)/dashboard/links/[id]/qr/+page.svelte
Unescape Escape View File

@ -3,8 +3,10 @@
import type { PageData } from './$types'
import QR from './(components)/qr.svelte'
export let data: PageData
export let shallowRouting = false
let {
data,
shallowRouting = $bindable(false),
}: { data: PageData; shallowRouting: boolean } = $props()
</script>
{#if !shallowRouting}

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

@ -11,9 +11,9 @@
import { zodClient } from 'sveltekit-superforms/adapters'
import { toast } from 'svelte-sonner'
export let data
let { data } = $props()
let dialogOpen = false
let dialogOpen = $state(false)
const form = superForm(data.form, {
validators: zodClient(formSchema),
@ -102,7 +102,7 @@
<p class="text-muted-foreground">Add a new project</p>
</div>
<Button
on:click={() => {
onclick={() => {
dialogOpen = true
}}
class="w-fit">

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

@ -16,8 +16,13 @@
import { Checkbox } from '$lib/components/ui/checkbox'
import { ScrollArea } from '$lib/components/ui/scroll-area'
export let data: SuperValidated<Infer<FormSchema>>
export let dialogOpen: boolean
let {
data,
dialogOpen = $bindable(),
}: {
data: SuperValidated<Infer<FormSchema>>
dialogOpen: boolean
} = $props()
const form = superForm(data, {
validators: zodClient(formSchema),
@ -36,9 +41,9 @@
const { form: formData, enhance, submitting } = form
let inputTimer: any
let previewData: any
let isPreviewLoading: boolean = false
let inputTimer: any = $state()
let previewData: any = $state()
let isPreviewLoading: boolean = $state(false)
const getMetadata = async () => {
isPreviewLoading = true
@ -104,7 +109,7 @@
{...attrs}
bind:value={$formData.link}
placeholder="https://example.com"
on:input={getMetadata} />
oninput={getMetadata} />
</Form.Control>
<Form.Description>Shortener link</Form.Description>
<Form.FieldErrors />

5
frontend/src/routes/(app)/dashboard/projects/[id]/+layout.svelte
Unescape Escape View File

@ -1,11 +1,10 @@
<script lang="ts">
import type { PageData } from './$types'
import { page } from '$app/stores'
import { Button } from '$lib/components/ui/button'
import { Separator } from '$lib/components/ui/separator'
import { ScrollArea } from '$lib/components/ui/scroll-area'
export let data: PageData
let { data, children } = $props()
</script>
<div class="flex h-fit flex-col gap-2 px-4 pt-8 md:px-10">
@ -40,5 +39,5 @@
</div>
<div class="flex w-full flex-grow flex-col overflow-hidden">
<slot />
{@render children()}
</div>

56
frontend/src/routes/(app)/dashboard/projects/[id]/+page.svelte
Unescape Escape View File

@ -14,21 +14,20 @@
import { SortAscIcon, SortDescIcon } from 'lucide-svelte'
import type { PageData } from './$types'
import { ScrollArea } from '$lib/components/ui/scroll-area'
import Form from './(components)/form.svelte'
import EditProjectLinkPage from './links/[linkid]/edit/+page.svelte'
import ProjectLinkQRPage from './links/[linkid]/qr/+page.svelte'
export let data: PageData
let { data } = $props()
let dialogOpen = false
let dialogOpen = $state(false)
let search: string | null = data.search
let searchUpdateTimeout: any
let search = $state<string | null>(data.search)
let searchUpdateTimeout = $state<any>()
$: browser &&
search &&
$effect(() => {
if (browser && (search || true)) {
goto(
updateSearchParam([
{ name: 'search', value: search },
@ -38,6 +37,8 @@
},
]),
)
}
})
const updateSearchParam = (
params: { name: string; value: any }[],
@ -61,10 +62,13 @@
}
}
let editProjectLinkOpen = false
let editProjectLinkOpen = $state(false)
let projectLinkQROpen = $state(false)
$: editProjectLinkOpen = !!$page.state.editProjectLink
$: projectLinkQROpen = !!$page.state.projectLinkQR
$effect(() => {
editProjectLinkOpen = !!$page.state.editProjectLink
projectLinkQROpen = !!$page.state.projectLinkQR
})
</script>
<div
@ -108,24 +112,13 @@
type="text"
placeholder="search"
value={search}
on:input={({ target }) => {
oninput={({ target }) => {
clearTimeout(searchUpdateTimeout)
searchUpdateTimeout = setTimeout(() => {
search = target.value
}, 500)
}} />
<Button
disabled={!search}
on:click={() =>
goto(
updateSearchParam([
{ name: 'search', value: search },
{
name: 'page',
value: 1,
},
]),
)}>
<Button disabled={!search} onclick={() => (search = '')}>
Clear
</Button>
</div>
@ -168,24 +161,13 @@
class="max-w-[250px]"
autofocus
value={search}
on:input={({ target }) => {
oninput={({ target }) => {
clearTimeout(searchUpdateTimeout)
searchUpdateTimeout = setTimeout(() => {
search = target.value
}, 500)
}} />
<Button
disabled={!search}
on:click={() =>
goto(
updateSearchParam([
{ name: 'search', value: search },
{
name: 'page',
value: 1,
},
]),
)}>
<Button disabled={!search} onclick={() => (search = '')}>
Clear
</Button>
</div>
@ -223,7 +205,7 @@
<p class="text-muted-foreground">Add a new shortener</p>
</div>
<Button
on:click={() => {
onclick={() => {
dialogOpen = true
}}
class="w-fit">

20
frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/(components)/form.svelte
Unescape Escape View File

@ -14,9 +14,15 @@
import { Checkbox } from '$lib/components/ui/checkbox'
import { onMount } from 'svelte'
export let data: SuperValidated<Infer<FormSchema>>
export let uuid: string
export let code: string
let {
data,
code,
uuid,
}: {
data: SuperValidated<Infer<FormSchema>>
uuid: string
code: string
} = $props()
const form = superForm(data, {
validators: zodClient(formSchema),
@ -34,9 +40,9 @@
const { form: formData, enhance, submitting } = form
let inputTimer: any
let previewData: any
let isPreviewLoading: boolean = false
let inputTimer: any = $state()
let previewData: any = $state()
let isPreviewLoading: boolean = $state(false)
const getMetadata = async () => {
isPreviewLoading = true
@ -92,7 +98,7 @@
{...attrs}
bind:value={$formData.link}
placeholder="https://example.com"
on:input={getMetadata} />
oninput={getMetadata} />
</Form.Control>
<Form.Description>Shortener link</Form.Description>
<Form.FieldErrors />

6
frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/+page.svelte
Unescape Escape View File

@ -3,8 +3,10 @@
import type { PageData } from './$types'
import Form from './(components)/form.svelte'
export let data: PageData
export let shallowRouting = false
let {
data,
shallowRouting = $bindable(false),
}: { data: PageData; shallowRouting: boolean } = $props()
</script>
{#if !shallowRouting}

45
frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/(components)/qr.svelte
Unescape Escape View File

@ -1,20 +1,30 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button'
import { Button, buttonVariants } from '$lib/components/ui/button'
import { toast } from 'svelte-sonner'
import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
import { Badge } from '$lib/components/ui/badge'
import { browser } from '$app/environment'
import { cn } from '$lib/utils'
export let background = '#fff'
export let color = '#000'
export let value = ''
export let code = ''
export let cornerSquareStyle: 'dot' | 'square' | 'extra-rounded' =
'square'
export let dotStyle: 'square' | 'rounded' = 'square'
export let existingQrImage: string | null = null
let {
background = '#fff',
color = '#000',
value = '',
code = '',
cornerSquareStyle = 'square',
dotStyle = 'square',
existingQrImage = null,
}: {
background: string
color: string
value: string
code: string
cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
dotStyle: 'square' | 'rounded'
existingQrImage: string | null
} = $props()
let image = ''
let image = $state('')
const copyImageToClipboard = async () => {
if (!image) return
@ -70,7 +80,11 @@
image = URL.createObjectURL(blob)
}
$: value && browser && generateQrCode()
$effect(() => {
if (value && browser) {
generateQrCode()
}
})
</script>
<div class="flex h-full flex-col items-center gap-4">
@ -79,14 +93,16 @@
</Badge>
<img src={image} alt={value} width={300} height={300} />
<div class="flex w-full gap-4">
<Button class="w-full" on:click={copyImageToClipboard}>
<Button class="w-full" onclick={copyImageToClipboard}>
Copy Image
</Button>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} class="w-full">QR Link</Button>
<DropdownMenu.Trigger
class={cn(buttonVariants({ variant: 'default' }), 'w-full')}>
QR Link
</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Group>
<DropdownMenu.Item href={`/url/${code}/qr`} target="_blank">
Standard
</DropdownMenu.Item>
@ -95,6 +111,7 @@
target="_blank">
With Style
</DropdownMenu.Item>
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>

6
frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/+page.svelte
Unescape Escape View File

@ -3,8 +3,10 @@
import type { PageData } from './$types'
import QR from './(components)/qr.svelte'
export let data: PageData
export let shallowRouting = false
let {
data,
shallowRouting,
}: { data: PageData; shallowRouting: boolean } = $props()
const url =
data.project.enable_custom_domain && data.project.custom_domain

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

@ -2,16 +2,25 @@
import { onMount } from 'svelte'
import { browser } from '$app/environment'
export let background = '#fff'
export let color = '#000'
export let value = 'example.com/abcdefgh'
export let cornerSquareStyle: 'dot' | 'square' | 'extra-rounded' =
'square'
export let dotStyle: 'square' | 'rounded' = 'square'
export let existingQrImage: string | null = null
export let qrImage: File | null = null
let {
background = '#fff',
color = '#000',
value = 'example.com/abcdefgh',
cornerSquareStyle = 'square',
dotStyle = 'square',
existingQrImage = null,
qrImage = null,
}: {
background: string
color: string
value: string
cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
dotStyle: 'square' | 'rounded'
existingQrImage: string | null
qrImage: File | null
} = $props()
let image = ''
let image = $state('')
async function generateQrCode() {
if (!document || !window) {
@ -58,13 +67,18 @@
}
}
$: browser &&
$effect(() => {
if (
browser &&
background &&
color &&
cornerSquareStyle &&
dotStyle &&
(qrImage === null || qrImage) &&
(qrImage === null || qrImage)
) {
generateQrCode()
}
})
onMount(() => {
generateQrCode()

15
frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-info.svelte
Unescape Escape View File

@ -2,10 +2,17 @@
import * as Tabs from '$lib/components/ui/tabs/index.js'
import * as Card from '$lib/components/ui/card/index.js'
export let host: string
export let cname_record: string
export let a_record: string
export let aaaa_record: string
let {
host,
a_record,
aaaa_record,
cname_record,
}: {
host: string
cname_record: string
a_record: string
aaaa_record: string
} = $props()
const defaultValue = cname_record ? 'cname' : 'a'
</script>

18
frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-tooltip.svelte
Unescape Escape View File

@ -2,11 +2,19 @@
import * as Tooltip from '$lib/components/ui/tooltip/index.js'
import { InfoIcon } from 'lucide-svelte'
export let domain: string
export let custom_ip: string | null
export let cname_record: string
export let a_record: string
export let aaaa_record: string
let {
a_record,
aaaa_record,
cname_record,
custom_ip,
domain,
}: {
domain: string
custom_ip: string | null
cname_record: string
a_record: string
aaaa_record: string
} = $props()
</script>
<Tooltip.Root>

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

@ -14,11 +14,17 @@
import DemoQr from './DemoQR.svelte'
import { cn } from '$lib/utils'
export let data: SuperValidated<Infer<FormSchema>>
export let qrImageBase64: string | null = null
export let isPro: boolean = false
let {
data,
qrImageBase64 = null,
isPro = false,
}: {
data: SuperValidated<Infer<FormSchema>>
qrImageBase64: string | null
isPro: boolean
} = $props()
let qrImageInput: HTMLInputElement
let qrImageInput: HTMLInputElement | undefined = $state()
const form = superForm(data, {
validators: zodClient(formSchema),
@ -84,7 +90,7 @@
<div>
{#if !$formData.qrImage && !qrImageBase64}
<button
on:click={(e) => {
onclick={(e) => {
e.preventDefault()
qrImageInput.click()
}}>
@ -94,7 +100,7 @@
</button>
{:else}
<button
on:click={(e) => {
onclick={(e) => {
e.preventDefault()
qrImageInput.click()
}}>
@ -119,7 +125,7 @@
accept="image/png, image/jpeg"
type="file"
disabled={!isPro}
on:input={(e) => {
oninput={(e) => {
const file = e.currentTarget.files?.item(0)
if (!file) return
@ -147,7 +153,7 @@
<div class="flex gap-4">
<Button
disabled={!isPro}
on:click={() => ($formData.qrCornerSquareStyle = 'square')}
onclick={() => ($formData.qrCornerSquareStyle = 'square')}
class={cn(
'flex flex-col gap-3 border p-12',
$formData.qrCornerSquareStyle === 'square'
@ -159,7 +165,7 @@
</Button>
<Button
disabled={!isPro}
on:click={() => ($formData.qrCornerSquareStyle = 'dot')}
onclick={() => ($formData.qrCornerSquareStyle = 'dot')}
class={cn(
'flex flex-col gap-3 border p-12',
$formData.qrCornerSquareStyle === 'dot'
@ -171,7 +177,7 @@
</Button>
<Button
disabled={!isPro}
on:click={() =>
onclick={() =>
($formData.qrCornerSquareStyle = 'extra-rounded')}
class={cn(
'flex flex-col gap-3 border p-12',
@ -199,7 +205,7 @@
<div class="flex gap-4">
<Button
disabled={!isPro}
on:click={() => ($formData.qrDotStyle = 'square')}
onclick={() => ($formData.qrDotStyle = 'square')}
class={cn(
'flex flex-col gap-3 border p-12',
$formData.qrDotStyle === 'square'
@ -211,7 +217,7 @@
</Button>
<Button
disabled={!isPro}
on:click={() => ($formData.qrDotStyle = 'rounded')}
onclick={() => ($formData.qrDotStyle = 'rounded')}
class={cn(
'flex flex-col gap-3 border p-12',
$formData.qrDotStyle === 'rounded'

10
frontend/src/routes/(app)/dashboard/projects/[id]/settings/+page.svelte
Unescape Escape View File

@ -26,9 +26,9 @@
import DnsInfo from './(components)/dns-info.svelte'
import DnsTooltip from './(components)/dns-tooltip.svelte'
export let data
let { data } = $props()
let deleteDialogOpen = false
let deleteDialogOpen = $state(false)
const form = superForm(data.deleteForm, {
invalidateAll: 'force',
@ -211,7 +211,7 @@
Cancel
</Button>
</Dialog.Close>
<Button on:click={enableCustomDomainSubmit}>
<Button onclick={enableCustomDomainSubmit}>
{#if $enableCustomDomainSubmitting}
<LoaderCircle class="animate-spin" />
{/if}
@ -239,7 +239,7 @@
<AlertDialog.Footer>
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
<AlertDialog.Action
on:click={async () => {
onclick={async () => {
await fetch('?/disable_custom_domain', {
method: 'POST',
headers: {
@ -368,7 +368,7 @@
<div class="flex justify-end gap-2">
<Button
variant="outline"
on:click={() => (deleteDialogOpen = false)}>
onclick={() => (deleteDialogOpen = false)}>
Cancel
</Button>
<Form.Button variant="destructive" class="w-fit">

8
frontend/src/routes/(app)/dashboard/settings/(components)/sidebar-nav.svelte
Unescape Escape View File

@ -2,8 +2,12 @@
import { cn } from '$lib/utils'
import { page } from '$app/stores'
import { Button } from '$lib/components/ui/button'
let className: string | undefined | null = undefined
export { className as class }
let {
class: className = undefined,
}: {
class: string | undefined | null
} = $props()
const items = [
{

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

@ -8,7 +8,7 @@
import { toast } from 'svelte-sonner'
import { LoaderCircle, CheckIcon, XIcon } from 'lucide-svelte'
export let data
let { data } = $props()
const form = superForm(data.form, {
validators: zodClient(formSchema),

36
frontend/src/routes/(app)/dashboard/settings/qr/(components)/DemoQR.svelte
Unescape Escape View File

@ -2,16 +2,25 @@
import { onMount } from 'svelte'
import { browser } from '$app/environment'
export let background = '#fff'
export let color = '#000'
export let value = 'abcdefghajskdadsj'
export let cornerSquareStyle: 'dot' | 'square' | 'extra-rounded' =
'square'
export let dotStyle: 'square' | 'rounded' = 'square'
export let existingQrImage: string | null = null
export let qrImage: File | null = null
let {
background = '#fff',
color = '#000',
value = 'abcdefghajskdadsj',
cornerSquareStyle = 'square',
dotStyle = 'square',
existingQrImage = null,
qrImage = null,
}: {
background: string
color: string
value: string
cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
dotStyle: 'square' | 'rounded'
existingQrImage: string | null
qrImage: File | null
} = $props()
let image = ''
let image = $state('')
async function generateQrCode() {
if (!document || !window) {
@ -58,13 +67,18 @@
}
}
$: browser &&
$effect(() => {
if (
browser &&
background &&
color &&
cornerSquareStyle &&
dotStyle &&
(qrImage === null || qrImage) &&
(qrImage === null || qrImage)
) {
generateQrCode()
}
})
onMount(() => {
generateQrCode()

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

@ -1,6 +1,5 @@
<script lang="ts">
import { Separator } from '$lib/components/ui/separator'
import type { PageData } from './$types'
import * as Form from '$lib/components/ui/form'
import { Input } from '$lib/components/ui/input'
import { formSchema } from './schema'
@ -12,7 +11,7 @@
import { Button } from '$lib/components/ui/button'
import { cn } from '$lib/utils'
export let data: PageData
let { data } = $props()
let qrImageInput: HTMLInputElement
@ -81,7 +80,7 @@
<div>
{#if !$formData.qrImage && !data.qrImageBase64}
<button
on:click={(e) => {
onclick={(e) => {
e.preventDefault()
qrImageInput.click()
}}>
@ -91,7 +90,7 @@
</button>
{:else}
<button
on:click={(e) => {
onclick={(e) => {
e.preventDefault()
qrImageInput.click()
}}>
@ -113,7 +112,7 @@
accept="image/png, image/jpeg"
type="file"
disabled={data.user.plan === 'free'}
on:input={(e) => {
oninput={(e) => {
const file = e.currentTarget.files?.item(0)
if (!file) return
@ -141,7 +140,7 @@
<div class="flex gap-4">
<Button
disabled={data.user.plan === 'free'}
on:click={() => ($formData.qrCornerSquareStyle = 'square')}
onclick={() => ($formData.qrCornerSquareStyle = 'square')}
class={cn(
'flex flex-col gap-3 border p-12',
$formData.qrCornerSquareStyle === 'square'
@ -153,7 +152,7 @@
</Button>
<Button
disabled={data.user.plan === 'free'}
on:click={() => ($formData.qrCornerSquareStyle = 'dot')}
onclick={() => ($formData.qrCornerSquareStyle = 'dot')}
class={cn(
'flex flex-col gap-3 border p-12',
$formData.qrCornerSquareStyle === 'dot'
@ -165,7 +164,7 @@
</Button>
<Button
disabled={data.user.plan === 'free'}
on:click={() =>
onclick={() =>
($formData.qrCornerSquareStyle = 'extra-rounded')}
class={cn(
'flex flex-col gap-3 border p-12',
@ -193,7 +192,7 @@
<div class="flex gap-4">
<Button
disabled={data.user.plan === 'free'}
on:click={() => ($formData.qrDotStyle = 'square')}
onclick={() => ($formData.qrDotStyle = 'square')}
class={cn(
'flex flex-col gap-3 border p-12',
$formData.qrDotStyle === 'square'
@ -205,7 +204,7 @@
</Button>
<Button
disabled={data.user.plan === 'free'}
on:click={() => ($formData.qrDotStyle = 'rounded')}
onclick={() => ($formData.qrDotStyle = 'rounded')}
class={cn(
'flex flex-col gap-3 border p-12',
$formData.qrDotStyle === 'rounded'

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

@ -10,7 +10,7 @@
import * as Dialog from '$lib/components/ui/dialog'
import { Button } from '$lib/components/ui/button'
export let data
let { data } = $props()
const form = superForm(data.form, {
validators: zodClient(changePasswordFormSchema),
@ -28,7 +28,7 @@
const { form: formData, enhance, submitting } = form
let deleteDialogOpen = false
let deleteDialogOpen = $state(false)
const deleteAccountForm = superForm(data.deleteAccountForm, {
invalidateAll: 'force',
@ -163,7 +163,7 @@
<div class="flex justify-end gap-2">
<Button
variant="outline"
on:click={() => (deleteDialogOpen = false)}>
onclick={() => (deleteDialogOpen = false)}>
Cancel
</Button>
<Form.Button variant="destructive" class="w-fit">

2
frontend/src/routes/(auth)/email-verification/[token]/+page.svelte
Unescape Escape View File

@ -1,7 +1,7 @@
<script lang="ts">
import { CheckCircle2Icon, XCircleIcon } from 'lucide-svelte'
import { Button } from '$lib/components/ui/button'
export let data
let { data } = $props()
</script>
<div

2
frontend/src/routes/(auth)/login/(components)/form.svelte
Unescape Escape View File

@ -11,7 +11,7 @@
import { toast } from 'svelte-sonner'
import { LoaderCircle } from 'lucide-svelte'
export let data: SuperValidated<Infer<FormSchema>>
let { data }: { data: SuperValidated<Infer<FormSchema>> } = $props()
const form = superForm(data, {
validators: zodClient(formSchema),

5
frontend/src/routes/(auth)/login/+page.svelte
Unescape Escape View File

@ -2,14 +2,13 @@
import ThemeToggle from '$lib/components/theme-toggle.svelte'
import Form from './(components)/form.svelte'
import type { PageData } from './$types'
import { Button } from '$lib/components/ui/button'
import { LoaderIcon } from 'lucide-svelte'
import Google from '$lib/components/icons/google.svelte'
export let data: PageData
let { data } = $props()
let isLoading = false
let isLoading = $state(false)
const loginGoogle = async () => {
// isLoading = true

2
frontend/src/routes/(auth)/signup/(components)/form.svelte
Unescape Escape View File

@ -11,7 +11,7 @@
import { toast } from 'svelte-sonner'
import { LoaderCircle } from 'lucide-svelte'
export let data: SuperValidated<Infer<FormSchema>>
let { data }: { data: SuperValidated<Infer<FormSchema>> } = $props()
const form = superForm(data, {
validators: zodClient(formSchema),

3
frontend/src/routes/(auth)/signup/+page.svelte
Unescape Escape View File

@ -1,9 +1,8 @@
<script lang="ts">
import ThemeToggle from '$lib/components/theme-toggle.svelte'
import Form from './(components)/form.svelte'
import type { PageData } from './$types'
export let data: PageData
let { data } = $props()
</script>
<svelte:head>

6
frontend/src/routes/(public)/url/[id]/qr/+page.svelte
Unescape Escape View File

@ -5,9 +5,9 @@
import { onMount } from 'svelte'
import * as Card from '$lib/components/ui/card'
export let data
let { data } = $props()
let image = ''
let image = $state('')
const copyImageToClipboard = async () => {
if (!image) return
@ -79,7 +79,7 @@
alt={data.url + '/' + data.shortenerId}
width={300}
height={300} />
<Button class="w-full" on:click={copyImageToClipboard}>
<Button class="w-full" onclick={copyImageToClipboard}>
Copy Image
</Button>
</Card.Header>

Write Preview
Loading…
Cancel
Save