From e87f27eb07f3fdc93b4e0cafb5abd3010ebdffd1 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 1 May 2023 12:17:10 +0200
Subject: [PATCH 1/2] Added user input for geoloc

---
 .../{GeolocRequest.vue => GeolocButton.vue}   | 33 ++++++++-----------
 src/components/RepForm.vue                    | 31 +++++++++++++++++
 src/views/HomeView.vue                        |  4 +--
 3 files changed, 47 insertions(+), 21 deletions(-)
 rename src/components/{GeolocRequest.vue => GeolocButton.vue} (55%)
 create mode 100644 src/components/RepForm.vue

diff --git a/src/components/GeolocRequest.vue b/src/components/GeolocButton.vue
similarity index 55%
rename from src/components/GeolocRequest.vue
rename to src/components/GeolocButton.vue
index 5afb95c..ac1ce43 100644
--- a/src/components/GeolocRequest.vue
+++ b/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>
diff --git a/src/components/RepForm.vue b/src/components/RepForm.vue
new file mode 100644
index 0000000..fac9b34
--- /dev/null
+++ b/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>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index c3deb7c..d15d73d 100644
--- a/src/views/HomeView.vue
+++ b/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>

From d950f2f08484655c1ac4d303156d73fc5a448a23 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 1 May 2023 15:06:39 +0200
Subject: [PATCH 2/2] Added permissions to geoloc

---
 src/assets/main.css          |  2 +-
 src/components/RepButton.vue |  1 +
 src/components/RepForm.vue   | 39 +++++++++++++++++++++++++++++++++---
 src/main.ts                  |  6 +++++-
 4 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 3b5aefa..c31c6b5 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -10,7 +10,7 @@ body {
 
 @layer components {
   .btn-red {
-    @apply bg-red-600 outline-red-700 hover:bg-red-700
+    @apply bg-red-600 outline-red-700 hover:bg-red-700 disabled:bg-slate-400 disabled:outline-slate-400 disabled:hover:bg-slate-400
   }
   .btn-twitter {
     @apply bg-twitter-500 outline-twitter-600 hover:bg-twitter-600
diff --git a/src/components/RepButton.vue b/src/components/RepButton.vue
index ddd7e52..91937f2 100644
--- a/src/components/RepButton.vue
+++ b/src/components/RepButton.vue
@@ -11,6 +11,7 @@ const props = defineProps<{
     | "btn-facebook"
     | "btn-instagram"
     | "btn-linkedin";
+  disabled?: boolean;
 }>();
 
 const elementTag = computed(() => (props.href ? "a" : "button"));
diff --git a/src/components/RepForm.vue b/src/components/RepForm.vue
index fac9b34..3722f52 100644
--- a/src/components/RepForm.vue
+++ b/src/components/RepForm.vue
@@ -1,12 +1,44 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import GeolocButton from "./GeolocButton.vue";
 import RepButton from "./RepButton.vue";
 
 const hasAcceptedGeoloc = ref(false);
+const hasRefusedGeoloc = ref(false);
+
+onMounted(() => {
+  navigator.permissions.query({ name: "geolocation" }).then((result) => {
+    if (result.state === "granted") {
+      hasAcceptedGeoloc.value = true;
+      hasRefusedGeoloc.value = false;
+    } else if (result.state === "denied") {
+      hasAcceptedGeoloc.value = false;
+      hasRefusedGeoloc.value = true;
+    }
+
+    result.addEventListener("change", () => {
+      if (result.state === "granted") {
+        hasAcceptedGeoloc.value = true;
+        hasRefusedGeoloc.value = false;
+      } else if (result.state === "denied") {
+        hasAcceptedGeoloc.value = false;
+        hasRefusedGeoloc.value = true;
+      }
+    });
+  });
+});
 
 function acceptGeoloc() {
-  hasAcceptedGeoloc.value = true;
+  navigator.permissions.query({ name: "geolocation" }).then((result) => {
+    console.log(result.state);
+    if (result.state === "granted" || result.state === "prompt") {
+      hasAcceptedGeoloc.value = true;
+      hasRefusedGeoloc.value = false;
+    } else if (result.state === "denied") {
+      hasAcceptedGeoloc.value = false;
+      hasRefusedGeoloc.value = true;
+    }
+  });
 }
 </script>
 
@@ -21,9 +53,10 @@ function acceptGeoloc() {
     <RepButton
       @click="acceptGeoloc"
       :style="'btn-red'"
+      :disabled="hasRefusedGeoloc"
       v-if="!hasAcceptedGeoloc"
     >
-      <font-awesome-icon :icon="['fass', 'twitter']" size="lg" />
+      <font-awesome-icon :icon="['fas', 'square']" size="lg" />
       <span>Me géolocaliser</span>
     </RepButton>
     <GeolocButton v-else />
diff --git a/src/main.ts b/src/main.ts
index 4d9779f..edd621f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,6 +19,8 @@ import {
   faLandmark,
   faLocationDot,
   faSpinner,
+  faSquare,
+  faSquareCheck,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -28,7 +30,9 @@ library.add(
   faInstagram,
   faLandmark,
   faLocationDot,
-  faSpinner
+  faSpinner,
+  faSquare,
+  faSquareCheck
 );
 
 const app = createApp(App);