From e888ea520c2931d1e494549675e4491dcaa8bc4a Mon Sep 17 00:00:00 2001
From: Maud Royer <hello@maudroyer.fr>
Date: Tue, 14 Nov 2023 11:54:05 +0100
Subject: [PATCH] feat: login agriculteur

Signed-off-by: Maud Royer <hello@maudroyer.fr>
---
 src/cartobio-api.js                           |   9 +
 src/components/{Certification => }/Login.vue  |  13 +-
 src/components/MainHeader.vue                 |   4 +-
 src/components/Operator/Exploitations.vue     |  74 ++++++++
 src/components/Operator/Login.vue             | 161 ------------------
 src/components/OperatorSetup/index.vue        |   9 +-
 src/main.js                                   |   8 +-
 .../[id]/index.vue}                           |   0
 src/pages/exploitations/index.vue             |  20 +++
 src/pages/login.test.js                       |  42 -----
 src/pages/login.vue                           |  39 +----
 11 files changed, 122 insertions(+), 257 deletions(-)
 rename src/components/{Certification => }/Login.vue (88%)
 create mode 100644 src/components/Operator/Exploitations.vue
 delete mode 100644 src/components/Operator/Login.vue
 rename src/pages/{exploitation/parcellaire.vue => exploitations/[id]/index.vue} (100%)
 create mode 100644 src/pages/exploitations/index.vue
 delete mode 100644 src/pages/login.test.js

diff --git a/src/cartobio-api.js b/src/cartobio-api.js
index 6ec4880c..26928544 100644
--- a/src/cartobio-api.js
+++ b/src/cartobio-api.js
@@ -123,6 +123,15 @@ export async function searchOperators (input) {
   return data
 }
 
+/**
+ * @return {Promise<undefined>}
+ */
+export async function getUserOperators () {
+  const { data } = await cartobioApi.get(`/v2/operators`)
+
+  return data
+}
+
 /**
  * @param {string} pacage
  * @returns {Promise<FeatureCollection>}
diff --git a/src/components/Certification/Login.vue b/src/components/Login.vue
similarity index 88%
rename from src/components/Certification/Login.vue
rename to src/components/Login.vue
index e2ad4a3f..e8aa6149 100644
--- a/src/components/Certification/Login.vue
+++ b/src/components/Login.vue
@@ -2,14 +2,14 @@
   <div>
     <Spinner v-if="isVerifying">Vérification des informations en cours</Spinner>
 
-    <Spinner v-else-if="(!isVerifying && isLogged && permissions.isOc)">Chargement de votre liste clients…</Spinner>
+    <Spinner v-else-if="(!isVerifying && isLogged && (permissions.isOc || permissions.isAgri))">Chargement de vos exploitations…</Spinner>
 
     <div class="fr-connect-group" v-else-if="!isLogged">
       <p>
         L'accès à CartoBio s'effectue avec l'aide de votre compte Agence Bio&nbsp;:
       </p>
 
-      <button class="fr-connect fr-connect--agence-bio" @click="router.push('/login/agencebio?mode=certification')">
+      <button class="fr-connect fr-connect--agence-bio" @click="router.push('/login/agencebio')">
         <span class="fr-connect__login">S'identifier avec</span>
         <span class="fr-connect__brand">Agence Bio</span>
       </button>
@@ -26,8 +26,9 @@
         <h3 class="fr-alert__title">Droits d'accès inadaptés</h3>
         <p>
           Votre connexion a correctement abouti.
-          Malheureusement nous ne sommes pas en mesure de vous identifier comme
-          étant une personne travaillant au sein d'une organisme de certification.
+          Malheureusement nous ne sommes pas en mesure de vous identifier comme un
+          operateur agricole ou une personne travaillant au sein d'une organisme
+          de certification.
         </p>
 
         <p>
@@ -79,6 +80,10 @@ onMounted(async () => {
       router.replace('/login')
     }
 
+    if (permissions.isAgri) {
+      router.replace('/exploitations')
+    }
+
     if (permissions.isOc) {
       router.replace(route.query.returnto || '/certification/exploitations')
     }
diff --git a/src/components/MainHeader.vue b/src/components/MainHeader.vue
index 93991ea7..a444d0e0 100644
--- a/src/components/MainHeader.vue
+++ b/src/components/MainHeader.vue
@@ -83,8 +83,8 @@
           <nav class="fr-nav" role="navigation" aria-label="Menu principal">
             <ul class="fr-nav__list">
               <li class="fr-nav__item">
-                <router-link to="/exploitation/parcellaire" class="fr-nav__link">
-                  Mon parcellaire
+                <router-link to="/exploitations" class="fr-nav__link">
+                  Mes exploitations
                 </router-link>
               </li>
               <li class="fr-nav__item">
diff --git a/src/components/Operator/Exploitations.vue b/src/components/Operator/Exploitations.vue
new file mode 100644
index 00000000..dcede15c
--- /dev/null
+++ b/src/components/Operator/Exploitations.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <h2 class="fr-h3">
+      Sélectionner mon exploitation
+    </h2>
+
+    <section class="fr-grid-row fr-grid-row--gutters" v-if="hasOperators">
+      <article class="fr-col-12 fr-col-md-4" v-for="operator in operators" :key="operator.id">
+        <div class="fr-card fr-card--horizontal">
+          <div class="fr-card__body">
+              <div class="fr-card__content">
+                  <h4 class="fr-card__title">{{ operator.nom }}</h4>
+                  <div class="fr-card__desc">
+                    <ul class="list-unstyled">
+                      <li v-if="operator.commune"><strong>Siège</strong> : {{ operator.commune }} ({{ operator.departement }})</li>
+                      <li v-if="operator.denominationCourante && operator.denominationCourante !== operator.nom"><b>Dénomination courante</b> : {{ operator.denominationCourante }}</li>
+                      <li v-if="operator.siret"><b>SIRET</b> : {{ operator.siret }}</li>
+                      <li v-if="operator.numeroPacage"><b>PACAGE</b> : {{ operator.numeroPacage }}</li>
+                      <li><b>Numéro Bio</b> : {{ operator.numeroBio }}</li>
+                      <li><b>Date d'engagement</b> : {{ operator.dateEngagement }}</li>
+                    </ul>
+                  </div>
+                  <div class="fr-card__start">
+                      <ul class="fr-tags-group">
+                          <li>
+                              <p class="fr-badge fr-badge--success fr-icon-medal-fill">vérifié</p>
+                          </li>
+                      </ul>
+                  </div>
+                </div>
+
+                <div class="fr-card__footer">
+                  <ul class="fr-btns-group  fr-btns-group--inline-lg">
+                      <li>
+                        <router-link class="fr-btn" :to="`/exploitations/${operator.id}`">
+                          Voir cette exploitation
+                        </router-link>
+                      </li>
+                  </ul>
+                </div>
+          </div>
+        </div>
+      </article>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { getUserOperators } from "@/cartobio-api.js"
+
+const operators = ref((await getUserOperators()).operators)
+const hasOperators = computed(() => Boolean(operators.value.length))
+</script>
+
+<style scoped>
+span[aria-selected="true"] {
+  font-weight: bold;
+}
+
+.help span:not(:last-of-type)::after {
+  content: ", ";
+}
+
+.list-unstyled {
+  --ul-type: none;
+  --ul-start: 0;
+}
+
+.fr-alert--waiting::before {
+  mask-image: url(@gouvfr/dsfr/icons/system/time-fill.svg);
+}
+
+</style>
diff --git a/src/components/Operator/Login.vue b/src/components/Operator/Login.vue
deleted file mode 100644
index 280a0d3f..00000000
--- a/src/components/Operator/Login.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<template>
-  <div>
-    <h2 class="fr-h3">
-      Sélectionner mon exploitation
-    </h2>
-
-    <form @submit.prevent="tryLogin" class="fr-search-bar fr-search-bar--lg fr-col-lg-8" id="header-search" role="search">
-      <label class="fr-label" for="search-784-input">
-          Recherche
-      </label>
-      <input class="fr-input" placeholder="Votre SIRET ou nom d'exploitation" v-model="userLogin" ref="loginInput" required autofocustype="search" id="search-784-input">
-      <button class="fr-btn" title="Rechercher" :disabled="isLoading">
-        Rechercher
-      </button>
-    </form>
-
-    <p v-if="hasCandidateUsers" class="fr-my-3w">
-      <button class="fr-link fr-icon-close-circle-line" @click="resetSearch">
-        Annuler cette recherche
-      </button>
-    </p>
-
-    <p id="text-input-error-desc-error" class="fr-error-text" v-if="error">
-      {{ error }}
-    </p>
-
-    <div class="fr-alert fr-alert--info fr-mt-2w fr-mb-2w fr-alert--waiting" v-if="isLoading" role="alert">
-      <p><em>Recherche en cours</em></p>
-    </div>
-
-    <section class="fr-grid-row fr-grid-row--gutters" v-if="hasCandidateUsers">
-      <article class="fr-col-12 fr-col-md-4" v-for="candidateUser in candidateUsers" :key="candidateUser.id">
-        <div class="fr-card fr-card--horizontal">
-          <div class="fr-card__body">
-              <div class="fr-card__content">
-                  <h4 class="fr-card__title">{{ candidateUser.nom }}</h4>
-                  <div class="fr-card__desc">
-                    <ul class="list-unstyled">
-                      <li v-if="candidateUser.commune"><strong>Siège</strong> : {{ candidateUser.commune }} ({{ candidateUser.departement }})</li>
-                      <li v-if="candidateUser.denominationCourante && candidateUser.denominationCourante !== candidateUser.nom"><b>Dénomination courante</b> : {{ candidateUser.denominationCourante }}</li>
-                      <li v-if="candidateUser.siret"><b>SIRET</b> : {{ candidateUser.siret }}</li>
-                      <li v-if="candidateUser.numeroPacage"><b>PACAGE</b> : {{ candidateUser.numeroPacage }}</li>
-                      <li><b>Numéro Bio</b> : {{ candidateUser.numeroBio }}</li>
-                      <li><b>Date d'engagement</b> : {{ candidateUser.dateEngagement }}</li>
-                    </ul>
-                  </div>
-                  <div class="fr-card__start">
-                      <ul class="fr-tags-group">
-                          <li>
-                              <p class="fr-badge fr-badge--success fr-icon-medal-fill">vérifié</p>
-                          </li>
-                      </ul>
-                  </div>
-                </div>
-
-                <div class="fr-card__footer">
-                  <ul class="fr-btns-group  fr-btns-group--inline-lg">
-                      <li>
-                        <button class="fr-btn" @click.prevent="loginCandidateUser(candidateUser)">
-                          Confirmer cette identité
-                        </button>
-                      </li>
-                  </ul>
-                </div>
-          </div>
-        </div>
-      </article>
-    </section>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useUserStore } from '@/stores/user.js'
-import { statsPush } from "@/stats.js"
-
-const userStore = useUserStore()
-const router = useRouter()
-const loginInput = ref(null)
-const userLogin = ref('')
-const cleanedInput = computed(() => userLogin.value.trim())
-
-const isLoading = ref(false)
-const error = ref('')
-const candidateUsers = ref([])
-const hasCandidateUsers = computed(() => Boolean(candidateUsers.value.length))
-
-onMounted(() => loginInput.value?.focus())
-
-function resetSearch () {
-  candidateUsers.value = []
-  userLogin.value = ''
-  loginInput.value.focus()
-  statsPush(['trackEvent', 'Login', 'Réinitialiser la recherche'])
-}
-
-async function tryLogin () {
-  isLoading.value = true
-  error.value = ''
-  candidateUsers.value = []
-
-  try {
-    candidateUsers.value = await fetch(`${import.meta.env.VUE_APP_API_ENDPOINT}/v2/tryLogin`, {
-      method: 'POST',
-      body: JSON.stringify({ q: cleanedInput.value }),
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    }).then(res => res.json())
-
-    statsPush(['trackEvent', 'Login', 'Recherche opérateur', cleanedInput.value])
-  }
-  catch (e) {
-    error.value = 'La requête n\'a pas pu aboutir. Pouvez-vous réessayer dans quelques secondes ?'
-
-    throw e
-  }
-  finally {
-    isLoading.value = false
-  }
-
-}
-
-async function loginCandidateUser (candidateUser) {
-  const persistentToken = await fetch(`${import.meta.env.VUE_APP_API_ENDPOINT}/v2/temporaryLoginWithToken`, {
-    method: 'POST',
-    body: JSON.stringify({}),
-    signal: AbortSignal.timeout(5000),
-    headers: {
-      'Content-Type': 'application/json',
-      'Authorization': `Bearer ${candidateUser.temporaryLoginToken}`
-    }
-  }).then(res => res.text())
-
-  statsPush(['trackEvent', 'Login', "Sélection d'opérateur"])
-
-  userStore.login(persistentToken)
-  router.push('/exploitation/parcellaire')
-}
-</script>
-
-<style scoped>
-span[aria-selected="true"] {
-  font-weight: bold;
-}
-
-.help span:not(:last-of-type)::after {
-  content: ", ";
-}
-
-.list-unstyled {
-  --ul-type: none;
-  --ul-start: 0;
-}
-
-.fr-alert--waiting::before {
-  mask-image: url(@gouvfr/dsfr/icons/system/time-fill.svg);
-}
-
-</style>
diff --git a/src/components/OperatorSetup/index.vue b/src/components/OperatorSetup/index.vue
index fa9fc858..985cd50d 100644
--- a/src/components/OperatorSetup/index.vue
+++ b/src/components/OperatorSetup/index.vue
@@ -18,14 +18,13 @@
 
 <script setup>
 import { computed, provide, ref, toRaw, unref, watchEffect } from 'vue'
-import { storeToRefs } from 'pinia'
 
 import ImportPreview from '@/components/OperatorSetup/ImportPre.vue'
 
 import { createOperatorRecord } from '@/cartobio-api.js'
 import { now } from '@/components/dates.js'
 import featureSources from '@/components/OperatorSetup/index.js'
-import { useUserStore } from '@/stores/user.js'
+import { useRecordStore } from "@/stores/index.js"
 
 const emit = defineEmits(['source:change', 'import:start', 'import:preview', 'import:complete', 'import:error'])
 
@@ -47,8 +46,7 @@ provide('featureCollection', featureCollection)
 provide('importWarnings', importWarnings)
 provide('extraMetadata', extraMetadata)
 
-const userStore = useUserStore()
-const { user } = storeToRefs(userStore)
+const { record } = useRecordStore()
 
 const hasFeatureCollection = computed(() => featureCollection.value?.features)
 const provenance = computed(() => window.location.host)
@@ -75,14 +73,13 @@ function handleCancel () {
 }
 
 async function handleUpload () {
-  const { id: operatorId, numeroBio, organismeCertificateur } = user.value
+  const { id: operatorId, numeroBio, organismeCertificateur } = record.operator
   const { id: ocId, nom: ocLabel } = organismeCertificateur
 
   const geojson = toRaw(featureCollection.value)
   const source = toRaw(featureSource.value)
 
   try {
-    // @todo ensure this comes from an operator store, and not a user store (userId != operatorId)
     const record = await createOperatorRecord(operatorId, {
       geojson,
       ocId,
diff --git a/src/main.js b/src/main.js
index 31b764a3..b773072c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,7 +13,6 @@ import App from './App.vue'
 import { version } from "../package.json"
 import { usePermissions } from "@/stores/permissions.js"
 import { getOperatorParcelles } from "@/cartobio-api.js"
-import { ROLES } from "@/stores/user.js"
 
 const { VUE_APP_MATOMO_SITE_ID:siteId = '245', VUE_APP_API_ENDPOINT } = import.meta.env
 const { VUE_APP_SENTRY_DSN } = import.meta.env
@@ -118,17 +117,16 @@ router.isReady().then(() => {
 
 router.beforeEach(async (to, from) => {
   // Preload store for checking permissions
-  if (to.params.id || userStore.roles.includes(ROLES.OPERATEUR)) {
+  if (to.params.id) {
     const recordStore = useRecordStore()
-    const record = await getOperatorParcelles(to.params.id || userStore.user.id)
+    const record = await getOperatorParcelles(to.params.id)
     recordStore.replace(record)
   }
 
   if (to.path === '/login/agencebio') {
     // forwards the user selected tab to the callback URI
     // this way, we come back to the same tab
-    const qs = new URLSearchParams({ ...to.query, returnto: from.redirectedFrom?.fullPath ?? '/certification/exploitations' })
-    window.location = `${VUE_APP_API_ENDPOINT}/auth-provider/agencebio/login?${qs.toString()}`
+    window.location = `${VUE_APP_API_ENDPOINT}/auth-provider/agencebio/login`
     return false
   }
 
diff --git a/src/pages/exploitation/parcellaire.vue b/src/pages/exploitations/[id]/index.vue
similarity index 100%
rename from src/pages/exploitation/parcellaire.vue
rename to src/pages/exploitations/[id]/index.vue
diff --git a/src/pages/exploitations/index.vue b/src/pages/exploitations/index.vue
new file mode 100644
index 00000000..7689d5ef
--- /dev/null
+++ b/src/pages/exploitations/index.vue
@@ -0,0 +1,20 @@
+<route lang="yaml">
+meta:
+  requiredRoles: ['agri']
+  seo:
+    title: Mes exploitations
+</route>
+
+<template>
+  <div class="fr-container fr-my-5w">
+    <div class="fr-grid-row">
+      <div class="fr-col-12">
+        <Exploitations />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Exploitations from '@/components/Operator/Exploitations.vue'
+</script>
diff --git a/src/pages/login.test.js b/src/pages/login.test.js
deleted file mode 100644
index 380a8527..00000000
--- a/src/pages/login.test.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { defineComponent } from "vue"
-import { describe, it, expect } from "vitest"
-import { flushPromises, mount } from "@vue/test-utils"
-import { useRouter } from "vue-router"
-
-import LoginPage from "./login.vue"
-
-describe("Login.vue", () => {
-  it("should render the OperatorLogin component first", () => {
-    const wrapper = mount(LoginPage)
-
-    expect(wrapper.find('[aria-controls="exploitation"]').attributes('aria-selected')).toBe('true')
-    expect(wrapper.find('.fr-tabs__panel').attributes('id')).toBe('exploitation')
-  })
-
-  it("should switch to the Certification tab on click", async () => {
-    const wrapper = mount(LoginPage)
-
-    await wrapper.find('[aria-controls="certification"]').trigger('click')
-
-    expect(wrapper.find('[aria-controls="exploitation"]').attributes('aria-selected')).toBe('false')
-    expect(wrapper.find('[aria-controls="certification"]').attributes('aria-selected')).toBe('true')
-    expect(wrapper.find('.fr-tabs__panel').attributes('id')).toBe('certification')
-  })
-
-  it("should select tab based on router query string", async () => {
-    const TestComponent = defineComponent({
-      components: { LoginPage },
-      template: '<LoginPage />',
-      setup: () => {
-        const router = useRouter()
-        router.replace({ name: 'login', query: { mode: 'certification' } })
-      }
-    })
-
-    // the the `router.replace()` is async, this operation enables to wait until the side effects happened
-    await flushPromises()
-
-    const wrapper = mount(TestComponent)
-    expect(wrapper.find('[aria-controls="certification"]').attributes('aria-selected')).toBe('true')
-  })
-})
diff --git a/src/pages/login.vue b/src/pages/login.vue
index 2071fc14..89c6c952 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -11,47 +11,12 @@
 
         <h2 class="fr-h6">Connexion à CartoBio</h2>
 
-        <div class="fr-tabs" style="--tabs-height: 99.5%;">
-          <ul class="fr-tabs__list" role="tablist">
-            <li role="presentation">
-              <router-link to="/login?mode=exploitation" class="fr-tabs__tab" role="button" :aria-selected="mode === MODES_EXPLOITATION" @click="mode = MODES_EXPLOITATION" :aria-controls="MODES_EXPLOITATION">
-                Je suis agriculteur·ice
-              </router-link>
-            </li>
-            <li role="presentation">
-              <router-link to="/login?mode=certification" class="fr-tabs__tab" role="button" :aria-selected="mode === MODES_CERTIFICATION" @click="mode = MODES_CERTIFICATION" :aria-controls="MODES_CERTIFICATION">
-                Je travaille pour un organisme de certification
-              </router-link>
-            </li>
-          </ul>
-
-          <Component :is="LoginComponent" :id="mode" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" />
-        </div>
+         <Login />
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
-import { useRoute } from 'vue-router'
-
-import CertificationLogin from '@/components/Certification/Login.vue'
-import OperatorLogin from '@/components/Operator/Login.vue'
-
-const MODES_EXPLOITATION = 'exploitation'
-const MODES_CERTIFICATION = 'certification'
-
-const MODES = {
-  [MODES_EXPLOITATION]: {
-    component: OperatorLogin,
-  },
-  [MODES_CERTIFICATION]: {
-    component: CertificationLogin
-  },
-}
-
-const route = useRoute()
-const mode = ref(route.query.mode in MODES ? route.query.mode : MODES_EXPLOITATION)
-const LoginComponent = computed(() => MODES[mode.value].component)
+import Login from '@/components/Login.vue'
 </script>