From 3bf58308ff07fd9449afbd727d9f07119d172dc4 Mon Sep 17 00:00:00 2001
From: mmihaly <mmihaly@gmail.com>
Date: Thu, 21 Dec 2023 19:19:36 -0700
Subject: [PATCH] Added page visibility configurability.

---
 docs/authentication.md              | 20 ++++++++++++++++----
 src/components/PageStrcture/Nav.vue | 10 ++++++----
 src/utils/CheckPageVisibility.js    | 18 ++++++++++++++++++
 3 files changed, 40 insertions(+), 8 deletions(-)
 create mode 100644 src/utils/CheckPageVisibility.js

diff --git a/docs/authentication.md b/docs/authentication.md
index 535cc4ba..5a42a87a 100644
--- a/docs/authentication.md
+++ b/docs/authentication.md
@@ -55,13 +55,25 @@ With authentication set up, by default no access is allowed to your dashboard wi
 
 ### Granular Access
 
-You can use the following properties to make certain sections or items only visible to some users, or hide sections and items from guests.
+You can use the following properties to make certain pages, sections or items only visible to some users, or hide pages, sections and items from guests.
 
-- `hideForUsers` - Section or Item will be visible to all users, except for those specified in this list
-- `showForUsers` - Section or Item will be hidden from all users, except for those specified in this list
-- `hideForGuests` - Section or Item will be visible for logged in users, but not for guests
+- `hideForUsers` - Page, Section or Item will be visible to all users, except for those specified in this list
+- `showForUsers` - Page, Section or Item will be hidden from all users, except for those specified in this list
+- `hideForGuests` - Page, Section or Item will be visible for logged in users, but not for guests
 
 For Example:
+```yaml
+pages:
+  - name: Home Lab
+    path: home-lab.yml
+    displayData:
+      showForUsers: [admin]
+  - name: Intranet
+    path: intranet.yml
+    displayData:
+      hideForGuests: true
+      hideForUsers: [alicia, bob]
+```    
 
 ```yaml
 - name: Code Analysis & Monitoring
diff --git a/src/components/PageStrcture/Nav.vue b/src/components/PageStrcture/Nav.vue
index 5fde6671..781d776f 100644
--- a/src/components/PageStrcture/Nav.vue
+++ b/src/components/PageStrcture/Nav.vue
@@ -29,6 +29,7 @@
 <script>
 import IconBurger from '@/assets/interface-icons/burger-menu.svg';
 import { makePageSlug } from '@/utils/ConfigHelpers';
+import { checkPageVisibility } from '@/utils/CheckPageVisibility';
 
 export default {
   name: 'Nav',
@@ -45,10 +46,11 @@ export default {
   computed: {
     /* Get links to sub-pages, and combine with nav-links */
     allLinks() {
-      const subPages = this.$store.getters.pages.map((subPage) => ({
-        path: makePageSlug(subPage.name, 'home'),
-        title: subPage.name,
-      }));
+      const subPages = this.$store.getters.pages.filter((page) => checkPageVisibility(page))
+        .map((subPage) => ({
+          path: makePageSlug(subPage.name, 'home'),
+          title: subPage.name,
+        }));
       const navLinks = this.links || [];
       return [...navLinks, ...subPages];
     },
diff --git a/src/utils/CheckPageVisibility.js b/src/utils/CheckPageVisibility.js
new file mode 100644
index 00000000..e9ca8cd1
--- /dev/null
+++ b/src/utils/CheckPageVisibility.js
@@ -0,0 +1,18 @@
+/**
+ * A helper function that checks if a page is visible based on current users permissions
+ * Checks a page's displayData for hideForUsers, showForUsers and hideForGuests
+ * Returns a boolean that determines if the user has the required permissions
+ */
+
+// Import helper functions from auth, to get current user, and check if guest
+import { getCurrentUser } from '@/utils/Auth';
+import { isVisibleToUser } from '@/utils/IsVisibleToUser';
+
+/* Putting it all together, the function to export */
+export const checkPageVisibility = (page) => {
+  const currentUser = getCurrentUser(); // Get current user object
+  const displayData = page.displayData || {};
+  return isVisibleToUser(displayData, currentUser);
+};
+
+export default checkPageVisibility;