refactored user settings page

src/lib/i18n/lang/en.json

@@ -9,7 +9,9 @@
                 "company_address_city": "Company city",
                 "company_address_postal_code": "Company postal code",
                 "company_address_country": "Company country",
-                "company_default_vat": "Company tax number"
+                "company_default_vat": "Company tax number",
+                "app_menu_left": "Menu on the left",
+                "app_pages_top_of_table": "Display pages on top of tables"
             },
             "users_groups": {
                 "admin_group_warning": "⚠️ This group has no restrictions as it is defined as a mink administrator.",
@@ -120,7 +122,8 @@
             "permission_zone": "Permission zone",
             "user": "User",
             "user_count": "Users count",
-            "generic": "Generic"
+            "generic": "Generic",
+            "lang": "Language"
         },
         "time": {
             "hours": "Hours"
@@ -186,6 +189,12 @@
             "rcu": "Read, create and update",
             "rcud": "Read, create, update and delete",
             "is_admin": "Is administrator"
+        },
+        "user": {
+            "update_personal_parameters": "Update my profile parameters",
+            "personal_parameters": "My profile parameters",
+            "mink_personal_parameters": "Personal mink parameters",
+            "updated_personal_parameters": "Updated settings"
         }
     },
     "scm": {

src/lib/i18n/lang/fr.json

@@ -9,7 +9,9 @@
                 "company_default_vat": "TVA Appliquée par défaut",
                 "company_address_postal_code": "Code postal de la société",
                 "company_address_country": "Pays de la société",
-                "company_name": "Nom de la société"
+                "company_name": "Nom de la société",
+                "app_menu_left": "Menu à gauche",
+                "app_pages_top_of_table": "Affichage des pages en haut des tables"
             },
             "users_groups": {
                 "lead": "Groupes d'utilisateurs",
@@ -169,7 +171,8 @@
             "permission_zone": "Zone de permission",
             "user": "Utilisateur",
             "user_count": "Nombre d'utilisateurs",
-            "generic": "Général"
+            "generic": "Général",
+            "lang": "Langue"
         },
         "time": {
             "hours": "Heures"
@@ -261,6 +264,12 @@
             "rcu": "Lire, créer et modifier",
             "rcud": "Lire, créer, modifier et supprimer",
             "is_admin": "Est administrateur"
+        },
+        "user": {
+            "update_personal_parameters": "Modifier les paramètres de mon profil",
+            "personal_parameters": "Paramètres de mon profil",
+            "mink_personal_parameters": "Paramètres personels de mink",
+            "updated_personal_parameters": "Paramètres mis à jour"
         }
     },
     "scm": {

src/routes/app/(base)/me/+page.server.ts

@@ -1,32 +1,40 @@
-import type { user_settings_keys } from "@prisma/client";
 import type { Actions } from "./$types";
-
 import { fail } from "@sveltejs/kit";
-import Prisma from "@prisma/client";
 
 export const actions: Actions = {
     updateUserSettings: async ({ request, locals }) => {
 
-        const form = await request.formData();
+        if(locals.user === null)
+            return fail(401, { updateUserSettings: { error: "errors.app.user_settings.update.not_authenticated" }});
 
-        try
-        {
-            const key = form.get("key")?.toString();
-            let value = form.get("value")?.toString();
+        const form = await request.formData();
 
-            if(form.has("checkbox"))
-                value = form.has("value") ? "true" : "false";
+        const appLanguage = form.get("app_language")?.toString();
 
-            if(key === undefined || value === undefined)
-                throw "errors.app.user_settings.update.missing_key_or_value";
+        if(appLanguage === undefined || ["fr", "en"].includes(appLanguage) === false)
+            return fail(400, { updateUserSettings: { error: "errors.app.user_settings.update.no_app_language" }});
 
-            if(Object.keys(Prisma.user_settings_keys).indexOf(key) === -1)
-                throw "errors.app.user_settings.update.invalid_key";
+        const appMenuLeft = form.has("app_menu_left") ? "true" : "false";
+        const appPagesTopOfTable = form.has("app_pages_top_of_table") ? "true" : "false";
 
+        try
+        {
             await locals.prisma.user_settings.upsert({
-                where: { user_id_key: { key: key as user_settings_keys, user_id: locals.user!.id }},
-                create: { key: key as user_settings_keys, value, user_id: locals.user!.id },
-                update: { value }
+                where: { user_id_key: { key: "app_language", user_id: locals.user!.id }},
+                create: { key: "app_language", value: appLanguage, user_id: locals.user!.id },
+                update: { value: appLanguage }
+            });
+
+            await locals.prisma.user_settings.upsert({
+                where: { user_id_key: { key: "app_menu_left", user_id: locals.user!.id }},
+                create: { key: "app_menu_left", value: appMenuLeft, user_id: locals.user!.id },
+                update: { value: appMenuLeft }
+            });
+
+            await locals.prisma.user_settings.upsert({
+                where: { user_id_key: { key: "app_pages_top_of_table", user_id: locals.user!.id }},
+                create: { key: "app_pages_top_of_table", value: appPagesTopOfTable, user_id: locals.user!.id },
+                update: { value: appPagesTopOfTable }
             });
 
             return { updateUserSettings: { success: true }}
@@ -36,5 +44,36 @@ export const actions: Actions = {
             console.log(ex);
             return fail(400, { updateUserSettings: { error: "errors.app.user_settings.update.failed" }});
         }
+    },
+
+    updateUser: async ({ request, locals }) => {
+
+        console.log("updateUser");
+
+        if(locals.user === null)
+            return fail(401, { updateUser: { error: "errors.app.user.update.not_authenticated" }});
+
+        const form = await request.formData();
+
+        const username = form.get("username")?.toString();
+        const email = form.get("email")?.toString();
+
+        if(username === undefined || email === undefined)
+            return fail(400, { updateUser: { error: "errors.app.user.update.no_username_or_email" }});
+
+        try
+        {
+            await locals.prisma.user.update({
+                where: { id: locals.user!.id },
+                data: { username, email }
+            });
+
+            return { updateUser: { success: true }}
+        }
+        catch(ex)
+        {
+            console.log(ex);
+            return fail(400, { updateUser: { error: "errors.app.user.update.failed" }});
+        }
     }
 }

src/routes/app/(base)/me/+page.svelte

@@ -1,34 +1,47 @@
 <script lang="ts">
     import type { ActionData } from "./$types";
-
     import { page } from "$app/stores";
-    import { invalidateAll } from "$app/navigation";
     import { enhanceNoReset } from "$lib/enhanceNoReset"; 
     import { _ } from "svelte-i18n";
     import FormInput from "$lib/components/generics/inputs/FormInput.svelte";
+    import Button from "$lib/components/generics/Button.svelte";
 
     export let form: ActionData;
 
-    $: if(form !== null) { invalidateAll(); }
-
+    $: if(form?.updateUser?.success !== undefined) { setTimeout(() => form = null, 3000) };
+    $: if(form?.updateUserSettings?.success !== undefined) { setTimeout(() => form = null, 3000) };
 </script>
 
-<h1>Profil de {$page.data.user?.username}</h1>
-<p>Modifiez votre profil ici</p>
-
-<h2 class="mt-4">Réglages personel de mink</h2>
-
-<div class="grid grid-cols-2 gap-4 mt-2">
-    {#each Object.entries($page.data.userSettings ?? []) as [key, value]}
-        <form action="?/updateUserSettings" method="post" use:enhanceNoReset>
-            <input name="key" value={key} type="hidden" />
-            {#if typeof value === "boolean"}
-                <input name="checkbox" type="hidden" value="true" />
-                <FormInput name="value" checked={value} label={key} type="checkbox" validateOnChange />
-            {:else}
-                <FormInput name="value" value={value} label={$_("app.settings.keys." + key)} type={(typeof value === "string") ? "text" : "number"} validateOnBlur />
-            {/if}
-
-        </form>
-    {/each}
-</div>
+<svelte:head><title>{$page.data.user?.username} - {$_('app.generic.user')} - mink</title></svelte:head>
+
+<h1>{$_('app.generic.user')}: {$page.data.user?.username}</h1>
+
+<h2>{$_('app.user.personal_parameters')}</h2>
+
+{#if form !== null && form.updateUser !== undefined}
+    {#if "error" in form.updateUser}
+        <p class="text-red-500 font-medium">{$_(form.updateUser.error)}</p>
+    {:else}
+        <p class="text-emerald-500">{$_('app.user.updated_personal_parameters')}</p>
+    {/if}
+{/if}
+
+<form action="?/updateUser" method="post" use:enhanceNoReset class="*:mt-4">
+    <FormInput name="username" value={$page.data.user?.username} label={$_('app.generic.username')} required />
+    <FormInput name="email" value={$page.data.user?.email} label={$_('app.generic.email_address')} type="email" autocomplete="current_email" required />
+
+    <Button role="warning" size="small">{$_('app.user.update_personal_parameters')}</Button> 
+</form>
+
+<h2 class="mt-4">{$_('app.user.mink_personal_parameters')}</h2>
+
+<form action="?/updateUserSettings" method="post" use:enhanceNoReset class="w-fit *:mt-4">
+
+    <FormInput type="select" name="app_language" value={$page.data.userSettings?.app_language} label={$_('app.generic.lang')} required validateOnChange>
+        <option value="fr">Français</option>
+        <option value="en">English</option>
+    </FormInput>
+
+    <FormInput name="app_menu_left" checked={$page.data.userSettings?.app_menu_left} label={$_('app.settings.keys.app_menu_left')} type="checkbox" validateOnChange />
+    <FormInput name="app_pages_top_of_table" checked={$page.data.userSettings?.app_pages_top_of_table} label={$_('app.settings.keys.app_pages_top_of_table')} type="checkbox" validateOnChange />
+</form>