From 7e570d5232d5dd2a24ee2acb84ee1f95c902a6b9 Mon Sep 17 00:00:00 2001
From: Sebastian Richner <sebastian@richner.ag>
Date: Mon, 21 Oct 2024 16:09:44 -0700
Subject: [PATCH] [#313] Add permissions instructions overlay

---
 .../MacPermissionsInstructionsOverlay.vue     | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/electron/src/components/onboarding/MacPermissionsInstructionsOverlay.vue

diff --git a/src/electron/src/components/onboarding/MacPermissionsInstructionsOverlay.vue b/src/electron/src/components/onboarding/MacPermissionsInstructionsOverlay.vue
new file mode 100644
index 00000000..83e01d42
--- /dev/null
+++ b/src/electron/src/components/onboarding/MacPermissionsInstructionsOverlay.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+defineProps<{
+  showAccessibility: boolean;
+}>();
+</script>
+<template>
+  <div class="text-md">
+    <p>If you are not presented with the dialog:</p>
+    <p>
+      Open the <span class="font-bold text-slate-200">Mac menu</span> and select
+      <span class="font-bold text-slate-200">System Settings...</span>
+    </p>
+    <div class="my-3 flex items-center justify-center">
+      <img src="../../assets/onboarding/permissions_systemsettings.png" class="w-1/3" />
+    </div>
+    <p>
+      Select the
+      <span class="font-bold text-slate-200">Privacy & Security</span> entry on the left side and
+      then navigate to each of the following sections within the list (Accessibility, Screen &
+      System Audio Recording).
+    </p>
+    <div class="flex items-center justify-center">
+      <img src="../../assets/onboarding/permissions_privacy.png" class="w-3/4" />
+    </div>
+    <p v-if="showAccessibility">
+      When selecting
+      <span class="font-bold text-slate-200">Accessibility or Screen & System Audio Recording</span>
+      you might be prompted to enter your administrator account credentials. Please do so to
+      proceed. Check the slider next to PersonalAnalytics to grant it the necessary permissions.
+    </p>
+    <p v-if="showAccessibility" class="mt-6">
+      After giving permissions, you will be asked to close and restart PersonalAnalytics. Please
+      restart the app manually if it doesn't do so automatically.
+    </p>
+  </div>
+</template>