thats-me/frontend/_src/pages/SignUpPage.vue

<template>
	<q-page padding class="flex flex-center">
		<q-card style="width: 400px">
			<q-card-section>
				<div class="text-h6">Sign Up</div>
			</q-card-section>
			<q-card-section>
				<q-form @submit="onSubmit" class="q-gutter-md">
					<q-input v-model="firstName" label="First Name" filled :rules="[val => !!val || 'First name is required']" />
					<q-input v-model="lastName" label="Last Name" filled :rules="[val => !!val || 'Last name is required']" />
					<!-- Add gender selection -->
					<q-select v-model="gender" :options="genderOptions" label="Gender" filled
						:rules="[val => !!val || 'Please select a gender']" />
					<q-input v-model="email" type="email" label="Email" filled :rules="[
						val => !!val || 'Email is required',
						val => /^[^@]+@[^@]+\.[^@]+$/.test(val) || 'Please enter a valid email'
					]" />
					<q-input v-model="password" type="password" label="Password" filled :rules="[
						val => !!val || 'Password is required',
						val => val.length >= 8 || 'Password must be at least 8 characters'
					]" />
					<q-input v-model="confirmPassword" type="password" label="Confirm Password" filled :rules="[
						val => !!val || 'Please confirm your password',
						val => val === password || 'Passwords do not match'
					]" />
					<q-checkbox v-model="termsAccepted" label="I agree to the Terms of Service">
						<template v-slot:default>
							I agree to the <a href="#" @click.prevent="showTerms = true" class="text-primary">Terms of Service</a>
						</template>
					</q-checkbox>
					<div class="q-mt-md">
						<q-btn label="Sign Up" type="submit" color="primary" class="full-width" :loading="loading"
							:disable="!termsAccepted" />
					</div>
					<div class="text-center q-mt-sm">
						Already have an account? <router-link to="/login" class="text-primary">Log in</router-link>
					</div>
				</q-form>
			</q-card-section>
			<q-dialog v-model="successDialog">
				<q-card>
					<q-card-section>
						<div class="text-h6">Registration Successful</div>
					</q-card-section>
					<q-card-section>
						<p>Your account has been created successfully. You can now log in.</p>
					</q-card-section>
					<q-card-actions align="right">
						<q-btn flat label="Go to Login" color="primary" v-close-popup @click="goToLogin" />
					</q-card-actions>
				</q-card>
			</q-dialog>
			<q-dialog v-model="showTerms">
				<q-card style="width: 700px; max-width: 80vw">
					<q-card-section>
						<div class="text-h6">Terms of Service</div>
					</q-card-section>
					<q-card-section style="max-height: 70vh" class="scroll">
						<p>These Terms of Service ("Terms") govern your use of our website and services.</p>
						<p>By using our services, you agree to these Terms. Please read them carefully.</p>
						<h6 class="text-subtitle1 q-mt-md">1. Your Account</h6>
						<p>You are responsible for safeguarding your account and for any activities or actions under your account.
						</p>
						<h6 class="text-subtitle1 q-mt-md">2. Privacy</h6>
						<p>Our Privacy Policy explains how we treat your personal data and protect your privacy.</p>
						<!-- Add more terms as needed -->
						<h6 class="text-subtitle1 q-mt-md">3. Termination</h6>
						<p>We may terminate or suspend your account at any time for any reason.</p>
					</q-card-section>
					<q-card-actions align="right">
						<q-btn flat label="Close" color="primary" v-close-popup />
					</q-card-actions>
				</q-card>
			</q-dialog>
		</q-card>
	</q-page>
</template>
<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
export default {
	name: 'SignUpPage',
	setup() {
		const router = useRouter()
		const firstName = ref('')
		const lastName = ref('')
		const email = ref('')
		const password = ref('')
		const confirmPassword = ref('')
		const termsAccepted = ref(false)
		const loading = ref(false)
		const successDialog = ref(false)
		const showTerms = ref(false)
		// Add gender field
		const gender = ref('')
		const genderOptions = [
			'Male',
			'Female',
			'Non-binary',
			'Prefer not to say'
		]
		const onSubmit = () => {
			loading.value = true
			// Here you would call your API to register the user
			console.log('Sign up attempt with:', {
				firstName: firstName.value,
				lastName: lastName.value,
				gender: gender.value,
				email: email.value,
				password: password.value
			})
			// Simulate API call
			setTimeout(() => {
				loading.value = false
				successDialog.value = true
			}, 1500)
		}
		const goToLogin = () => {
			router.push('/login')
		}
		return {
			firstName,
			lastName,
			gender,
			genderOptions,
			email,
			password,
			confirmPassword,
			termsAccepted,
			loading,
			onSubmit,
			successDialog,
			showTerms,
			goToLogin
		}
	}
}
</script>