From fb58a24170d5713a96a5ca31c8cb7136ba5c72ec Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Thu, 1 Aug 2024 17:55:50 +0200
Subject: [PATCH] Tests connexion

---
 app.vue                                |   8 +--
 assets/common.css                      |   7 ++
 components/content/prose/ProseA.vue    |   6 +-
 components/explorer/RightComponent.vue |  10 ++-
 composables/useAuth.ts                 |  96 -------------------------
 db.sqlite                              | Bin 69632 -> 77824 bytes
 middleware/auth.ts                     |   7 --
 pages/explorer/[...slug].vue           |  18 +++--
 pages/user/login.vue                   |  64 +++++++++++++++--
 pages/user/profile.vue                 |   4 +-
 pages/user/register.vue                |   7 +-
 schemas/login.ts                       |   8 +++
 server/api/auth/login.post.ts          |  95 +++++++++++++++++++++++-
 server/api/auth/session.get.ts         |   2 -
 server/api/comments.get.ts             |  25 +++++++
 15 files changed, 222 insertions(+), 135 deletions(-)
 delete mode 100644 composables/useAuth.ts
 delete mode 100644 middleware/auth.ts
 create mode 100644 schemas/login.ts
 delete mode 100644 server/api/auth/session.get.ts
 create mode 100644 server/api/comments.get.ts

diff --git a/app.vue b/app.vue
index aceab37..b631f47 100644
--- a/app.vue
+++ b/app.vue
@@ -34,12 +34,12 @@ onMounted(() => {
           </svg>
         </div>
         <div class="gapx-3 flex align-stretch">
-          <NuxtLink @click="hideLeftPanel" class="site-nav-bar-text" aria-label="Accueil" :href="'/'">
+          <NuxtLink @click="hideLeftPanel" class="site-nav-bar-text" aria-label="Accueil" to="/">
             <ThemeIcon icon="logo" :width=40 :height=40 />
           </NuxtLink>
-          <NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Systeme" :href="'/explorer'"
+          <NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Systeme" to="/explorer"
             :class="{'mod-active': $route.path.startsWith('/explorer')}">Systeme</NuxtLink>
-          <NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Outils" :href="'/tools'"
+          <NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Outils" to="/tools"
             :class="{'mod-active': $route.path.startsWith('/tools')}">Outils</NuxtLink>
         </div>
       </div>
@@ -48,7 +48,7 @@ onMounted(() => {
       </div>
       <div class="ps-1 gapx-1 flex align-center">
         <ThemeSwitch class="mobile-hidden" />
-        <NuxtLink class="site-login" href="/user/profile">
+        <NuxtLink class="site-login" to="/user/profile">
           <ThemeIcon icon="user" :width=32 :height=32 />
         </NuxtLink>
       </div>
diff --git a/assets/common.css b/assets/common.css
index 96583a8..db9ac87 100644
--- a/assets/common.css
+++ b/assets/common.css
@@ -270,4 +270,11 @@ html.light-mode .light-block {
     border-radius: 50%;
     box-sizing: content-box;
     animation: rotate 1s linear infinite;
+}
+
+.input-form a {
+    padding: .5em;
+    text-align: center;
+    font-style: italic;
+    font-weight: var(--font-extrabold);
 }
\ No newline at end of file
diff --git a/components/content/prose/ProseA.vue b/components/content/prose/ProseA.vue
index 1b5264c..8c60e25 100644
--- a/components/content/prose/ProseA.vue
+++ b/components/content/prose/ProseA.vue
@@ -116,7 +116,7 @@ function hidePreview(e: Event) {
 }
 </script>
 
-<template >
+<template>
     <template v-if="href !== ''">
         <a @mouseenter="(e) => showPreview(e, true)" @mouseleave="hidePreview" v-bind="$attrs"
             :href="stringifyParsedURL({ host: '/explorer', pathname: (content?._path ?? href) + (isTag && anchor ? '/' + anchor.substring(1) : ''), hash: !isTag ? anchor : '', search: '' })"
@@ -160,7 +160,7 @@ function hidePreview(e: Event) {
             </div>
         </Teleport>
     </template>
-    <a v-bind="$attrs" :href="href" :target="target" v-else>
+    <NuxtLink v-bind="$attrs" :to="href" v-else>
         <slot></slot>
-    </a>
+    </NuxtLink>
 </template>
\ No newline at end of file
diff --git a/components/explorer/RightComponent.vue b/components/explorer/RightComponent.vue
index 825e038..390383d 100644
--- a/components/explorer/RightComponent.vue
+++ b/components/explorer/RightComponent.vue
@@ -2,6 +2,7 @@
 interface Props
 {
     toc: Toc;
+    comments?: Comment[];
 }
 const props = defineProps<Props>();
 </script>
@@ -9,14 +10,11 @@ const props = defineProps<Props>();
 <template>
     <div class="site-body-right-column">
         <div class="site-body-right-column-inner">
+            <div v-if="comments !== undefined">
+                {{ comments.length }} commentaire{{ comments.length === 1 ? '' : 's' }}
+            </div>
             <div v-if="!!toc" class="outline-view-outer node-insert-event">
                 <div class="list-item published-section-header">
-                    <span class="published-section-header-icon">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-list">
-                            <line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line>
-                            <line x1="3" y1="18" x2="3.01" y2="18"></line>
-                        </svg>
-                    </span>
                     <span>Sur cette page</span>
                 </div>
                 <div class="outline-view">
diff --git a/composables/useAuth.ts b/composables/useAuth.ts
deleted file mode 100644
index a82456c..0000000
--- a/composables/useAuth.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-export enum AuthStatus
-{
-    disconnected, loading, connected
-};
-export interface Auth
-{
-    id: Ref<number>;
-    data: Ref<Record<string, any>>;
-    sessionId: Ref<string>;
-    status: Ref<AuthStatus>;
-
-    lastRefresh: Ref<Date>;
-
-    register: (username: string, email: string, password: string, data?: Record<string, any>) => Promise<any>;
-    login: (usernameOrEmail: string, password: string) => Promise<void>;
-    logout: () => Promise<void>;
-
-    refresh: () => Promise<void>;
-}
-
-
-async function register(username: string, email: string, password: string, additionalData?: Record<string, any>): Promise<any>
-{
-    const id = useState<number>("auth:id");
-    const data = useState<any>("auth:data");
-    const sessionId = useState<string>("auth:sessionId");
-    const status = useState<AuthStatus>("auth:status");
-    const lastRefresh = useState<Date>("auth:date");
-    status.value = AuthStatus.loading;
-
-    try
-    {
-        const result = await $fetch("/api/auth/register", {
-            method: 'POST',
-            body: { username, email, password, additionalData },
-            ignoreResponseError: true,
-        });
-
-        if(result.success)
-        {
-            id.value = result.id!;
-            data.value = { ...additionalData, username: username, email: email };
-            sessionId.value = result.sessionId!;
-            status.value = AuthStatus.connected;
-            lastRefresh.value = new Date();
-
-            return;
-        }
-        else if(result.error)
-        {
-            status.value = AuthStatus.disconnected;
-            
-            return result.error;
-        }
-        else
-        {
-            status.value = AuthStatus.disconnected;
-
-            return;
-        }
-    }
-    catch(e) { 
-        console.log(JSON.stringify(e));
-        status.value = AuthStatus.disconnected; 
-    }
-}
-async function login(usernameOrEmail: string, password: string): Promise<void>
-{
-    const status = useState<AuthStatus>("auth:status");
-    status.value = AuthStatus.disconnected;
-}
-async function logout(): Promise<void>
-{
-    const status = useState<AuthStatus>("auth:status");
-    status.value = AuthStatus.disconnected;
-}
-
-async function refresh(): Promise<void>
-{
-    const status = useState<AuthStatus>("auth:status");
-    status.value = AuthStatus.disconnected;
-}
-
-export default function useAuth(): Auth {
-    const id = useState<number>("auth:id", () => 0);
-    const data = useState<any>("auth:data", () => { });
-    const sessionId = useState<string>("auth:sessionId", () => '');
-    const status = useState<AuthStatus>("auth:status", () => AuthStatus.disconnected);
-
-    const lastRefresh = useState<Date>("auth:date", () => new Date());
-
-    return {
-        id, data, sessionId, status, lastRefresh,
-        register, login, logout, refresh
-    };
-}
\ No newline at end of file
diff --git a/db.sqlite b/db.sqlite
index fee7ba934dc6feeda8d7b07ff477cadf164b4552..97b69f4f7cf6d21f10858ab00b2694dd6f87d73f 100644
GIT binary patch
delta 1369
zcmb_ZPi)&%7=N!x?AT8762i!|5%y{oCEemAj{l@lC8`ib-RPf{G|?CuijwpNtfp~R
zyCT|UZRsQq9H@NY$PQc(NN9u`64G{MLY&5KOn`*6X_a=OVmt7htW#k~^nmTp&;H)~
zeZTMb{Wh<AH}82rJ{b`J08ttt8Xg+jZc32_kiOCjatc7qEl(&O`a{?hYJn&Iv>-6I
zxY@vTfZ=}QJ{P_Z{u2Dey>IM(<K;i_N^C5Xf!Fd5Vvp&vb-B~5+hna*w;Rn4smtL~
zrCh9*akcpRd>M;}_P4Xj5W0h0XjD10HH0c-PM&>*Q$(EPInh{g-b5#yK5Mcmal<0(
zb>}AkhPG``{&*Z-dv(ayGS}8f*R~GUf3QDIJ3Ib~Q*EO|M6OzXtBM!T)2PkQrzlU)
zv<%xYyUwTlF;29|<qgtp5%-S~JEZ%r?c8KvdPlTL-+mrlI={GFtrX8KR<T$bwIbrB
z%DIJN<szOdUrdfVH&(=yIOI<~<D;2pWY>dd2Wh_#p5Xf6MMh$%MF23$Xw9UVSSjvA
zgyXRTm38^x3khEU+4)M4yakns(T}9_GZzv(+Y@xwi3HqXoqg^U9CMEIUmlv{{fS@#
z;DrPPMt6nusS}1x>WvNCEYdQy3<L#jSWahOP;yLccAWCR?C_zeXX`cDIUW4Yc@j9|
z4VmCu=S)zh$qY?m$`e6RzP{41i@ICK?b`V%5FS_R&)XfP@Y0Zro^@MC%Ft(vSQa(J
ziVotT-ys9hC4epsBH;?Ux-|~j8U$ObKBcYY<*cenEw#{+)FvTPVX8ePk*RD`(VL3e
zR5ag$dBx~-8W}B}#mNg)s`<W!saJ9~ot?%sp{vulud9=|*z0x31=5@|?2M-5(~6Fh
zb7!jy^C{dhRtcUZtyObU#-;bx%{7vdbNMu_LCY>T+KqMNDF*I_v=2Yxsd*6H1@sxC
zZQn+@gr~+GrQx9Kdl>wS+$o~VL?Hz#vZ+a`o>!%UtjJPcR@;qiHkWH_`u{FB^WSoF
zvA12h!=~?2u|J@sEA}Yue!V1M$WqK68vJ>cS)#g!*BE{KXn5(?1BARD$oWPi-3MrY
zz~6g_qJEZvLBF5#xf6qE51>7I`d1W<gdywhz>_|9dBegpGc%vTFh9aS2I%o1^5dhw
V6}<z{9g4k;PEUGk@JKfK{sIrZV-f%W

delta 617
zcmZp8z|ydQWrDOICj$e6AQ1BdF$)l@P1G^g<z&#SD&XZbX5it_W9F0PRp))d_no_e
zJCx@ShaNXK=R3~LoE1D}U>LSpP{5Tfttm>LU0h$Eu_d`AF)1gtxG*Ovz9cobARf$(
zZ?aZuvQUMnkcX*gQqus7G*`n!Q1qCf8)CvT`5>ztqsin4tP>|6;d0-s$HB_z&b^w!
zRa{-2v4u^E4d?*|21`XYabI;thRnQ_)C!;(nI)<5iKQiMs%&f;P!;OvDlD}opXIh-
z=CjlU(pr*+rNya5@x`gd#hLke#jH(IK!*aYXfB@oj#HkIWilVv8lVH7v+(6J22MWD
zZN@H86c1#J0NEOouX6IU@#Qnz4Aq}3$SpB>E3W{zVZ2dsp`#?5I7EyC$kBpvKnkQy
zKnhTU%!ChUh%>?vQImK>3^lBi|L|xtH`=jHj^|aF9LF<{&6u4{++7i9v&>`-9^uWh
ze9sw~7z8#8CcNgK7{JfQ1qvYqmlu_bD!VCwTVb<M!YiOg*3G}_*#b~>FA!s9W?<ON
X_24Z(e{N!Cj$U$pE)%K&OBe+JKAx%P

diff --git a/middleware/auth.ts b/middleware/auth.ts
deleted file mode 100644
index 8ad1e51..0000000
--- a/middleware/auth.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export default defineNuxtRouteMiddleware((to) => {
-	const meta = to.meta.auth;
-
-	//useSession(to.)
-
-	return to;
-})
\ No newline at end of file
diff --git a/pages/explorer/[...slug].vue b/pages/explorer/[...slug].vue
index 333a808..2ea54f6 100644
--- a/pages/explorer/[...slug].vue
+++ b/pages/explorer/[...slug].vue
@@ -7,18 +7,22 @@ function toggleLeftPanel(_: Event) {
 
 <script setup lang="ts">
 const { hash, path } = useRoute();
+const route = path.substring(path.indexOf('/explorer') + '/explorer'.length);
 
-const { data: page } = await useAsyncData('home', queryContent(path.substring(path.indexOf('/explorer') + '/explorer'.length)).findOne);
+const { data: page } = await useAsyncData('home', queryContent(route).findOne);
+const { data: comments } = await useFetch(`/api/comments`, {
+    query: {
+        route: route
+    }
+});
 
 if(page.value)
-    useContentHead(page.value!);
-
-if(hash)
 {
-    console.log(document.getElementById(hash.substring(1)));
-    document.getElementById(hash.substring(1))?.scrollTo({ behavior: 'smooth', top: 100 });
+    useContentHead(page.value!);
 }
 
+const content = ref();
+
 onMounted(() => {
     document.querySelectorAll('.callout.is-collapsible .callout-title').forEach(e => {
         e.addEventListener('click', (_) => {
@@ -53,7 +57,7 @@ onMounted(() => {
                         </div>
                     </div>
                 </div>
-                <RightComponent v-if="page.body?.toc" :toc="page?.body?.toc" />
+                <RightComponent v-if="page.body?.toc" :toc="page?.body?.toc" :comments="comments" />
             </template>
             <CanvasRenderer v-else-if="!!page && page._type == 'canvas'" :key="page._id" :canvas="page" />
             <div v-else-if="!!page">
diff --git a/pages/user/login.vue b/pages/user/login.vue
index 42ea93b..e02c0cd 100644
--- a/pages/user/login.vue
+++ b/pages/user/login.vue
@@ -1,14 +1,70 @@
 <script setup lang="ts">
-definePageMeta({  
-    auth: {    
-        unauthenticatedOnly: true,
-        navigateAuthenticatedTo: '/user/profile'
+import { schema, type Login } from '~/schemas/login';
+
+definePageMeta({
+    auth: {
+        disconnectedOnly: true,
+        connectedRedirect: '/user/profile'
     }
 });
+
+const state = reactive<Login>({
+    username: '',
+    password: ''
+});
+
+const { status, login } = useAuth();
+
+const usernameError = ref("");
+const passwordError = ref("");
+
+async function submit()
+{
+    const data = schema.safeParse(state);
+
+    if(data.success && state.password !== "")
+    {
+        let errors = await login(data.data.username, data.data.password);
+
+        if(status.value === AuthStatus.connected)
+        {
+            await navigateTo('/user/profile', { replace: true });
+        }
+        else
+        {
+            errors = errors?.issues ?? errors;
+            usernameError.value = errors?.find((e: any) => e.path.includes("username"))?.message ?? "";
+            passwordError.value = errors?.find((e: any) => e.path.includes("password"))?.message ?? "";
+        }
+    }
+    else
+    {
+        usernameError.value = data.error?.issues.find(e => e.path.includes("username"))?.message ?? "";
+        passwordError.value = data.error?.issues.find(e => e.path.includes("password"))?.message ?? "";
+    }
+}
 </script>
 
 <template>
     <Head>
         <Title>Se connecter</Title>
     </Head>
+    <div class="site-body-center-column">
+        <div class="render-container flex align-center justify-center">
+            <form v-if="status === AuthStatus.disconnected" @submit.prevent="submit" class="input-form input-form-wide">
+                <h1>Connexion</h1>
+                <Input type="text" autocomplete="username" v-model="state.username"
+                    placeholder="" title="Nom d'utilisateur ou adresse mail" :error="usernameError" />
+                <Input type="password" autocomplete="current-password" v-model="state.password"
+                    placeholder="" title="Mot de passe"
+                    :error="passwordError" />
+                <button>Se connecter</button>
+                <NuxtLink to="/user/register">Pas de compte ?</NuxtLink>
+            </form>
+            <div v-else-if="status === AuthStatus.loading" class="input-form"><div class="loading"></div></div>
+            <div v-else class="not-found-container">
+                <div class="not-found-title">👀 Vous n'avez rien à faire ici. 👀</div>
+            </div>
+        </div>
+    </div>
 </template>
\ No newline at end of file
diff --git a/pages/user/profile.vue b/pages/user/profile.vue
index 08f3a38..44e041a 100644
--- a/pages/user/profile.vue
+++ b/pages/user/profile.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 definePageMeta({
     auth: {    
-        unauthenticatedOnly: false,
-        navigateUnauthenticatedTo: '/user/login'
+        disconnectedOnly: false,
+        disconnectedRedirect: '/user/login'
     }
 });
 
diff --git a/pages/user/register.vue b/pages/user/register.vue
index 3d7fb87..ee535d6 100644
--- a/pages/user/register.vue
+++ b/pages/user/register.vue
@@ -3,8 +3,8 @@ import { schema, type Registration } from '~/schemas/registration';
 
 definePageMeta({
     auth: {
-        unauthenticatedOnly: true,
-        navigateAuthenticatedTo: '/user/profile'
+        disconnectedOnly: true,
+        connectedRedirect: '/user/profile'
     }
 });
 
@@ -86,7 +86,8 @@ async function submit()
                 <Input type="password" v-model="confirmPassword" placeholder="Confirmer le mot de passe"
                     title="Confirmer le mot de passe"
                     :error="confirmPassword === '' || confirmPassword === state.password ? '' : 'Les mots de passe saisies ne sont pas identique'" />
-                <button>Valider</button>
+                <button>S'inscrire</button>
+                <NuxtLink to="/user/login">Se connecter</NuxtLink>
             </form>
             <div v-else-if="status === AuthStatus.loading" class="input-form"><div class="loading"></div></div>
             <div v-else class="not-found-container">
diff --git a/schemas/login.ts b/schemas/login.ts
new file mode 100644
index 0000000..c482505
--- /dev/null
+++ b/schemas/login.ts
@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+export const schema = z.object({
+    username: z.string({ required_error: "Nom d'utilisateur obligatoire" }),
+    password: z.string({ required_error: "Mot de passe obligatoire" }),
+});
+
+export type Login = z.infer<typeof schema>; 
\ No newline at end of file
diff --git a/server/api/auth/login.post.ts b/server/api/auth/login.post.ts
index 05ffd3b..835c11a 100644
--- a/server/api/auth/login.post.ts
+++ b/server/api/auth/login.post.ts
@@ -1,3 +1,96 @@
+import useDatabase from '~/composables/useDatabase';
+import { schema } from '~/schemas/login';
+
 export default defineEventHandler(async (e) => {
+    const { sessionPassword } = useRuntimeConfig();
+    const session = await useSession(e, {
+        password: sessionPassword,
+    });
+
+    try
+    {
+        const db = useDatabase();
+
+        console.log(session.id);
+
+        if(session.id && session.data.id)
+        {
+            const checkSession = db.query("SELECT user_id FROM user_sessions WHERE id = ?1");
+            const sessionId = checkSession.get(session.id) as any;
+
+            console.log(sessionId);
+
+            if(sessionId && sessionId.user_id === session.data.id)
+            {
+                return { success: true, id: session.data.id, sessionId: session.id, data: session.data };
+            }
+            else
+            {
+                session.clear();
+                
+                setResponseStatus(e, 406);
+                return { success: false, error: { path: ['global'], message: 'Vous êtes déjà connecté' } };
+            }
     
-});
\ No newline at end of file
+        }
+        const body = await readValidatedBody(e, schema.safeParse);
+
+        if (!body.success)
+        {
+            session.clear();
+
+            setResponseStatus(e, 406);
+            return { success: false, error: body.error };
+        }
+
+
+        const hash = await Bun.password.hash(body.data.password);
+        const checkID = db.query(`SELECT id FROM users WHERE (username = ?1 or email = ?1)`);
+        const id = checkID.get(body.data.username) as any;
+
+        if(!id || !id.id)
+        {
+            session.clear();
+
+            setResponseStatus(e, 401);
+            return { success: false, error: { path: ['username'], message: 'Identifiant inconnu' } };
+        }
+
+        const checkHash = db.query(`SELECT COUNT(*) as count FROM users WHERE id = ?1 and hash = ?2`);
+        const validation = checkHash.get(id.id, hash) as any;
+
+        if(validation && validation.count && validation.count !== 1)
+        {
+            session.clear();
+
+            setResponseStatus(e, 401);
+            return { success: false, error: { path: ['password'], message: 'Mot de passe incorrect' } };
+        }
+
+        const loggingIn = db.query(`INSERT INTO user_sessions(id, user_id, ip, agent, lastRefresh) VALUES(?1, ?2, ?3, ?4, ?5)`);
+        loggingIn.get(session.id, id.id, getRequestIP(e), getRequestHeader(e, 'User-Agent'), Date.now());
+
+        await session.update(getData(db, id.id));
+
+        setResponseStatus(e, 201);
+        return { success: true, id: id.id, sessionId: session.id, data: session.data };
+    }
+    catch(e)
+    {
+        session.clear();
+
+        console.error(e);
+        return { success: false, error: e };
+    }
+});
+
+function getData(db: Database, id: string): any
+{
+    const userQuery = db.query(`SELECT * FROM users WHERE id = ?1`);
+    const user = userQuery.get(id);
+
+    const userDataQuery = db.query(`SELECT * FROM users_data WHERE user_id = ?1`);
+    const userData = userDataQuery.get(id);
+
+    return { ...user, ...userData };
+}
\ No newline at end of file
diff --git a/server/api/auth/session.get.ts b/server/api/auth/session.get.ts
deleted file mode 100644
index 0e2f809..0000000
--- a/server/api/auth/session.get.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export default defineEventHandler(async (e) => {
-});
\ No newline at end of file
diff --git a/server/api/comments.get.ts b/server/api/comments.get.ts
new file mode 100644
index 0000000..3b89cae
--- /dev/null
+++ b/server/api/comments.get.ts
@@ -0,0 +1,25 @@
+import useDatabase from '~/composables/useDatabase';
+
+export interface Comment
+{
+    user: number;
+    file: string;
+    position: number;
+    length: number;
+    sequence: number;
+    text: string;
+}
+export default defineEventHandler(async (e) => {
+    const query = getQuery(e);
+
+    if(query && query.route !== undefined)
+    {
+        const db = useDatabase();
+
+        const comments = db.query("SELECT * FROM comments WHERE file = ?1").all(query.route as string) as Comment[];
+
+        return comments;
+    }
+    
+    setResponseStatus(e, 404);
+});
\ No newline at end of file