LivingDexTracker/src/lib/components/SignUp.svelte

<script lang="ts">
	import { createEventDispatcher } from 'svelte';
	const dispatch = createEventDispatcher();

	let email = '';
	let password = '';

	// Access the supabase client from the layout data
	export let supabase: any;

	async function signUpNewUser() {
		try {
			const { data, error } = await supabase.auth.signUp({
				email: email,
				password: password,
				options: {
					// Redirect URL after successful sign-up
					redirectTo: '/welcome'
				}
			});

			if (error) {
				console.error('Sign up error:', error);
				alert(`Sign up failed: ${error.message}`);
				return;
			}

			if (data) {
				// Emit signedUp event to notify parent component
				dispatch('signedUp', {});
			}
		} catch (err) {
			console.error('Sign up error:', err);
			alert('Sign up failed');
		}
	}
</script>

<form class="card-body">
	<div class="form-control">
		<label class="label">
			<span class="label-text">Email</span>
		</label>
		<input
			type="email"
			placeholder="email"
			class="input input-bordered"
			required
			bind:value={email}
		/>
	</div>
	<div class="form-control">
		<label class="label">
			<span class="label-text">Password</span>
		</label>
		<input
			type="password"
			placeholder="password"
			class="input input-bordered"
			required
			bind:value={password}
		/>
	</div>
	<div class="form-control mt-6">
		<button class="btn btn-primary" on:click={signUpNewUser}>Sign Up</button>
	</div>
</form>

<style>
	.card-body {
		padding: 0.5rem;
	}
</style>