Updates for cache (#193)

datagouv · Dec 5, 2024 · ef31d5a · ef31d5a
1 parent 0948582
commit ef31d5a
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 67 deletions.
diff --git a/components/AdminSidebar/AdminSidebarMenu/AdminSidebarMenu.vue b/components/AdminSidebar/AdminSidebarMenu/AdminSidebarMenu.vue
@@ -195,7 +195,7 @@ const { expanded, toggle, unregister } = register()
 
 watchEffect(() => {
   if (props.defaultOpen) {
-    console.log('Opening')
+    // console.log('Opening')
     toggle()
   }
 })

diff --git a/components/SiteHeader/SiteHeader.vue b/components/SiteHeader/SiteHeader.vue
@@ -180,52 +180,53 @@
           </div>
           <div class="fr-header__tools">
             <div class="fr-header__tools-links">
-              <ul
-                v-if="me"
-                class="fr-btns-group"
-              >
-                <li>
-                  <a
-                    :href="me.page"
-                    class="fr-btn fr-icon-svg fr-icon--sm fr-grid-row"
-                  >
-                    <NuxtImg
-                      :src="useUserAvatar(me, 24)"
-                      width="24"
-                      height="24"
-                      loading="lazy"
-                      alt=""
-                      class="mr-2 rounded-full"
-                    />
-                    {{ me.first_name }} {{ me.last_name }}
-                  </a>
-                </li>
-                <li>
-                  <NuxtLinkLocale
-                    to="/admin/"
-                    :external="true"
-                    class="fr-btn"
-                  >
-                    <RiSettings3Line
-                      size="1rem"
-                      class="fr-mr-1w"
-                    />
-                    {{ $t("Administration") }}
-                  </NuxtLinkLocale>
-                </li>
-                <li>
-                  <a
-                    :href="`${config.public.apiBase}/logout`"
-                    class="fr-btn"
-                  >
-                    <RiLogoutBoxRLine
-                      size="1rem"
-                      class="fr-mr-1w"
-                    />
-                    {{ $t('Logout') }}
-                  </a>
-                </li>
-              </ul>
+              <ClientOnly v-if="me">
+                <ul
+                  class="fr-btns-group"
+                >
+                  <li>
+                    <a
+                      :href="me.page"
+                      class="fr-btn fr-icon-svg fr-icon--sm fr-grid-row"
+                    >
+                      <NuxtImg
+                        :src="useUserAvatar(me, 24)"
+                        width="24"
+                        height="24"
+                        loading="lazy"
+                        alt=""
+                        class="mr-2 rounded-full"
+                      />
+                      {{ me.first_name }} {{ me.last_name }}
+                    </a>
+                  </li>
+                  <li>
+                    <NuxtLinkLocale
+                      to="/admin/"
+                      :external="true"
+                      class="fr-btn"
+                    >
+                      <RiSettings3Line
+                        size="1rem"
+                        class="fr-mr-1w"
+                      />
+                      {{ $t("Administration") }}
+                    </NuxtLinkLocale>
+                  </li>
+                  <li>
+                    <a
+                      :href="`${config.public.apiBase}/logout`"
+                      class="fr-btn"
+                    >
+                      <RiLogoutBoxRLine
+                        size="1rem"
+                        class="fr-mr-1w"
+                      />
+                      {{ $t('Logout') }}
+                    </a>
+                  </li>
+                </ul>
+              </ClientOnly>
               <ul
                 v-else
                 class="fr-btns-group"

diff --git a/middleware/auth.ts b/middleware/auth.ts
@@ -1,11 +1,10 @@
-export default defineNuxtRouteMiddleware(async (to, from) => {
+export default defineNuxtRouteMiddleware(async (to, _from) => {
   // console.log(`Calling auth middleware ${from.path} -> ${to.path}`)
-  const me = useMaybeMe();
+  const me = useMaybeMe()
 
   if (to.path !== '/en/login' && !me.value) {
     // console.log('-> redirecting to login…')
     const localePath = useLocalePath()
     return navigateTo(localePath('/login'))
   }
 })
-
diff --git a/middleware/guest.ts b/middleware/guest.ts
@@ -1,6 +1,6 @@
-export default defineNuxtRouteMiddleware(async (to, from) => {
+export default defineNuxtRouteMiddleware(async (to, _from) => {
   // console.log(`Calling guest middleware ${from.path} -> ${to.path}`)
-  const me = useMaybeMe();
+  const me = useMaybeMe()
 
   if (to.path !== '/en/beta/admin' && me.value) {
     // console.log('-> redirecting to new admin…')

diff --git a/middleware/me.global.ts b/middleware/me.global.ts
@@ -1,4 +1,4 @@
-export default defineNuxtRouteMiddleware(async (to, from) => {
+export default defineNuxtRouteMiddleware(async (_to, _from) => {
   // console.log(`Calling me middleware ${from.path} -> ${to.path}`)
   const me = useMaybeMe()
   if (me.value !== undefined) {

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -87,8 +87,13 @@ export default defineNuxtConfig({
   typescript: {
     typeCheck: false,
   },
-  // required for nuxt/content
-  ssr: true,
+
+  routeRules: {
+    '/login': { prerender: true },
+    '/register': { prerender: true },
+    // Admin dashboard renders only on server-side
+    '/beta/admin/**': { ssr: true },
+  },
 
   modules: [
     '@nuxt/content',

diff --git a/pages/login/index.vue b/pages/login/index.vue
@@ -1,15 +1,39 @@
 <template>
   <div class="fr-container">
-    <form @submit.prevent="send" class="space-y-4 py-8">
+    <form
+      class="space-y-4 py-8"
+      @submit.prevent="send"
+    >
       <div>
-        <label class="fr-label" for="email">Email</label>
-        <input class="fr-input" type="email" id="email" name="email" v-model="email">
+        <label
+          class="fr-label"
+          for="email"
+        >Email</label>
+        <input
+          id="email"
+          v-model="email"
+          class="fr-input"
+          type="email"
+          name="email"
+        >
       </div>
       <div>
-        <label class="fr-label" for="password">Password</label>
-        <input class="fr-input" type="password" id="password" name="password" v-model="password">
+        <label
+          class="fr-label"
+          for="password"
+        >Password</label>
+        <input
+          id="password"
+          v-model="password"
+          class="fr-input"
+          type="password"
+          name="password"
+        >
       </div>
-      <button type="submit" class="fr-btn">
+      <button
+        type="submit"
+        class="fr-btn"
+      >
         send
       </button>
     </form>
@@ -18,26 +42,26 @@
 
 <script setup lang="ts">
 const { $api } = useNuxtApp()
-const me = useMaybeMe();
+const me = useMaybeMe()
 
-definePageMeta({ middleware: ['guest'] });
+definePageMeta({ middleware: ['guest'] })
 
 const email = ref('')
 const password = ref('')
 
-const token = useToken();
+const _token = useToken()
 const localePath = useLocalePath()
 
 async function send() {
   // The login page is protected by CSRF (unlike the API), so we need to fetch a CSRF
   // token before making a login request. We could disable this protection inside the
   // backend (but not sure about the security of this change).
-  const csrfResponse = await $api<{ response: { csrf_token: string }}>('/en/login', {
+  const csrfResponse = await $api<{ response: { csrf_token: string } }>('/en/login', {
     credentials: 'include',
   })
   const csrfToken = csrfResponse.response.csrf_token
 
-  const response = await $api<{ response: { user: { authentication_token: string }}}>('/en/login?include_auth_token=true', {
+  const _response = await $api<{ response: { user: { authentication_token: string } } }>('/en/login?include_auth_token=true', {
     method: 'POST',
     body: JSON.stringify({ email: email.value, password: password.value }),
     headers: { 'X-CSRF-Token': csrfToken },

diff --git a/utils/auth.ts b/utils/auth.ts
@@ -62,7 +62,7 @@ export const loadMe = async (meState: Ref<Me | null | undefined>) => {
       headers,
     })
   }
-  catch (e) {
+  catch {
     meState.value = null
   }
 }