pin code input

4 files changed, 50 insertions, 18 deletions

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}