diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 12 | ||||
| -rw-r--r-- | src/routes/+layout.svelte | 4 | ||||
| -rw-r--r-- | src/routes/[username]/+page.svelte | 2 | ||||
| -rw-r--r-- | src/routes/[username]/settings/+page.svelte | 6 | ||||
| -rw-r--r-- | src/routes/[username]/settings/_security.svelte | 56 |
6 files changed, 61 insertions, 20 deletions
diff --git a/package.json b/package.json index 90ec68de..ea644c8b 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "qr-code-styling": "1.6.0-rc.1", "svelte": "^3.49.0", "svelte-outclick": "^3.1.0", + "svelte-pincode": "^2.1.1", "svelte-preprocess": "^4.10.7", "sveltekit-i18n": "^2.2.2", "tailwindcss": "^3.1.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1f75fed0..d18d6527 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,6 +13,7 @@ specifiers: qr-code-styling: 1.6.0-rc.1 svelte: ^3.49.0 svelte-outclick: ^3.1.0 + svelte-pincode: ^2.1.1 svelte-preprocess: ^4.10.7 sveltekit-i18n: ^2.2.2 tailwindcss: ^3.1.6 @@ -31,9 +32,10 @@ devDependencies: qr-code-styling: 1.6.0-rc.1 svelte: 3.49.0 svelte-outclick: 3.1.0 + svelte-pincode: 2.1.1 svelte-preprocess: 4.10.7_nxvsp6sjiltnatqa6jdm4mr6zu sveltekit-i18n: [email protected] - tailwindcss: 3.1.6 + tailwindcss: [email protected] vite: 3.0.3 packages: @@ -1439,6 +1441,10 @@ packages: resolution: {integrity: sha512-1p/4UAuBfgfltMByTXjE3wbNAYaPihsB9HkhYrKgkiUgZSUtQ+Tpr/gxLu0LIsgft1EKt1izWg/VfzO+f5lQUA==} dev: true + /svelte-pincode/2.1.1: + resolution: {integrity: sha512-ywwoKOJ1hcneOd/+K3Ji05pg9CjbQU+3l1JpWi5Yrb611LUwwC7rGeXNLVH8/NPiXGGR44styCyKGaIFcKAYEA==} + dev: true + /svelte-preprocess/4.10.7_nxvsp6sjiltnatqa6jdm4mr6zu: resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==} engines: {node: '>= 9.11.2'} @@ -1505,10 +1511,12 @@ packages: svelte: 3.49.0 dev: true - /tailwindcss/3.1.6: + /tailwindcss/[email protected]: resolution: {integrity: sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==} engines: {node: '>=12.13.0'} hasBin: true + peerDependencies: + postcss: ^8.0.9 dependencies: arg: 5.0.2 chokidar: 3.5.3 diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 8ebf6824..80f233bb 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -43,7 +43,7 @@ <SvelteToast options={{ reversed: true, intro: { y: 192 } }} /> <slot /> -<style> +<style global> :root { --toastContainerTop: auto; --toastContainerRight: auto; @@ -51,4 +51,6 @@ --toastContainerLeft: calc(50vw - 8rem); --toastBackground: #292929; } + + button.primary { @apply rounded-full border py-2 font-bold my-4 flex px-4 bg-white mx-auto hover:bg-primary } </style> diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte index f2117be2..a6066424 100644 --- a/src/routes/[username]/+page.svelte +++ b/src/routes/[username]/+page.svelte @@ -43,7 +43,7 @@ <div class="xl:ml-[calc(15vw-48px)] space-y-2 w-full md:w-72"> <h1 class="text-3xl font-bold">{data.username}</h1> - <p class="text-secondary">{$t('user.addressGoesHere')}</p> + <p class="text-secondary">{$user.address}</p> <!-- we need to hook this up diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte index c6d7d3c0..aa19c68f 100644 --- a/src/routes/[username]/settings/+page.svelte +++ b/src/routes/[username]/settings/+page.svelte @@ -47,12 +47,10 @@ <svelte:component this={comp} /> </div> <div class="fixed bottom-0 bg-white shadow border w-full"> - <button - type="submit" - class="rounded-full border py-2 font-bold my-4 flex px-4 bg-white mx-auto hover:bg-primary" - > + <button type="submit" class="primary"> <Icon icon="save" style="w-6 h-6 mr-1" /> <div class="my-auto">Save Settings</div> </button> </div> </form> + diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte index 8f0dc273..65f73a10 100644 --- a/src/routes/[username]/settings/_security.svelte +++ b/src/routes/[username]/settings/_security.svelte @@ -1,6 +1,18 @@ <script> + import { tick } from "svelte"; import { t } from '$lib/translations'; import { Icon } from '$comp'; + import { Pincode, PincodeInput } from 'svelte-pincode'; + import { user } from '$lib/store'; + + let settingPin, setting2fa; + let togglePin = () => (settingPin = !settingPin); + let toggle2fa = () => (setting2fa = !setting2fa); + let code = []; + let pin = ''; + let pinInput; + + $: if (settingPin) pinInput && tick().then(pinInput.focusFirstInput) </script> <div> @@ -8,9 +20,24 @@ <p class="text-secondary mb-1"> {$t('user.settings.securityPINDescription')} </p> - <button type="button" class="p-3 border rounded-3xl font-bold flex justify-center items-center" - ><Icon icon="lock" style="mr-1" /> {$t('user.settings.setPIN')}</button - > + {#if settingPin} + <div class="flex my-4"> + <div class="mx-auto"> + <Pincode bind:code bind:value={$user.pin} bind:this={pinInput}> + <PincodeInput /> + <PincodeInput /> + <PincodeInput /> + <PincodeInput /> + <PincodeInput /> + <PincodeInput /> + </Pincode> + </div> + </div> + {:else} + <button type="button" class="primary" on:click={togglePin} + ><Icon icon="lock" style="mr-1" /> {$t('user.settings.setPIN')}</button + > + {/if} </div> <div> @@ -27,12 +54,17 @@ </select> </div> -<div> - <span class="font-bold mb-1">{$t('user.settings.twofa')}</span> - <p class="text-secondary mb-1"> - {$t('user.settings.twofaDescription')} - </p> - <button type="button" class="p-3 border rounded-3xl font-bold flex justify-center items-center" - ><Icon icon="mobile" style="mr-1" /> {$t('user.settings.twofaSetup')}</button - > -</div> +{#if setting2fa} + QR +{:else} + <div> + <span class="font-bold mb-1">{$t('user.settings.twofa')}</span> + <p class="text-secondary mb-1"> + {$t('user.settings.twofaDescription')} + </p> + <button type="button" class="primary"> + <Icon icon="mobile" style="mr-1" /> + {$t('user.settings.twofaSetup')} + </button> + </div> +{/if} |