From a3928410125cb3a227a0b630689700a38b5c8463 Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Wed, 6 Nov 2024 17:38:15 +0100
Subject: [PATCH] Fix sessions, start profile UI and add middleware

---
 components/base/Avatar.vue    |   4 ++--
 components/base/HoverCard.vue |   2 +-
 composables/useDatabase.ts    |  14 +++++++++-----
 db.sqlite-shm                 | Bin 32768 -> 32768 bytes
 db.sqlite-wal                 | Bin 20632 -> 156592 bytes
 layouts/default.vue           |   9 +++++----
 middleware/auth.global.ts     |  22 ++++++++++++++++++++++
 package.json                  |   4 ++++
 pages/user/login.vue          |   1 +
 pages/user/profile.vue        |  21 ++++++++++++++++++++-
 pages/user/register.vue       |   1 +
 server/api/auth/login.post.ts |   2 +-
 server/plugins/session.ts     |  17 ++++++-----------
 server/utils/user.ts          |   3 ++-
 14 files changed, 74 insertions(+), 26 deletions(-)
 create mode 100644 middleware/auth.global.ts

diff --git a/components/base/Avatar.vue b/components/base/Avatar.vue
index 3765b48..762333e 100644
--- a/components/base/Avatar.vue
+++ b/components/base/Avatar.vue
@@ -3,9 +3,9 @@
         <AvatarImage class="h-full w-full object-cover" :src="src" asChild @loading-status-change="(status) => loading = status === 'loading'">
             <img :src="src" />
         </AvatarImage>
-        <AvatarFallback :delay-ms="0" class="text-light-100 dark:text-dark-100 leading-1 flex h-full w-full items-center justify-center bg-light-25 dark:bg-dark-25 font-medium">
+        <AvatarFallback :delay-ms="0" class="text-light-100 dark:text-dark-100 leading-1 flex h-full w-full p-4 items-center justify-center bg-light-25 dark:bg-dark-25 font-medium">
             <Loading v-if="loading" />
-            <Icon v-else-if="!!icon" :icon="icon" class="w-8 h-8" />
+            <Icon v-else-if="!!icon" :icon="icon" class="w-full h-full" />
             <span v-else-if="!!text">{{ text }}</span>
         </AvatarFallback>
     </AvatarRoot>
diff --git a/components/base/HoverCard.vue b/components/base/HoverCard.vue
index 0ad3819..30f5ce3 100644
--- a/components/base/HoverCard.vue
+++ b/components/base/HoverCard.vue
@@ -1,6 +1,6 @@
 <template>
     <HoverCardRoot :open-delay="delay">
-        <HoverCardTrigger class="inline-block cursor-help outline-none" asChild>
+        <HoverCardTrigger class="inline-block cursor-help outline-none">
             <slot></slot>
         </HoverCardTrigger>
         <HoverCardPortal v-if="!disabled">
diff --git a/composables/useDatabase.ts b/composables/useDatabase.ts
index dc96c97..af7fd46 100644
--- a/composables/useDatabase.ts
+++ b/composables/useDatabase.ts
@@ -1,13 +1,17 @@
 import { Database } from "bun:sqlite";
-import { drizzle } from "drizzle-orm/bun-sqlite";
+import { BunSQLiteDatabase, drizzle } from "drizzle-orm/bun-sqlite";
 import * as schema from '../db/schema';
 
+let instance: BunSQLiteDatabase<typeof schema>;
 export default function useDatabase()
 {
-    const sqlite = new Database(useRuntimeConfig().database);
-    const db = drizzle({ client: sqlite, schema });
+    if(!instance)
+    {
+        const sqlite = new Database(useRuntimeConfig().database);
+        instance = drizzle({ client: sqlite, schema });
 
-    db.run("PRAGMA journal_mode = WAL;");
+        instance.run("PRAGMA journal_mode = WAL;");
+    }
 
-    return db;
+    return instance;
 }
\ No newline at end of file
diff --git a/db.sqlite-shm b/db.sqlite-shm
index 73c3e9d4d1bb9608d3d67a00ce4e30053ac442ec..df4d197f05d2c18dc76f8981d7092b2a6b834c69 100644
GIT binary patch
delta 356
zcmZo@U}|V!s+V}A%K!q>K+MR%AfN`M`GL6LpZdj~=1oo-Jo+<cvZ+UlP4i?HSi^UW
zRP{ikz(55^{zn2(;feLK^=v>kI}n3tVlYfCj7HXvEJlo3Ks8JZ>>C$8blm*U=^LLZ
z8v_ReCj%D)Hv<m?F9RPiC<GV;8H5=`8N?VQ7^Hx~B*P%fAjcrjpunKWpv0iepu(WK
eap6fOZgvJC1`!5v21y3BjSHWPY<`j{BL)D9PBmQs

delta 161
zcmZo@U}|V!s+V}A%K!t63=9ISKn_0;Uy+bc^b<?-*5J{fF_TR_dQS9f?MB(?c2d>D
p%m$hJ9|=IkC)UeuR$;v5IN5-)WAi_!Z+x2#7(a+_ev&C81^`%)Ea?CM

diff --git a/db.sqlite-wal b/db.sqlite-wal
index a3cbe1c23d7bb92e6588fafdc79df482fb0f7d91..8502f262c22781bd1fc760c37bbe6427995cdc37 100644
GIT binary patch
delta 2818
zcmbQSka5Ft&J8mHlo%Ko*npTpgGYbHOg8oCwVU@%FJYS3#|so=<iEtge`#~0!U_HW
z9Y&T=P8Ne?)6^7mBLiJy3-d%>lQd%^-6RuBQ{5DcMB^j_Gn3@x<ivFC23MeFb|B`5
znR@H`^!*G`$K|-dre0^@zYa9@EWft~&`?fd3<c@~ITLQ+fxnE~n74?hQRK|k=%&uk
z%qpC|Ympg6rmjIZwKD6K!izE<%7Szqx~bjk)Qsc!<lj-`*7fM7s{Is*;`_fSj3QI_
zpqpy$e6qE9=QcNrOx=ras?M{BCv!Ou?W4%lW9X(n^;LU*E+E;CB2&+!o2sxP$8JMe
z{4t75{Q@-=o>_k^&uZ8ut^NgMDuVzpdytb^L8hW))<8X(+kZ+EK7leT*i<qzE8LkX
zZ*Iz-))vK)R836{Q<BWg40X-S%`Jdsieaj*WpbK@Zn8m&g;An$vZ-OBLArLMBDynW
zYc!_CY-q^DTBZ<VD9}KZGR5mRn@L_<%}nfZM2v~)+D+n6Q{kTHa!+;Kw&3D->~Tbb
zsVH%DB7a5Z`D+VUu*MNFhN3%D;EU%si6?C}*gbDzVr*bxmYS+-mXd4$jH5JD-6Tt3
z9GRIJ8>N^U8(5~9nx$(uhoZ;Pthn?yA9K~Ju*MNFhN8#Oo@tq}_g{4sQRK`pbW?A?
znwgb-JYo?=rrtw0wZ*X_*-uZ2iy~9+qnnzwW_g7B#P3>^nA#$YZYm2`prl?>6ca_J
z=AxVGeC)hg@~#*mN=$8qHBsPof5MTd|5GBrMNwp`GP+wOIip%Sg(N96RS(_NZ;3Of
zdghi=76KUUl)UYAhb}L!q$svpF={@gH9XO389fxGtX5chg_nP8Z!H#QSn)#x6kC{e
g6ftE$x;EHUl=APQ`o99FP0c-M<)0?FK}n3E0B@YfVE_OC

delta 9
QcmdmRoO8xP#tkz902cWKQvd(}

diff --git a/layouts/default.vue b/layouts/default.vue
index dfc2c8d..4d68008 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -12,8 +12,8 @@
 			</div>
 			<div class="flex items-center px-2">
 				<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
-				<Tooltip message="Se connecter" side="right">
-					<NuxtLink class="" :to="{ path: '/user/login', force: true }">
+				<Tooltip :message="loggedIn ? 'Mon profil' : 'Se connecter'" side="right">
+					<NuxtLink class="" :to="{ path: '/user/profile', force: true }">
 						<div class="hover:border-opacity-70 flex">
 							<Icon icon="radix-icons:person" class="w-7 h-7 p-1" />
 						</div>
@@ -31,8 +31,8 @@
 							</NuxtLink>
 							<div class="flex gap-4 items-center">
 								<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
-								<Tooltip message="Se connecter" side="right">
-									<NuxtLink class="" :to="{ path: '/user/login', force: true }">
+								<Tooltip :message="loggedIn ? 'Mon profil' : 'Se connecter'" side="right">
+									<NuxtLink class="" :to="{ path: '/user/profile', force: true }">
 										<div class="bg-light-20 dark:bg-dark-20 hover:border-opacity-70 flex border p-px border-light-50 dark:border-dark-50">
 											<Icon icon="radix-icons:person" class="w-7 h-7 p-1" />
 										</div>
@@ -56,4 +56,5 @@
 import { Icon } from '@iconify/vue/dist/iconify.js';
 
 const open = ref(true);
+const { loggedIn } = useUserSession();
 </script>
\ No newline at end of file
diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
new file mode 100644
index 0000000..b302d00
--- /dev/null
+++ b/middleware/auth.global.ts
@@ -0,0 +1,22 @@
+export default defineNuxtRouteMiddleware(async (to, from) => {
+    const { loggedIn, ready, fetch } = useUserSession();
+    const meta = to.meta;
+
+    if(!ready)
+        await fetch();
+    
+    if(!!meta.guestsGoesTo && !loggedIn.value)
+    {
+        return navigateTo(meta.guestsGoesTo);
+    }
+    else if(meta.requireAuth && !loggedIn.value)
+    {
+        return abortNavigation();
+    }
+    else if(!!meta.usersGoesTo && loggedIn.value)
+    {
+        return navigateTo(meta.usersGoesTo);
+    }
+
+    return;
+});
\ No newline at end of file
diff --git a/package.json b/package.json
index b7e0098..837dd7b 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,10 @@
   "name": "d-any",
   "private": true,
   "type": "module",
+  "scripts": {
+    "predev": "bun i && bunx nuxi cleanup",
+    "dev": "bunx --bun nuxi dev"
+  },
   "dependencies": {
     "@iconify/vue": "^4.1.2",
     "@nuxtjs/color-mode": "^3.5.2",
diff --git a/pages/user/login.vue b/pages/user/login.vue
index 4f312e5..e3806e3 100644
--- a/pages/user/login.vue
+++ b/pages/user/login.vue
@@ -23,6 +23,7 @@ import { Icon } from '@iconify/vue/dist/iconify.js';
 
 definePageMeta({
     layout: 'login',
+    usersGoesTo: '/user/profile',
 });
 
 const { add: addToast, clear: clearToasts } = useToast();
diff --git a/pages/user/profile.vue b/pages/user/profile.vue
index af635d4..ad58f34 100644
--- a/pages/user/profile.vue
+++ b/pages/user/profile.vue
@@ -1,9 +1,28 @@
 <script setup lang="ts">
-const { user } = useUserSession();
+definePageMeta({
+    guestsGoesTo: '/user/login',
+})
+let { user, clear } = useUserSession();
 </script>
 
 <template>
     <Head>
         <Title>Mon profil</Title>
     </Head>
+    <div class="flex w-full items-start py-8 gap-6" v-if="user">
+        <div class="flex gap-4 min-w-1/3 max-w-2/3 border border-light-35 dark:border-dark-35 p-4">
+            <Avatar icon="radix-icons:person" :src="`/users/${user?.id}.medium.jpg`" class="w-32 h-32" />
+            <div class="flex flex-col items-start">
+                <ProseH5>{{ user.username }}</ProseH5>
+                <ProseH5>{{ user.email }}</ProseH5>
+                <HoverCard>
+                    <template v-slot:default><div class="border-light-red dark:border-dark-red bg-light-red bg-opacity-25 dark:bg-dark-red dark:bg-opacity-25 text-light-red dark:text-dark-red py-1 px-3" v-if="user.state === 0">Votre adresse mail n'as pas encore été validée. <Button class="ms-4">Renvoyez un mail</Button></div></template>
+                    <template v-slot:content><span>Tant que votre adresse mail n'as pas été validée, vous n'avez que des droits de lecture.</span></template>
+                </HoverCard>
+            </div>
+        </div>
+        <div class="flex-1">
+            <Button @click="async () => await clear()">Se deconnecter</Button>
+        </div>
+    </div>
 </template>
\ No newline at end of file
diff --git a/pages/user/register.vue b/pages/user/register.vue
index 1e48397..1204466 100644
--- a/pages/user/register.vue
+++ b/pages/user/register.vue
@@ -39,6 +39,7 @@ import { Icon } from '@iconify/vue/dist/iconify.js';
 
 definePageMeta({
     layout: 'login',
+    usersGoesTo: '/user/profile',
 });
 
 const state = reactive<Registration>({
diff --git a/server/api/auth/login.post.ts b/server/api/auth/login.post.ts
index f85bbf1..4961a18 100644
--- a/server/api/auth/login.post.ts
+++ b/server/api/auth/login.post.ts
@@ -83,7 +83,7 @@ export default defineEventHandler(async (e): Promise<Return> => {
             return { success: false, error: new Error('Données utilisateur introuvable') };
         }
 
-        const data = await logSession(e, await setUserSession(e, { 
+        const data = logSession(e, await setUserSession(e, { 
             user: {
                 ...user.data,
                 email: user.email,
diff --git a/server/plugins/session.ts b/server/plugins/session.ts
index 600ce9a..7ca88f2 100644
--- a/server/plugins/session.ts
+++ b/server/plugins/session.ts
@@ -1,6 +1,6 @@
 import useDatabase from "~/composables/useDatabase";
-import { userSessionsTable as sessions } from "~/db/schema";
-import { eq, and } from "drizzle-orm";
+import { userSessionsTable } from "~/db/schema";
+import { eq, and, sql } from "drizzle-orm";
 
 const monthAsMs = 60 * 60 * 24 * 30 * 1000;
 
@@ -8,12 +8,7 @@ export default defineNitroPlugin(() => {
     const db = useDatabase();
     
     sessionHooks.hook('fetch', async (session, event) => {
-        const result = await db.query.userSessionsTable.findFirst({
-            columns: {
-                timestamp: true,
-            },
-            where: and(eq(sessions.id, session.id as unknown as number), eq(sessions.user_id, session.user.id))
-        });
+        const result = db.select({ timestamp: userSessionsTable.timestamp }).from(userSessionsTable).where(and(eq(userSessionsTable.id, sql.placeholder('id')), eq(userSessionsTable.user_id, sql.placeholder('user_id')))).prepare().get({ id: session.id, user_id: session.user.id });
 
         if(!result)
         {
@@ -27,9 +22,9 @@ export default defineNitroPlugin(() => {
         }
         else
         {
-            await db.update(sessions).set({
+            await db.update(userSessionsTable).set({
                 timestamp: new Date(),
-            }).where(and(eq(sessions.id, session.id as unknown as number), eq(sessions.user_id, session.user.id)));
+            }).where(and(eq(userSessionsTable.id, sql.placeholder('id')), eq(userSessionsTable.user_id, sql.placeholder('user_id')))).prepare().run({ id: session.id, user_id: session.user.id });
         }
     });
     sessionHooks.hook('clear', async (session, event) => {
@@ -37,7 +32,7 @@ export default defineNitroPlugin(() => {
         {
             try
             {
-                await db.delete(sessions).where(and(eq(sessions.id, session.id as unknown as number), eq(sessions.user_id, session.user.id)));
+                db.delete(userSessionsTable).where(and(eq(userSessionsTable.id, sql.placeholder('id')), eq(userSessionsTable.user_id, sql.placeholder('user_id')))).prepare().run({ id: session.id, user_id: session.user.id });
             }
             catch(e) { }
         }
diff --git a/server/utils/user.ts b/server/utils/user.ts
index 4dd9a4d..8d4ff01 100644
--- a/server/utils/user.ts
+++ b/server/utils/user.ts
@@ -29,6 +29,7 @@ export function logSession(e: H3Event<EventRequestHandler>, session: UserSession
 {
     const db = useDatabase();
 
-    db.insert(userSessionsTable).values({ id: sql.placeholder('id'), user_id: sql.placeholder('user_id'), timestamp: sql.placeholder('timestamp') }).prepare().execute({ id: session.id, user_id: session.user.id, timestamp: new Date()});
+    console.log("Logging session %s", session.id)
+    db.insert(userSessionsTable).values({ id: sql.placeholder('id'), user_id: sql.placeholder('user_id'), timestamp: sql.placeholder('timestamp') }).prepare().run({ id: session.id, user_id: session.user.id, timestamp: new Date() });
     return session;
 }
\ No newline at end of file