diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/AppHeader.svelte | 49 | ||||
| -rw-r--r-- | src/components/LandingHeader.svelte | 9 | ||||
| -rw-r--r-- | src/components/LandingHero.svelte | 19 | ||||
| -rw-r--r-- | src/components/LocationsMap.svelte | 2 | ||||
| -rw-r--r-- | src/components/Numpad.svelte | 11 | ||||
| -rw-r--r-- | src/components/Qr.svelte | 19 | ||||
| -rw-r--r-- | src/components/RegisterOrLogin.svelte | 20 |
7 files changed, 64 insertions, 65 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index 62cfd940..fca11272 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -1,13 +1,16 @@ <script> import OutClick from 'svelte-outclick'; - import { subject, user, newPayment, colorTheme, tempProfileFiles } from '$lib/store'; + import { newPayment, colorTheme, tempProfileFiles } from '$lib/store'; import { goto } from '$app/navigation'; import { Icon } from '$comp'; import { t } from '$lib/translations'; import { page } from '$app/stores'; + export let data; export let avatarPosition = 'left-[calc(50vw-64px)] bottom-[-64px]'; + let { subject, user } = data; + const menuButtons = [ { stringID: 'nav.dashboard', icon: 'dash', goto: 'dashboard' }, { stringID: 'nav.settings', icon: 'settings', goto: 'settings' }, @@ -22,34 +25,34 @@ goto('/logout'); } else { showMenu = false; - goto(`/${$user.username + '/' + item}`); + goto(`/${user.username + '/' + item}`); } }; $: background = $tempProfileFiles && $tempProfileFiles.banner ? `url(${$tempProfileFiles.banner})` - : $subject?.banner - ? `url(/api/public/${$subject.username}-banner.png)` + : subject?.banner + ? `url(/api/public/${subject.username}-banner.png)` : undefined; </script> <header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative" style:background> <nav class="flex justify-end items-center space-x-4 p-5"> - {#if $user} - <a href={`/${$user.username}/receive`}> + {#if user} + <a href={`/${user.username}/receive`}> <button class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page - .url.pathname === `/${$user.username}/receive` + .url.pathname === `/${user.username}/receive` ? 'opacity-100' : 'opacity-70 hover:opacity-80'}" ><Icon icon="numpad" style="mx-auto" /> </button> </a> - <a href={`/${$user.username}/transactions`}> + <a href={`/${user.username}/transactions`}> <button class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page - .url.pathname === `/${$user.username}/transactions` + .url.pathname === `/${user.username}/transactions` ? 'opacity-100' : 'opacity-70 hover:opacity-80'} relative" ><Icon icon="clock" style="mx-auto" /> @@ -65,10 +68,10 @@ {/if} </button> </a> - <a href={`/${$user.username}`}> + <a href={`/${user.username}`}> <button class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page - .url.pathname === `/${$user.username}` + .url.pathname === `/${user.username}` ? 'opacity-100' : 'opacity-70 hover:opacity-80'}" ><Icon icon="profile" style="mx-auto" /> @@ -78,9 +81,9 @@ <OutClick on:outclick={() => (showMenu = false)}> <button class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page - .url.pathname === `/${$user.username}/dashboard` || - $page.url.pathname === `/${$user.username}/settings` || - $page.url.pathname === `/${$user.username}/support` + .url.pathname === `/${user.username}/dashboard` || + $page.url.pathname === `/${user.username}/settings` || + $page.url.pathname === `/${user.username}/support` ? 'opacity-100' : `opacity-70 hover:opacity-80 ${showMenu ? 'opacity-80' : ''}`}" on:click={() => (showMenu = !showMenu)} @@ -114,18 +117,18 @@ </a> {/if} </nav> - {#if $subject?.profile} + {#if subject?.profile} <div class="absolute top-[111px] {avatarPosition} rounded-full border-4 border-white overflow-hidden w-32 h-32" > - <a href={`/${$subject.username}`}> - <img - src={$tempProfileFiles && $tempProfileFiles.profile - ? $tempProfileFiles.profile - : `/api/public/${$subject.username}-profile.png`} - class="w-full h-full object-cover object-center overflow-hidden" - /> - </a> + <a href={`/${subject.username}`}> + <img + src={$tempProfileFiles && $tempProfileFiles.profile + ? $tempProfileFiles.profile + : `/api/public/${subject.username}-profile.png`} + class="w-full h-full object-cover object-center overflow-hidden" + /> + </a> </div> {:else} <div diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte index adeac98e..1f12e049 100644 --- a/src/components/LandingHeader.svelte +++ b/src/components/LandingHeader.svelte @@ -2,7 +2,6 @@ import { goto } from '$app/navigation'; import { scroll } from '$lib/utils'; import { Icon } from '$comp'; - import { user } from '$lib/store'; import { t } from '$lib/translations'; export let howItWorks; @@ -32,7 +31,7 @@ > <button class="hover:opacity-80" on:click={() => scroll(faq)}>{$t('faq.header')}</button> <button class="hover:opacity-80" on:click={() => scroll(about)}>{$t('about.header')}</button> - {#if !$user} + {#if !user} <button class="border rounded-full px-6 py-2 font-bold hover:opacity-80" on:click={() => goto('/register')} @@ -47,7 +46,7 @@ {:else} <button class="border rounded-full px-6 py-2 font-bold" - on:click={() => goto(`/${$user.username}/dashboard`)} + on:click={() => goto(`/${user.username}/dashboard`)} >{$t('nav.account')} </button> <button @@ -80,7 +79,7 @@ <button on:click={() => mobileMenuButtonClick(about)} class="block" >{$t('about.header')}</button > - {#if !$user} + {#if !user} <button class="border rounded-full px-6 py-2 font-bold block w-full" on:click={() => goto('/register')} @@ -95,7 +94,7 @@ {:else} <button class="border rounded-full px-6 py-2 font-bold block" - on:click={() => goto(`/${$user.username}/dashboard`)} + on:click={() => goto(`/${user.username}/dashboard`)} >{$t('nav.account')} </button> <button diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte index 466a6194..74c192fb 100644 --- a/src/components/LandingHero.svelte +++ b/src/components/LandingHero.svelte @@ -1,8 +1,9 @@ <script> import { goto } from '$app/navigation'; import { Icon, Image } from '$comp'; - import { user } from '$lib/store'; import { t } from '$lib/translations'; + + export let user; </script> <div class="mt-[96.88px] md:mt-0"> @@ -22,18 +23,18 @@ > {$t('landing.subheader')} </h2> - {#if !$user} + {#if !user} <div class="flex justify-center"> - <button - class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80" - on:click={() => goto('/register')} - > - {$t('nav.startInSeconds')} - </button> + <a href="/register"> + <button + class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80" + > + {$t('nav.startInSeconds')} + </button> + </a> </div> {/if} </div> - <!-- hero image --> <Image image="hero-image" style="w-full md:w-2/3 max-w-5xl mx-auto mt-20" /> </div> diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte index 8a8599c4..6d0b086e 100644 --- a/src/components/LocationsMap.svelte +++ b/src/components/LocationsMap.svelte @@ -77,7 +77,7 @@ locations.forEach(({ lat, lng, info }) => { let marker = L.marker([lat, lng]); - marker.bindPopup(info); + marker.bindPopup(info); markers.addLayer(marker); }); diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte index 3555688c..9de4a0dc 100644 --- a/src/components/Numpad.svelte +++ b/src/components/Numpad.svelte @@ -1,6 +1,6 @@ <script> import { Left, Icon } from '$comp'; - import { selectedRate, user } from '$lib/store'; + import { selectedRate } from '$lib/store'; import { f, s, post, warning, sats } from '$lib/utils'; import { t } from '$lib/translations'; @@ -32,7 +32,7 @@ $: amountSatsFormatted = s(amountSats); - $: amountFiatConverted = f(amountSats * ($selectedRate / sats), $user.currency); + $: amountFiatConverted = f(amountSats * ($selectedRate / sats), currency); $: amountSatsConverted = s(amountFiat / ($selectedRate / sats)); @@ -90,13 +90,14 @@ <div class="text-center"> <div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1"> {useFiat ? `${symbol}${amountFiat}` : amountSatsFormatted}<span - class="tracking-normal text-base font-normal">{useFiat ? $user.currency : 'SAT'}</span + class="tracking-normal text-base font-normal">{useFiat ? currency : 'SAT'}</span > </div> <span class="text-secondary mr-1" >{useFiat ? `${amountSatsConverted} SAT` : amountFiatConverted}</span > <button + type="button" on:click={() => { if (useFiat) { amountSats = parseInt((amountFiat / ($selectedRate / sats)).toFixed(0)); @@ -115,13 +116,15 @@ {#each numPad as value} {#if value === '<'} <button + type="button" class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center hover:opacity-80" on:click={() => handleInput(value)} > - <Left /> + <Left /> </button> {:else} <button + type="button" class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80" on:click={() => handleInput(value)}>{value}</button > diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte index 35146ec3..988faf25 100644 --- a/src/components/Qr.svelte +++ b/src/components/Qr.svelte @@ -1,17 +1,20 @@ <script> + import screenfull from 'screenfull'; import { browser } from '$app/environment'; import { onMount } from 'svelte'; import { copy } from '$lib/utils'; export let image, text, qr, disabled; + let toggle = () => screenfull.toggle(qr.firstChild); + $: update(text); - let update = async (text) => { + let update = async (text, fullscreen) => { if (!(browser && text)) return; let { default: QRCodeStyling } = await import('qr-code-styling'); const qrCode = new QRCodeStyling({ - width: window.screen.width < 640 ? 250 : 300, + width: 300, type: 'canvas', data: text, backgroundOptions: { @@ -35,22 +38,14 @@ }; </script> -<div - bind:this={qr} - on:click={() => { - if (!disabled) copy(text); - }} -/> +<div bind:this={qr} on:click={toggle} /> <style> div { - @apply px-5 - md:px-0 - w-[300px] + @apply w-[300px] h-[300px] rounded-3xl block - md:flex justify-center items-center cursor-pointer diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte index 8f10fadd..de886314 100644 --- a/src/components/RegisterOrLogin.svelte +++ b/src/components/RegisterOrLogin.svelte @@ -1,14 +1,11 @@ <script> - import { browser } from '$app/environment'; - import { page } from '$app/stores'; - import { tick } from 'svelte'; + import { enhance } from '$app/forms'; import { Icon } from '$comp'; - import { focus, post, failure } from '$lib/utils'; - import { redirect, user, token } from '$lib/store'; - import { auth } from '$lib/socket'; - import { goto } from '$app/navigation'; + import { focus } from '$lib/utils'; + import { redirect } from '$lib/store'; import { t } from '$lib/translations'; + export let form; export let pageID; let username, @@ -22,9 +19,6 @@ register: '/register', signIn: '/login' }[pageID]; - - // TODO: move to server side - $: if (browser && $user) goto(`/${$user.username}/receive`); </script> <div class="pt-10"> @@ -38,7 +32,11 @@ <div class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]"> <h1 class="text-2xl font-bold text-center">{$t('login.' + pageID)}</h1> - <form class="space-y-5" {action} method="POST"> + {#if form?.error} + Login failed + {/if} + + <form class="space-y-5" {action} method="POST" use:enhance> {#if $redirect} <input type="hidden" name="redirect" value={$redirect} /> {/if} |