From b0340325061f86c422503954c17f9d42f7a160d6 Mon Sep 17 00:00:00 2001
From: Nadeige COUTHON <nadeige.couthon@gmail.com>
Date: Wed, 22 Mar 2023 14:55:17 +0100
Subject: [PATCH 1/4] refactor: :art: Migrate component UploadButton to
 composition API

---
 frontend/src/components/HeaderMain.vue       |  31 +++
 frontend/src/components/OnboardingSwiper.vue |  38 +---
 frontend/src/components/UploadButton.vue     | 227 +++++++++----------
 frontend/src/views/Home.vue                  |   1 -
 4 files changed, 156 insertions(+), 141 deletions(-)

diff --git a/frontend/src/components/HeaderMain.vue b/frontend/src/components/HeaderMain.vue
index 8800e437..66f702eb 100644
--- a/frontend/src/components/HeaderMain.vue
+++ b/frontend/src/components/HeaderMain.vue
@@ -1,3 +1,34 @@
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const logoText = [
+  'Ministère',
+  'de l’intérieur',
+  'et de l\'Outre-Mer',
+]
+
+const quickLinks = [
+  {
+    label: 'A propos',
+    to: '/a-propos',
+  },
+  {
+    label: 'Mentions légales',
+    to: '/mentions-legales',
+  },
+  {
+    label: 'Contact',
+    to: '/contact',
+  },
+]
+
+function onClickOnLogo () {
+  router.push({ name: 'Start' })
+}
+</script>
+
 <template>
   <header
     role="banner"
diff --git a/frontend/src/components/OnboardingSwiper.vue b/frontend/src/components/OnboardingSwiper.vue
index 57d84e8d..58b54a99 100644
--- a/frontend/src/components/OnboardingSwiper.vue
+++ b/frontend/src/components/OnboardingSwiper.vue
@@ -1,3 +1,15 @@
+<script setup>
+
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Navigation, Pagination, A11y } from 'swiper'
+
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
+
+const modules = [Navigation, Pagination, A11y]
+
+</script>
 <template>
   <swiper
     :navigation="true"
@@ -58,32 +70,6 @@
     </swiper-slide>
   </swiper>
 </template>
-
-<script>
-
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Navigation, Pagination, A11y } from 'swiper'
-
-import 'swiper/css'
-import 'swiper/css/navigation'
-import 'swiper/css/pagination'
-
-export default {
-  name: 'OnboardingSwiper',
-  components: {
-    Swiper,
-    SwiperSlide,
-  },
-
-  setup () {
-    return {
-      modules: [Navigation, Pagination, A11y],
-
-    }
-  },
-}
-</script>
-
 <style scoped>
 .swiper {
   width: 100%;
diff --git a/frontend/src/components/UploadButton.vue b/frontend/src/components/UploadButton.vue
index 4c68b133..9576a035 100644
--- a/frontend/src/components/UploadButton.vue
+++ b/frontend/src/components/UploadButton.vue
@@ -1,23 +1,15 @@
-<template>
-  <div
-    id="demarrer"
-    style="width: 0; height: 1px; display: none;"
-  >
-    <input
-      ref="fileInput"
-      type="file"
-      style="width: 0; height: 1px"
-      :accept="handledImageTypes"
-      @change="onFileSelected($event)"
-    >
-  </div>
-</template>
-
-<script>
+<script setup>
+import { ref } from 'vue'
 import axios from 'axios'
 import { useResultStore } from '@/stores/result.js'
+import { useRouter } from 'vue-router'
 
 const resultStore = useResultStore()
+const router = useRouter()
+
+const fileInput = ref(null)
+// supported image types: https://pillow.readthedocs.io/en/stable/handbook/image-file-formats.html
+const handledImageTypes = 'image/jpeg, image/png, image/tiff, image/webp, image/bmp, image/gif'
 
 function randomCoord (num) {
   num = parseFloat(num)
@@ -26,112 +18,119 @@ function randomCoord (num) {
   return (Math.random() * (max - min) + min) + num
 }
 
-export default {
-  name: 'UploadButton',
-  emits: ['file-selected'],
-  data () {
-    return {
-      baseUrl: import.meta.env.BASE_URL,
-      labelButton: 'Démarrer',
-      // supported image types: https://pillow.readthedocs.io/en/stable/handbook/image-file-formats.html
-      handledImageTypes: 'image/jpeg, image/png, image/tiff, image/webp, image/bmp, image/gif',
-    }
-  },
-  methods: {
-    click () {
-      this.$refs.fileInput.click()
-    },
-    onFileSelected (event) {
-      this.$emit('file-selected', event)
-      const uploadedFile = event.target.files[0]
-      const vm = this // store this to be able to do router redirection later
-
-      // get user geolocation
-      axios.get('https://api.ipgeolocation.io/ipgeo?apiKey=17dc6bed199b45ca92d60079686e03f1', { withCredentials: false })
-        .then(res => {
-          const latitude = randomCoord(res.data.latitude)
-          const longitude = randomCoord(res.data.longitude)
-          resultStore.setGeolocation(latitude.toString() + ',' + longitude.toString())
-        })
-        .catch(() => {})
-        .finally(() => {
-          // if geolocation is unavailable or incorrect format
-          resizeAndUpload(uploadedFile)
-        })
+function click () {
+  fileInput.value.click()
+}
 
-      function resizeAndUpload (uploadedFile) {
-        const reader = new FileReader()
-        // convert File object to base64 data
-        reader.readAsDataURL(uploadedFile)
-
-        reader.onload = function (event) {
-          const imgElement = document.createElement('img')
-          imgElement.src = event.target.result
-
-          imgElement.onload = function (e) {
-            const canvas = document.createElement('canvas')
-            const MAX_WIDTH = 600
-            const MAX_HEIGHT = 600
-            let width = imgElement.width
-            let height = imgElement.height
-            if (width > height) {
-              if (width > MAX_WIDTH) {
-                height *= MAX_WIDTH / width
-                width = MAX_WIDTH
-              }
-            } else {
-              if (height > MAX_HEIGHT) {
-                width *= MAX_HEIGHT / height
-                height = MAX_HEIGHT
-              }
-            }
-            canvas.width = width
-            canvas.height = height
-            const ctx = canvas.getContext('2d')
-            ctx.drawImage(e.target, 0, 0, width, height)
-            const srcEncoded = ctx.canvas.toDataURL('image/jpeg')
-            submitUpload(srcEncoded, uploadedFile.name)
-          }
+defineExpose({
+  click,
+})
+
+const emit = defineEmits(['file-selected'])
+
+function onFileSelected (event) {
+  emit('file-selected', event)
+  const uploadedFile = event.target.files[0]
+
+  // get user geolocation
+  axios.get('https://api.ipgeolocation.io/ipgeo?apiKey=17dc6bed199b45ca92d60079686e03f1', { withCredentials: false })
+    .then(res => {
+      const latitude = randomCoord(res.data.latitude)
+      const longitude = randomCoord(res.data.longitude)
+      resultStore.setGeolocation(latitude.toString() + ',' + longitude.toString())
+    })
+    .catch(() => {})
+    .finally(() => {
+      // if geolocation is unavailable or incorrect format
+      resizeAndUpload(uploadedFile)
+    })
 
-          imgElement.onerror = function () {
-            alert('Corrupted image file, please try another')
+  function resizeAndUpload (uploadedFile) {
+    const reader = new FileReader()
+    // convert File object to base64 data
+    reader.readAsDataURL(uploadedFile)
+
+    reader.onload = function (event) {
+      const imgElement = document.createElement('img')
+      imgElement.src = event.target.result
+
+      imgElement.onload = function (e) {
+        const canvas = document.createElement('canvas')
+        const MAX_WIDTH = 600
+        const MAX_HEIGHT = 600
+        let width = imgElement.width
+        let height = imgElement.height
+        if (width > height) {
+          if (width > MAX_WIDTH) {
+            height *= MAX_WIDTH / width
+            width = MAX_WIDTH
+          }
+        } else {
+          if (height > MAX_HEIGHT) {
+            width *= MAX_HEIGHT / height
+            height = MAX_HEIGHT
           }
         }
+        canvas.width = width
+        canvas.height = height
+        const ctx = canvas.getContext('2d')
+        ctx.drawImage(e.target, 0, 0, width, height)
+        const srcEncoded = ctx.canvas.toDataURL('image/jpeg')
+        submitUpload(srcEncoded, uploadedFile.name)
       }
 
-      function srcToFile (src, fileName, mimeType) {
-        return (fetch(src)
-          .then(function (res) { return res.arrayBuffer() })
-          .then(function (buf) { return new File([buf], fileName, { type: mimeType }) })
-        )
+      imgElement.onerror = function () {
+        alert('Corrupted image file, please try another')
       }
+    }
+  }
+
+  function srcToFile (src, fileName, mimeType) {
+    return (fetch(src)
+      .then(function (res) { return res.arrayBuffer() })
+      .then(function (buf) { return new File([buf], fileName, { type: mimeType }) })
+    )
+  }
+
+  function submitUpload (base64, fileName) {
+    srcToFile(base64, fileName, 'image/jpeg').then(file => {
+      const fd = new FormData()
+      fd.append('image', file, file.name)
+      fd.append('date', Date.now() / 1000) // date.now gives in milliseconds, convert to seconds
+      fd.append('geolocation', resultStore.geolocation)
 
-      function submitUpload (base64, fileName) {
-        srcToFile(base64, fileName, 'image/jpeg').then(file => {
-          const fd = new FormData()
-          fd.append('image', file, file.name)
-          fd.append('date', Date.now() / 1000) // date.now gives in milliseconds, convert to seconds
-          fd.append('geolocation', resultStore.geolocation)
-
-          axios.post('/upload', fd)
-            .then(res => {
-              resultStore.setResult({
-                typology: res.data.label,
-                confidence: res.data.confidence,
-                confidenceLevel: res.data.confidence_level,
-                resultText: "Type d'arme : " + res.data.label + ' ' + res.data.confidence + '%',
-                img: base64,
-                imgUrl: res.data.path,
-              })
-              vm.$router.push({ name: 'Result' }).catch(() => {})
-            })
-            .catch((err) => {
-              console.log(err)
-              vm.$router.push({ name: 'Error' }).catch(() => {})
-            })
+      axios.post('/upload', fd)
+        .then(res => {
+          resultStore.setResult({
+            typology: res.data.label,
+            confidence: res.data.confidence,
+            confidenceLevel: res.data.confidence_level,
+            resultText: "Type d'arme : " + res.data.label + ' ' + res.data.confidence + '%',
+            img: base64,
+            imgUrl: res.data.path,
+          })
+          router.push({ name: 'Result' }).catch(() => {})
         })
-      }
-    },
-  },
+        .catch((err) => {
+          console.log(err)
+          router.push({ name: 'Error' }).catch(() => {})
+        })
+    })
+  }
 }
 </script>
+
+<template>
+  <div
+    id="demarrer"
+    style="width: 0; height: 1px; display: none;"
+  >
+    <input
+      ref="fileInput"
+      type="file"
+      style="width: 0; height: 1px"
+      :accept="handledImageTypes"
+      @change="onFileSelected($event)"
+    >
+  </div>
+</template>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 3aec60ee..8ed7a66b 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,6 +1,5 @@
 <script setup>
 import OnboardingSwiper from '@/components/OnboardingSwiper.vue'
-
 </script>
 
 <template>

From d74436bbe2c4825328af0994a9ae2daf38f4e1fb Mon Sep 17 00:00:00 2001
From: Nadeige COUTHON <nadeige.couthon@gmail.com>
Date: Wed, 22 Mar 2023 15:17:31 +0100
Subject: [PATCH 2/4] refactor: :art: refactoring ipgeolocation key with .env
 file

---
 frontend/Dockerfile                      |   2 +-
 frontend/src/components/UploadButton.vue | 153 ++++++++++++-----------
 2 files changed, 79 insertions(+), 76 deletions(-)

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 32985c2c..b04f7206 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -14,7 +14,7 @@ RUN npm ci
 
 COPY src ./src
 COPY public ./public
-COPY vite.config.js index.html ./
+COPY vite.config.js index.html .env ./
 
 FROM base as dev
 
diff --git a/frontend/src/components/UploadButton.vue b/frontend/src/components/UploadButton.vue
index 9576a035..01905e85 100644
--- a/frontend/src/components/UploadButton.vue
+++ b/frontend/src/components/UploadButton.vue
@@ -4,11 +4,15 @@ import axios from 'axios'
 import { useResultStore } from '@/stores/result.js'
 import { useRouter } from 'vue-router'
 
+// TODO: voir avec le back comment créer un proxy vers cette API
+const API_KEY = import.meta.env.VITE_IPGEOLOCATION_API_KEY
+const API_URL = import.meta.env.VITE_IPGEOLOCATION_API_URL
+const url = `${API_URL}?apiKey=${API_KEY}`
+
 const resultStore = useResultStore()
 const router = useRouter()
 
 const fileInput = ref(null)
-// supported image types: https://pillow.readthedocs.io/en/stable/handbook/image-file-formats.html
 const handledImageTypes = 'image/jpeg, image/png, image/tiff, image/webp, image/bmp, image/gif'
 
 function randomCoord (num) {
@@ -28,12 +32,84 @@ defineExpose({
 
 const emit = defineEmits(['file-selected'])
 
+function submitUpload (base64, fileName) {
+  srcToFile(base64, fileName, 'image/jpeg').then(file => {
+    const fd = new FormData()
+    fd.append('image', file, file.name)
+    fd.append('date', Date.now() / 1000) // date.now gives in milliseconds, convert to seconds
+    fd.append('geolocation', resultStore.geolocation)
+
+    axios.post('/upload', fd)
+      .then(res => {
+        resultStore.setResult({
+          typology: res.data.label,
+          confidence: res.data.confidence,
+          confidenceLevel: res.data.confidence_level,
+          resultText: "Type d'arme : " + res.data.label + ' ' + res.data.confidence + '%',
+          img: base64,
+          imgUrl: res.data.path,
+        })
+        router.push({ name: 'Result' }).catch(() => {})
+      })
+      .catch((err) => {
+        console.log(err)
+        router.push({ name: 'Error' }).catch(() => {})
+      })
+  })
+}
+
+function resizeAndUpload (uploadedFile) {
+  const reader = new FileReader()
+  // convert File object to base64 data
+  reader.readAsDataURL(uploadedFile)
+
+  reader.onload = function (event) {
+    const imgElement = document.createElement('img')
+    imgElement.src = event.target.result
+
+    imgElement.onload = function (e) {
+      const canvas = document.createElement('canvas')
+      const MAX_WIDTH = 600
+      const MAX_HEIGHT = 600
+      let width = imgElement.width
+      let height = imgElement.height
+      if (width > height) {
+        if (width > MAX_WIDTH) {
+          height *= MAX_WIDTH / width
+          width = MAX_WIDTH
+        }
+      } else {
+        if (height > MAX_HEIGHT) {
+          width *= MAX_HEIGHT / height
+          height = MAX_HEIGHT
+        }
+      }
+      canvas.width = width
+      canvas.height = height
+      const ctx = canvas.getContext('2d')
+      ctx.drawImage(e.target, 0, 0, width, height)
+      const srcEncoded = ctx.canvas.toDataURL('image/jpeg')
+      submitUpload(srcEncoded, uploadedFile.name)
+    }
+
+    imgElement.onerror = function () {
+      alert('Corrupted image file, please try another')
+    }
+  }
+}
+
+async function srcToFile (src, fileName, mimeType) {
+  const res = await fetch(src)
+  const buf = await res.arrayBuffer()
+  return new File([buf], fileName, { type: mimeType })
+}
+
 function onFileSelected (event) {
   emit('file-selected', event)
   const uploadedFile = event.target.files[0]
 
   // get user geolocation
-  axios.get('https://api.ipgeolocation.io/ipgeo?apiKey=17dc6bed199b45ca92d60079686e03f1', { withCredentials: false })
+  axios.get(url, { withCredentials: false })
     .then(res => {
       const latitude = randomCoord(res.data.latitude)
       const longitude = randomCoord(res.data.longitude)
@@ -44,79 +120,6 @@ function onFileSelected (event) {
       // if geolocation is unavailable or incorrect format
       resizeAndUpload(uploadedFile)
     })
-
-  function resizeAndUpload (uploadedFile) {
-    const reader = new FileReader()
-    // convert File object to base64 data
-    reader.readAsDataURL(uploadedFile)
-
-    reader.onload = function (event) {
-      const imgElement = document.createElement('img')
-      imgElement.src = event.target.result
-
-      imgElement.onload = function (e) {
-        const canvas = document.createElement('canvas')
-        const MAX_WIDTH = 600
-        const MAX_HEIGHT = 600
-        let width = imgElement.width
-        let height = imgElement.height
-        if (width > height) {
-          if (width > MAX_WIDTH) {
-            height *= MAX_WIDTH / width
-            width = MAX_WIDTH
-          }
-        } else {
-          if (height > MAX_HEIGHT) {
-            width *= MAX_HEIGHT / height
-            height = MAX_HEIGHT
-          }
-        }
-        canvas.width = width
-        canvas.height = height
-        const ctx = canvas.getContext('2d')
-        ctx.drawImage(e.target, 0, 0, width, height)
-        const srcEncoded = ctx.canvas.toDataURL('image/jpeg')
-        submitUpload(srcEncoded, uploadedFile.name)
-      }
-
-      imgElement.onerror = function () {
-        alert('Corrupted image file, please try another')
-      }
-    }
-  }
-
-  function srcToFile (src, fileName, mimeType) {
-    return (fetch(src)
-      .then(function (res) { return res.arrayBuffer() })
-      .then(function (buf) { return new File([buf], fileName, { type: mimeType }) })
-    )
-  }
-
-  function submitUpload (base64, fileName) {
-    srcToFile(base64, fileName, 'image/jpeg').then(file => {
-      const fd = new FormData()
-      fd.append('image', file, file.name)
-      fd.append('date', Date.now() / 1000) // date.now gives in milliseconds, convert to seconds
-      fd.append('geolocation', resultStore.geolocation)
-
-      axios.post('/upload', fd)
-        .then(res => {
-          resultStore.setResult({
-            typology: res.data.label,
-            confidence: res.data.confidence,
-            confidenceLevel: res.data.confidence_level,
-            resultText: "Type d'arme : " + res.data.label + ' ' + res.data.confidence + '%',
-            img: base64,
-            imgUrl: res.data.path,
-          })
-          router.push({ name: 'Result' }).catch(() => {})
-        })
-        .catch((err) => {
-          console.log(err)
-          router.push({ name: 'Error' }).catch(() => {})
-        })
-    })
-  }
 }
 </script>
 

From 70db1a8fcada12c04d94d041a0ce5cd6e64016d4 Mon Sep 17 00:00:00 2001
From: Nadeige COUTHON <nadeige.couthon@gmail.com>
Date: Wed, 29 Mar 2023 11:43:38 +0200
Subject: [PATCH 3/4] perf: :zap: Migrate to vue-dsfr 3.3.0 version

---
 frontend/package-lock.json             | 62 +++++++++++++-------------
 frontend/package.json                  |  2 +-
 frontend/src/components/HeaderMain.vue | 31 -------------
 3 files changed, 32 insertions(+), 63 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6eee3d97..ab9dbf3e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.0.0",
       "dependencies": {
         "@gouvfr/dsfr": "^1.8.5",
-        "@gouvminint/vue-dsfr": "2.0.0-beta.1",
+        "@gouvminint/vue-dsfr": "3.0.1",
         "@vue/compat": "^3.2.47",
         "@vueuse/core": "^9.12.0",
         "axios": "^0.27.2",
@@ -2176,21 +2176,21 @@
       }
     },
     "node_modules/@gouvfr/dsfr": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@gouvfr/dsfr/-/dsfr-1.8.5.tgz",
-      "integrity": "sha512-29L+THvWmYJXztPa0Os5TS9yD2WQbrH7VnCKxkyUXQZQ+6lsGebtz0GdCnLexOWDfCn1y53Mh7+/ihxI/z0Vjw==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@gouvfr/dsfr/-/dsfr-1.9.0.tgz",
+      "integrity": "sha512-CWckBrvCL28QV2K1+GK/AjW40aGHmd1oXnCSFRD4iRhsIgXkE/+t6pH24L+6BKVBCSYfp2RTGAgRwVN06PqGMw==",
       "engines": {
         "node": ">=14.18.0"
       }
     },
     "node_modules/@gouvminint/vue-dsfr": {
-      "version": "2.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/@gouvminint/vue-dsfr/-/vue-dsfr-2.0.0-beta.1.tgz",
-      "integrity": "sha512-xlAzuwUnwIDfuACbncELFVZ7kubQkUO4gIV8JVmDDnhn+taJIeF2CYEnX116qXn3KhO3dQ4veo7wdwhrlGQbpg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@gouvminint/vue-dsfr/-/vue-dsfr-3.0.1.tgz",
+      "integrity": "sha512-Mp+ioi3PyG4lIg7sAdDm0NiWfDc3Fved+kyQUSpPdJac7dFN4EIEEbdiQqO7FYy8lqbSOegp7QDvT96Q1K++yg==",
       "dependencies": {
-        "@gouvfr/dsfr": "~1.8.5",
-        "focus-trap": "^7.2.0",
-        "focus-trap-vue": "^4.0.1",
+        "@gouvfr/dsfr": "~1.9.0",
+        "focus-trap": "^7.4.0",
+        "focus-trap-vue": "^4.0.2",
         "oh-vue-icons": "1.0.0-rc3",
         "vue": "^3.2.47"
       },
@@ -4234,17 +4234,17 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
     "node_modules/focus-trap": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.3.1.tgz",
-      "integrity": "sha512-bX/u4FJ+F0Pp6b/8Q9W8Br/JaLJ7rrhOJAzai9JU8bh4BPdOjEATy4pxHcbBBxFjPN4d1oHy7/KqknEdOetm9w==",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.4.0.tgz",
+      "integrity": "sha512-yI7FwUqU4TVb+7t6PaQ3spT/42r/KLEi8mtdGoQo2li/kFzmu9URmalTvw7xCCJtSOyhBxscvEAmvjeN9iHARg==",
       "dependencies": {
         "tabbable": "^6.1.1"
       }
     },
     "node_modules/focus-trap-vue": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/focus-trap-vue/-/focus-trap-vue-4.0.1.tgz",
-      "integrity": "sha512-2iqOeoSvgq7Um6aL+255a/wXPskj6waLq2oKCa4gOnMORPo15JX7wN6J5bl1SMhMlTlkHXGSrQ9uJPJLPZDl5w==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/focus-trap-vue/-/focus-trap-vue-4.0.2.tgz",
+      "integrity": "sha512-2iQN2xKCSCzyhcD90VpueQcTIAhaCRxxo67fkz7RSqLmEd16QKjfGslCr3KxvBx0LfpVN9j0IAyKKuJKw3Intg==",
       "peerDependencies": {
         "focus-trap": "^7.0.0",
         "vue": "^3.0.0"
@@ -8929,19 +8929,19 @@
       }
     },
     "@gouvfr/dsfr": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@gouvfr/dsfr/-/dsfr-1.8.5.tgz",
-      "integrity": "sha512-29L+THvWmYJXztPa0Os5TS9yD2WQbrH7VnCKxkyUXQZQ+6lsGebtz0GdCnLexOWDfCn1y53Mh7+/ihxI/z0Vjw=="
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@gouvfr/dsfr/-/dsfr-1.9.0.tgz",
+      "integrity": "sha512-CWckBrvCL28QV2K1+GK/AjW40aGHmd1oXnCSFRD4iRhsIgXkE/+t6pH24L+6BKVBCSYfp2RTGAgRwVN06PqGMw=="
     },
     "@gouvminint/vue-dsfr": {
-      "version": "2.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/@gouvminint/vue-dsfr/-/vue-dsfr-2.0.0-beta.1.tgz",
-      "integrity": "sha512-xlAzuwUnwIDfuACbncELFVZ7kubQkUO4gIV8JVmDDnhn+taJIeF2CYEnX116qXn3KhO3dQ4veo7wdwhrlGQbpg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@gouvminint/vue-dsfr/-/vue-dsfr-3.0.1.tgz",
+      "integrity": "sha512-Mp+ioi3PyG4lIg7sAdDm0NiWfDc3Fved+kyQUSpPdJac7dFN4EIEEbdiQqO7FYy8lqbSOegp7QDvT96Q1K++yg==",
       "requires": {
-        "@gouvfr/dsfr": "~1.8.5",
+        "@gouvfr/dsfr": "~1.9.0",
         "esbuild-linux-64": "^0.15.18",
-        "focus-trap": "^7.2.0",
-        "focus-trap-vue": "^4.0.1",
+        "focus-trap": "^7.4.0",
+        "focus-trap-vue": "^4.0.2",
         "oh-vue-icons": "1.0.0-rc3",
         "vue": "^3.2.47"
       },
@@ -10432,17 +10432,17 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
     "focus-trap": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.3.1.tgz",
-      "integrity": "sha512-bX/u4FJ+F0Pp6b/8Q9W8Br/JaLJ7rrhOJAzai9JU8bh4BPdOjEATy4pxHcbBBxFjPN4d1oHy7/KqknEdOetm9w==",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.4.0.tgz",
+      "integrity": "sha512-yI7FwUqU4TVb+7t6PaQ3spT/42r/KLEi8mtdGoQo2li/kFzmu9URmalTvw7xCCJtSOyhBxscvEAmvjeN9iHARg==",
       "requires": {
         "tabbable": "^6.1.1"
       }
     },
     "focus-trap-vue": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/focus-trap-vue/-/focus-trap-vue-4.0.1.tgz",
-      "integrity": "sha512-2iqOeoSvgq7Um6aL+255a/wXPskj6waLq2oKCa4gOnMORPo15JX7wN6J5bl1SMhMlTlkHXGSrQ9uJPJLPZDl5w==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/focus-trap-vue/-/focus-trap-vue-4.0.2.tgz",
+      "integrity": "sha512-2iQN2xKCSCzyhcD90VpueQcTIAhaCRxxo67fkz7RSqLmEd16QKjfGslCr3KxvBx0LfpVN9j0IAyKKuJKw3Intg==",
       "requires": {}
     },
     "follow-redirects": {
diff --git a/frontend/package.json b/frontend/package.json
index 5c6c26c0..6688f963 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@gouvfr/dsfr": "^1.8.5",
-    "@gouvminint/vue-dsfr": "2.0.0-beta.1",
+    "@gouvminint/vue-dsfr": "3.3.0",
     "@vue/compat": "^3.2.47",
     "@vueuse/core": "^9.12.0",
     "axios": "^0.27.2",
diff --git a/frontend/src/components/HeaderMain.vue b/frontend/src/components/HeaderMain.vue
index 66f702eb..8800e437 100644
--- a/frontend/src/components/HeaderMain.vue
+++ b/frontend/src/components/HeaderMain.vue
@@ -1,34 +1,3 @@
-<script setup>
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-
-const logoText = [
-  'Ministère',
-  'de l’intérieur',
-  'et de l\'Outre-Mer',
-]
-
-const quickLinks = [
-  {
-    label: 'A propos',
-    to: '/a-propos',
-  },
-  {
-    label: 'Mentions légales',
-    to: '/mentions-legales',
-  },
-  {
-    label: 'Contact',
-    to: '/contact',
-  },
-]
-
-function onClickOnLogo () {
-  router.push({ name: 'Start' })
-}
-</script>
-
 <template>
   <header
     role="banner"

From 1ca2394cbeb97fb5934d9a7e1d80a339a78d55e0 Mon Sep 17 00:00:00 2001
From: Nadeige COUTHON <nadeige.couthon@gmail.com>
Date: Thu, 30 Mar 2023 14:58:05 +0200
Subject: [PATCH 4/4] refactor: :fire: Remove .env file and variables for
 ipgeolocation key and url

---
 frontend/Dockerfile                      |  2 +-
 frontend/package-lock.json               | 14 +++++++-------
 frontend/src/components/UploadButton.vue |  7 +------
 3 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index b04f7206..32985c2c 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -14,7 +14,7 @@ RUN npm ci
 
 COPY src ./src
 COPY public ./public
-COPY vite.config.js index.html .env ./
+COPY vite.config.js index.html ./
 
 FROM base as dev
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ab9dbf3e..7e0d489c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.0.0",
       "dependencies": {
         "@gouvfr/dsfr": "^1.8.5",
-        "@gouvminint/vue-dsfr": "3.0.1",
+        "@gouvminint/vue-dsfr": "3.3.0",
         "@vue/compat": "^3.2.47",
         "@vueuse/core": "^9.12.0",
         "axios": "^0.27.2",
@@ -2184,9 +2184,9 @@
       }
     },
     "node_modules/@gouvminint/vue-dsfr": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@gouvminint/vue-dsfr/-/vue-dsfr-3.0.1.tgz",
-      "integrity": "sha512-Mp+ioi3PyG4lIg7sAdDm0NiWfDc3Fved+kyQUSpPdJac7dFN4EIEEbdiQqO7FYy8lqbSOegp7QDvT96Q1K++yg==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@gouvminint/vue-dsfr/-/vue-dsfr-3.3.0.tgz",
+      "integrity": "sha512-IFSVPpSE5m+v0qnsHmdY6Tq3My6unSUg73J7O/edvXexuKKgZUWiSX/Fcx7t4M8Mvy12BXdvJJuSWumx5Cfa0g==",
       "dependencies": {
         "@gouvfr/dsfr": "~1.9.0",
         "focus-trap": "^7.4.0",
@@ -8934,9 +8934,9 @@
       "integrity": "sha512-CWckBrvCL28QV2K1+GK/AjW40aGHmd1oXnCSFRD4iRhsIgXkE/+t6pH24L+6BKVBCSYfp2RTGAgRwVN06PqGMw=="
     },
     "@gouvminint/vue-dsfr": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@gouvminint/vue-dsfr/-/vue-dsfr-3.0.1.tgz",
-      "integrity": "sha512-Mp+ioi3PyG4lIg7sAdDm0NiWfDc3Fved+kyQUSpPdJac7dFN4EIEEbdiQqO7FYy8lqbSOegp7QDvT96Q1K++yg==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@gouvminint/vue-dsfr/-/vue-dsfr-3.3.0.tgz",
+      "integrity": "sha512-IFSVPpSE5m+v0qnsHmdY6Tq3My6unSUg73J7O/edvXexuKKgZUWiSX/Fcx7t4M8Mvy12BXdvJJuSWumx5Cfa0g==",
       "requires": {
         "@gouvfr/dsfr": "~1.9.0",
         "esbuild-linux-64": "^0.15.18",
diff --git a/frontend/src/components/UploadButton.vue b/frontend/src/components/UploadButton.vue
index 01905e85..71a9a024 100644
--- a/frontend/src/components/UploadButton.vue
+++ b/frontend/src/components/UploadButton.vue
@@ -4,11 +4,6 @@ import axios from 'axios'
 import { useResultStore } from '@/stores/result.js'
 import { useRouter } from 'vue-router'
 
-// TODO: voir avec le back comment créer un proxy vers cette API
-const API_KEY = import.meta.env.VITE_IPGEOLOCATION_API_KEY
-const API_URL = import.meta.env.VITE_IPGEOLOCATION_API_URL
-const url = `${API_URL}?apiKey=${API_KEY}`
-
 const resultStore = useResultStore()
 const router = useRouter()
 
@@ -109,7 +104,7 @@ function onFileSelected (event) {
   const uploadedFile = event.target.files[0]
 
   // get user geolocation
-  axios.get(url, { withCredentials: false })
+  axios.get('https://api.ipgeolocation.io/ipgeo?apiKey=17dc6bed199b45ca92d60079686e03f1', { withCredentials: false })
     .then(res => {
       const latitude = randomCoord(res.data.latitude)
       const longitude = randomCoord(res.data.longitude)