pin code input

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}