Merge pull request #161 from datalab-mi/feat/refactor-start-page

[WIP] feat: ♻️ refactor start page

frontend/Dockerfile

@@ -7,10 +7,10 @@ ARG NODE_EXTRA_CA_CERTS
 COPY ./cert/. /etc/ssl/certs/
 
 # downgrade npm version to avoid chokidar error
-RUN npm install -g npm@8
+# RUN npm install -g npm@8
 
 COPY ./package.json ./package-lock.json ./
-RUN npm ci
+RUN npm ci --legacy-peer-deps
 
 COPY src ./src
 COPY public ./public

frontend/package.json

@@ -12,32 +12,32 @@
     "pretest:unit": "npm run lint"
   },
   "dependencies": {
-    "@gouvfr/dsfr": "^1.9.2",
+    "@gouvfr/dsfr": "^1.9.3",
     "@gouvminint/vue-dsfr": "3.6.0",
-    "@vue/compat": "^3.3.2",
+    "@vue/compat": "^3.3.4",
     "@vueuse/core": "^10.1.2",
     "axios": "^1.4.0",
-    "pinia": "^2.1.0",
+    "pinia": "^2.1.3",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "vite": "^4.3.7",
-    "vue": "^3.3.2",
-    "vue-router": "^4.2.0"
+    "vite": "^4.3.8",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.1"
   },
   "devDependencies": {
-    "@unocss/transformer-directives": "^0.51.13",
-    "@unocss/transformer-variant-group": "^0.51.13",
+    "@unocss/transformer-directives": "^0.52.3",
+    "@unocss/transformer-variant-group": "^0.52.3",
     "@vitejs/plugin-vue": "^4.2.3",
-    "eslint": "^8.40.0",
+    "eslint": "^8.41.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-cypress": "^2.13.3",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-n": "^15.7.0",
+    "eslint-plugin-n": "^16.0.0",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-vue": "^9.13.0",
+    "eslint-plugin-vue": "^9.14.0",
     "stylelint": "^15.6.2",
     "stylelint-config-standard": "^33.0.0",
-    "unocss": "^0.51.13",
-    "vite-plugin-pwa": "^0.14.7",
+    "unocss": "^0.52.3",
+    "vite-plugin-pwa": "^0.15.1",
     "workbox-window": "^6.5.4"
   },
   "browserslist": [

frontend/src/components/HeaderMain.vue

@@ -26,7 +26,7 @@ const quickLinks = [
 ]
 
 function onClickOnLogo () {
-  router.push({ name: 'Start' })
+  router.push({ name: 'StartPage' })
 }
 
 function onClickOnInfo (event) {

frontend/src/router/index.js

@@ -6,7 +6,7 @@ import { useResultStore } from '@/stores/result.js'
 import { useStepsStore } from '@/stores/steps.js'
 
 const HomePage = () => import('@/views/HomePage.vue')
-const Start = () => import('@/views/Start.vue')
+const StartPage = () => import('@/views/StartPage.vue')
 const Instructions = () => import('@/views/Instructions.vue')
 const Result = () => import('@/views/Result.vue')
 const Error = () => import('@/views/Error.vue')
@@ -34,8 +34,8 @@ const routes = [
   },
   {
     path: '/accueil',
-    name: 'Start',
-    component: Start,
+    name: 'StartPage',
+    component: StartPage,
     meta: {
       displayHeader: true,
     },
@@ -69,7 +69,7 @@ const routes = [
       if (stepsStore.currentStep !== 0 && resultStore.img) {
         return true
       }
-      return { name: 'Start' }
+      return { name: 'StartPage' }
     },
     children: [
       {
@@ -106,7 +106,7 @@ const routes = [
       if (resultStore.img) {
         return true
       }
-      return { name: 'Start' }
+      return { name: 'StartPage' }
     },
   },
   {

frontend/src/views/Error.vue

@@ -10,7 +10,7 @@
       </p>
       <router-link
         v-slot="{navigate}"
-        :to="{name:'Start'}"
+        :to="{name:'StartPage'}"
       >
         <DsfrButton
           label="Retour"

frontend/src/views/GuideFactice/GuideFactice.vue

@@ -57,7 +57,7 @@ const goToNextStep = () => (
 
 watchEffect(() => {
   if (!resultStore.img) {
-    router.push({ name: 'Start' })
+    router.push({ name: 'StartPage' })
   }
 })
 
@@ -112,7 +112,7 @@ onBeforeUnmount(() => { metaViewport.setAttribute('content', 'width=device-width
     </div>
     <div class="m-2">
       <router-link
-        :to="{ name: 'Start' }"
+        :to="{ name: 'StartPage' }"
       >
         <img
           class="go-home"

frontend/src/views/HomePage.vue

@@ -21,7 +21,7 @@
       </div>
       <router-link
         v-slot="{navigate}"
-        :to="{name:'Start'}"
+        :to="{name:'StartPage'}"
       >
         <DsfrButton
           id="agree-button"

frontend/src/views/PageNotFound.vue

@@ -5,7 +5,7 @@
       <p>Vous avez saisi ou suivi un lien vers une page qui n'existe pas.</p>
       <router-link
         v-slot="{navigate}"
-        :to="{name: 'Start'}"
+        :to="{name: 'StartPage'}"
       >
         <DsfrButton
           label="Retour"

frontend/src/views/Result.vue

@@ -14,7 +14,7 @@ const resultStore = useResultStore()
 const router = useRouter()
 
 watchEffect(() => {
-  if (!resultStore.img) router.push({ name: 'Start' })
+  if (!resultStore.img) router.push({ name: 'StartPage' })
 })
 
 const confidence = computed(() => resultStore.confidence)

frontend/src/views/Start.vue → frontend/src/views/StartPage.vue

@@ -10,17 +10,31 @@
     <p class="accueil-subtitle">
       Identification automatique des armes à feu
     </p>
+    <router-link
+      v-slot="{navigate}"
+      :to="{name:'StartPage'}"
+    >
+      <DsfrButton
+        class=" w-14rem mb-4 p-2 whitespace-pre-line"
+        label="Je veux mettre en sécurité mon arme"
+        size="small"
+        @click="navigate()"
+      />
+    </router-link>
     <router-link
       v-slot="{navigate}"
       :to="{name:'Instructions'}"
     >
       <DsfrButton
-        label="Démarrer"
+        class=" w-14rem mb-4 p-2 whitespace-pre-line"
+        label="J’ai déjà mis mon arme en sécurité, je veux l’identifier"
+        size="small"
         @click="navigate()"
       />
     </router-link>
     <div class="footer footer-up footer-text">
-      Basegun est un outil d'aide à la décision. Il ne remplace en aucun cas l'avis d'un expert.
+      Basegun est un <span class="font-bold">outil d'aide à la décision</span>.
+      Il <span class="font-bold">ne remplace en aucun cas l'avis d'un expert</span>.
     </div>
   </div>
 </template>