Progress on auth handling

app.vue

@@ -30,27 +30,28 @@ onMounted(() => {
             <line x1="4" y1="18" x2="20" y2="18"></line>
           </svg>
         </div>
-        <div class="gap-3 flex align-stretch">
+        <div class="gapx-3 flex align-stretch">
           <NuxtLink class="site-nav-bar-text" aria-label="Accueil" :href="'/'">
             <ThemeIcon icon="logo" :width=40 :height=40 />
           </NuxtLink>
-          <NuxtLink class="site-nav-bar-text" aria-label="Systeme" :href="'/explorer'"
+          <NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Systeme" :href="'/explorer'"
             :class="{'mod-active': $route.path.startsWith('/explorer')}">Systeme</NuxtLink>
-          <NuxtLink class="site-nav-bar-text" aria-label="Outils" :href="'/tools'"
+          <NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Outils" :href="'/tools'"
             :class="{'mod-active': $route.path.startsWith('/tools')}">Outils</NuxtLink>
         </div>
       </div>
-      <div>
+      <div class="mobile-bigger">
         <SearchView />
       </div>
-      <div class="ps-1 gap-1 flex align-center">
+      <div class="ps-1 gapx-1 flex align-center">
-        <ThemeSwitch />
+        <ThemeSwitch class="mobile-hidden" />
-        <div class="site-login">
+        <NuxtLink class="site-login" href="/user/profile">
           <ThemeIcon icon="user" :width=32 :height=32 />
-        </div>
+        </NuxtLink>
       </div>
     </div>
     <div class="site-body">
+      <LeftComponent />
       <NuxtPage />
     </div>
   </div>

assets/common.css

@@ -49,29 +49,78 @@
     padding-bottom: 3em;
 }
 
-.gap-1 > *
+.flex
+{
+    display: flex;
+}
+.block
+{
+    display: block;
+}
+.inline
+{
+    display: inline;
+}
+.hidden
+{
+    display: none;
+}
+.row
+{
+    display: flex;
+    flex-direction: row;
+}
+.column
+{
+    display: flex;
+    flex-direction: column;
+}
+.gapx-1 > *
 {
     margin-left: .4em;
     margin-right: .4em;
 }
-.gap-1 > *:first-child, .gap-2 > *:first-child, .gap-3 > *:first-child
+.gapx-1 > *:first-child, .gapx-2 > *:first-child, .gapx-3 > *:first-child
 {
     margin-left: 0;
 }
-.gap-1 > *:last-child, .gap-2 > *:last-child, .gap-3 > *:last-child
+.gapx-1 > *:last-child, .gapx-2 > *:last-child, .gapx-3 > *:last-child
 {
     margin-right: 0;
 }
-.gap-2 > *
+.gapx-2 > *
 {
     margin-left: .8em;
     margin-right: .8em;
 }
-.gap-3 > *
+.gapx-3 > *
 {
     margin-left: 1.2em;
     margin-right: 1.2em;
 }
+.gapy-1 > *
+{
+    margin-top: .4em;
+    margin-bottom: .4em;
+}
+.gapy-1 > *:first-child, .gapy-2 > *:first-child, .gapy-3 > *:first-child
+{
+    margin-top: 0;
+}
+.gapy-1 > *:last-child, .gapy-2 > *:last-child, .gapy-3 > *:last-child
+{
+    margin-bottom: 0;
+}
+.gapy-2 > *
+{
+    margin-top: .8em;
+    margin-bottom: .8em;
+}
+.gapy-3 > *
+{
+    margin-top: 1.2em;
+    margin-bottom: 1.2em;
+}
 
 html.dark-mode .dark-hidden {
     display: none;
@@ -101,3 +150,23 @@ html.light-mode .light-block {
 .align-stretch {
     align-items: stretch;
 }
+
+@media screen and (max-width: 750px) {
+    .mobile-bigger {
+        flex: 3 1 0 !important;
+    }
+    .mobile-hidden {
+        display: none !important;
+    }
+    .mobile-block {
+        display: inherit !important;
+    }
+}
+@media screen and (min-width: 750px) {
+    .desktop-hidden {
+        display: none !important;
+    }
+    .desktop-block {
+        display: inherit !important;
+    }
+}

assets/global.css

@@ -4277,7 +4277,9 @@ body {
     object-fit: contain;
 }
 
-.site-nav-bar-text {
+@media screen and (min-width: 750px) 
+{
+    .site-nav-bar-text {
         color: var(--site-name-color);
         cursor: pointer;
         font-size: var(--site-name-size);
@@ -4287,10 +4289,23 @@ body {
         position: relative;
         display: flex;
         align-items: center;
-}
+    }
 
-.site-nav-bar-text:hover {
+    .site-nav-bar-text:hover {
         color: var(--site-name-color-hover);
+    }
+}
+@media screen and (max-width: 750px)
+{
+    .site-body-left-column-inner .site-nav-bar-text {
+        color: var(--site-name-color);
+        padding: .5em 0;
+        font-size: var(--site-name-size);
+        font-weight: var(--nav-parent-item-weight);
+        line-height: var(--line-height-normal);
+        text-decoration: none;
+        display: block;
+    }
 }
 
 .extra-title {
@@ -4978,7 +4993,8 @@ body {
     justify-content: end;
 }
 
-.site-nav-bar-text.mod-active:after {
+@media screen and (min-width: 750px) {
+    .site-nav-bar-text.mod-active:after {
         content: "";
         background-color: var(--nav-item-border-color-active);
         height: 3px;
@@ -4986,6 +5002,7 @@ body {
         left: 0;
         right: 0;
         bottom: calc(-0.5em + 2px);
+    }
 }
 
 .site-login {

components/LeftComponent.vue

@@ -1,13 +1,17 @@
 <template>
-    <div class="site-body-left-column">
+    <div :class="{'desktop-hidden': !$route.path.startsWith('/explorer')}" class="site-body-left-column">
         <div class="site-body-left-column-inner">
             <div class="nav-view-outer">
                 <div class="nav-view">
                     <div class="tree-item">
                         <div class="tree-item-children">
-                            <ContentNavigation v-slot="{ navigation }">
+                            <NuxtLink class="site-nav-bar-text desktop-hidden" aria-label="Systeme" :href="'/explorer'"
+                                :class="{'mod-active': $route.path.startsWith('/explorer')}">Systeme</NuxtLink>
+                            <ContentNavigation v-if="$route.path.startsWith('/explorer')" v-slot="{ navigation }" queryContent="/">
                                 <NavigationLink v-if="!!navigation" v-for="link of navigation.filter(e => !['/tags', '/'].includes(e?._path ?? ''))" :link="link" />
                             </ContentNavigation>
+                            <NuxtLink class="site-nav-bar-text desktop-hidden" aria-label="Outils" :href="'/tools'"
+                                :class="{'mod-active': $route.path.startsWith('/tools')}">Outils</NuxtLink>
                         </div>
                     </div>
                 </div>

components/ThemeIcon.vue

@@ -9,6 +9,6 @@ defineProps<Prop>();
 </script>
 
 <template>
-    <NuxtImg :src="`icons/${icon}.light.svg`" class="dark-hidden light-block" :width="width" :height="height" />
+    <img :src="`/icons/${icon}.light.svg`" class="dark-hidden light-block" :width="width" :height="height" />
-    <NuxtImg :src="`icons/${icon}.dark.svg`" class="dark-block light-hidden" :width="width" :height="height" />
+    <img :src="`/icons/${icon}.dark.svg`" class="dark-block light-hidden" :width="width" :height="height" />
 </template>

nuxt.config.ts

@@ -2,7 +2,7 @@
 import CanvasModule from './transformer/canvas/module'
 
 export default defineNuxtConfig({
-  modules: [CanvasModule, "@nuxt/content", "@nuxtjs/color-mode", "@nuxt/image"],
+  modules: [CanvasModule, "@nuxt/content", "@nuxtjs/color-mode", '@sidebase/nuxt-auth'],
 
   components: [
     {
@@ -17,6 +17,28 @@ export default defineNuxtConfig({
     }
   },
 
+  auth: {
+      baseURL: '/api/auth',
+      provider: {
+        type: 'local',
+        //type: 'refresh',
+        endpoints: {
+            signIn: { path: '/login', method: 'post' },
+            signOut: { path: '/logout', method: 'post' },
+            signUp: { path: '/register', method: 'post' },
+            getSession: { path: '/session', method: 'get' },
+            //refresh: { path: '/refresh', method: 'post' } 
+        },
+        session: {
+          dataType: {
+            id: 'string',
+            username: 'string',
+            email: 'string',
+          }
+        }
+      }
+  },
+
   css: ['~/assets/common.css', '~/assets/global.css'],
 
   content: {

package.json

@@ -1,5 +1,12 @@
 {
-  "devDependencies": { "@nuxt/content": "^2.13.2", "@nuxt/image": "^1.7.0", "@nuxtjs/color-mode": "^3.4.2", "nuxt": "^3.12.4", "vue": "^3.4.34", "vue-router": "^4.4.0" },
+  "devDependencies": {
+    "@nuxt/content": "^2.13.2",
+    "@nuxtjs/color-mode": "^3.4.2",
+    "@sidebase/nuxt-auth": "^0.8.1",
+    "nuxt": "^3.12.4",
+    "vue": "^3.4.34",
+    "vue-router": "^4.4.0"
+  },
   "patchedDependencies": {
     "unstorage@1.10.2": "patches/unstorage@1.10.2.patch",
     "@nuxt/content@2.13.2": "patches/@nuxt%2Fcontent@2.13.2.patch"

pages/explorer/[...slug].vue

@@ -31,7 +31,6 @@ onMounted(() => {
 </script>
 
 <template>
-    <LeftComponent />
     <div class="site-body-center-column">
         <div class="render-container">
             <template v-if="!!page && page._type == 'markdown' && page.body.children.length > 0">

pages/index.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+    title: 'Accueil',
+})
+</script>
+
 <template>
     <div class="site-body-center-column">
         <div class="render-container">

pages/user/login.vue

@@ -1 +1,11 @@
+<script setup lang="ts">
+definePageMeta({  
+    title: 'Se connecter',
+    auth: {    
+        unauthenticatedOnly: true,
+        navigateAuthenticatedTo: '/user/profile'
+    }
+});
+</script>
+
 <template></template>

pages/user/logout.vue

@@ -1 +0,0 @@
-<template></template>

pages/user/profile.vue

@@ -1 +1,23 @@
-<template></template>
+<script setup lang="ts">
+definePageMeta({  
+    title: 'Votre profil',
+    auth: {    
+        unauthenticatedOnly: false,
+        navigateAuthenticatedTo: '/user/login'
+    }
+});
+
+const { data } = useAuth();
+
+</script>
+
+<template>
+    <div class="site-body-center-column">
+        <div class="render-container">
+            <div class="not-found-container">
+                <ThemeIcon icon="logo" :width=128 :height=128 />
+                <div class="not-found-title">Coucou {{ data?.username }} :) :) :) :)</div>
+            </div>
+        </div>
+    </div>
+</template>

pages/user/signin.vue

@@ -1 +0,0 @@
-<template></template>

pages/user/signup.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+definePageMeta({
+    title: 'S\'inscrire',
+    auth: {
+        unauthenticatedOnly: true,
+        navigateAuthenticatedTo: '/user/profile'
+    }
+});
+
+const username = ref<string>(), email = ref<string>(), password = ref<string>();
+
+const { status, signUp } = useAuth();
+
+function connect() {
+    signUp({ username, password, email }, { redirect: true, callbackUrl: '/' });
+
+    console.log(status.value);
+}
+</script>
+
+<template>
+    <!--<div class="site-body-center-column">
+        <div class="render-container">
+            <div v-if="status === 'unauthenticated'" class="not-found-container">
+                <form @submit.prevent="connect" class="column gapy-1">
+                    <input type="text" :value="username" placeholder="Entrez un nom d'utiliateur">
+                    <input type="text" :value="email" placeholder="Entrez une addresse mail">
+                    <input type="password" :value="password" placeholder="Entrez un mot de passe">
+                    <button>Valider</button>
+                </form>
+            </div>
+            <div v-else-if="status === 'loading'"></div>
+            <div v-else class="not-found-container">
+                <div class="not-found-title">👀 Vous n'avez rien à faire ici. 👀</div>
+            </div>
+        </div>
+    </div>-->
+</template>

server/api/login.ts

@@ -0,0 +1 @@
+export default defineEventHandler(() => 'Hello World!');

server/api/logout.ts

@@ -0,0 +1 @@
+export default defineEventHandler(() => 'Hello World!');

server/api/register.ts

@@ -0,0 +1 @@
+export default defineEventHandler((...args) => console.log(...args));

server/api/session.ts

@@ -0,0 +1 @@
+export default defineEventHandler(() => 'Hello World!');