From 69cdaba2533fa35af3292a33677d7dc12422cc2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Thu, 4 Jan 2024 20:47:04 -0500
Subject: [PATCH] refactor(pages, components): move recaptcha bits to separate
 component

---
 components/recaptcha.vue | 33 +++++++++++++++++++++++++++++++++
 pages/auth/register.vue  | 40 +++++-----------------------------------
 2 files changed, 38 insertions(+), 35 deletions(-)
 create mode 100644 components/recaptcha.vue

diff --git a/components/recaptcha.vue b/components/recaptcha.vue
new file mode 100644
index 0000000..008d9e6
--- /dev/null
+++ b/components/recaptcha.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+	import { useChallengeV2, useRecaptchaProvider } from "vue-recaptcha";
+	useRecaptchaProvider();
+	const emit = defineEmits<{
+		(e: "verify", response: string): void;
+	}>();
+	const m = defineModel<number>("ts");
+	const d = defineModel<boolean>("done");
+
+	const { root, execute, onVerify, widgetID, onExpired } = useChallengeV2({
+		options: {
+			size: "invisible",
+		},
+	});
+	watch(
+		() => m.value,
+		() => {
+			execute();
+		},
+	);
+	onVerify((resp) => {
+		console.debug("onverify called", resp);
+		emit("verify", resp);
+	});
+</script>
+
+<template>
+	<div>
+		<div ref="root" />
+	</div>
+</template>
+
+<style scoped></style>
diff --git a/pages/auth/register.vue b/pages/auth/register.vue
index 284fdfc..c3602f2 100644
--- a/pages/auth/register.vue
+++ b/pages/auth/register.vue
@@ -6,6 +6,7 @@
 	import { useChallengeV2 } from "vue-recaptcha";
 	import { notification } from "ant-design-vue";
 	import termsOfServices from "~/components/tos.vue";
+	import Recaptcha from "~/components/recaptcha.vue";
 	useRecaptchaProvider();
 
 	interface FormState {
@@ -38,31 +39,14 @@
 
 	const dark = inject<boolean>("dark");
 
-	const { setValues, values, handleSubmit } = useForm({
+	const { setValues, values, handleSubmit, setFieldValue } = useForm({
 		validationSchema: vschema,
 		keepValuesOnUnmount: true,
 	});
 
-	const {
-		value: recaptchaValue,
-		errorMessage: recaptchaError,
-		name: recapName,
-		setValue: srv,
-	} = useField<string>("recaptcha", undefined, { syncVModel: true });
-
-	const { root, execute, onVerify, widgetID } = useChallengeV2({
-		options: {
-			size: "invisible",
-		},
-	});
-	onVerify((resp) => {
-		console.debug("onverify called", resp);
-		srv(resp);
-	});
 	const onFinish = handleSubmit(async (values: any, actions: any) => {
 		// log.debug(values, widgetID);
 		// log.debug(widgetID);
-		execute();
 		const { signUp } = useAuth();
 		let reso;
 		try {
@@ -75,22 +59,8 @@
 				});
 			}
 		}
-		// log.debug(reso);
-
-		/* try {
-{data: reso } = await useApiFetch("/auth/register", {
-method: "post",
-body: values
-})
-} catch (e: any) {
-// log.debug(reso.error.data)
-if (e.data) {
-notification[ "error" ]({
-	message: h("div", { innerHTML: reso.error.data.message })
-})
-}
-} */
 	});
+	const ts = ref(Date.now());
 </script>
 
 <template>
@@ -120,7 +90,7 @@ notification[ "error" ]({
 						@update:checked="
 							(n) => {
 								setValues({ agree: n });
-								if (!recaptchaValue) execute();
+								ts = Date.now();
 							}
 						"
 					>
@@ -130,7 +100,7 @@ notification[ "error" ]({
 				</vee-field>
 			</div>
 		</div>
-		<div ref="root" />
+		<recaptcha v-model:ts="ts" @verify="(res) => setFieldValue('recaptcha', res)" />
 		<a-row :align="'middle'" justify="center">
 			<a-col>
 				<a-button size="large" type="primary" html-type="submit">Sign me up!</a-button>