next/pages/auth/register.vue

<script lang="ts" setup>
	import { Field as veeField, useField, useForm } from "vee-validate";
	import * as yup from "yup";
	import { useRecaptchaProvider } from "vue-recaptcha";

	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 {
		username: string;
		password: string;
		email: string;
		recaptcha?: string | null;
		agree: boolean;
	}
	definePageMeta({
		auth: {
			unauthenticatedOnly: true,
			navigateAuthenticatedTo: "/",
		},
	});
	// const { execute } = useChallengeV3('submit');
	const vschema = yup.object<FormState>().shape({
		username: yup.string().ensure().trim().min(1).required("Username is required!"),
		password: yup.string().ensure().trim().min(8).required("Password is required!"),
		email: yup.string().ensure().trim().email().required("Email is required!"),
		// recaptcha: yup.string().required('Please verify you are human.'),
		agree: yup.boolean().oneOf([true], "Please agree to the terms.").required("Please agree to the terms."),
	});
	const dv: FormState = {
		username: "",
		password: "",
		email: "",
		agree: false,
	};

	const dark = inject<boolean>("dark");

	const { setValues, values, handleSubmit, setFieldValue } = useForm({
		validationSchema: vschema,
		keepValuesOnUnmount: true,
	});

	const onFinish = handleSubmit(async (values: any, actions: any) => {
		// log.debug(values, widgetID);
		// log.debug(widgetID);
		const { signUp } = useAuth();
		let reso;
		try {
			reso = await signUp(values, { callbackUrl: "/" });
		} catch (e: any) {
			// log.debug(e.data);
			if (e.data) {
				notification["error"]({
					message: h("div", { innerHTML: e.data.message }),
				});
			}
		}
	});
	const ts = ref(Date.now());
</script>

<template>
	<form @submit="onFinish">
		<vee-field name="username" v-slot="{ field, errorMessage, value }">
			<a-form-item label="Username" :name="field.name" :validate-status="!!errorMessage ? 'error' : ''" :help="errorMessage">
				<a-input v-bind="field" v-model:value="field.value" />
			</a-form-item>
		</vee-field>
		<vee-field name="email" v-slot="{ field, errorMessage, value }">
			<a-form-item label="Email address" :name="field.name" :validate-status="!!errorMessage ? 'error' : ''" :help="errorMessage">
				<a-input v-bind="field" v-model:value="field.value" />
			</a-form-item>
		</vee-field>
		<vee-field name="password" v-slot="{ field, errorMessage, value }">
			<a-form-item label="Password" :name="field.name" :validate-status="!!errorMessage ? 'error' : ''" :help="errorMessage">
				<a-input-password v-bind="field" v-model:value="field.value" />
			</a-form-item>
		</vee-field>

		<a-typography-title :level="4" :style="{ textAlign: 'center' }">Terms</a-typography-title>
		<div class="maxHeightScroller">
			<div style="height: 100%">
				<terms-of-services />
				<vee-field name="agree" :unchecked-value="false" type="checkbox" v-slot="{ field, value, errorMessage }">
					<a-checkbox
						@update:checked="
							(n) => {
								setValues({ agree: n });
								ts = Date.now();
							}
						"
					>
						I agree to the Terms and am <b>18 years of age or older.</b>
					</a-checkbox>
					<div style="color: red">{{ errorMessage }}</div>
				</vee-field>
			</div>
		</div>
		<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>
			</a-col>
		</a-row>
	</form>
</template>
<style scoped>
	.maxHeightScroller {
		max-height: 400px;
		overflow-y: scroll;
		display: block;
	}
</style>