Added permissions to geoloc

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

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"));

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 />

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);