From 059613490db9be904791686c49851ec1cc095774 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Tue, 26 Jul 2022 21:06:01 -0700 Subject: register endpoint --- package.json | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'package.json') diff --git a/package.json b/package.json index 2801ff01..6d3ad58a 100644 --- a/package.json +++ b/package.json @@ -14,14 +14,13 @@ "@sveltejs/adapter-auto": "next", "@sveltejs/kit": "next", "autoprefixer": "^10.4.7", - "got": "^12.2.0", "postcss": "^8.4.14", - "prettier": "^2.6.2", + "prettier": "^2.7.1", "prettier-plugin-svelte": "^2.7.0", - "svelte": "^3.44.0", + "svelte": "^3.49.0", "svelte-preprocess": "^4.10.7", "tailwindcss": "^3.1.6", - "vite": "^3.0.0" + "vite": "^3.0.3" }, "type": "module" } -- cgit v1.2.3 From 49e7185efd45add123e0dbfcab077772b5ff22f6 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Thu, 28 Jul 2022 21:22:25 -0700 Subject: save token in cookie --- package.json | 1 + pnpm-lock.yaml | 7 +++++++ src/components/RegisterOrLogin.svelte | 4 +++- src/hooks/index.js | 16 ++++++++++++++++ src/lib/socket.js | 1 - src/lib/store.js | 18 ++++++++++++++++-- src/routes/__layout.svelte | 4 ++++ src/routes/login.js | 21 ++++++++++++++++++++- 8 files changed, 67 insertions(+), 5 deletions(-) create mode 100644 src/hooks/index.js (limited to 'package.json') diff --git a/package.json b/package.json index 6d3ad58a..23bb6cb6 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@sveltejs/adapter-auto": "next", "@sveltejs/kit": "next", "autoprefixer": "^10.4.7", + "cookie": "^0.5.0", "postcss": "^8.4.14", "prettier": "^2.7.1", "prettier-plugin-svelte": "^2.7.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 72a53df0..9c34207f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,7 @@ specifiers: '@sveltejs/adapter-auto': next '@sveltejs/kit': next autoprefixer: ^10.4.7 + cookie: ^0.5.0 postcss: ^8.4.14 prettier: ^2.7.1 prettier-plugin-svelte: ^2.7.0 @@ -16,6 +17,7 @@ devDependencies: '@sveltejs/adapter-auto': 1.0.0-next.64 '@sveltejs/kit': 1.0.0-next.396_svelte@3.49.0+vite@3.0.3 autoprefixer: 10.4.7_postcss@8.4.14 + cookie: 0.5.0 postcss: 8.4.14 prettier: 2.7.1 prettier-plugin-svelte: 2.7.0_o3ioganyptcsrh6x4hnxvjkpqi @@ -371,6 +373,11 @@ packages: resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==} dev: true + /cookie/0.5.0: + resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==} + engines: {node: '>= 0.6'} + dev: true + /cssesc/3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte index 6cae8b5a..2334741d 100644 --- a/src/components/RegisterOrLogin.svelte +++ b/src/components/RegisterOrLogin.svelte @@ -7,7 +7,7 @@ export let page; - let username, password; + let username = "bob", password = "pw"; let revealPassword = false; @@ -20,6 +20,7 @@ let r = await post(url, { username, password }); if (!r.token) r = await post('/login', { username, password }); $token = r.token; + console.log("new token", r.token) auth(); goto('/receive'); }; @@ -42,6 +43,7 @@ required class="bg-primary p-4 rounded-2xl w-full" bind:value={username} + autofocus /> diff --git a/src/hooks/index.js b/src/hooks/index.js new file mode 100644 index 00000000..21e56052 --- /dev/null +++ b/src/hooks/index.js @@ -0,0 +1,16 @@ +import cookie from "cookie"; +export async function handle({ event, resolve }) { + let { request: { headers }, + } = event; + + const cookies = cookie.parse(headers.get("cookie") || ""); + let { token } = cookies; + event.locals = { token }; + + return resolve(event); +} + + +export const getSession = ({ locals: { token } }) => { + return { token }; +}; diff --git a/src/lib/socket.js b/src/lib/socket.js index 087addf9..9d0c472e 100644 --- a/src/lib/socket.js +++ b/src/lib/socket.js @@ -24,7 +24,6 @@ export const messages = (data) => ({ connected: auth, login() { - console.log('OY', data); user.set(data); } }); diff --git a/src/lib/store.js b/src/lib/store.js index 7b510748..62232f9d 100644 --- a/src/lib/store.js +++ b/src/lib/store.js @@ -1,6 +1,20 @@ -import { writable } from 'svelte/store'; +import { get, writable } from 'svelte/store'; +import { browser } from '$app/env'; + +const persisted = (k, i) => { + let s = writable( + browser && sessionStorage.getItem(k) && sessionStorage.getItem(k) !== 'undefined' + ? JSON.parse(sessionStorage.getItem(k)) + : i + ); + + s.subscribe((v) => browser && sessionStorage.setItem(k, JSON.stringify(v)) + ); + + return s; +}; export const rate = writable(); export const user = writable(); export const invoiceAmount = writable(); -export const token = writable(); +export const token = persisted('token'); diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index f5576edd..1af9679a 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -2,7 +2,11 @@ import '../app.css'; import { onMount } from 'svelte'; import { connect } from '$lib/socket'; + import { token } from "$lib/store"; + import { session } from "$app/stores"; + import { browser } from "$app/env"; + browser && ($token ||= $session.token); onMount(connect); diff --git a/src/routes/login.js b/src/routes/login.js index 771de9e1..db1fbb6c 100644 --- a/src/routes/login.js +++ b/src/routes/login.js @@ -1,5 +1,24 @@ import { post } from '$lib/utils'; +import cookie from 'cookie'; + +let maxAge = 30 * 24 * 60 * 60; export async function POST({ request }) { - return { body: await post('/login', await request.json()) }; + let body = await post('/login', await request.json()); + + let expires = new Date(); + expires.setSeconds(expires.getSeconds() + maxAge); + + return { + body, + headers: { + 'set-cookie': cookie.serialize('token', body.token, { + httpOnly: true, + maxAge, + sameSite: 'lax', + path: '/', + expires + }) + } + }; } -- cgit v1.2.3 From a038ce9711f8ae5945eba073c82aa2aeb2bcf5c3 Mon Sep 17 00:00:00 2001 From: secondl1ght <85003930+secondl1ght@users.noreply.github.com> Date: Fri, 29 Jul 2022 21:29:18 -0600 Subject: start hooking up invoice screen --- package.json | 1 + pnpm-lock.yaml | 18 ++- src/components/RegisterOrLogin.svelte | 7 +- src/hooks/index.js | 18 +-- src/lib/store.js | 4 +- src/routes/__layout.svelte | 8 +- src/routes/invoice.svelte | 253 ++++++++++++++++++++++++++++++++-- src/routes/receive.svelte | 22 +-- static/icons/arrow-left.svg | 3 + static/images/invoice.svg | 4 + tailwind.config.cjs | 3 +- 11 files changed, 298 insertions(+), 43 deletions(-) create mode 100644 static/icons/arrow-left.svg create mode 100644 static/images/invoice.svg (limited to 'package.json') diff --git a/package.json b/package.json index 23bb6cb6..d4312d1c 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "postcss": "^8.4.14", "prettier": "^2.7.1", "prettier-plugin-svelte": "^2.7.0", + "qr-code-styling": "1.6.0-rc.1", "svelte": "^3.49.0", "svelte-preprocess": "^4.10.7", "tailwindcss": "^3.1.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9c34207f..69b6d84e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,7 @@ specifiers: postcss: ^8.4.14 prettier: ^2.7.1 prettier-plugin-svelte: ^2.7.0 + qr-code-styling: 1.6.0-rc.1 svelte: ^3.49.0 svelte-preprocess: ^4.10.7 tailwindcss: ^3.1.6 @@ -15,12 +16,13 @@ specifiers: devDependencies: '@sveltejs/adapter-auto': 1.0.0-next.64 - '@sveltejs/kit': 1.0.0-next.396_svelte@3.49.0+vite@3.0.3 + '@sveltejs/kit': 1.0.0-next.398_svelte@3.49.0+vite@3.0.3 autoprefixer: 10.4.7_postcss@8.4.14 cookie: 0.5.0 postcss: 8.4.14 prettier: 2.7.1 prettier-plugin-svelte: 2.7.0_o3ioganyptcsrh6x4hnxvjkpqi + qr-code-styling: 1.6.0-rc.1 svelte: 3.49.0 svelte-preprocess: 4.10.7_nxvsp6sjiltnatqa6jdm4mr6zu tailwindcss: 3.1.6 @@ -121,8 +123,8 @@ packages: - supports-color dev: true - /@sveltejs/kit/1.0.0-next.396_svelte@3.49.0+vite@3.0.3: - resolution: {integrity: sha512-bKFpuzp9QxPkOIOEIeNeedvxEMORNqBPxUmoJXDP/Se7MrSfcxYiamjBcKrG+bgGNWmV39nD3EvUox+CXno/Ig==} + /@sveltejs/kit/1.0.0-next.398_svelte@3.49.0+vite@3.0.3: + resolution: {integrity: sha512-ONjHoRurnFUe+0lv0P9rZQpDuuJy4Cr/lDneoG+lkOR5/7gcvd03TlVdxLz1ZQAWPbgovm/PpshOvIUeC4n62A==} engines: {node: '>=16.9'} hasBin: true peerDependencies: @@ -1130,6 +1132,16 @@ packages: hasBin: true dev: true + /qr-code-styling/1.6.0-rc.1: + resolution: {integrity: sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==} + dependencies: + qrcode-generator: 1.4.4 + dev: true + + /qrcode-generator/1.4.4: + resolution: {integrity: sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==} + dev: true + /queue-microtask/1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} dev: true diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte index 2334741d..15be60cf 100644 --- a/src/components/RegisterOrLogin.svelte +++ b/src/components/RegisterOrLogin.svelte @@ -7,7 +7,8 @@ export let page; - let username = "bob", password = "pw"; + let username = 'bob', + password = 'pw'; let revealPassword = false; @@ -20,7 +21,7 @@ let r = await post(url, { username, password }); if (!r.token) r = await post('/login', { username, password }); $token = r.token; - console.log("new token", r.token) + console.log('new token', r.token); auth(); goto('/receive'); }; @@ -43,7 +44,7 @@ required class="bg-primary p-4 rounded-2xl w-full" bind:value={username} - autofocus + autofocus /> diff --git a/src/hooks/index.js b/src/hooks/index.js index 21e56052..6a9c8ec5 100644 --- a/src/hooks/index.js +++ b/src/hooks/index.js @@ -1,16 +1,16 @@ -import cookie from "cookie"; +import cookie from 'cookie'; export async function handle({ event, resolve }) { - let { request: { headers }, - } = event; + let { + request: { headers } + } = event; - const cookies = cookie.parse(headers.get("cookie") || ""); - let { token } = cookies; - event.locals = { token }; + const cookies = cookie.parse(headers.get('cookie') || ''); + let { token } = cookies; + event.locals = { token }; - return resolve(event); + return resolve(event); } - export const getSession = ({ locals: { token } }) => { - return { token }; + return { token }; }; diff --git a/src/lib/store.js b/src/lib/store.js index 62232f9d..6f4a9515 100644 --- a/src/lib/store.js +++ b/src/lib/store.js @@ -8,8 +8,7 @@ const persisted = (k, i) => { : i ); - s.subscribe((v) => browser && sessionStorage.setItem(k, JSON.stringify(v)) - ); + s.subscribe((v) => browser && sessionStorage.setItem(k, JSON.stringify(v))); return s; }; @@ -17,4 +16,5 @@ const persisted = (k, i) => { export const rate = writable(); export const user = writable(); export const invoiceAmount = writable(); +export const invoiceAmountFiat = writable(); export const token = persisted('token'); diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 1af9679a..6562db18 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -2,11 +2,11 @@ import '../app.css'; import { onMount } from 'svelte'; import { connect } from '$lib/socket'; - import { token } from "$lib/store"; - import { session } from "$app/stores"; - import { browser } from "$app/env"; + import { token } from '$lib/store'; + import { session } from '$app/stores'; + import { browser } from '$app/env'; - browser && ($token ||= $session.token); + browser && ($token ||= $session.token); onMount(connect); diff --git a/src/routes/invoice.svelte b/src/routes/invoice.svelte index 567aefbb..6dce84fe 100644 --- a/src/routes/invoice.svelte +++ b/src/routes/invoice.svelte @@ -1,15 +1,248 @@ -{#if $user} - {text} - {$invoiceAmount} - {$rate} - {$user.username} - {#each $user.payments as p} - {p.amount}
- {/each} -{/if} + + +
+
+ {#if $invoiceAmount && $invoiceAmountFiat && $rate && text} + +
+

Add a tip?

+ +
+ {tipAmountFormatted}{`(${tipAmountSats} SATS)`} + {tipPercent}% +
+ + { + customTipAmount = ''; + tipPercent = e.target.value; + }} + /> + +
+ {#each tipAmounts as amount} + + {/each} + +
+ $ + handleCustomTipAmount(e)} + class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto" + placeholder="Other" + /> + +
+
+
+ +
+ + +
+ Scan to pay insert name here + +
+ +
+
+ Invoice + {invoiceAmountFiatFormatted} + {`(${invoiceAmountFormatted} SATS)`} +
+ +
+ Tip + {tipAmountFormatted} + {`(${tipAmountSats} SATS)`} +
+ +
+ Total + {totalAmountFormatted} + {`(${totalAmountSats} SATS)`} +
+
+
+ {:else} +
+
+
+ {/if} +
+
+ + diff --git a/src/routes/receive.svelte b/src/routes/receive.svelte index 338bc06c..095a2ba3 100644 --- a/src/routes/receive.svelte +++ b/src/routes/receive.svelte @@ -2,7 +2,7 @@ // in the future we will want to allow users to set their fiat currency in the settings import { AppHeader, Icon } from '$comp'; import { goto } from '$app/navigation'; - import { invoiceAmount, rate } from '$lib/store'; + import { invoiceAmount, invoiceAmountFiat, rate } from '$lib/store'; let useFiat = true; let amountFiat = 0; @@ -10,6 +10,9 @@ let message = ''; $: $invoiceAmount = parseInt(amountSats === 0 ? amountFiat / ($rate / 100000000) : amountSats); + $: $invoiceAmountFiat = parseInt( + amountFiat === 0 ? amountSats * ($rate / 100000000) : amountFiat + ); $: amountSatsFormatted = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format( amountSats ); @@ -63,6 +66,7 @@ amountSats = amountSats.slice(0, amountSats.length - 1); if (amountSats.length === 0) { amountSats = 0; + amountFiat = 0; } } } else if (value !== '<' && parseInt(amountSats + value) > 100000000) { @@ -77,8 +81,8 @@ -{#if $rate} -
+
+ {#if $rate}
@@ -165,11 +169,7 @@ >
-
-{:else} -
-
-
-{/if} + {:else} +
+ {/if} +
diff --git a/static/icons/arrow-left.svg b/static/icons/arrow-left.svg new file mode 100644 index 00000000..64ded577 --- /dev/null +++ b/static/icons/arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/invoice.svg b/static/images/invoice.svg new file mode 100644 index 00000000..4c9cbce9 --- /dev/null +++ b/static/images/invoice.svg @@ -0,0 +1,4 @@ + + + + diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 86d5d1cf..4be763a3 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -6,7 +6,8 @@ module.exports = { colors: { primary: '#F5F7FA', secondary: '#858A92', - gradient: '#C3CFE2' + gradient: '#C3CFE2', + lightgrey: '#eaecef' } } }, -- cgit v1.2.3 From 926b1cd61d5bca6e6e9fd3420681d0829341a1e0 Mon Sep 17 00:00:00 2001 From: secondl1ght <85003930+secondl1ght@users.noreply.github.com> Date: Sat, 30 Jul 2022 12:59:47 -0600 Subject: add loading splash, start adding toast messages, qr code skeleton --- package.json | 1 + pnpm-lock.yaml | 6 ++++++ src/components/LoadingSplash.svelte | 7 +++++++ src/components/index.js | 1 + src/routes/__layout.svelte | 2 ++ src/routes/invoice/[amount].svelte | 28 +++++++++++++++++++++------- src/routes/receive.svelte | 18 ++++++++++++++---- 7 files changed, 52 insertions(+), 11 deletions(-) create mode 100644 src/components/LoadingSplash.svelte (limited to 'package.json') diff --git a/package.json b/package.json index d4312d1c..25369d0c 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "devDependencies": { "@sveltejs/adapter-auto": "next", "@sveltejs/kit": "next", + "@zerodevx/svelte-toast": "^0.7.2", "autoprefixer": "^10.4.7", "cookie": "^0.5.0", "postcss": "^8.4.14", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 69b6d84e..e57ddd3e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3,6 +3,7 @@ lockfileVersion: 5.4 specifiers: '@sveltejs/adapter-auto': next '@sveltejs/kit': next + '@zerodevx/svelte-toast': ^0.7.2 autoprefixer: ^10.4.7 cookie: ^0.5.0 postcss: ^8.4.14 @@ -17,6 +18,7 @@ specifiers: devDependencies: '@sveltejs/adapter-auto': 1.0.0-next.64 '@sveltejs/kit': 1.0.0-next.398_svelte@3.49.0+vite@3.0.3 + '@zerodevx/svelte-toast': 0.7.2 autoprefixer: 10.4.7_postcss@8.4.14 cookie: 0.5.0 postcss: 8.4.14 @@ -198,6 +200,10 @@ packages: - supports-color dev: true + /@zerodevx/svelte-toast/0.7.2: + resolution: {integrity: sha512-vWiY6IqsstcOoQ8PFBuFuxgPkj1JFAGhUF9gC7wLx7c5A9SSfdtxWs/39ekGSIeyJK0yqWhTcmzGrCEWSELzDw==} + dev: true + /abbrev/1.1.1: resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==} dev: true diff --git a/src/components/LoadingSplash.svelte b/src/components/LoadingSplash.svelte new file mode 100644 index 00000000..2ab4c739 --- /dev/null +++ b/src/components/LoadingSplash.svelte @@ -0,0 +1,7 @@ + + +
+ +
diff --git a/src/components/index.js b/src/components/index.js index febf8dac..e41c3d4c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -7,3 +7,4 @@ export { default as Icon } from './Icon.svelte'; export { default as Image } from './Image.svelte'; export { default as RegisterOrLogin } from './RegisterOrLogin.svelte'; export { default as AppHeader } from './AppHeader.svelte'; +export { default as LoadingSplash } from './LoadingSplash.svelte'; diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 6562db18..f91772e8 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -1,4 +1,5 @@ + diff --git a/src/routes/invoice/[amount].svelte b/src/routes/invoice/[amount].svelte index d1dea907..27140519 100644 --- a/src/routes/invoice/[amount].svelte +++ b/src/routes/invoice/[amount].svelte @@ -1,17 +1,13 @@ {#if $user} @@ -226,8 +232,14 @@ id="qr" class="border {showMobileTip ? 'border-gray-400' - : 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center" - /> + : 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center h-[300px] w-[250px] md:w-[300px] relative" + > +
+
@@ -273,6 +285,8 @@
+{:else} + {/if}