add personnal info

.env

@@ -1 +1 @@
-VITE_API_URL=https://geovisio-backend-dev.osc-fr1.scalingo.io/api/
+VITE_API_URL=https://geovisio-backend-dev.osc-fr1.scalingo.io/

src/components/Header.vue

@@ -26,6 +26,7 @@
               :path="logoutUrl"
               :text="$t('general.header.logout_text')"
             />
+            <Link path="my-account" :text="$t('general.header.logout_text')" />
           </li>
           <li class="nav-list-item">
             <Link
@@ -52,11 +53,19 @@
             />
             <i v-if="isLogged" class="chevron bi bi-chevron-up"></i>
             <div v-if="isLogged" class="sub-nav-block">
-              <Link
-                type="external"
-                :path="logoutUrl"
-                :text="$t('general.header.logout_text')"
-              />
+              <div class="logged-link">
+                <Link
+                  path="mon-compte"
+                  :text="$t('general.header.account_text')"
+                />
+              </div>
+              <div class="logged-link">
+                <Link
+                  type="external"
+                  :path="logoutUrl"
+                  :text="$t('general.header.logout_text')"
+                />
+              </div>
             </div>
           </div>
           <button class="menu-burger" @click="toggleMenu">
@@ -89,12 +98,12 @@ const isLogged = computed((): boolean => {
   return !!cookies.get('user_id')
 })
 const logoutUrl = computed((): string => {
-  return `${import.meta.env.VITE_API_URL}auth/logout?next_url=${route.path}`
+  return `${import.meta.env.VITE_API_URL}api/auth/logout?next_url=${route.path}`
 })
 const userUrl = computed((): string => {
   return isLogged.value
     ? ''
-    : `${import.meta.env.VITE_API_URL}auth/login?next_url=${route.path}`
+    : `${import.meta.env.VITE_API_URL}api/auth/login?next_url=${route.path}`
 })
 const userName = computed((): string => {
   return isLogged.value
@@ -147,7 +156,6 @@ const userName = computed((): string => {
   margin-left: 0.5rem;
 }
 .sub-nav-block {
-  padding: 1rem 2rem 1rem 1rem;
   display: none;
   border-radius: 0.5rem;
   border: 1px solid var(--black);
@@ -157,6 +165,19 @@ const userName = computed((): string => {
   top: 3.5rem;
   z-index: 1;
 }
+.logged-link {
+  padding: 1rem 2rem 1rem 1rem;
+}
+.logged-link:first-child {
+  padding-top: 1.5rem;
+}
+.logged-link:nth-child(2) {
+  padding-bottom: 1.5rem;
+}
+.logged-link:hover {
+  border-radius: 0.5rem;
+  background-color: var(--grey);
+}
 .item-with-sub:hover .sub-nav-block {
   display: block;
 }

src/components/__tests__/Header.spec.js

@@ -52,10 +52,10 @@ describe('Template', () => {
           }
         }
       })
-
       expect(wrapper.html()).contains('item-logout')
       expect(wrapper.html()).contains('chevron bi bi-chevron-up')
       expect(wrapper.html()).contains('auth/logout')
+      expect(wrapper.html()).contains('path="mon-compte"')
     })
   })
 })

src/locales/fr.json

@@ -6,6 +6,7 @@
       "alt_logo": "Logo de l'instance",
       "title": "Instance Panoramax IGN",
       "logout_text": "Déconnexion",
+      "account_text": "Mon compte",
       "login_text": "Connexion"
     },
     "beta_version": "Version Beta",

src/router/index.ts

@@ -1,16 +1,40 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw, RouteLocationNormalized } from 'vue-router'
+import { useCookies } from 'vue3-cookies'
 import HomeView from '../views/HomeView.vue'
+import MyAccountView from '../views/MyAccountView.vue'
+
+const { cookies } = useCookies()
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomeView
+  },
+  {
+    path: '/mon-compte',
+    name: 'account',
+    component: MyAccountView
+  },
+  { path: '/:catchAll(.*)', component: HomeView }
+]
 
 const router = createRouter({
   history: createWebHistory(),
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: HomeView
-    },
-    { path: '/:catchAll(.*)', component: HomeView }
-  ]
+  routes
+})
+
+router.beforeEach(async (to: RouteLocationNormalized) => {
+  const loggedPages = ['/mon-compte']
+  const authRequired = loggedPages.includes(to.path)
+  const isLogged = !!cookies.get('user_id')
+
+  if (!isLogged && authRequired) {
+    return (window.location.href = `${
+      import.meta.env.VITE_API_URL
+    }api/auth/login`)
+  }
 })
 
 export default router

src/views/HomeView.vue

@@ -63,7 +63,7 @@ onMounted(async () => {
   try {
     await new GeoVisio(
       'viewer', // Div ID
-      `${import.meta.env.VITE_API_URL}search`, // STAC API search endpoint
+      `${import.meta.env.VITE_API_URL}api/search`, // STAC API search endpoint
       {
         map: {
           startWide: true,

src/views/MyAccountView.vue

@@ -0,0 +1,22 @@
+<template>
+  <Header />
+  <main>
+    <iframe :src="myAccountUrl" class="iframe"></iframe>
+  </main>
+</template>
+
+<script setup lang="ts">
+import Header from '@/components/Header.vue'
+import { computed } from 'vue'
+
+const myAccountUrl = computed<string>(
+  () => `${import.meta.env.VITE_API_URL}#/personal-info`
+)
+</script>
+
+<style scoped>
+.iframe {
+  width: 100vw;
+  min-height: calc(100vh - 8rem);
+}
+</style>

src/views/__tests__/MyAccountView.spec.js

@@ -0,0 +1,13 @@
+import { it, describe, expect } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import MyAccountView from '../MyAccountView.vue'
+
+describe('Template', () => {
+  it('should render the view with the iframe', async () => {
+    import.meta.env.VITE_API_URL = 'api-url/'
+    const wrapper = shallowMount(MyAccountView)
+
+    expect(wrapper.html()).contains('<iframe')
+    expect(wrapper.html()).contains('personal-info')
+  })
+})