import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; import { Switch } from '@/components/ui/switch'; import { edit } from '@/routes/permissions'; import { Head } from '@inertiajs/react'; import { Bell, Camera, MapPin } from 'lucide-react'; import { useEffect, useState } from 'react'; type PermissionStatus = 'granted' | 'denied' | 'prompt' | 'unknown'; export default function Permissions() { const [notifications, setNotifications] = useState('unknown'); const [camera, setCamera] = useState('unknown'); const [location, setLocation] = useState('unknown'); useEffect(() => { if ('Notification' in window) { if (Notification.permission === 'granted') setNotifications('granted'); else if (Notification.permission === 'denied') setNotifications('denied'); else setNotifications('prompt'); } if (navigator.mediaDevices) { navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => { stream.getTracks().forEach((track) => track.stop()); setCamera('granted'); }).catch(() => { if ('permissions' in navigator) { navigator.permissions.query({ name: 'camera' as PermissionName }).then((result) => { setCamera(result.state as PermissionStatus); }).catch(() => setCamera('denied')); } else { setCamera('denied'); } }); } else { setCamera('denied'); } if ('geolocation' in navigator) { navigator.geolocation.getCurrentPosition( () => setLocation('granted'), () => { if ('permissions' in navigator) { navigator.permissions.query({ name: 'geolocation' }).then((result) => { setLocation(result.state as PermissionStatus); }).catch(() => setLocation('denied')); } else { setLocation('denied'); } }, ); } else { setLocation('denied'); } }, []); const handleNotifications = async (checked: boolean) => { if (checked) { if (!('Notification' in window)) return; if (Notification.permission === 'denied') { setNotifications('denied'); return; } const result = await Notification.requestPermission(); setNotifications(result === 'granted' ? 'granted' : result === 'denied' ? 'denied' : 'prompt'); } else { setNotifications('prompt'); } }; const handleCamera = async (checked: boolean) => { if (checked) { try { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); stream.getTracks().forEach((track) => track.stop()); setCamera('granted'); } catch { setCamera('denied'); } } else { setCamera('prompt'); } }; const handleLocation = async (checked: boolean) => { if (checked) { navigator.geolocation.getCurrentPosition( () => setLocation('granted'), () => setLocation('denied'), ); } else { setLocation('prompt'); } }; const isDenied = (status: PermissionStatus) => status === 'denied'; return ( <>

Izin

Notifikasi Izinkan aplikasi mengirimkan notifikasi push ke perangkat Anda. {isDenied(notifications) && (

Izin ditolak. Klik ikon gembok di address bar untuk mengaktifkannya.

)}

Kamera Izinkan aplikasi mengakses kamera perangkat Anda untuk mengambil foto atau video. {isDenied(camera) && (

Izin ditolak. Klik ikon gembok di address bar untuk mengaktifkannya.

)}

Lokasi Izinkan aplikasi mengakses lokasi perangkat Anda untuk menyediakan layanan berbasis lokasi. {isDenied(location) && (

Izin ditolak. Klik ikon gembok di address bar untuk mengaktifkannya.

)}

); } Permissions.layout = { breadcrumbs: [ { title: 'Izin', href: edit(), }, ], };