feat: add permission denied state to locked content

src/components/LockedContent/templates.ts

@@ -29,6 +29,27 @@ function permissionButtonTemplate(onClickHandler: () => void) {
   `;
 }
 
+// This template is shown when user has not given permission
+function permissionDeniedButtonTemplate() {
+  return html`<div class="flex flex-col justify-center gap-4 overlay">
+    <button
+      id="unlock-content-button"
+      class="inline-flex gap-2 items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 rounded-md text-lg p-6 text-md"
+    >
+      ${lockSVG}
+      <p>İçerik Kilitli</p>
+    </button>
+    <div class="rounded-lg border bg-card text-card-foreground shadow-sm p-2">
+      <div class="pb-0 px-4 text-center">
+        <p id="locked-content-description">
+          Konumuna erişim izni vermediğin için hedefe ne kadar <br />
+          yakın olduğun tespit edilemiyor.
+        </p>
+      </div>
+    </div>
+  </div>`;
+}
+
 // This template is shown when user has given permission but has not arrived yet
 function lockedButtonTemplate(proximityText: string | undefined) {
   return html`<div class="flex flex-col justify-center gap-4 overlay">
@@ -75,4 +96,5 @@ export {
   lockedButtonTemplate,
   unlockedButtonTemplate,
   permissionButtonTemplate,
+  permissionDeniedButtonTemplate,
 };

src/components/locked-content-lit.ts

@@ -13,6 +13,7 @@ import lockedContentStyles from "../styles/locked-content.css?inline";
 import {
   lockedButtonTemplate,
   permissionButtonTemplate,
+  permissionDeniedButtonTemplate,
   unlockedButtonTemplate,
 } from "./LockedContent/templates";
 
@@ -46,7 +47,7 @@ export class LockedContent extends LitElement {
 
   // Reactive states, template is rendered according to this states
   @state()
-  protected _hasGeolocationPermission = false;
+  protected _geolocationPermissionStatus: PermissionState = "prompt";
   @state()
   protected _unlocked = false;
   @state()
@@ -59,7 +60,7 @@ export class LockedContent extends LitElement {
   // This callback will be fired when geolocation info is available
   successCallback(position: GeolocationPosition) {
     // Set hasGeolocationPermission state true to change the template
-    if (!this._hasGeolocationPermission) this._hasGeolocationPermission = true;
+    this._geolocationPermissionStatus = "granted";
 
     // Target position must be set
     if (!this.targetPosition) return;
@@ -121,7 +122,12 @@ export class LockedContent extends LitElement {
 
     const id = navigator.geolocation.watchPosition(
       this.successCallback.bind(this),
-      errorCallback,
+      (err) => {
+        if (err.code == GeolocationPositionError.PERMISSION_DENIED) {
+          this._geolocationPermissionStatus = "denied";
+        }
+        errorCallback(err);
+      },
       this.geolocationOptions
     );
 
@@ -141,6 +147,7 @@ export class LockedContent extends LitElement {
             this._startWatchingLocation();
             break;
           case "denied":
+            this._geolocationPermissionStatus = "denied";
           case "prompt":
           default:
             break;
@@ -158,10 +165,12 @@ export class LockedContent extends LitElement {
     // 4 - User did not give geolocation permission
     if (this._arrived) {
       buttonTemplate = this._unlockedButtonTemplate;
-    } else if (this._hasGeolocationPermission) {
+    } else if (this._geolocationPermissionStatus == "granted") {
       buttonTemplate = this._lockedButtonTemplate;
-    } else {
+    } else if (this._geolocationPermissionStatus == "prompt") {
       buttonTemplate = this._permissionButtonTemplate;
+    } else {
+      buttonTemplate = permissionDeniedButtonTemplate;
     }
 
     return html`