Fix #178 Move role to URL

frontend/src/routes/register/[[studyId]]/+page.server.ts

@@ -5,7 +5,7 @@ import { validateEmail, validatePassword, validateUsername } from '$lib/utils/se
 import { redirect, type Actions } from '@sveltejs/kit';
 
 export const actions: Actions = {
-	register: async ({ request, fetch, params }) => {
+	register: async ({ request, fetch, params, url }) => {
 		const formData = await request.formData();
 		const study_idStr = params.studyId;
 		if (!study_idStr) return { message: 'Invalid request' };
@@ -55,6 +55,10 @@ export const actions: Actions = {
 		if (response.status === 422) return { message: 'Invalid request' };
 		if (!response.ok) return { message: 'Unknown error occurred' };
 
+		if (url.searchParams.has('role')) {
+			return redirect(303, `/register/${study_id}?role=${url.searchParams.get('role')}`);
+		}
+
 		return redirect(303, `/register/${study_id}`);
 	},
 	data: async ({ request, fetch, locals }) => {

frontend/src/routes/register/[[studyId]]/+page.svelte

@@ -4,7 +4,6 @@
 	import { displayDate } from '$lib/utils/date';
 	import { t } from '$lib/services/i18n';
 	import { Icon, Envelope, Key, UserCircle } from 'svelte-hero-icons';
-	import { browser } from '$app/environment';
 	import type { PageData } from './$types';
 	import Consent from '$lib/components/surveys/consent.svelte';
 	import type Study from '$lib/types/study';
@@ -20,7 +19,6 @@
 	let tutors = $state(data.tutors || []);
 	let isLoading = $state(false);
 	let selectedTutorEmail = $state('');
-	let is_tutor = $state(false);
 	const MAX_BIO_LENGTH = 100;
 	let remainingCharacters = $state(MAX_BIO_LENGTH);
 	let bio = $state('');
@@ -70,13 +68,6 @@
 		})()
 	);
 
-	let study_id: number | null = (() => {
-		if (!browser) return null;
-		let study_id_str = new URLSearchParams(window.location.search).get('study');
-		if (!study_id_str) return null;
-		return parseInt(study_id_str) || null;
-	})();
-
 	async function handleTutorSelection(tutor: any) {
 		selectedTutorEmail = tutor.email;
 		selectedTutor = tutor;
@@ -242,7 +233,7 @@
 			<a
 				class="button mt-8"
 				class:btn-disabled={!selectedStudy}
-				href="/register/{selectedStudy?.id}"
+				href="/register/{selectedStudy?.id}?role={data.role}"
 				data-sveltekit-reload
 			>
 				{$t('button.continue')}
@@ -327,15 +318,9 @@
 						/>
 					</div>
 				</label>
-				<div class="form-control">
-					<label for="role" class="label">
-						<span class="label-text">{$t('register.role')}</span>
-					</label>
-					<select class="select select-bordered" id="role" name="role" bind:value={is_tutor}>
-						<option value="2">{$t('register.roles.learner')}</option>
-						<option value="1">{$t('register.roles.tutor')}</option>
-					</select>
-				</div>
+				<select hidden id="role" name="role">
+					<option value={data.role === 'tutor' ? 1 : 2}></option>
+				</select>
 				<div class="form-control">
 					<button class="button mt-2">{$t('register.signup')}</button>
 				</div>

frontend/src/routes/register/[[studyId]]/+page.ts

@@ -3,7 +3,7 @@ import { getUsersAPI } from '$lib/api/users';
 import Study from '$lib/types/study';
 import type { Load } from '@sveltejs/kit';
 
-export const load: Load = async ({ parent, fetch, params }) => {
+export const load: Load = async ({ parent, fetch, params, url }) => {
 	const { user } = await parent();
 	console.log(user);
 
@@ -26,10 +26,19 @@ export const load: Load = async ({ parent, fetch, params }) => {
 	const users = await getUsersAPI(fetch);
 	const tutors = users.filter((user) => user.type === 1);
 
+	let role = 'learner';
+	if (url.searchParams.has('role')) {
+		const roleParam = url.searchParams.get('role');
+		if (roleParam && roleParam === 'tutor') {
+			role = 'tutor';
+		}
+	}
+
 	return {
 		studyError: !study,
 		study,
 		studies,
-		tutors
+		tutors,
+		role
 	};
 };