Registration flow

Now, the tutor can set a general "Bio' during the registration process (/tutor/register/). The 'Bio' component is located in step 3 (Informations) of the registration flow.

Update (22/02):

• Successfully merged registration flows for learners and tutors into a single flow

frontend/src/routes/register/+page.svelte

@@ -4,6 +4,8 @@
 	import { Icon, Envelope, Key, UserCircle } from 'svelte-hero-icons';
 	import Typingtest from '$lib/components/tests/typingtest.svelte';
 	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
+	import { getUsersAPI } from '$lib/api/users';
 	import type { PageData } from './$types';
 	import { formatToUTCDate } from '$lib/utils/date';
 	import Consent from '$lib/components/surveys/consent.svelte';
@@ -12,6 +14,31 @@
 	let user = $state(data.user);
 	let message = $state('');
 
+	type Tutor = {
+		id: number;
+		email: string;
+		nickname: string;
+		type: number;
+		bio?: string | null;
+		profile_picture?: string | null;
+	};
+
+	let tutors: Tutor[] = [];
+
+	let isLoading = true;
+	async function fetchTutors() {
+		isLoading = true;
+		try {
+			const users = await getUsersAPI(fetch);
+			tutors = [...users.filter((user) => user.type === 1)];
+			console.log('Filtered tutors:', tutors);
+		} catch (error) {
+			console.error('Error fetching tutors:', error);
+		} finally {
+			isLoading = false;
+		}
+	}
+
 	let current_step = $state(
 		(() => {
 			if (user == null) {
@@ -20,7 +47,8 @@
 			} else if (!user.home_language || !user.target_language || !user.birthdate || !user.gender) {
 				return 3;
 			} else {
-				return 5;
+				fetchTutors();
+				return 4;
 			}
 		})()
 	);
@@ -228,12 +256,35 @@
 				</div>
 			</div>
 			<div class="form-control">
-				<button class="button mt-4">{$t('button.submit')}</button>
+				<button class="button mt-4" onclick={fetchTutors}>{$t('button.submit')}</button>
 			</div>
 		</form>
 	{:else if current_step == 4}
-		<h2 class="my-4 text-xl">This page is disabled. Please continue.</h2>
-		<button onclick={() => current_step++}>{$t('button.continue')}</button>
+		<pre>{JSON.stringify(tutors, null, 2)}</pre>
+		{#if isLoading}
+			<p>Loading tutors...</p>
+		{:else if tutors.length > 0}
+			<ul class="space-y-4">
+				{#each tutors as tutor}
+					<li class="p-4 border rounded shadow-sm">
+						<div class="flex items-center">
+							<img
+								src={tutor.profile_picture || '/default-profile.png'}
+								alt={tutor.nickname || 'Tutor'}
+								class="w-12 h-12 rounded-full mr-4"
+							/>
+							<div>
+								<h3 class="font-bold text-lg">{tutor.nickname}</h3>
+								<p class="text-sm text-gray-600">{tutor.email}</p>
+								<p class="text-sm">{tutor.bio || 'No bio available.'}</p>
+							</div>
+						</div>
+					</li>
+				{/each}
+			</ul>
+		{:else}
+			<p>No tutors are currently available.</p>
+		{/if}
 	{:else if current_step == 5}
 		<div class="text-center">
 			<p class="text-center">