Merge pull request #79 from intuitem/translate/my-profile

translate: my profile view

frontend/messages/en.json

@@ -29,6 +29,7 @@
 	"associatedUsers": "Associated users",
 	"home": "Home",
 	"edit": "Edit",
+	"changePassword": "Change password",
 	"overview": "Overview",
 	"context": "Context",
 	"governance": "Governance",
@@ -234,6 +235,12 @@
 	"riskLevel": "Risk level",
 	"cancel": "Cancel",
 	"save": "Save",
+	"myUserGroups": "My user groups",
+	"changePasswordText": "You can change your password here. You'll need to log in with your new password after this operation",
+	"oldPassword": "Old password",
+	"newPassword": "New password",
+	"confirmNewPassword": "Confirm new password",
+	"label": "Label",
 	"NA": "N/A",
 	"threatAgentFactors": "Threat agent factors",
 	"vulnerabilityFactors": "Vulnerability factors",

frontend/messages/fr.json

@@ -29,6 +29,7 @@
 	"associatedUsers": "Utilisateurs associés",
 	"home": "Accueil",
 	"edit": "Modifier",
+	"changePassword": "Changer le mot de passe",
 	"overview": "Vue d'ensemble",
 	"context": "Contexte",
 	"governance": "Gouvernance",
@@ -130,7 +131,7 @@
 	"type": "Type",
 	"lcStatus": "Statut",
 	"internalReference": "Référence interne",
-	"isActive": "Est actif",
+	"isActive": "Actif",
 	"dateJoined": "Date d'adhésion",
 	"version": "Version",
 	"treatment": "Traitement",
@@ -234,6 +235,12 @@
 	"riskLevel": "Niveau de risque",
 	"cancel": "Annuler",
 	"save": "Enregistrer",
+	"myUserGroups": "Mes groupes d'utilisateurs",
+	"changePasswordText": "Vous pouvez changer votre mot de passe ici. Vous devrez vous reconnecter avec le nouveau mot de passe après cette opération",
+	"oldPassword": "Ancien mot de passe",
+	"newPassword": "Nouveau mot de passe",
+	"confirmNewPassword": "Confirmer le nouveau mot de passe",
+	"label": "Label",
 	"NA": "N/A",
 	"threatAgentFactors": "Facteurs liés aux agents de menace",
 	"vulnerabilityFactors": "Facteurs de vulnérabilité",

frontend/src/lib/components/SideBar/SideBarFooter.svelte

@@ -66,7 +66,7 @@
 			data-popup="popupUser"
 		>
 			<a
-				href="/profile"
+				href="/my-profile"
 				class="unstyled cursor-pointer flex items-center gap-2 w-full px-4 py-2.5 text-left text-sm hover:bg-gray-100 disabled:text-gray-500 text-gray-800"
 				data-testid="profile-button"><i class="fa-solid fa-address-card mr-2" />{m.myProfile()}</a
 			>

frontend/src/lib/utils/locales.ts

@@ -168,6 +168,8 @@ export function localItems(languageTag: string): LocalItems {
 		associatedDomains: m.associatedDomains({ languageTag: languageTag }),
 		associatedProjects: m.associatedProjects({ languageTag: languageTag }),
 		associatedUsers: m.associatedUsers({ languageTag: languageTag }),
+		changePassword: m.changePassword({ languageTag: languageTag }),
+		label: m.label({ languageTag: languageTag }),
 		NA: m.NA({ languageTag: languageTag }),
 		threatAgentFactors: m.threatAgentFactors({ languageTag: languageTag }),
 		vulnerabilityFactors: m.vulnerabilityFactors({ languageTag: languageTag }),

frontend/src/routes/(app)/profile/+page.svelte → frontend/src/routes/(app)/my-profile/+page.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import * as m from '$paraglide/messages';
+	import { toCamelCase } from '$lib/utils/locales';
+	import { localItems } from '$lib/utils/locales';
+	import { languageTag } from '$paraglide/runtime';
 
 	function filterUserData() {
 		const filtered = {};
@@ -8,7 +12,7 @@
 
 		sortedKeys.forEach((key) => {
 			if (!filter.includes(key) && Object.prototype.hasOwnProperty.call($page.data.user, key)) {
-				const str = key.charAt(0).toUpperCase() + key.slice(1).replace('_', ' ');
+				const str = toCamelCase(key);
 				if (key === 'date_joined') filtered[str] = new Date($page.data.user[key]).toLocaleString();
 				else filtered[str] = $page.data.user[key];
 			}
@@ -22,30 +26,30 @@
 	<div class="flex flex-row items-center justify-between p-2">
 		<h1 class="text-xl font-semibold">{$page.data.user.first_name} {$page.data.user.last_name}</h1>
 		<div>
-			<a href="profile/change-password" class="btn variant-filled-primary h-fit"
-				><i class="fa-solid fa-key mr-2" />Change password</a
+			<a href="my-profile/change-password" class="btn variant-filled-primary h-fit"
+				><i class="fa-solid fa-key mr-2" />{m.changePassword()}</a
 			>
-			<a href="/users/{$page.data.user.id}/edit" class="btn variant-filled-primary h-fit"
-				><i class="fa-solid fa-pen-to-square mr-2" />Edit</a
+			<a href="/users/{$page.data.user.id}/edit?next=/my-profile" class="btn variant-filled-primary h-fit"
+				><i class="fa-solid fa-pen-to-square mr-2" />{m.edit()}</a
 			>
 		</div>
 	</div>
 	<div class="flex flex-row w-full space-x-2">
 		<div class="flex flex-col w-1/2 border p-2 rounded-lg shadow-lg space-y-4">
 			{#each Object.entries(filterUserData()) as [label, value]}
 				<div class="flex flex-col">
-					<p class="font-semibold text-sm">{label}</p>
+					<p class="font-semibold text-sm">{localItems(languageTag())[label]}</p>
 					<p class="text-sm">{value}</p>
 				</div>
 			{/each}
 		</div>
 		<div class="flex flex-col w-1/2 border p-2 rounded-lg shadow-lg space-y-4">
-			<h2 class="text-xl mb-1 font-semibold">My users groups</h2>
+			<h2 class="text-xl mb-1 font-semibold">{m.myUserGroups()}</h2>
 			<div class="overflow-auto space-y-2">
 				{#each $page.data.user.user_groups as group}
 					<div class="flex flex-row items-center">
 						{#if group[1]}
-							<span class="bg-primary-300 p-1 rounded-lg font-medium text-xs mr-2">builtin</span>
+							<span class="bg-primary-300 p-1 rounded-lg font-medium text-xs mr-2">{m.builtin()}</span>
 						{/if}
 						<p class="font-semibold text-sm">{group[0]}</p>
 					</div>

frontend/src/routes/(app)/profile/change-password/+page.server.ts → frontend/src/routes/(app)/my-profile/change-password/+page.server.ts

@@ -43,6 +43,6 @@ export const actions: Actions = {
 		}
 
 		setFlash({ type: 'success', message: `Your password was successfully changed` }, event);
-		redirect(302, '/profile');
+		redirect(302, '/my-profile');
 	}
 };

frontend/src/routes/(app)/profile/change-password/+page.svelte → frontend/src/routes/(app)/my-profile/change-password/+page.svelte

@@ -3,6 +3,7 @@
 	import SuperForm from '$lib/components/Forms/Form.svelte';
 	import TextField from '$lib/components/Forms/TextField.svelte';
 	import { ChangePasswordSchema } from '$lib/utils/schemas';
+	import * as m from '$paraglide/messages';
 
 	export let data: PageData;
 </script>
@@ -13,8 +14,7 @@
 			<i class="fa-solid fa-key" />
 		</div>
 		<p class="text-gray-600 text-sm text-center">
-			You can change your password here.<br />
-			You'll need to log in with your new password after this operation.
+			{m.changePasswordText()}.
 		</p>
 		<!-- SuperForm with dataType 'form' -->
 		<div class="flex w-full">
@@ -25,19 +25,29 @@
 				let:form
 				validators={ChangePasswordSchema}
 			>
-				<TextField type="password" {form} field="old_password" label="Old password" />
-				<TextField type="password" {form} field="new_password" label="New password" />
+				<TextField type="password" {form} field="old_password" label={m.oldPassword()} />
+				<TextField type="password" {form} field="new_password" label={m.newPassword()} />
 				<TextField
 					type="password"
 					{form}
 					field="confirm_new_password"
-					label="Confirm new password"
+					label={m.confirmNewPassword()}
 				/>
-				<p class="pt-3">
-					<button class="btn variant-filled-primary font-semibold w-full" type="submit"
-						>Change Password</button
+				<div class="flex flex-row space-x-2 pt-3">
+					<a
+						class="btn bg-gray-400 text-white font-semibold w-full"
+						href="/my-profile"
+						data-testid="cancel-button"
+						type="button">
+						{m.cancel()}
+					</a>
+					<button class="btn variant-filled-primary font-semibold w-full" 
+					type="submit"
+					data-testid="save-button"
 					>
-				</p>
+					{m.changePassword()}
+					</button>
+				</div>
 			</SuperForm>
 		</div>
 	</div>

frontend/tests/functional/nav.test.ts

@@ -50,8 +50,8 @@ test('sidebar navigation tests', async ({ logedPage, analyticsPage, sideBar, pag
 		await expect(sideBar.profileButton).toBeVisible();
 		await sideBar.profileButton.click();
 		await expect(sideBar.morePanel).toHaveAttribute('inert');
-		await expect(page).toHaveURL('/profile');
-		await expect.soft(logedPage.pageTitle).toHaveText('Profile');
+		await expect(page).toHaveURL('/my-profile');
+		await expect.soft(logedPage.pageTitle).toHaveText('My profile');
 
 		await sideBar.moreButton.click();
 		await expect(sideBar.morePanel).not.toHaveAttribute('inert');