add email form submit for verifying

6 files changed, 35 insertions, 10 deletions

diff --git a/src/lib/utils.js b/src/lib/utils.js
index 80f7fe07..d510195b 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -231,3 +231,9 @@ export function ss(str1, str2) {
 
 	return 0.0;
 }
+
+export const validateEmail = (email) => {
+  const re =
+    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return re.test(email);
+};
\ No newline at end of file
diff --git a/src/locales/es.json b/src/locales/es.json
index e151ec1a..fe5ee75f 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -169,7 +169,7 @@
 		"scanToPayBTC": "Escanea para pagar en bitcoin",
 		"this": "Esta",
 		"lightningAddress": "dirección relámpago",
-		"likeAnEmail": "es como un correo electrónico para bitcoin. Puede publicarlo en su sitio web o tarjetas de presentación y usarlo varias veces.",
+		"likeAnEmail": "es como un correo electrónico para bitcoin. Puede arlo en su sitio web o tarjetas de presentación y usarlo varias veces.",
 		"dashboard": {
 			"dashboard": "Tablero",
 			"accountBalance": "Saldo",
diff --git a/src/routes/(app)/+layout.server.js b/src/routes/(app)/+layout.server.js
index 881dbccc..ee4ce550 100644
--- a/src/routes/(app)/+layout.server.js
+++ b/src/routes/(app)/+layout.server.js
@@ -1,6 +1,6 @@
 import { error, redirect } from '@sveltejs/kit';
 import { get, post, auth, protectedRoutes } from '$lib/utils';
-import { PUBLIC_BTC as btc } from '$env/static/public';
+import { _BTC as btc } from '$env/static/public';
 
 export async function load({ cookies, request, url, params }) {
 	let { pathname } = url;
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.server.js b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
index dd16459f..361a9f85 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
@@ -7,7 +7,7 @@ export function load({ params, url }) {
 }
 
 export const actions = {
-	default: async ({ cookies, request }) => {
+	save: async ({ cookies, request }) => {
 		let form = Object.fromEntries(await request.formData());
 		let user = { ...(await get('/me', auth(cookies))), ...form };
 
@@ -18,5 +18,16 @@ export const actions = {
 		}
 
 		return { user, success: true };
+	},
+
+	email: async({cookies, request }) => {
+		let form = Object.fromEntries(await request.formData());
+		let user = { ...(await get('/me', auth(cookies))), ...form };
+		
+		try {
+			({ user } = await post('/email/verify', user, auth(cookies)))
+		} catch (e) {
+			return fail(400, { message: e.message})
+		}
 	}
 };
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
index 0241d940..1189053f 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
@@ -5,7 +5,6 @@
 
 	import { Icon, Spinner, Pin } from '$comp';
 	import { t } from '$lib/translations';
-	import { fail, post, success } from '$lib/utils';
 	import { avatar, banner, password, pin } from '$lib/store';
 	import { upload } from '$lib/upload';
 	import { page } from '$app/stores';
@@ -66,7 +65,12 @@
 				await upload($banner.file, $banner.type, $banner.progress, token);
 				await fetch(`/api/public/${id}-banner.webp`, { cache: 'reload', mode: 'no-cors' });
 			}
-			
+
+			if (!validateEmail(email)) {
+				user.email = null;
+				throw new Error("Invalid email");
+			}
+
 			let event = {
 				pubkey: user.pubkey,
 				created_at: Math.floor(Date.now() / 1000),
@@ -114,6 +118,7 @@
 <form
 	method="POST"
 	class="mb-[154px]"
+	action="?/save"
 	on:submit|preventDefault={handleSubmit}
 	bind:this={formElement}
 >
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
index 661ec7d8..31ea80c1 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
@@ -4,6 +4,8 @@
 	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
 
+	import { auth, post } from '$lib/utils';
+
 	export let user;
 	let { id } = user;
 	let selectedTheme = 1;
@@ -23,8 +25,9 @@
 		$colorTheme = colors.color1 + ' ' + colors.color2;
 	};
 
-	let handleConfirmEmailClick = (email) => {
+	let handleConfirmEmailClick = async (email) => {
 		console.log("CLICKED", email)
+		
 	}
 
 	let handleConfirmPhoneClick = (phone) => {
@@ -88,17 +91,17 @@
 
 <div>
 	<label for="email" class="font-bold mb-1 block">{$t('user.settings.email')}</label>
-	<div class="flex flex-row">
+	<form action="?/email" method="post" class="flex flex-row">
 		<input type="text" name="email" bind:value={user.email} />
-		<button type="button" class="border-2 border-black rounded-xl font-semibold ml-3.5 mx-auto p-1 hover:opacity-80" on:click={() => handleConfirmEmailClick(user.email)}>confirm your email</button>
-	</div>
+		<button type="submit" class="border-2 border-black rounded-xl font-semibold ml-3.5 mx-auto p-1 hover:opacity-80" on:click={() => handleConfirmEmailClick(user.email)}>verify email</button>
+	</form>
 </div>
 
 <div>
 	<label for="phone" class="font-bold mb-1 block">{$t('user.settings.phone')}</label>
 	<div class="flex flex-row">
 		<input type="tel" name="phone" bind:value={user.phone} />
-		<button type="button" class="border-2 border-black rounded-xl font-semibold ml-3.5 mx-auto p-1 hover:opacity-80" on:click={() => handleConfirmPhoneClick(user.phone)}>confirm your number</button>
+		<button type="button" class="border-2 border-black rounded-xl font-semibold ml-3.5 mx-auto p-1 hover:opacity-80" on:click={() => handleConfirmPhoneClick(user.phone)}>verify phone</button>
 	</div>
 </div>