Added user input for geoloc

src/components/GeolocButton.vue

@@ -4,9 +4,11 @@ import { useGeolocation } from "@vueuse/core";
 import RepButton from "./RepButton.vue";
 import { computed, ref } from "vue";
 
-const { coords } = useGeolocation();
 const { getRep, setRep } = useRepStore();
 
+const { coords } = useGeolocation({
+  enableHighAccuracy: true,
+});
 const isFetching = ref<boolean>(false);
 const lastError = ref<string>("");
 
@@ -31,22 +33,15 @@ async function handleGeolocClick() {
 </script>
 
 <template>
-  <section class="text-center">
-    <header class="mb-4">
-      <h1 class="mt-4 text-center font-bold text-3xl">
-        Qui me représente à l'Assemblée Nationale ?
-      </h1>
-    </header>
-    <RepButton @click="handleGeolocClick" :style="'btn-red'">
-      <font-awesome-icon
-        :icon="['fass', buttonIcon]"
-        size="lg"
-        :class="{ 'fa-spin': isFetching }"
-      />
-      <span>Géolocalisation</span>
-    </RepButton>
-    <div v-if="lastError" class="mt-4 max-w-lg mx-auto text-sm text-red-400">
-      {{ lastError }}
-    </div>
-  </section>
+  <RepButton @click="handleGeolocClick" :style="'btn-red'">
+    <font-awesome-icon
+      :icon="['fass', buttonIcon]"
+      size="lg"
+      :class="{ 'fa-spin': isFetching }"
+    />
+    <span>Géolocalisation</span>
+  </RepButton>
+  <div v-if="lastError" class="mt-4 max-w-lg mx-auto text-sm text-red-400">
+    {{ lastError }}
+  </div>
 </template>

src/components/RepForm.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import GeolocButton from "./GeolocButton.vue";
+import RepButton from "./RepButton.vue";
+
+const hasAcceptedGeoloc = ref(false);
+
+function acceptGeoloc() {
+  hasAcceptedGeoloc.value = true;
+}
+</script>
+
+<template>
+  <section class="text-center">
+    <header class="mb-4">
+      <h1 class="mt-4 text-center font-bold text-3xl">
+        Qui me représente à l'Assemblée Nationale ?
+      </h1>
+    </header>
+
+    <RepButton
+      @click="acceptGeoloc"
+      :style="'btn-red'"
+      v-if="!hasAcceptedGeoloc"
+    >
+      <font-awesome-icon :icon="['fass', 'twitter']" size="lg" />
+      <span>Me géolocaliser</span>
+    </RepButton>
+    <GeolocButton v-else />
+  </section>
+</template>

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import GeolocRequest from "@/components/GeolocRequest.vue";
+import RepForm from "@/components/RepForm.vue";
 import RepInfo from "@/components/RepInfo.vue";
 import { useRepStore } from "@/stores/repStore";
 import { storeToRefs } from "pinia";
@@ -11,7 +11,7 @@ const { currentRep } = storeToRefs(useRepStore());
   <div>
     <main class="container py-4">
       <Transition name="fade" mode="out-in">
-        <GeolocRequest v-if="!currentRep" />
+        <RepForm v-if="!currentRep" />
         <Suspense v-else>
           <RepInfo :rep="currentRep" />
         </Suspense>