Merge pull request #231 from SimonStnn/feature/grant-permissions-banner

Allow user to grant permissions in header banner
SimonStnn · Jun 17, 2024 · 9191a63 · 9191a63
2 parents 8d3add1 + b3fca3b
commit 9191a63
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 20 deletions.
diff --git a/src/popup/components/Header.tsx b/src/popup/components/Header.tsx
@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react';
-import browser from 'webextension-polyfill';
+import browser, { type Permissions } from 'webextension-polyfill';
 import { useLocation } from 'react-router-dom';
 import { ClassValue } from 'clsx';
 import { LucideIcon, RotateCcw } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { ArrowLeft, List, Settings } from 'lucide-react';
 import remote from '@/remote';
 import { Button } from './ui/button';
+import { askOriginPermissions } from '@/utils';
 
 type iconProps = {
   to: string;
@@ -41,24 +42,30 @@ const HeaderIcon = (props: iconProps) => {
 const Banner = (props: BannerProps) => {
   if (!props.remoteAvailable)
     return (
-      <div className="flex justify-center items-center bg-destructive text-destructive-foreground p-1">
+      <div className="flex items-center justify-center bg-destructive p-1 text-destructive-foreground">
         Remote not available
       </div>
     );
 
   const [alarms, setAlarms] = useState<browser.Alarms.Alarm[]>([]);
-
+  const [permissions, setPermissions] = useState<Permissions.AnyPermissions>(
+    {}
+  );
   useEffect(() => {
     const fetchAlarms = async () => {
       const alarms = await browser.alarms.getAll();
       setAlarms(alarms);
     };
+    const fetchPermissions = async () => {
+      setPermissions(await browser.permissions.getAll());
+    };
     fetchAlarms();
+    fetchPermissions();
   }, []);
 
   if (alarms.length === 0)
     return (
-      <div className="flex justify-center items-center bg-secondary text-secondary-foreground p-1 gap-2">
+      <div className="flex items-center justify-center gap-2 bg-secondary p-1 text-secondary-foreground">
         <span>Something went wrong, please restart the extension.</span>
         <Button
           className="size-3"
@@ -71,6 +78,23 @@ const Banner = (props: BannerProps) => {
       </div>
     );
 
+  if (permissions.origins && permissions.origins.length === 0)
+    return (
+      <div className="flex items-center justify-center gap-2 bg-secondary p-1 text-secondary-foreground">
+        <span>Pop-a-loon is missing recommended permissions.</span>
+        <Button
+          variant={'link'}
+          className="h-fit p-0 text-xs"
+          onClick={async () => {
+            await askOriginPermissions();
+            setPermissions(await browser.permissions.getAll());
+          }}
+        >
+          Allow
+        </Button>
+      </div>
+    );
+
   return null;
 };
 
@@ -94,7 +118,7 @@ export default (props: HeaderProps) => {
 
   return (
     <>
-      <header className="flex items-center justify-center bg-primary p-2 text-primary-foreground select-none">
+      <header className="flex select-none items-center justify-center bg-primary p-2 text-primary-foreground">
         <div className="absolute left-1 flex items-center justify-center">
           {location.pathname !== '/' && <HeaderIcon to="/" icon={ArrowLeft} />}
         </div>

diff --git a/src/popup/components/forms/LocalSettings.tsx b/src/popup/components/forms/LocalSettings.tsx
@@ -16,6 +16,7 @@ import InfoIcon from '@/components/InfoIcon';
 import { Default as DefaultBalloon } from '@/balloons';
 import storage from '@/managers/storage';
 import log from '@/managers/log';
+import { askOriginPermissions } from '@/utils';
 
 const MIN_POP_VOLUME = 0;
 const VOLUME_STEP = 20;
@@ -77,14 +78,7 @@ export default () => {
   };
 
   const onGrantOriginPermissionClick = async () => {
-    const host_permissions =
-      await browser.runtime.getManifest().host_permissions;
-    if (!host_permissions) return log.error('No host_permissions found');
-    const permissions = await browser.permissions.request({
-      origins: host_permissions,
-    });
-    log.debug('Permissions granted for', permissions);
-
+    await askOriginPermissions();
     setPermissions(await browser.permissions.getAll());
   };
 
@@ -113,10 +107,10 @@ export default () => {
                 <span className="flex gap-2">
                   <span className="">{popVolume}</span>
                   <InfoIcon>
-                    <h4 className="font-medium leading-none mb-1">
+                    <h4 className="mb-1 font-medium leading-none">
                       Pop Volume
                     </h4>
-                    <p className="text-sm font-normal text-muted-foreground leading-tight">
+                    <p className="text-sm font-normal leading-tight text-muted-foreground">
                       The volume of the pop sound when a balloon is popped.
                     </p>
                   </InfoIcon>
@@ -148,10 +142,10 @@ export default () => {
                 <span className="flex gap-2">
                   <span className="">x{spawnRate}</span>
                   <InfoIcon>
-                    <h4 className="font-medium leading-none mb-1">
+                    <h4 className="mb-1 font-medium leading-none">
                       Spawn Rate
                     </h4>
-                    <p className="text-sm font-normal text-muted-foreground leading-tight">
+                    <p className="text-sm font-normal leading-tight text-muted-foreground">
                       The rate at which balloons spawn. A lower value means less
                       balloons will spawn.
                     </p>
@@ -184,11 +178,11 @@ export default () => {
                 <FormLabel className="flex justify-between gap-1">
                   <span>Host Permission</span>
                   <InfoIcon>
-                    <h4 className="font-medium leading-none mb-1">
+                    <h4 className="mb-1 font-medium leading-none">
                       Host Permission{' '}
-                      <span className="text-red-500 text-xs">*recommended</span>
+                      <span className="text-xs text-red-500">*recommended</span>
                     </h4>
-                    <p className="text-sm font-normal text-muted-foreground leading-tight">
+                    <p className="text-sm font-normal leading-tight text-muted-foreground">
                       Pop-a-loon requires host permissions to function properly.
                     </p>
                   </InfoIcon>

diff --git a/src/utils.ts b/src/utils.ts
@@ -130,3 +130,12 @@ export async function importStylesheet(id: string, href: string) {
     document.head.appendChild(style);
   }
 }
+
+export async function askOriginPermissions() {
+  const host_permissions = await browser.runtime.getManifest().host_permissions;
+  if (!host_permissions) return log.error('No host_permissions found');
+  const permissions = await browser.permissions.request({
+    origins: host_permissions,
+  });
+  log.debug('Permissions granted for', permissions);
+}