aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/AppHeader.svelte49
-rw-r--r--src/components/LandingHeader.svelte9
-rw-r--r--src/components/LandingHero.svelte19
-rw-r--r--src/components/LocationsMap.svelte2
-rw-r--r--src/components/Numpad.svelte11
-rw-r--r--src/components/Qr.svelte19
-rw-r--r--src/components/RegisterOrLogin.svelte20
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}
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-15 12:58:30 +0000