From f543d7cadbeb09e3bb325900020527537c3f3311 Mon Sep 17 00:00:00 2001
From: DavePk04 <Dave.Pikop.Pokam@ulb.be>
Date: Sat, 29 Mar 2025 16:53:48 +0100
Subject: [PATCH] UI: created tutor profile page
---
frontend/src/lang/en.json | 9 +-
frontend/src/lang/fr.json | 11 +-
frontend/src/routes/Header.svelte | 58 +++----
.../src/routes/tutor/profile/+page.svelte | 142 ++++++++++++++++++
frontend/src/routes/tutor/profile/+page.ts | 0
5 files changed, 186 insertions(+), 34 deletions(-)
create mode 100644 frontend/src/routes/tutor/profile/+page.svelte
create mode 100644 frontend/src/routes/tutor/profile/+page.ts
diff --git a/frontend/src/lang/en.json b/frontend/src/lang/en.json
index 348357fc..929a2b0c 100644
--- a/frontend/src/lang/en.json
+++ b/frontend/src/lang/en.json
@@ -9,7 +9,11 @@
"studies": "Studies"
},
"tutor": {
- "profile": "My profile"
+ "profile": "My profile",
+ "update": "Update",
+ "selectGender": "Select your gender",
+ "bio": "Biography",
+ "availabilities": "Availabilities"
},
"availability": "Availability",
"language": "Language",
@@ -52,7 +56,8 @@
"noCurrentOrFutureSessions": "No session in progress or planned",
"pastSessions": "Completed sessions",
"plannedSessions": "Scheduled sessions",
- "sessionAdded": "You have been added to a session with {users}"
+ "sessionAdded": "You have been added to a session with {users}",
+ "birthdate": "Birthdate"
},
"signup": {
"title": "Register",
diff --git a/frontend/src/lang/fr.json b/frontend/src/lang/fr.json
index e873b8c7..47c3c157 100644
--- a/frontend/src/lang/fr.json
+++ b/frontend/src/lang/fr.json
@@ -13,9 +13,13 @@
"users": "Utilisateurs",
"sessions": "Sessions",
"studies": "Études"
- },
+ },
"tutor": {
- "profile": "Mon profil"
+ "profile": "Mon profil",
+ "update": "Confirmer",
+ "selectGender": "Sélectionnez votre genre",
+ "bio": "Biographie",
+ "availabilities": "Disponibilités"
}
},
"chatbox": {
@@ -52,7 +56,8 @@
"actions": "Actions",
"date": "Date",
"participants": "Participants",
- "sessionAdded": "Vous avez été ajouté à une session avec {users}"
+ "sessionAdded": "Vous avez été ajouté à une session avec {users}",
+ "birthdate": "Date de naissance"
},
"login": {
"email": "E-mail",
diff --git a/frontend/src/routes/Header.svelte b/frontend/src/routes/Header.svelte
index f8282ce3..97086bcd 100644
--- a/frontend/src/routes/Header.svelte
+++ b/frontend/src/routes/Header.svelte
@@ -99,35 +99,35 @@
</li>
{/if}
{#if user?.type === 0}
- <li>
- <details>
- <summary class="p-3">
- <Icon src={Cog6Tooth} class="h-5 w-5" />
- </summary>
- <ul class="menu menu-sm dropdown-content absolute right-0 z-10">
- <li>
- <a data-sveltekit-reload href="/admin/users">
- {$t('header.admin.users')}
- </a>
- </li>
- <li>
- <a data-sveltekit-reload href="/admin/sessions">
- {$t('header.admin.sessions')}
- </a>
- </li>
- <li>
- <a data-sveltekit-reload href="/admin/studies">
- {$t('header.admin.studies')}
- </a>
- </li>
- <li>
- <a data-sveltekit-reload href="/logout" class="whitespace-nowrap">
- {$t('header.signout')}
- </a>
- </li>
- </ul>
- </details>
- </li>
+ <li>
+ <details>
+ <summary class="p-3">
+ <Icon src={Cog6Tooth} class="h-5 w-5" />
+ </summary>
+ <ul class="menu menu-sm dropdown-content absolute right-0 z-10">
+ <li>
+ <a data-sveltekit-reload href="/admin/users">
+ {$t('header.admin.users')}
+ </a>
+ </li>
+ <li>
+ <a data-sveltekit-reload href="/admin/sessions">
+ {$t('header.admin.sessions')}
+ </a>
+ </li>
+ <li>
+ <a data-sveltekit-reload href="/admin/studies">
+ {$t('header.admin.studies')}
+ </a>
+ </li>
+ <li>
+ <a data-sveltekit-reload href="/logout" class="whitespace-nowrap">
+ {$t('header.signout')}
+ </a>
+ </li>
+ </ul>
+ </details>
+ </li>
{:else if !user}
<li>
<a
diff --git a/frontend/src/routes/tutor/profile/+page.svelte b/frontend/src/routes/tutor/profile/+page.svelte
new file mode 100644
index 00000000..3825c59c
--- /dev/null
+++ b/frontend/src/routes/tutor/profile/+page.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+ import { t } from '$lib/services/i18n';
+ import type { PageData } from './$types';
+
+ let { data }: { data: PageData } = $props();
+
+ const formatBirthdate = (dateStr: string | undefined): string => {
+ if (!dateStr) return '';
+ const isoDate = dateStr.split('T')[0];
+ if (/^\d{4}-\d{2}-\d{2}$/.test(isoDate)) return isoDate;
+ const [day, month, year] = dateStr.split('/');
+ if (year?.length === 4) {
+ return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
+ }
+
+ return '';
+ };
+
+ let email = data.user?.email || '';
+ let nickname = data.user?.nickname || '';
+ let birthdate = formatBirthdate(
+ data.user?.birthdate ? data.user.birthdate.toString() : undefined
+ );
+ let gender = data.user?.gender || '';
+ let bio = data.user?.bio || '';
+ let availabilities = data.user?.availabilities
+ ? JSON.stringify(data.user.availabilities, null, 2)
+ : '';
+
+ function updateProfile() {
+ let parsedAvailabilities;
+ try {
+ parsedAvailabilities = availabilities ? JSON.parse(availabilities) : [];
+ } catch (error) {
+ alert($t('errors.invalidAvailabilities'));
+ return;
+ }
+
+ console.log({
+ email,
+ nickname,
+ birthdate,
+ gender,
+ bio,
+ availabilities: parsedAvailabilities
+ });
+ alert($t('profile.updatedSuccessfully'));
+ }
+</script>
+
+<h1 class="text-2xl font-bold text-center my-5">{$t('header.tutor.profile')}</h1>
+
+<div class="max-w-lg mx-auto bg-white shadow-md rounded-lg p-6">
+ <form on:submit|preventDefault={updateProfile}>
+ <div class="mb-4">
+ <label for="email" class="block text-sm font-medium text-gray-700">{$t('home.email')}</label>
+ <input
+ type="email"
+ id="email"
+ bind:value={email}
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+ required
+ />
+ </div>
+
+ <div class="mb-4">
+ <label for="nickname" class="block text-sm font-medium text-gray-700"
+ >{$t('home.nickname')}</label
+ >
+ <input
+ type="text"
+ id="nickname"
+ bind:value={nickname}
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+ required
+ />
+ </div>
+
+ <div class="mb-4">
+ <label for="birthdate" class="block text-sm font-medium text-gray-700"
+ >{$t('home.birthdate')}</label
+ >
+ <input
+ type="date"
+ id="birthdate"
+ bind:value={birthdate}
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+ required
+ />
+ </div>
+
+ <div class="mb-4">
+ <label for="gender" class="block text-sm font-medium text-gray-700"
+ >{$t('users.gender')}</label
+ >
+ <select
+ id="gender"
+ bind:value={gender}
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+ required
+ >
+ <option value="" disabled>{$t('header.tutor.selectGender')}</option>
+ <option value="male">{$t('users.genders.male')}</option>
+ <option value="female">{$t('users.genders.female')}</option>
+ <option value="other">{$t('users.genders.other')}</option>
+ </select>
+ </div>
+
+ <div class="mb-4">
+ <label for="bio" class="block text-sm font-medium text-gray-700">{$t('register.bio')}</label>
+ <textarea
+ id="bio"
+ rows="4"
+ bind:value={bio}
+ placeholder={$t('header.tutor.bio')}
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+ required
+ ></textarea>
+ </div>
+
+ <div class="mb-4">
+ <label for="availabilities" class="block text-sm font-medium text-gray-700"
+ >{$t('register.availabilities')}</label
+ >
+ <textarea
+ id="availabilities"
+ rows="4"
+ bind:value={availabilities}
+ placeholder={$t('header.tutor.availabilities')}
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+ required
+ ></textarea>
+ </div>
+
+ <button
+ type="submit"
+ class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md shadow-md focus:outline-none focus:ring focus:ring-indigo-200"
+ >
+ {$t('header.tutor.update')}
+ </button>
+ </form>
+</div>
diff --git a/frontend/src/routes/tutor/profile/+page.ts b/frontend/src/routes/tutor/profile/+page.ts
new file mode 100644
index 00000000..e69de29b
--
GitLab