From 6856d3b9af32cc9771c354ba6ff7f66ef5a1519c Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Wed, 11 Sep 2024 17:47:04 +0200
Subject: [PATCH] Progressing on profile edition and thumbnail cropping

---
 components/canvas/CanvasRenderer.vue   |   7 ---
 components/explorer/PreviewContent.vue |  35 ++++++-----
 components/prose/ProseTag.vue          |  31 +++++-----
 components/standard/Dialog.vue         |  41 +++++++++++++
 components/standard/HoverPopup.vue     |   6 +-
 components/standard/InputField.vue     |   8 +--
 components/standard/NavBar.vue         |   7 +--
 components/standard/Picture.vue        |  31 ++++++++++
 components/standard/Upload.vue         |  27 +++++++++
 db.sqlite                              | Bin 864256 -> 860160 bytes
 modules/database.sync/module.ts        |  18 +++---
 nuxt.config.ts                         |   7 ++-
 pages/user/login.vue                   |   6 +-
 pages/user/profile.vue                 |  81 +++++++++++++++++++++++--
 pages/user/register.vue                |  19 +++---
 pages/users/[id].vue                   |   4 +-
 public/icons/close.svg                 |   3 +
 public/{users => icons}/unknown.svg    |   0
 server/api/auth/login.post.ts          |   4 +-
 server/api/users/[id]/comments.get.ts  |   4 +-
 server/api/users/[id]/projects.get.ts  |   4 +-
 server/plugins/session.ts              |  10 +--
 server/utils/user.ts                   |   6 +-
 template.sqlite                        | Bin 839680 -> 839680 bytes
 utils/utils.ts                         |   7 +++
 25 files changed, 278 insertions(+), 88 deletions(-)
 create mode 100644 components/standard/Dialog.vue
 create mode 100644 components/standard/Picture.vue
 create mode 100644 components/standard/Upload.vue
 create mode 100644 public/icons/close.svg
 rename public/{users => icons}/unknown.svg (100%)

diff --git a/components/canvas/CanvasRenderer.vue b/components/canvas/CanvasRenderer.vue
index 26e9d24..9bb7b58 100644
--- a/components/canvas/CanvasRenderer.vue
+++ b/components/canvas/CanvasRenderer.vue
@@ -15,13 +15,6 @@ const reset = (_: MouseEvent) => {
     dispX.value = 0; 
     dispY.value = 0;
 }
-function clamp(x: number, min: number, max: number): number {
-    if (x > max)
-        return max;
-    if (x < min)
-        return min;
-    return x;
-}
 function edgePos(side: 'bottom' | 'top' | 'left' | 'right', pos: { x: number, y: number }, offset: number): { x: number, y: number } {
     switch (side) {
         case "left":
diff --git a/components/explorer/PreviewContent.vue b/components/explorer/PreviewContent.vue
index 74b9f1a..d57be5d 100644
--- a/components/explorer/PreviewContent.vue
+++ b/components/explorer/PreviewContent.vue
@@ -1,25 +1,28 @@
 <template>
-    <HoverPopup @before-show="fetch" :class="[{'is-loaded': fetched}, file?.type === 'Markdown' ? 'overflow-auto' : 'overflow-hidden']">
+    <HoverPopup @before-show="fetch">
         <template #content>
             <Suspense suspensible>
-                <div v-if="pending" class="loading w-[550px] h-[450px]"></div>
-                <template v-else-if="!!file">
-                    <div v-if="file.type === 'Markdown'" class="p-6 ms-6">
-                        <ProseH1>{{ file.title }}</ProseH1>
-                        <Markdown :content="file.content"></Markdown>
-                    </div>
-                    <div v-else-if="file.type === 'Canvas'" class="w-[550px] h-[450px] overflow-hidden">
-                        <CanvasRenderer :canvas="JSON.parse(file.content) " />
-                    </div>
+                <div :class="[{'is-loaded': fetched}, file?.type === 'Markdown' ? 'overflow-auto' : 'overflow-hidden']">
+                    <div v-if="pending" class="loading w-[550px] h-[450px]"></div>
+                    <template v-else-if="!!file">
+                        <div v-if="file.type === 'Markdown'" class="p-6 ms-6">
+                            <ProseH1>{{ file.title }}</ProseH1>
+                            <Markdown :content="file.content"></Markdown>
+                        </div>
+                        <div v-else-if="file.type === 'Canvas'" class="w-[550px] h-[450px] overflow-hidden">
+                            <CanvasRenderer :canvas="JSON.parse(file.content) " />
+                        </div>
+                        <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
+                            <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Fichier vide</div>
+                            <div class="text-lg text-light-60 dark:text-dark-60">Cette page est vide</div>
+                        </div>
+                    </template>
                     <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
-                        <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Fichier vide</div>
-                        <div class="text-lg text-light-60 dark:text-dark-60">Cette page est vide</div>
+                        <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher</div>
+                        <div class="text-lg text-light-60 dark:text-dark-60">Cette page est impossible à traiter</div>
                     </div>
-                </template>
-                <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
-                    <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher</div>
-                    <div class="text-lg text-light-60 dark:text-dark-60">Cette page est impossible à traiter</div>
                 </div>
+                <template #fallback><div class="loading w-[550px] h-[450px]"></div></template>
             </Suspense>
         </template>
         <template #default><slot name="default"></slot></template>
diff --git a/components/prose/ProseTag.vue b/components/prose/ProseTag.vue
index 274760c..0bdd589 100644
--- a/components/prose/ProseTag.vue
+++ b/components/prose/ProseTag.vue
@@ -1,22 +1,25 @@
 <template>
-    <HoverPopup class="mw-[400px]" @before-show="fetch">
+    <HoverPopup @before-show="fetch">
         <template #content>
-            <Suspense>
-                <div v-if="fetched === false" class="loading w-[400px] h-[150px]"></div>
-                <template v-else-if="!!data">
-                    <div v-if="data.description" class="pb-4 pt-3 px-8">
-                        <span class="text-2xl font-semibold">#{{ data.tag }}</span>
-                        <Markdown :content="data.description"></Markdown>
-                    </div>
+            <Suspense suspensible>
+                <div class="mw-[400px]">
+                    <div v-if="fetched === false" class="loading w-[400px] h-[150px]"></div>
+                    <template v-else-if="!!data">
+                        <div v-if="data.description" class="pb-4 pt-3 px-8">
+                            <span class="text-2xl font-semibold">#{{ data.tag }}</span>
+                            <Markdown :content="data.description"></Markdown>
+                        </div>
+                        <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
+                            <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Fichier vide</div>
+                            <div class="text-lg text-light-60 dark:text-dark-60">Cette page est vide</div>
+                        </div>
+                    </template>
                     <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
-                        <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Fichier vide</div>
-                        <div class="text-lg text-light-60 dark:text-dark-60">Cette page est vide</div>
+                        <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher</div>
+                        <div class="text-lg text-light-60 dark:text-dark-60">Cette page est impossible à traiter</div>
                     </div>
-                </template>
-                <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
-                    <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher</div>
-                    <div class="text-lg text-light-60 dark:text-dark-60">Cette page est impossible à traiter</div>
                 </div>
+                <template #fallback><div class="loading w-[400px] h-[150px]"></div></template>
             </Suspense>
         </template>
         <template #default>
diff --git a/components/standard/Dialog.vue b/components/standard/Dialog.vue
new file mode 100644
index 0000000..e9d88dc
--- /dev/null
+++ b/components/standard/Dialog.vue
@@ -0,0 +1,41 @@
+<template>
+    <Teleport to="#teleports" v-if="visible">
+        <div @click.self="() => !focused && hide()" class="z-[100] absolute top-0 bottom-0 left-0 right-0 bg-light-0 dark:bg-dark-0 !bg-opacity-80 flex justify-center items-center">
+            <div class="relative border border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 min-h-40 min-w-72">
+                <span v-if="closeIcon" class="cursor-pointer absolute top-1 right-1 flex hover:opacity-75" @click="() => hide()"><Icon :width="20" :height="20" icon="icons/close" /></span>
+                <div class="p-6" :class="$attrs.class">
+                    <slot></slot>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    focused: {
+        type: Boolean,
+        defualt: false,
+    },
+    closeIcon: {
+        type: Boolean,
+        default: true,
+    }
+})
+
+const emit = defineEmits(['show', 'hide']);
+const visible = ref(false);
+
+function show()
+{
+    visible.value = true;
+    emit('show');
+}
+function hide()
+{
+    visible.value = false;
+    emit('hide');
+}
+
+defineExpose({hide, show});
+</script>
\ No newline at end of file
diff --git a/components/standard/HoverPopup.vue b/components/standard/HoverPopup.vue
index 4a533a5..fb19620 100644
--- a/components/standard/HoverPopup.vue
+++ b/components/standard/HoverPopup.vue
@@ -1,11 +1,11 @@
 <template>
-    <Teleport to="#teleports">
-        <div v-show="display" :class="$attrs.class" class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100" :style="pos"
+    <Teleport to="#teleports" v-if="display">
+        <div class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100 overflow-hidden" :style="pos"
             @mouseenter="debounce(show, 250)" @mouseleave="debounce(() => { emit('beforeHide'); display = false }, 250)">
             <slot name="content"></slot>
         </div>
     </Teleport>
-    <span ref="el" @mouseenter="debounce(show, 250)" @mouseleave="debounce(() => { emit('beforeHide'); display = false }, 250)">
+    <span ref="el" :class="$attrs.class" @mouseenter="debounce(show, 250)" @mouseleave="debounce(() => { emit('beforeHide'); display = false }, 250)">
         <slot name="default"></slot>
     </span>
 </template>
diff --git a/components/standard/InputField.vue b/components/standard/InputField.vue
index 7ac8bec..f69830a 100644
--- a/components/standard/InputField.vue
+++ b/components/standard/InputField.vue
@@ -13,11 +13,9 @@ watchEffect(() => err.value = props.error);
 </script>
 
 <template>
-    <template></template>
-    <div class="m-1">
+    <div class="m-1 flex justify-between items-center gap-8">
         <label v-if="title" class="pe-4">{{ title }}</label>
-        <Input @input="err = false" :class="{ 'input-has-error': !!err }" v-model="model"
-            v-bind="$attrs" />
-        <span v-if="err && typeof err === 'string'" class="text-light-red dark:text-dark-red block pb-2">{{ err }}</span>
+        <Input class="flex-1" @input="err = false" :class="{ 'input-has-error': !!err }" v-model="model" v-bind="$attrs" />
     </div>
+    <span v-if="err && typeof err === 'string'" class="text-light-red dark:text-dark-red block pb-2">{{ err }}</span>
 </template>
\ No newline at end of file
diff --git a/components/standard/NavBar.vue b/components/standard/NavBar.vue
index d41a10b..a60836b 100644
--- a/components/standard/NavBar.vue
+++ b/components/standard/NavBar.vue
@@ -58,10 +58,9 @@ onUnmounted(() => {
                         <ThemeSwitch />
                         <NuxtLink @click="hideNavigation" class="" :to="{ path: '/user/profile', force: true }"><div class=" hover:border-opacity-70 flex border p-px border-light-70 dark:border-dark-70">
                             <Icon v-if="!loggedIn" icon="icons/user-login" :width=28 :height=28 />
-                            <picture v-else :width=28 :height=28 class="flex" >
-                                <source :src="`/users/${user?.id}/small.jpg`" :width=28 :height=28 />
-                                <Icon :icon="`users/unknown`" :width=28 :height=28 ></Icon>
-                            </picture>
+                            <Picture v-else :src="`/users/${user?.id}/small.jpg`" :width=28 :height=28 class="flex" >
+                                <Icon :icon="`icons/unknown`" :width=28 :height=28 ></Icon>
+                            </Picture>
                         </div></NuxtLink>
                     </div>
                 </div>
diff --git a/components/standard/Picture.vue b/components/standard/Picture.vue
new file mode 100644
index 0000000..fcec929
--- /dev/null
+++ b/components/standard/Picture.vue
@@ -0,0 +1,31 @@
+<template>
+    <span>
+        <img v-show="src && !fallback" @load="hideFallback" @error="showFallback" :src="src" :width="width" :height="height" />
+        <span v-show="!src || fallback"><slot></slot></span>
+    </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    src: {
+        type: String,
+    },
+    width: {
+        type: Number,
+    },
+    height: {
+        type: Number,
+    }
+});
+
+const fallback = ref(false);
+
+const showFallback = () => toggleFallback(true);
+const hideFallback = () => toggleFallback(false);
+
+function toggleFallback(toggle: boolean): void
+{
+    console.log("Something happened")
+    fallback.value = toggle;
+}
+</script>
\ No newline at end of file
diff --git a/components/standard/Upload.vue b/components/standard/Upload.vue
new file mode 100644
index 0000000..dc3491e
--- /dev/null
+++ b/components/standard/Upload.vue
@@ -0,0 +1,27 @@
+<template>
+    <label>
+        <slot></slot>
+        <input ref="input" :accept="accept" :multiple="multiple" type="file" class="hidden" @change.self="(e) => files = [...(e.target as HTMLInputElement)?.files ?? []]"/>
+    </label>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    accept: {
+        type: String,
+    },
+    multiple: {
+        type: Boolean,
+        default: false,
+    }
+});
+
+const input = useTemplateRef('input');
+const files = ref<File[]>([]);
+
+watch([files], () => emit('change', files.value));
+
+const emit = defineEmits(['change']);
+
+defineExpose({ files });
+</script>
\ No newline at end of file
diff --git a/db.sqlite b/db.sqlite
index c73c06c9ccd8f273ed9ebeed55843743871c2d6b..81c2c5d001e1b0d58939bab400f17f7e7aa31def 100644
GIT binary patch
delta 4323
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
PpA66rN&<n1xA1=eD=?nu

delta 4640
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

diff --git a/modules/database.sync/module.ts b/modules/database.sync/module.ts
index 8989b14..69e726e 100644
--- a/modules/database.sync/module.ts
+++ b/modules/database.sync/module.ts
@@ -23,11 +23,12 @@ export default defineNuxtModule({
 
         const template = new Database(nuxt.options.runtimeConfig.templateFile);
         const schema = template.query(`SELECT * FROM sqlite_schema WHERE type = 'table'`).all() as Schema[];
+        const structure = template.query(`SELECT * FROM pragma_table_info(?1)`);
 
         const db = new Database(nuxt.options.runtimeConfig.dbFile);
-        db.exec(`PRAGMA foreign_keys = 0`);
+        db.exec(`PRAGMA foreign_keys = OFF; PRAGMA defer_foreign_keys = OFF;`);
         const oldSchema = db.query(`SELECT * FROM sqlite_schema WHERE type = 'table'`).all() as Schema[];
-        const structure = db.query(`SELECT * FROM pragma_table_info(?1)`);
+        const oldStructure = db.query(`SELECT * FROM pragma_table_info(?1)`);
 
         (db.transaction((tables: Schema[], oldTables: Schema[]) => {
             for(const table of tables)
@@ -41,15 +42,18 @@ export default defineNuxtModule({
                 }
                 
                 const columns = structure.all(table.name) as Structure[];
+                const oldColumns = oldStructure.all(table.name) as Structure[];
 
                 if(oldIdx !== -1)
                 {
                     oldTables.splice(oldIdx, 1);
 
-                    db.exec(`ALTER TABLE ${table.name} RENAME TO ${table.name}_old`);
-                    db.exec(table.sql);
-                    db.exec(`INSERT INTO ${table.name} (${columns.map(e => `"${e.name}"`).join(', ')}) SELECT * FROM ${table.name}_old`);
-                    db.exec(`DROP TABLE ${table.name}_old`);
+                    const filteredColumns = oldColumns.filter(e => columns.find(f => e.name === f.name)).map(e => `"${e.name}"`).join(', ')
+
+                    db.exec(table.sql.replace(`CREATE TABLE "${table.name}"`, `CREATE TABLE "${table.name}_new"`));
+                    db.exec(`INSERT INTO ${table.name}_new (${filteredColumns}) SELECT ${filteredColumns} FROM ${table.name}`);
+                    db.exec(`DROP TABLE ${table.name}`);
+                    db.exec(`ALTER TABLE ${table.name}_new RENAME TO ${table.name}`);
                 }
                 else
                 {
@@ -62,7 +66,7 @@ export default defineNuxtModule({
             }
         })).immediate(schema, oldSchema);
 
-        db.exec(`PRAGMA foreign_keys = 1`);
+        db.exec(`PRAGMA foreign_keys = ON; PRAGMA foreign_keys = ON;`);
 
         db.close();
         template.close();
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e541b41..b87b201 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -99,7 +99,12 @@ export default defineNuxtConfig({
     }
   },
   security: {
-    rateLimiter: false
+    rateLimiter: false,
+    headers: {
+      contentSecurityPolicy: {
+        "img-src": "'self' data: blob:"
+      }
+    }
   },
   compatibilityDate: '2024-07-25',
 })
\ No newline at end of file
diff --git a/pages/user/login.vue b/pages/user/login.vue
index 7ba5c0c..f596a00 100644
--- a/pages/user/login.vue
+++ b/pages/user/login.vue
@@ -78,16 +78,16 @@ function handleErrors(error: Error | ZodError)
     </Head>
     <div class="flex flex-1 justify-center items-center">
         <div class="p-8 w-[48em] border border-light-35 dark:border-dark-35">
-            <form @submit.prevent="submit" class="p-4 bg-light-25 dark:bg-dark-30">
+            <form @submit.prevent="submit" class="p-4 bg-light-20 dark:bg-dark-20">
                 <h1 class="text-2xl font-bold tracking-wider pb-4">Connexion</h1>
                 <InputField type="text" autocomplete="username" v-model="state.usernameOrEmail"
-                    placeholder="" title="Nom d'utilisateur ou adresse mail" :error="usernameError" class="w-[24em]" />
+                    placeholder="" title="Nom d'utilisateur ou adresse mail" :error="usernameError"/>
                 <InputField type="password" autocomplete="current-password" v-model="state.password"
                     placeholder="" title="Mot de passe"
                     :error="passwordError"  class="w-[24em]"/>
                 <span v-if="generalError" class="text-light-red dark:text-dark-red">{{ generalError }}</span>
                 <button class="m-auto block px-4 py-1 bg-light-20 dark:bg-dark-20 border border-light-40 dark:border-dark-40 hover:border-light-50 dark:hover:border-dark-50 active:relative active:top-[1px]">
-                    <div class="loading" v-if="status === 'pending'"></div>
+                    <div class="loading before:w-6 before:h-6" v-if="status === 'pending'"></div>
                     <template v-else>Se connecter</template>
                 </button>
                 <NuxtLink class="mt-4 text-center block text-sm font-semibold tracking-wide hover:italic" :to="{ path: `/user/register`, force: true }">Pas de compte ?</NuxtLink>
diff --git a/pages/user/profile.vue b/pages/user/profile.vue
index c83a191..b774533 100644
--- a/pages/user/profile.vue
+++ b/pages/user/profile.vue
@@ -4,15 +4,88 @@ definePageMeta({
 });
 
 const { user, clear } = useUserSession();
+const { data: projects } = useFetch(`/api/users/${user.value?.id}/projects`);
+const { data: comments } = useFetch(`/api/users/${user.value?.id}/comments`);
+
+const dialog = useTemplateRef('dialog');
+const files = ref<File[]>([]), imgURL = ref<string |null>(null);
+
+const posX = ref(0), posY = ref(0), sizeX = ref(128), sizeY = ref(128);
+
+async function loadImage(f: File[])
+{
+    files.value = f;
+    if(f.length > 0)
+        imgURL.value = URL.createObjectURL(f[0]);
+}
+async function approveThumbnail()
+{
+
+}
+const dragHandler = ({ delta: [x, y] }: { delta: number[] }) => { 
+    posX.value = clamp(posX.value + x, 0, 256 - sizeX.value);
+    posY.value = clamp(posY.value + y, 0, 256 - sizeY.value);
+}
 </script>
 
 <template>
     <Head>
         <Title>Votre profil</Title>
     </Head>
-    <div class="flex-1 flex justify-center items-center flex-col">
-        <ThemeIcon icon="logo" :width=128 :height=128 />
-        <div class="not-found-title">Bonjour {{ user?.username }} :)</div>
-        <button class="m-auto block px-4 py-1 bg-light-20 dark:bg-dark-20 border border-light-40 dark:border-dark-40 hover:border-light-50 dark:hover:border-dark-50 active:relative active:top-[1px]" @click="clear">Se deconnecter</button>
+    <div v-if="user" class="flex-1 grid gap-4 grid-cols-3">
+        <div class="border border-light-35 dark:border-dark-35 p-4 flex gap-4 col-span-2">
+            <Picture @click="() => dialog?.show()" :src="`/users/${user?.id}/normal.jpg`" :width=128 :height=128 class="inline-block hover:bg-light-70 hover:bg-opacity-50 hover:opacity-50 transition-all cursor-pointer">
+                <Icon :icon="`icons/unknown`" :width=128 :height=128></Icon>
+            </Picture>
+            <Dialog :close-icon="true" :focused="false" ref="dialog">
+                <div class="w-[640px] h-[320px] flex justify-center">
+                    <div class="w-[256px] h-[256px] relative">
+                        <Picture :src="imgURL ?? undefined" :width=256 :height=256 class="inline-block select-none">
+                            <Icon :icon="`icons/unknown`" :width=256 :height=256></Icon>
+                        </Picture>
+                        <div v-if="imgURL" class="border-2 border-dashed border-light-50 dark:border-dark-50 absolute cursor-move" :style="{
+                            top: `${posY}px`,
+                            left: `${posX}px`,
+                            width: `${sizeX}px`,
+                            height: `${sizeX}px`,
+                        }" v-drag="dragHandler">
+                            <span class=""></span>
+                            <span class=""></span>
+                            <span class=""></span>
+                            <span class=""></span>
+                        </div>
+                    </div>
+                </div>
+                <div class="border-t border-light-35 dark:border-dark-35 absolute bottom-0 left-0 right-0 p-4 flex justify-between">
+                    <div class="flex gap-3">
+                        <Upload accept="image/png,image/jpeg,image/webp" @change="loadImage">
+                            <span class="py-1 px-2 cursor-pointer text-light-100 dark:text-dark-100 transition-all duration-200 mb-4 border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 hover:bg-light-30 dark:hover:bg-dark-30">Importer un fichier</span>
+                        </Upload>
+                        <span class="text-sm text-light-60 dark:text-dark-60 italic">5 Mo max. 128 x 128 min recommandé.</span>
+                    </div>
+                    <div>
+                        <span @click="approveThumbnail" class="py-1 px-2 cursor-pointer text-light-100 dark:text-dark-100 transition-all duration-200 mb-4 border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 hover:bg-light-30 dark:hover:bg-dark-30">Valider</span>
+                    </div>
+                </div>
+            </Dialog>
+            <div class="flex flex-col">
+                <span class="text-xl font-semibold">{{ user?.username }}</span>
+                <span>Inscrit depuis le {{ format(new Date(user.signin_timestamp), 'dd/MM/yyyy') }}</span>
+            </div>
+        </div>
+        <div class="p-4 flex gap-4 flex-col">
+            <button @click="clear()" class="py-1 transition-all duration-200 mb-4 border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 hover:bg-light-30 dark:hover:bg-dark-30">Se déconnecter</button>
+            <button @click="" class="py-1 transition-all duration-200 border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 hover:bg-light-30 dark:hover:bg-dark-30">Mettre à jour le profil</button>
+            <button @click="" class="py-1 transition-all duration-200 border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-red dark:hover:border-dark-red hover:bg-light-30 dark:hover:bg-dark-30 text-light-red dark:text-dark-red">Supprimer le compte</button>
+        </div>
+        <div class="border border-light-35 dark:border-dark-35 p-4 flex flex-col">
+            <div class="text-2xl">Mes projets</div>
+            <div class="flex flex-col">
+                <div v-for="project of projects" class="flex justify-between items-center py-1">
+                    <NuxtLink :to="{ path: `/explorer/${project.id}/${project.home}`, force: true }" class="text-accent-blue font-bold cursor-pointer hover:text-opacity-80 text-lg">{{ project.name }}</NuxtLink>
+                    <span>{{ project.pages }} pages</span>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/pages/user/register.vue b/pages/user/register.vue
index fa39899..bed9fcd 100644
--- a/pages/user/register.vue
+++ b/pages/user/register.vue
@@ -87,15 +87,15 @@ function handleErrors(error: Error | ZodError)
     </Head>
     <div class="flex flex-1 justify-center items-center">
         <div class="p-8 w-[48em] border border-light-35 dark:border-dark-35">
-            <form @submit.prevent="submit" class="p-4 bg-light-25 dark:bg-dark-30">
+            <form @submit.prevent="submit" class="p-4 bg-light-20 dark:bg-dark-20">
                 <h1 class="text-2xl font-bold tracking-wider pb-4">Inscription</h1>
                 <InputField type="text" autocomplete="username" v-model="state.username"
-                    placeholder="Entrez un nom d'utilisateur" title="Nom d'utilisateur" :error="usernameError" class="w-[24em]"/>
+                    placeholder="Entrez un nom d'utilisateur" title="Nom d'utilisateur" :error="usernameError"/>
                 <InputField type="text" autocomplete="email" v-model="state.email" placeholder="Entrez une addresse mail"
-                    title="Adresse mail" :error="emailError"  class="w-[24em]"/>
+                    title="Adresse mail" :error="emailError"/>
                 <InputField type="password" autocomplete="new-password" v-model="state.password"
                     placeholder="Entrez un mot de passe" title="Mot de passe"
-                    :error="!(checkedLength && checkedLowerUpper && checkedDigit && checkedSymbol)"  class="w-[24em]"/>
+                    :error="!(checkedLength && checkedLowerUpper && checkedDigit && checkedSymbol)"/>
                 <div class="flex flex-col font-light">
                     <span class="">Votre mot de passe doit respecter les critères de sécurité suivants
                         :</span>
@@ -110,12 +110,13 @@ function handleErrors(error: Error | ZodError)
                         <pre>! " # $ % & ' ( ) * + , - . / : ; < = > ? @ [ ] ^ _ ` { | } ~</pre>
                     </span>
                 </div>
-                <InputField type="password" v-model="confirmPassword" placeholder="Confirmer le mot de passe"
-                    title="Confirmer le mot de passe"
-                    autocomplete="new-password"
-                    :error="confirmPassword === '' || confirmPassword === state.password ? '' : 'Les mots de passe saisies ne sont pas identique'" class="w-[24em]"/>
+                <InputField type="password" v-model="confirmPassword" placeholder="Confirmer le mot de passe" title="Confirmer le mot de passe" autocomplete="new-password"
+                    :error="confirmPassword === '' || confirmPassword === state.password ? '' : 'Les mots de passe saisies ne sont pas identique'"/>
                 <span v-if="generalError" class="text-light-red dark:text-dark-red">{{ generalError }}</span>
-                <button class="m-auto block px-4 py-1 bg-light-20 dark:bg-dark-20 border border-light-40 dark:border-dark-40 hover:border-light-50 dark:hover:border-dark-50 active:relative active:top-[1px]"><div v-if="status === 'pending'" class="loading"></div><template v-else>S'inscrire</template></button>
+                <button class="m-auto block px-4 py-1 bg-light-20 dark:bg-dark-20 border border-light-40 dark:border-dark-40 hover:border-light-50 dark:hover:border-dark-50 active:relative active:top-[1px]">
+                    <div v-if="status === 'pending'" class="loading"></div>
+                    <template v-else>S'inscrire</template>
+                </button>
                 <NuxtLink class="mt-4 text-center block text-sm font-semibold tracking-wide hover:italic" :to="{ path: `/user/login`, force: true }">Vous avez déjà un compte ? Se connecter</NuxtLink>
             </form>
         </div>
diff --git a/pages/users/[id].vue b/pages/users/[id].vue
index 7180fc9..afb0e55 100644
--- a/pages/users/[id].vue
+++ b/pages/users/[id].vue
@@ -7,9 +7,9 @@ const { data: comments } = useFetch(`/api/users/${route.params.id}/comments`);
 
 <template>
     <Head>
-        <Title>Inconnu</Title>
+        <Title>{{ user?.username ?? "Inconnu" }}</Title>
     </Head>
-    <div v-if="user" class="border border-light-35 dark:border-dark-35 p-4 flex">
+    <div v-if="user" class="border border-light-35 dark:border-dark-35 p-4 flex gap-4">
         <div>                            
             <picture :width=128 :height=128 class="flex" >
                 <source :src="`/users/${user?.id}/normal.jpg`" :width=128 :height=128 />
diff --git a/public/icons/close.svg b/public/icons/close.svg
new file mode 100644
index 0000000..ae612fc
--- /dev/null
+++ b/public/icons/close.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256">
+	<path fill="currentColor" d="M204.24 195.76a6 6 0 1 1-8.48 8.48L128 136.49l-67.76 67.75a6 6 0 0 1-8.48-8.48L119.51 128L51.76 60.24a6 6 0 0 1 8.48-8.48L128 119.51l67.76-67.75a6 6 0 0 1 8.48 8.48L136.49 128Z" />
+</svg>
diff --git a/public/users/unknown.svg b/public/icons/unknown.svg
similarity index 100%
rename from public/users/unknown.svg
rename to public/icons/unknown.svg
diff --git a/server/api/auth/login.post.ts b/server/api/auth/login.post.ts
index d14c162..38df8d6 100644
--- a/server/api/auth/login.post.ts
+++ b/server/api/auth/login.post.ts
@@ -63,10 +63,10 @@ export default defineEventHandler(async (e): Promise<Return> => {
             return { success: false, error: new ZodError([{ code: 'custom', path: ['password'], message: 'Mot de passe incorrect' }]) };
         }
 
-        logSession(e, await setUserSession(e, { user: getData(db, id.id) }) as UserSessionRequired);
+        const data = await logSession(e, await setUserSession(e, { user: getData(db, id.id) }) as UserSessionRequired);
 
         setResponseStatus(e, 201);
-        return { success: true, session };
+        return { success: true, session: data };
     }
     catch(err: any)
     {
diff --git a/server/api/users/[id]/comments.get.ts b/server/api/users/[id]/comments.get.ts
index db50495..dd2956b 100644
--- a/server/api/users/[id]/comments.get.ts
+++ b/server/api/users/[id]/comments.get.ts
@@ -1,5 +1,5 @@
 import useDatabase from "~/composables/useDatabase";
-import type { Comment } from "~/types/auth";
+import type { CommentSearch } from "~/types/api";
 
 export default defineEventHandler((e) => {
     const id = getRouterParam(e, 'id');
@@ -12,5 +12,5 @@ export default defineEventHandler((e) => {
 
     const db = useDatabase();
     
-    return db.query(`SELECT * FROM explorer_comments WHERE user_id = ?1`).all(id) as Comment[];
+    return db.query(`SELECT * FROM explorer_comments WHERE user_id = ?1`).all(id) as CommentSearch[];
 });
\ No newline at end of file
diff --git a/server/api/users/[id]/projects.get.ts b/server/api/users/[id]/projects.get.ts
index b96dff4..74b3665 100644
--- a/server/api/users/[id]/projects.get.ts
+++ b/server/api/users/[id]/projects.get.ts
@@ -1,5 +1,5 @@
 import useDatabase from "~/composables/useDatabase";
-import type { Project } from "~/types/api";
+import type { ProjectSearch } from "~/types/api";
 
 export default defineEventHandler((e) => {
     const id = getRouterParam(e, 'id');
@@ -12,5 +12,5 @@ export default defineEventHandler((e) => {
 
     const db = useDatabase();
     
-    return db.query(`SELECT * FROM explorer_projects WHERE owner = ?1`).all(id) as Project[];
+    return db.query(`SELECT p.*, count(f.path) as pages FROM explorer_projects p LEFT JOIN explorer_files f ON p.id = f.project WHERE p.owner = ?1`).all(id) as Omit<ProjectSearch, 'username'>[];
 });
\ No newline at end of file
diff --git a/server/plugins/session.ts b/server/plugins/session.ts
index 0fb0e4c..782a87d 100644
--- a/server/plugins/session.ts
+++ b/server/plugins/session.ts
@@ -1,27 +1,27 @@
 import useDatabase from "~/composables/useDatabase";
 
-const monthAsMs = 1000 * 60 * 60 * 24 * 30;
+const monthAsMs = 60 * 60 * 24 * 30;
 
 export default defineNitroPlugin(() => {
     const db = useDatabase();
     
     sessionHooks.hook('fetch', async (session, event) => {
-        const query = db.prepare('SELECT lastRefresh FROM user_sessions WHERE id = ?1 AND user_id = ?2');
-        const result = query.get(session.id, session.user.id) as Record<string, any>;
+        const query = db.prepare('SELECT last_refresh FROM user_sessions WHERE id = ?1 AND user_id = ?2');
+        const result = query.get(session.id, session.user.id) as { last_refresh: number };
 
         if(!result)
         {
             clearUserSession(event);
             throw createError({ statusCode: 401, message: 'Unauthorized' });
         }
-        else if(result && result.lastRefresh && result.lastRefresh < Date.now() - monthAsMs)
+        else if(result && result.last_refresh && result.last_refresh < Date.now() - monthAsMs)
         {
             clearUserSession(event);
             throw createError({ statusCode: 401, message: 'Session has expired' });
         }
         else
         {
-            db.prepare('UPDATE user_sessions SET lastRefresh = ?1 WHERE id = ?2 AND user_id = ?3').run(Date.now(), session.id, session.user.id);
+            db.prepare('UPDATE user_sessions SET last_refresh = ?1 WHERE id = ?2 AND user_id = ?3').run(Date.now(), session.id, session.user.id);
         }
     });
     sessionHooks.hook('clear', async (session, event) => {
diff --git a/server/utils/user.ts b/server/utils/user.ts
index 22d4397..21b4579 100644
--- a/server/utils/user.ts
+++ b/server/utils/user.ts
@@ -24,10 +24,12 @@ export async function checkSession(e: H3Event<EventRequestHandler>, session: Use
         }
     }
 }
-export async function logSession(e: H3Event<EventRequestHandler>, session: UserSessionRequired)
+export async function logSession(e: H3Event<EventRequestHandler>, session: UserSessionRequired): Promise<UserSessionRequired>
 {
     const db = useDatabase();
 
-    const loggingIn = db.query(`INSERT INTO user_sessions(id, user_id, ip, agent, lastRefresh) VALUES(?1, ?2, ?3, ?4, ?5)`);
+    const loggingIn = db.query(`INSERT INTO user_sessions(id, user_id, ip, agent, last_refresh) VALUES(?1, ?2, ?3, ?4, ?5)`);
     loggingIn.get(session.id, session.user.id, getRequestIP(e) ?? null, getRequestHeader(e, 'User-Agent') ?? null, Date.now());
+
+    return session;
 }
\ No newline at end of file
diff --git a/template.sqlite b/template.sqlite
index 903b355268212bb6d0b19b8b1ed6de103ba54ce2..0ae37d2b6bd4c6dcef46e3f27441f60dcf14e8f3 100644
GIT binary patch
delta 410
zcmZozVBE04c!IRxL<R<ivp~!T#5;ia`$QdMo{0>4RRyd-9wYy+joFj<nSB}sHZ^c4
zZ00cdKc8{?W{wM|nFRfS@+*M21&9TKm}T>mOR~DWKo)}l0|WnB5Zo*%P{QBd#Lo!C
zOhC-My@{Wtet|wu6$2;x8wUP$d^7lR`JDK~dA{>(<2u9s1`OA+oMGu;E@if4Qf7S1
z;KATA(NTigu~Bk*{w)><QD&eRC&(6trjSNfc5!ue#+LNS0qm2Q;)|yLJ<YO{g@J+f
z|0FKM?WYg0L~sFl3^vm@-ei%UoWRF2S%+P6^Bj&u#_i(gSY9zo0wp;)k{S39@jT#}
z!`;d4%Vo~R$T6QI8R&9T4hf*8Y~rE%j0~B1DXA63g*llesg^)7Wb-6=n497nB_Ix|
z20BEZk!f-PdlA$*64M`CVUe25%`uVLxKVuae@-KiyH2sTU0`Xu03_MkF0i*<;Ap$R
L*>-`e?E*IdTC8{@

delta 377
zcmZozVBE04c!IRx1O^6%vp~!T#5;lb^F$qEo(T+kRRyd-9)keG#_UP_%)X7Rn*=xn
z*!chOf8+nKSy12+|Ktzn*|=Dl85x<Fn3*{_HyN-mVBE2p<HBhsK_8&T6+qkq#C|}`
zy!pu`SzTWK>kN$iYZ>_0f*{b068`okenuc>0%GRvP5dnN3;4M&FtBhvVBo9eoyfz^
z^#G{s0@q~o1)ta$%sExtR43~%)Zfl-!|{_@j~8gN5W_SE{&jpa_;UH2_{4d>^K9de
z=T_z{Wt++t&RoiD$Rx-3h~W%Sk>^B5X>YGa2{v(2QO3%W#H5_mlGNf75N2`?a&-)G
zRS0o(@^MvA0tqQ8XmD{VWu_=`disU9y1NGH0J$lNC5do>?f*}*FtTlbvz?`nWiu!H
m7pCpv`&eEvwliK}0b*7lW&>h&Am#vKP9Wym&Uk_Q|9=2I4{L(}

diff --git a/utils/utils.ts b/utils/utils.ts
index 44a45a7..d7a0a6e 100644
--- a/utils/utils.ts
+++ b/utils/utils.ts
@@ -32,4 +32,11 @@ export function format(date: Date, template: string): string
     }
 
     return template;
+}
+export function clamp(x: number, min: number, max: number): number {
+    if (x > max)
+        return max;
+    if (x < min)
+        return min;
+    return x;
 }
\ No newline at end of file