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/tutor/register/+page.svelte

@@ -28,6 +28,16 @@
 	let remainingCharacters: number = MAX_BIO_LENGTH;
 
 	let timeslots = 0n;
+	type Availability = {
+		day: string;
+		start: string;
+		end: string;
+	};
+
+	let selectedWeekday: string = '';
+	let selectedTimeStart: string = '';
+	let selectedTimeEnd: string = '';
+	let availability: Availability[] = $state([]);
 
 	async function onData() {
 		if (!user) {
@@ -56,6 +66,25 @@
 		current_step++;
 	}
 
+	function addAvailability(): void {
+		if (selectedWeekday && selectedTimeStart && selectedTimeEnd) {
+			availability.push({
+				day: selectedWeekday,
+				start: selectedTimeStart,
+				end: selectedTimeEnd
+			});
+			selectedWeekday = '';
+			selectedTimeStart = '';
+			selectedTimeEnd = '';
+		} else {
+			console.error('Failed to add availability. Make sure all fields are selected.');
+		}
+	}
+
+	function removeAvailability(index: number): void {
+		availability.splice(index, 1);
+	}
+
 	async function onAvailabilities() {
 		if (!user) {
 			toastAlert('Failed to get current user');
@@ -410,7 +439,66 @@
 		</div>
 	{:else if current_step == 4}
 		<h2 class="my-4 text-xl">{$t('timeslots.setAvailabilities')}</h2>
-		<Timeslots bind:timeslots />
+		<!-- <Timeslots
+    bind:timeslots
+    on:change={() => {
+        onTimeslotSelectionChange(timeslots);
+    }}
+/> -->
+		<div class="form-control mt-4">
+			<label for="weekday" class="label">
+				<span class="label-text">Sélectionnez un jour de la semaine</span>
+			</label>
+			<select id="weekday" bind:value={selectedWeekday} class="select select-bordered w-full">
+				<option disabled value="">Jour de la semaine</option>
+				{#each ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'] as day}
+					<option value={day}>{day}</option>
+				{/each}
+			</select>
+		</div>
+
+		<div class="form-control mt-4">
+			<label for="timeStart" class="label">
+				<span class="label-text">Heure de début</span>
+			</label>
+			<select id="timeStart" bind:value={selectedTimeStart} class="select select-bordered w-full">
+				<option disabled value="">Heure de début</option>
+				{#each Array.from({ length: 24 }, (_, i) => `${i}:00`) as time}
+					<option value={time}>{time}</option>
+				{/each}
+			</select>
+		</div>
+
+		<div class="form-control mt-4">
+			<label for="timeEnd" class="label">
+				<span class="label-text">Heure de fin</span>
+			</label>
+			<select id="timeEnd" bind:value={selectedTimeEnd} class="select select-bordered w-full">
+				<option disabled value="">Heure de fin</option>
+				{#each Array.from({ length: 24 }, (_, i) => `${i}:00`) as time}
+					<option value={time}>{time}</option>
+				{/each}
+			</select>
+		</div>
+
+		<div class="form-control mt-4">
+			<button class="button" onclick={addAvailability}>Ajouter disponibilité</button>
+		</div>
+
+		{#if availability.length > 0}
+			<h3 class="mt-4 text-lg">Vos disponibilités</h3>
+			<ul class="list-disc pl-6">
+				{#each availability as { day, start, end }, index}
+					<li class="flex justify-between items-center">
+						<span>{day}: {start} - {end}</span>
+						<button onclick={() => removeAvailability(index)} class="text-red-500 ml-4"
+							>Supprimer</button
+						>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+
 		<div class="form-control mt-4">
 			<label class="label" for="calcom">
 				<span class="label-text">