put otpauth url in 2fa qr code

4 files changed, 62 insertions, 25 deletions

diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index d83ed21d..7177f353 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -10,7 +10,8 @@
 
 	let username = 'bob',
 		password = 'pw',
-		email = '[email protected]';
+		email = '[email protected]',
+		twofa = '';
 
 	let revealPassword = false;
 
@@ -89,6 +90,21 @@
 					</button>
 				</div>
 
+				{#if pageID === 'signIn'}
+					<div>
+						<label for="token" class="font-semibold">{$t('login.token')}</label>
+						<!-- svelte-ignore a11y-autofocus -->
+						<input
+							name="token"
+							type="text"
+							required
+							class="bg-primary p-4 rounded-2xl w-full"
+							bind:value={twofa}
+							autofocus={pageID === 'signIn'}
+						/>
+					</div>
+				{/if}
+
 				{#if pageID === 'register'}
 					<p class="text-secondary text-sm">
 						{$t('login.passwordRecommendation')}
diff --git a/src/locales/en.json b/src/locales/en.json
index 8443ca3c..76b93303 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -106,6 +106,7 @@
 		}
 	},
 	"login": {
+		"token": "2FA Token",
 		"username": "Username",
 		"password": "Password",
 		"email": "Email",
@@ -145,8 +146,8 @@
 			"showQR": "Show QR"
 		},
 		"settings": {
-			"oneTimeCode": "Enter one-time code to enable",
-			"accountId": "Account ID",
+      "oneTimeCode": "Enter one-time code",
+      "accountId": "Account Secret",
 			"header": "Settings",
 			"ACCOUNT": "ACCOUNT",
 			"POINT_OF_SALE": "POINT OF SALE",
diff --git a/src/routes/[username]/settings/_pos.svelte b/src/routes/[username]/settings/_pos.svelte
index 83a942bc..03f45771 100644
--- a/src/routes/[username]/settings/_pos.svelte
+++ b/src/routes/[username]/settings/_pos.svelte
@@ -27,9 +27,9 @@
 </div>
 
 <div>
-	<label for="btc-unit" class="font-bold block mb-1">{$t('user.settings.btcUnit')}</label>
-	<select disabled name="btc-unit" class="block py-3 w-full">
-		<option value="SATS">{$t('user.settings.satoshis')} (SAT)</option>
+	<label for="unit" class="font-bold block mb-1">{$t('user.settings.btcUnit')}</label>
+  <select name="unit" class="block py-3 w-full" bind:value={$user.unit}>
+		<option value="SAT">{$t('user.settings.satoshis')} (SAT)</option>
 		<option value="BTC">{$t('user.settings.bitcoin')} (BTC)</option>
 	</select>
 </div>
diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte
index 5b7aaf8e..0c5c7aa3 100644
--- a/src/routes/[username]/settings/_security.svelte
+++ b/src/routes/[username]/settings/_security.svelte
@@ -14,11 +14,17 @@
 	let tokenInput, pinInput;
 
 	$: if (settingPin) pinInput && tick().then(pinInput.focusFirstInput);
-	$: if (setting2fa) tokenInput && tick().then(tokenInput.focusFirstInput);
+	$: if (setting2fa || disabling2fa) tokenInput && tick().then(tokenInput.focusFirstInput);
+
+	let reset = () => {
+		token = '';
+		code = [];
+		return true;
+	};
 
 	let togglePin = () => (settingPin = !settingPin);
-	let toggleEnabling = () => (setting2fa = !setting2fa);
-	let toggleDisabling = () => (disabling2fa = !disabling2fa);
+	let toggleEnabling = () => reset() && (setting2fa = !setting2fa);
+	let toggleDisabling = () => reset() && (disabling2fa = !disabling2fa);
 
 	$: enable2fa(token);
 	let enable2fa = async (twoFa) => {
@@ -47,6 +53,8 @@
 			failure('Failed to disable 2fa, try again');
 		}
 	};
+
+	$: otpUri = `otpauth://totp/coinos:${$user.username}?secret=${$user.otpsecret}&period=30&digits=6&algorithm=SHA1&issuer=coinos`;
 </script>
 
 <div>
@@ -90,12 +98,15 @@
 
 <div>
 	{#if setting2fa}
-		<Qr text={$user.otpsecret} />
+		<a href={otpUri}>
+			<Qr text={otpUri} />
+		</a>
 
 		<div class="text-center my-4">
 			{$t('user.settings.accountId')}<br />
 			<b>{$user.otpsecret}</b>
 		</div>
+
 		<div class="text-center my-4">
 			{$t('user.settings.oneTimeCode')}<br />
 			<Pincode bind:code bind:value={token} bind:this={tokenInput}>
@@ -108,17 +119,15 @@
 			</Pincode>
 		</div>
 	{:else if disabling2fa}
-		<div class="text-center my-4">
-			{$t('user.settings.oneTimeCode')}<br />
-			<Pincode bind:code bind:value={token} bind:this={tokenInput}>
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-			</Pincode>
-		</div>
+		{$t('user.settings.oneTimeCode')}<br />
+		<Pincode bind:code bind:value={token} bind:this={tokenInput}>
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+		</Pincode>
 	{:else}
 		<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
 		<p class="text-secondary mb-1">
@@ -130,10 +139,21 @@
 				{$t('user.settings.twofaDisable')}
 			</button>
 		{:else}
-			<button type="button" class="primary" on:click={toggleEnabling}>
-				<Icon icon="mobile" style="mr-1" />
-				{$t('user.settings.twofaSetup')}
-			</button>
+			<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
+			<p class="text-secondary mb-1">
+				{$t('user.settings.twofaDescription')}
+			</p>
+			{#if $user.twofa}
+				<button type="button" class="primary" on:click={toggleDisabling}>
+					<Icon icon="mobile" style="mr-1" />
+					{$t('user.settings.twofaDisable')}
+				</button>
+			{:else}
+				<button type="button" class="primary" on:click={toggleEnabling}>
+					<Icon icon="mobile" style="mr-1" />
+					{$t('user.settings.twofaSetup')}
+				</button>
+			{/if}
 		{/if}
 	{/if}
 </div>