refactor(pages, components): move recaptcha bits to separate component

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>

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>