Merge branch 'master' of github.com:Lissy93/dashy into FEATURE/more-widgets

2024-11-27 10:26:00 +03:00 · 2022-01-20 16:37:01 +00:00 · 2022-01-20 16:37:01 +00:00 · 7953ccf3c8
commit 7953ccf3c8
parent c8f33d85bf 987ee2d2f3
30 changed files with 727 additions and 368 deletions
--- a/.github/AUTHORS.txt
+++ b/.github/AUTHORS.txt
@ -1,37 +1,41 @@
 Alicia <liss-bot@d0h.co> - 1 commits
-BOZG <sr@bozg.se> - 1 commits
 Begin <support@begin.com> - 1 commits
 David <skaarj1989@gmail.com> - 1 commits
 DeepSource <o> - 1 commits
 Devin <uh> - 1 commits
 FormatToday <616099456@qq.com> - 1 commits
 Iaroslav <ronski> - 1 commits
+Kieren <onnel> - 1 commits
 Rune <jørnerå> - 1 commits
 Ryan <urne> - 1 commits
 Shreya <o> - 1 commits
+Xert <xertdev@gmail.com> - 1 commits
 deepsource-io[bot] <deepsource-io[bot]@users.noreply.github.com> - 1 commits
 jnach <33467747+jnach@users.noreply.github.com> - 1 commits
+BOZG <sr@bozg.se> - 2 commits
 Brendan <&#39;Lear> - 2 commits
 Dan <ilber> - 2 commits
 liss-bot <87835202+liss-bot@users.noreply.github.com> - 2 commits
 ᗪєνιη <υн> - 2 commits
 Walkx <71191962+walkxcode@users.noreply.github.com> - 3 commits
 Niklas <abe> - 4 commits
+Alicie <gh@d0h.co> - 5 commits
 UrekD <urek.denis@gmail.com> - 5 commits
 Erik <roo> - 6 commits
+Leonardo <ovarrubia> - 6 commits
 liss-bot <liss-bot@users.noreply.github.com> - 6 commits
 Kashif <ohai> - 9 commits
-Alicia <yke> - 10 commits
+Alicia <yke> - 16 commits
 github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> - 16 commits
-repo-visualizer <repo-visualizer@users.noreply.github.com> - 17 commits
 snyk-bot <snyk-bot@users.noreply.github.com> - 18 commits
-snyk-bot <snyk-bot@snyk.io> - 20 commits
+repo-visualizer <repo-visualizer@users.noreply.github.com> - 20 commits
 EVOTk <45015615+EVOTk@users.noreply.github.com> - 22 commits
-Alicia <yke> - 23 commits
+snyk-bot <snyk-bot@snyk.io> - 24 commits
 Alicia <yke> - 28 commits
-Alicia <o> - 34 commits
-liss-bot <liss-bot@d0h.co> - 46 commits
+Alicia <o> - 39 commits
+liss-bot <liss-bot@d0h.co> - 54 commits
+Alicia <yke> - 60 commits
 Lissy93 <gh@d0h.co> - 78 commits
 Lissy93 <Lissy93@users.noreply.github.com> - 202 commits
-Alicia <yke> - 304 commits
-Alicia <yke> - 1249 commits
+Alicia <yke> - 314 commits
+Alicia <yke> - 1270 commits
--- a/.github/CHANGELOG.md
+++ b/.github/CHANGELOG.md
@ -1,5 +1,10 @@
 # Changelog

+## 🐛 1.9.7 - Minor UI Editor Bug fixes [PR #416](https://github.com/Lissy93/dashy/pull/416)
+- Fixes unable to edit item bug (#415)
+- Fixes unable to add new app bug (#390)
+- Fixes nav links visibility (#389)
+
 ## ⚡️ 1.9.6 - Adds Proxy Support for Widget Requests [PR #392](https://github.com/Lissy93/dashy/pull/392)
 - Refactors widget mixin to include data requests, so that code can be shared between widgets
 - Adds a Node endpoint for proxying requests server-side, used for APIs that are not CORS enabled
--- a/README.md
+++ b/README.md
@ -328,7 +328,7 @@ For apps that you use regularly, you can set a custom keybinding. Use the `hotke

 You can also add custom tags to a given item to make finding them based on keywords easier. For example, in the following example, searching for 'Movies' will show 'Plex'

-"`yaml
+```yaml
  items:
  - title: Plex
    hotkey: 8
@ -501,6 +501,20 @@ Huge thanks to the sponsors helping to support Dashy's development!
            <br />
            <sub><b>Vlad Timofeev</b></sub>
        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/KierenConnell">
+            <img src="https://avatars.githubusercontent.com/u/46445781?u=5502f8fb780938e2825735d7bbb9236642d212c0&v=4" width="80;" alt="KierenConnell"/>
+            <br />
+            <sub><b>Kieren Connell</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/ratty222">
+            <img src="https://avatars.githubusercontent.com/u/92832598?v=4" width="80;" alt="ratty222"/>
+            <br />
+            <sub><b>Ratty222</b></sub>
+        </a>
    </td></tr>
 </table>
 <!-- readme: sponsors -end -->
--- a/docs/assets/CONTRIBUTORS.svg
+++ b/docs/assets/CONTRIBUTORS.svg
--- a/docs/assets/repo-visualization.svg
+++ b/docs/assets/repo-visualization.svg
--- a/docs/authentication.md
+++ b/docs/authentication.md
@ -143,9 +143,25 @@ appConfig:
      realm: 'alicia-homelab'
      clientId: 'dashy'
 ```
+
+### 4. Add groups and roles (Optional)
+Keycloak allows you to assign users roles and groups. You can use these values to configure who can access various sections in Dashy.
+Keycloak server administration and configuration is a deep topic; please refer to the [server admin guide](https://www.keycloak.org/docs/latest/server_admin/index.html#assigning-permissions-and-access-using-roles-and-groups) to see details about creating and assigning roles and groups.
+Once you have groups or roles assigned to users you can configure access under each sections `displayData.showForKeycloakUser` and `displayData.hideForKeycloakUser`.
+Both show and hide configurations accept a list of `groups` and `roles` that limit access. If a users data matches one or more items in these lists they will be allowed or excluded as defined.
+```yaml
+sections:
+  - name: DeveloperResources
+    displayData:
+      showForKeycloakUsers:
+        roles: ['canViewDevResources']
+      hideForKeycloakUsers:
+        groups: ['ProductTeam']
+```
+
 Your app is now secured :) When you load Dashy, it will redirect to your Keycloak login page, and any user without valid credentials will be prevented from accessing your dashboard.

-From within the Keycloak console, you can then configure things like user permissions, time outs, password policies, access, etc. You can also backup your full Keycloak config, and it is recommended to do this, along with your Dashy config. You can spin up both Dashy and Keycloak simultaneously and restore both applications configs using a `docker-compose.yml` file, and this is recommended.
+From within the Keycloak console, you can then configure things like time-outs, password policies, etc. You can also backup your full Keycloak config, and it is recommended to do this, along with your Dashy config. You can spin up both Dashy and Keycloak simultaneously and restore both applications configs using a `docker-compose.yml` file, and this is recommended.

 ---

--- a/docs/configuring.md
+++ b/docs/configuring.md
@ -77,7 +77,7 @@ Tips:
 --- | --- | --- | ---
 **`language`** | `string` | _Optional_ | The 2 (or 4-digit) [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) for your language, e.g. `en` or `en-GB`. This must be a language that the app has already been [translated](https://github.com/Lissy93/dashy/tree/master/src/assets/locales) into. If your language is unavailable, Dashy will fallback to English. By default Dashy will attempt to auto-detect your language, although this may not work on some privacy browsers.
 **`startingView`** | `enum` | _Optional_ | Which page to load by default, and on the base page or domain root. You can still switch to different views from within the UI. Can be either `default`, `minimal` or `workspace`. Defaults to `default`
-**`defaultOpeningMethod`** | `enum` | _Optional_ | The default opening method for items, if no `target` is specified for a given item. Can be either `newtab`, `sametab`, `top`, `parent`, `modal` or `workspace`. Defaults to `newtab`
+**`defaultOpeningMethod`** | `enum` | _Optional_ | The default opening method for items, if no `target` is specified for a given item. Can be either `newtab`, `sametab`, `modal`, `workspace`, `clipboard`, `top` or `parent`. Defaults to `newtab`
 **`statusCheck`** | `boolean` | _Optional_ | When set to `true`, Dashy will ping each of your services and display their status as a dot next to each item. This can be overridden by setting `statusCheck` under each item. Defaults to `false`
 **`statusCheckInterval`** | `boolean` | _Optional_ | The number of seconds between checks. If set to `0` then service will only be checked on initial page load, which is usually the desired functionality. If value is less than `10` you may experience a hit in performance. Defaults to `0`
 **`webSearch`** | `object` | _Optional_ | Configuration options for the web search feature, set your default search engine, opening method or disable web search. See [`webSearch`](#appconfigwebsearch-optional)
@ -186,7 +186,7 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)**
 **`description`** | `string` | _Optional_ | Additional info about an item, which is shown in the tooltip on hover, or visible on large tiles
 **`url`** | `string` | Required | The URL / location of web address for when the item is clicked
 **`icon`** | `string` | _Optional_ | The icon for a given item. Can be a font-awesome icon, favicon, remote URL or local URL. See [`item.icon`](#sectionicon-and-sectionitemicon)
-**`target`** | `string` | _Optional_ | The opening method for when the item is clicked, either `newtab`, `sametab`, `top`, `parent`, `modal` or `workspace`. Where `newtab` will open the link in a new tab, `sametab` will open it in the current tab, and `modal` will open a pop-up modal and `workspace` will open in the Workspace view. Defaults to `newtab`
+**`target`** | `string` | _Optional_ | The opening method for when the item is clicked, either `newtab`, `sametab`, `modal`, `workspace`, `clipboard`, `top` or `parent`. Where `newtab` will open the link in a new tab, `sametab` will open it in the current tab, and `modal` will open a pop-up modal, `workspace` will open in the Workspace view and `clipboard` will copy the URL to system clipboard (but not launch app). Defaults to `newtab`
 **`hotkey`** | `number` | _Optional_ | Give frequently opened applications a numeric hotkey, between `0 - 9`. You can then just press that key to launch that application.
 **`tags`** | `string[]` | _Optional_ | A list of tags, which can be used for improved search
 **`statusCheck`** | `boolean` | _Optional_ | When set to `true`, Dashy will ping the URL associated with the current service, and display its status as a dot next to the item. The value here will override `appConfig.statusCheck` so you can turn off or on checks for a given service. Defaults to `appConfig.statusCheck`, falls back to `false`
@ -228,6 +228,8 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)**
 **`hideForUsers`** | `string[]` | _Optional_ | Current section will be visible to all users, except for those specified in this list
 **`showForUsers`** | `string[]` | _Optional_ | Current section will be hidden from all users, except for those specified in this list
 **`hideForGuests`** | `boolean` | _Optional_ | Current section will be visible for logged in users, but not for guests (see `appConfig.enableGuestAccess`). Defaults to `false`
+**`hideForKeycloakUsers`** | `object`  | _Optional_ | Current section will be visible to all keycloak users, except for those configured via these groups and roles. See `hideForKeycloakUsers`
+**`showForKeycloakUsers`** | `object`  | _Optional_ | Current section will be hidden from all keyclaok users, except for those configured via these groups and roles. See `showForKeycloakUsers`

 **[⬆️ Back to Top](#configuring)**

@ -239,6 +241,15 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)**

 **[⬆️ Back to Top](#configuring)**

+### `section.displayData.hideForKeycloakUsers` and `section.displayData.showForKeycloakUsers`
+
+**Field** | **Type**   | **Required**| **Description**
+--- |------------| --- | ---
+**`groups`** | `string[]` | _Optional_ | Current Section will be hidden or shown based on the user having any of the groups in this list
+**`roles`** | `string[]` | _Optional_ | Current Section will be hidden or shown based on the user having any of the roles in this list
+
+**[⬆️ Back to Top](#configuring)**
+
 ---

 ## Notes
--- a/docs/credits.md
+++ b/docs/credits.md
@ -24,6 +24,20 @@
            <br />
            <sub><b>Vlad Timofeev</b></sub>
        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/KierenConnell">
+            <img src="https://avatars.githubusercontent.com/u/46445781?u=5502f8fb780938e2825735d7bbb9236642d212c0&v=4" width="80;" alt="KierenConnell"/>
+            <br />
+            <sub><b>Kieren Connell</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/ratty222">
+            <img src="https://avatars.githubusercontent.com/u/92832598?v=4" width="80;" alt="ratty222"/>
+            <br />
+            <sub><b>Ratty222</b></sub>
+        </a>
    </td></tr>
 </table>
 <!-- readme: sponsors -end -->
@ -89,13 +103,6 @@
            <sub><b>ᗪєνιη ᗷυнʟ</b></sub>
        </a>
    </td>
-    <td align="center">
-        <a href="https://github.com/daentech">
-            <img src="https://avatars.githubusercontent.com/u/358678?v=4" width="80;" alt="daentech"/>
-            <br />
-            <sub><b>Dan Gilbert</b></sub>
-        </a>
-    </td>
    <td align="center">
        <a href="https://github.com/BOZG">
            <img src="https://avatars.githubusercontent.com/u/6022344?v=4" width="80;" alt="BOZG"/>
@ -103,6 +110,13 @@
            <sub><b>Stephen Rigney</b></sub>
        </a>
    </td>
+    <td align="center">
+        <a href="https://github.com/daentech">
+            <img src="https://avatars.githubusercontent.com/u/358678?v=4" width="80;" alt="daentech"/>
+            <br />
+            <sub><b>Dan Gilbert</b></sub>
+        </a>
+    </td>
    <td align="center">
        <a href="https://github.com/BeginCI">
            <img src="https://avatars.githubusercontent.com/u/57495754?v=4" width="80;" alt="BeginCI"/>
@ -139,6 +153,13 @@
            <sub><b>Iaroslav Dronskii</b></sub>
        </a>
    </td>
+    <td align="center">
+        <a href="https://github.com/KierenConnell">
+            <img src="https://avatars.githubusercontent.com/u/46445781?v=4" width="80;" alt="KierenConnell"/>
+            <br />
+            <sub><b>Kieren Connell</b></sub>
+        </a>
+    </td>
    <td align="center">
        <a href="https://github.com/rubjo">
            <img src="https://avatars.githubusercontent.com/u/42270947?v=4" width="80;" alt="rubjo"/>
@ -152,15 +173,22 @@
            <br />
            <sub><b>Ryan Turner</b></sub>
        </a>
-    </td>
+    </td></tr>
+<tr>
    <td align="center">
        <a href="https://github.com/royshreyaaa">
            <img src="https://avatars.githubusercontent.com/u/88572557?v=4" width="80;" alt="royshreyaaa"/>
            <br />
            <sub><b>Shreya Roy</b></sub>
        </a>
-    </td></tr>
-<tr>
+    </td>
+    <td align="center">
+        <a href="https://github.com/XertDev">
+            <img src="https://avatars.githubusercontent.com/u/16572811?v=4" width="80;" alt="XertDev"/>
+            <br />
+            <sub><b>Xert</b></sub>
+        </a>
+    </td>
    <td align="center">
        <a href="https://github.com/jnach">
            <img src="https://avatars.githubusercontent.com/u/33467747?v=4" width="80;" alt="jnach"/>
--- a/docs/deployment.md
+++ b/docs/deployment.md
@ -16,6 +16,8 @@ Once you've got Dashy up and running, you'll want to configure it with your own

 - [Deploy with Docker](#deploy-with-docker)
 - [Using Docker Compose](#using-docker-compose)
+- [Unraid](#unraid)
+- [Synology NAS](#synology-nas)
 - [Build from Source](#build-from-source)
 - [Hosting with CDN](#hosting-with-cdn)
 - [Run as executable](#run-as-executable)
@ -23,7 +25,9 @@ Once you've got Dashy up and running, you'll want to configure it with your own
 - [Deploy to cloud service](#deploy-to-cloud-service)
 - [Use managed instance](#use-managed-instance)

-### Deploy with Docker
+---
+
+## Deploy with Docker

 **Container Info**: [
 ![Docker Supported Architecture](https://img.shields.io/badge/Architectures-amd64%20|%20arm32v7%20|%20arm64v8-6ba6e5)
@ -66,7 +70,9 @@ If you're deploying Dashy on a modern ARM-based board, such as a Raspberry Pi (2

 The image defaults to `:latest`, but you can instead specify a specific version, e.g. `docker pull lissy93/dashy:release-1.5.0`

-### Using Docker Compose
+---
+
+## Using Docker Compose

 Using Docker Compose can be useful for saving your specific config in files, without having to type out a long run command each time. Save compose config as a YAML file, and then run `docker compose up -d` (optionally use the `-f` flag to specify file location, if it isn't located at `./docker-compose.yml`), `-d` is detached mode (not running in the foreground of your terminal). Compose is also useful if you are using clusters, as the format is very similar to stack files, used with Docker Swarm.

@ -106,7 +112,21 @@ You can use a different tag, by for example setting `image: lissy93/dashy:arm64v

 If you are building from source, and would like to use one of the [other Dockerfiles](https://github.com/Lissy93/dashy/tree/master/docker), then under `services.dashy` first set `context: .`, then specify the the path to the dockerfile, e.g. `dockerfile: ./docker/Dockerfile-arm32v7`

-### Build from Source
+---
+
+## Unraid
+
+// TODO
+
+---
+
+## Synology NAS
+
+// TODO
+
+---
+
+## Build from Source

 If you do not want to use Docker, you can run Dashy directly on your host system. For this, you will need both [git](https://git-scm.com/downloads) and the latest or LTS version of [Node.js](https://nodejs.org/) installed, and optionally [yarn](https://yarnpkg.com/)

@ -116,6 +136,8 @@ If you do not want to use Docker, you can run Dashy directly on your host system
 4. Build: `yarn build`
 5. Run: `yarn start`

+---
+
 ### Deploy to cloud service

 If you don't have a home server, then fear not - Dashy can be deployed to pretty much any cloud provider. The above Docker and NPM guides will work exactly the same on a VPS, but I've also setup some 1-Click deploy links for 10+ of the most common cloud providers, to make things easier. Note that if your instance is exposed to the internet, it will be your responsibility to adequately secure it.
@ -236,13 +258,16 @@ yarn build
 surge ./dist
 ```

+---

-### Hosting with CDN
+## Hosting with CDN

 Once Dashy has been built, it is effectivley just a static web app. This means that it can be served up with pretty much any static host, CDN or web server. To host Dashy through a CDN, the steps are very similar to building from source: clone the project, cd into it, install dependencies, write your config file and build the app. Once build is complete you will have a `./dist` directory within Dashy's root, and this is the build application which is ready to be served up.

 However without Dashy's node server, there are a couple of features that will be unavailible to you, including: Writing config changes to disk through the UI, triggering a rebuild through the UI and application status checks. Everything else will work fine.

+---
+

 ## Requirements

--- a/docs/developing.md
+++ b/docs/developing.md
@ -285,6 +285,7 @@ Styleguides:
 │  ├── InitServiceWorker.js       # Initializes and manages service worker, if enabled
 │  ├── Search.js                  # Helper functions for searching/ filtering items in all views
 │  ├── JsonToYaml.js              # Function that parses and converts raw JSON into valid YAML
+│  ├── KeycloakAuth.js            # Singleton class to manage Keycloak authentication
 │  ├── languages.js               # Handles fetching, switching and validating languages
 │  ╰── ThemeHelper.js             # Function that handles the fetching and setting of user themes
 ╰── views                         # Directory of available pages, corresponding to available routes
--- a/docs/showcase.md
+++ b/docs/showcase.md
@ -1,6 +1,6 @@
 # *Dashy Showcase* 🌟

-| 💗 Do you use Dashy? Got a sweet dashboard? Submit it to the showcase! 👉 [See How](#submitting-your-dashboard) |
+| 💗 Got a sweet dashboard? Submit it to the showcase! 👉 [See How](#submitting-your-dashboard) |
 |-|

 ### Home Lab 2.0
@ -10,7 +10,7 @@
 ---

 ### Ratty222
-> By [@ratty222](https://github.com/ratty222) ([#384](https://github.com/Lissy93/dashy/discussions/384))
+> By [@ratty222](https://github.com/ratty222) <sup>[#384](https://github.com/Lissy93/dashy/discussions/384)</sup>

 ![screenshot-ratty222-dashy](https://user-images.githubusercontent.com/1862727/147582551-4c655d37-8bcc-4f95-ab41-164a9d0d6a07.png)

@ -38,6 +38,14 @@

 ---

+### The Private Dashboard
+
+> By [@DylanBeMe](https://github.com/DylanBeMe) <sup>[#419](https://github.com/Lissy93/dashy/issues/419)</sup>
+
+![screenshot-evo-dashboard](https://i.ibb.co/hKS483T/private-dashboard-Dylan-Be-Me.png)
+
+---
+
 ### NAS Home Dashboard
 > By [@cerealconyogurt](https://github.com/cerealconyogurt)

@ -52,6 +60,8 @@

 ![screenshot-dashy-live](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/showcase/10-dashy-live.png)

+---
+
 ### CFT Toolbox

 ![screenshot-cft-toolbox](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/showcase/3-cft-toolbox.png)
@ -91,14 +101,21 @@

 > Dashy, is the most complete dashboard I ever tried, has all the features, and it sets itself apart from the rest. It is my default homepage now. I am thankful to the developer @Lissy93 for sharing such a wonderful creation.

-[![screenshot-12-skoogee-homelab-3](https://i.ibb.co/F5yBTsT/12-skoogee-homelab-3.png)](https://ibb.co/album/ynSwzm)
+[![screenshot-12-skoogee-homelab-3](https://i.ibb.co/F5yBTsT/12-skoogee-homelab-3.png?)](https://ibb.co/album/ynSwzm)

 ---

 ### Ground Control
 > By [@dtctek](https://github.com/dtctek)

-![screenshot-ground-control](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/showcase/7-ground-control-dtctek.png)
+![screenshot-ground-control](https://user-images.githubusercontent.com/1862727/149821995-e9b41dab-186c-42e6-b5b3-e233259b241d.png)
+
+---
+
+### System Monitor
+> An aggregated board for monitoring system resource usage from a single view
+
+![screenshot-monitor](https://i.ibb.co/xfK6BGb/system-monitor-board.png)

 ---

@ -138,10 +155,10 @@ If you're submitting a pull request, please use a format similar to this:

 > Submitted by [@username](https://github.com/user) (optional)

-![dashboard-screenshot](/docs/showcase/screenshot-name.jpg) (required)
-
 [An optional text description, or any interesting details] (optional)

+![dashboard-screenshot](https://example.com/url-to-screenshot.png) (required)
+
 ---

 ```
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "Dashy",
-  "version": "1.9.6",
+  "version": "1.9.7",
  "license": "MIT",
  "main": "server",
  "author": "Alicia Sykes <alicia@omg.lol> (https://aliciasykes.com)",
--- a/src/assets/interface-icons/open-clipboard.svg
+++ b/src/assets/interface-icons/open-clipboard.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="paste" class="svg-inline--fa fa-paste fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 193.941l-51.882-51.882A48 48 0 0 0 348.118 128H320V80c0-26.51-21.49-48-48-48h-61.414C201.582 13.098 182.294 0 160 0s-41.582 13.098-50.586 32H48C21.49 32 0 53.49 0 80v288c0 26.51 21.49 48 48 48h80v48c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48V227.882a48 48 0 0 0-14.059-33.941zm-84.066-16.184l48.368 48.368a6 6 0 0 1 1.757 4.243V240h-64v-64h9.632a6 6 0 0 1 4.243 1.757zM160 38c9.941 0 18 8.059 18 18s-8.059 18-18 18-18-8.059-18-18 8.059-18 18-18zm-32 138v192H54a6 6 0 0 1-6-6V86a6 6 0 0 1 6-6h55.414c9.004 18.902 28.292 32 50.586 32s41.582-13.098 50.586-32H266a6 6 0 0 1 6 6v42h-96c-26.51 0-48 21.49-48 48zm266 288H182a6 6 0 0 1-6-6V182a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v170a6 6 0 0 1-6 6z"></path></svg>
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@ -185,10 +185,12 @@
      "newtab": "New Tab",
      "modal": "Pop-Up Modal",
      "workspace": "Workspace View",
+      "clipboard": "Copy to Clipboard",
      "options-section-title": "Options",
      "edit-item": "Edit",
      "move-item": "Copy or Move",
-      "remove-item": "Remove"
+      "remove-item": "Remove",
+      "copied-toast": "URL has been copied to clipboard"
    },
    "section": {
      "open-section": "Open Section",
--- a/src/assets/locales/sv.json
+++ b/src/assets/locales/sv.json
@ -1,7 +1,8 @@
 {
  "home":{
    "no-results":"Inga sökresultat",
-      "no-data": "Ingen data konfigurerad"
+    "no-data":"Ingen data konfigurerad",
+    "no-items-section":"Inga objekt att visa än"
  },
  "search":{
    "search-label":"Sök",
@ -36,13 +37,13 @@
    "main-tab":"Huvudmeny",
    "view-config-tab":"Visa konfiguration",
    "edit-config-tab":"Redigera konfiguration",
-      "custom-css-tab": "Egendefinierade stilmallar",
+    "custom-css-tab":"Egna stilmallar",
    "heading":"Konfigurationsalternativ",
    "download-config-button":"Visa / Exportera konfiguration",
    "edit-config-button":"Redigera konfiguration",
-      "edit-css-button": "Redigera egendefinierad CSS",
-      "cloud-sync-button": "Aktivera molnsynkronisering",
-      "edit-cloud-sync-button": "Redigera molnsynkronisering",
+    "edit-css-button":"Redigera Custom CSS",
+    "cloud-sync-button":"Aktivera molnsynk",
+    "edit-cloud-sync-button":"Redigera molnsynk",
    "rebuild-app-button":"Återuppbygga appen",
    "change-language-button":"Ändra appspråk",
    "reset-settings-button":"Återställ lokala inställningar",
@ -60,7 +61,7 @@
    "css-note-label":"Not",
    "css-note-l1":"Du måste uppdatera sidan för att dina ändringar ska gälla.",
    "css-note-l2":"Styles overrides lagras bara lokalt, så det rekommenderas att du gör en kopia av din CSS.",
-      "css-note-l3": "För att ta bort alla egendefinierade stilmallar, radera innehållet och tryck på Spara ändringar"
+    "css-note-l3":"För att ta bort alla egna stilmallar, radera innehållet och tryck på Spara ändringar"
  },
  "alternate-views":{
    "alternate-view-heading":"Ändra vy",
@ -101,13 +102,13 @@
    "title":"Temakonfigurator",
    "export-button":"Exportera egendefinierade variabler",
    "reset-button":"Återställ stilmallar för",
-      "show-all-button": "Visa alla variabler",
+    "show-all-button":"Vissa alla variabler",
    "change-fonts-button":"Ändra typsnitt",
    "save-button":"Spara",
    "cancel-button":"Avbryt",
-      "saved-toast": "Uppdatering av {theme} har lyckats",
+    "saved-toast":"{theme} har uppdaterats",
    "copied-toast":"Temadatan för {theme} har kopierats till urklipp",
-      "reset-toast": "Egendefinierade färger för {theme} har tagits bort"
+    "reset-toast":"Egna färger för {theme} har tagits bort"
  },
  "config-editor":{
    "save-location-label":"Sparningsplats",
@ -223,6 +224,9 @@
      "save-stage-btn":"Spara",
      "cancel-stage-btn":"Avbryt"
    },
+    "edit-item":{
+      "missing-title-err":"Objektet måste ha en titel"
+    },
    "edit-section":{
      "edit-section-title":"Redigera sektion",
      "add-section-title":"Lägg till ny sektion",
@ -244,5 +248,37 @@
      "download-file-tooltip":"Ladda ner alla appkonfigurationer till din enhet som en YAML-fil",
      "view-title":"Visa konfiguration"
    }
+  },
+  "widgets":{
+    "general":{
+      "loading":"Laddar...",
+      "show-more":"Visa mer info",
+      "show-less":"Visa mindre",
+      "open-link":"Läs mer"
+    },
+    "pi-hole":{
+      "status-heading":"Status"
+    },
+    "stat-ping":{
+      "up":"Online",
+      "down":"Offline"
+    },
+    "net-data":{
+      "cpu-chart-title":"CPU History",
+      "mem-chart-title":"Memory Usage",
+      "mem-breakdown-title":"Memory Breakdown",
+      "load-chart-title":"System Load"
+    },
+    "system-info":{
+      "uptime":"Uptime"
+    },
+    "flight-data":{
+      "arrivals":"Ankomster",
+      "departures":"Avgångar"
+    },
+    "tfl-status":{
+      "good-service-all":"Good Service på alla linjer",
+      "good-service-rest":"Good Service på alla övriga linjer"
+    }
  }
 }
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@ -141,7 +141,7 @@ export default {
    hyperLinkHref() {
      const nothing = '#';
      if (this.isEditMode) return nothing;
-      const noAnchorNeeded = ['modal', 'workspace'];
+      const noAnchorNeeded = ['modal', 'workspace', 'clipboard'];
      return noAnchorNeeded.includes(this.accumulatedTarget) ? nothing : this.url;
    },
  },
@ -174,6 +174,9 @@ export default {
        this.$emit('triggerModal', this.url);
      } else if (this.accumulatedTarget === 'workspace') {
        router.push({ name: 'workspace', query: { url: this.url } });
+      } else if (this.accumulatedTarget === 'clipboard') {
+        navigator.clipboard.writeText(this.url);
+        this.$toasted.show(this.$t('context-menus.item.copied-toast'));
      } else {
        this.$emit('itemClicked');
      }
@ -226,6 +229,7 @@ export default {
        case 'top': return '"\\f102"';
        case 'modal': return '"\\f2d0"';
        case 'workspace': return '"\\f0b1"';
+        case 'clipboard': return '"\\f0ea"';
        default: return '"\\f054"';
      }
    },
@ -279,6 +283,10 @@ export default {
        case 'workspace':
          router.push({ name: 'workspace', query: { url } });
          break;
+        case 'clipboard':
+          navigator.clipboard.writeText(url);
+          this.$toasted.show(this.$t('context-menus.item.copied-toast'));
+          break;
        default: window.open(url, '_blank');
      }
    },
@ -546,4 +554,7 @@ a.item.is-edit-mode {
 .disabled-link {
  pointer-events: none;
 }
+.tooltip.item-description-tooltip {
+  z-index: 7;
+}
 </style>
--- a/src/components/LinkItems/ItemContextMenu.vue
+++ b/src/components/LinkItems/ItemContextMenu.vue
@ -23,6 +23,10 @@
          <WorkspaceOpenIcon />
          <span>{{ $t('context-menus.item.workspace') }}</span>
        </li>
+        <li @click="launch('clipboard')">
+          <ClipboardOpenIcon />
+          <span>{{ $t('context-menus.item.clipboard') }}</span>
+        </li>
      </ul>
      <!-- Edit Options -->
      <ul class="menu-section">
@ -55,6 +59,7 @@ import SameTabOpenIcon from '@/assets/interface-icons/open-current-tab.svg';
 import NewTabOpenIcon from '@/assets/interface-icons/open-new-tab.svg';
 import IframeOpenIcon from '@/assets/interface-icons/open-iframe.svg';
 import WorkspaceOpenIcon from '@/assets/interface-icons/open-workspace.svg';
+import ClipboardOpenIcon from '@/assets/interface-icons/open-clipboard.svg';

 export default {
  name: 'ContextMenu',
@ -66,6 +71,7 @@ export default {
    NewTabOpenIcon,
    IframeOpenIcon,
    WorkspaceOpenIcon,
+    ClipboardOpenIcon,
  },
  props: {
    posX: Number, // The X coordinate for positioning
--- a/src/components/LinkItems/ItemOpenMethodIcon.vue
+++ b/src/components/LinkItems/ItemOpenMethodIcon.vue
@ -7,6 +7,7 @@
      <WorkspaceOpenIcon v-else-if="openingMethod === 'workspace'" />
      <ParentOpenIcon v-else-if="openingMethod === 'parent'" />
      <TopOpenIcon v-else-if="openingMethod === 'top'" />
+      <ClipboardOpenIcon v-else-if="openingMethod === 'clipboard'" />
      <UnknownIcon v-else />
    </div>
    <div v-if="hotkey" :class="`hotkey-denominator ${makeClass(position, isSmall, isTransparent)}`">
@ -25,6 +26,7 @@ import IframeOpenIcon from '@/assets/interface-icons/open-iframe.svg';
 import WorkspaceOpenIcon from '@/assets/interface-icons/open-workspace.svg';
 import ParentOpenIcon from '@/assets/interface-icons/open-parent.svg';
 import TopOpenIcon from '@/assets/interface-icons/open-top.svg';
+import ClipboardOpenIcon from '@/assets/interface-icons/open-clipboard.svg';
 import UnknownIcon from '@/assets/interface-icons/unknown-icon.svg';

 export default {
@ -52,6 +54,7 @@ export default {
    WorkspaceOpenIcon,
    ParentOpenIcon,
    TopOpenIcon,
+    ClipboardOpenIcon,
    UnknownIcon,
  },
 };
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@ -12,11 +12,11 @@
    @openContextMenu="openContextMenu"
  >
    <!-- If no items, show message -->
-    <div v-if="sectionType === 'empty'" class="no-items">
+    <div v-if="isEmpty" class="no-items">
      {{ $t('home.no-items-section') }}
    </div>
    <!-- Item Container -->
-    <div v-else-if="sectionType === 'item'"
+    <div v-if="hasItems"
      :class="`there-are-items ${isGridLayout? 'item-group-grid': ''} inner-size-${itemSize}`"
      :style="gridStyle" :id="`section-${groupId}`"
    > <!-- Show for each item -->
@ -58,7 +58,7 @@
      />
    </div>
    <div
-      v-else-if="sectionType === 'widget'"
+      v-if="hasWidgets"
      :class="`widget-list ${isWide? 'wide' : ''}`">
      <WidgetBase
        v-for="(widget, widgetIndx) in widgets"
@ -154,11 +154,15 @@ export default {
    sortOrder() {
      return this.displayData.sortBy || defaultSortOrder;
    },
-    /* A section can contain either items or widgets */
-    sectionType() {
-      if (this.widgets && this.widgets.length > 0) return 'widget';
-      if (this.items && this.items.length > 0) return 'item';
-      return 'empty';
+    hasItems() {
+      if (this.isEditMode) return true;
+      return this.items && this.items.length > 0;
+    },
+    hasWidgets() {
+      return this.widgets && this.widgets.length > 0;
+    },
+    isEmpty() {
+      return !this.hasItems && !this.hasWidgets;
    },
    /* If the sortBy attribute is specified, then return sorted data */
    sortedItems() {
--- a/src/components/Settings/AuthButtons.vue
+++ b/src/components/Settings/AuthButtons.vue
@ -1,7 +1,7 @@
 <template>
  <div>
    <!-- If auth configured, show status text -->
-    <span class="user-type-note">{{ makeText() }}</span>
+    <span class="user-type-note">{{ makeUserGreeting() }}</span>
    <div class="display-options">
      <!-- If user logged in, show logout button -->
      <IconLogout
@ -17,6 +17,13 @@
        v-tooltip="tooltip($t('settings.sign-in-tooltip'))"
        class="layout-icon" tabindex="-2"
      />
+      <!-- If user logged in via keycloak, show keycloak logout button -->
+      <IconLogout
+        v-if="userType == userStateEnum.keycloakEnabled"
+        @click="keycloakLogout()"
+        v-tooltip="tooltip($t('settings.sign-out-tooltip'))"
+        class="layout-icon" tabindex="-2"
+      />
    </div>
  </div>
 </template>
@ -24,6 +31,7 @@
 <script>
 import router from '@/router';
 import { logout as registerLogout } from '@/utils/Auth';
+import { getKeycloakAuth } from '@/utils/KeycloakAuth';
 import { localStorageKeys, userStateEnum } from '@/utils/defaults';
 import IconLogout from '@/assets/interface-icons/user-logout.svg';

@ -48,14 +56,22 @@ export default {
        router.push({ path: '/login' });
      }, 500);
    },
+    keycloakLogout() {
+      const keycloak = getKeycloakAuth();
+      this.$toasted.show(this.$t('login.logout-message'));
+      setTimeout(() => {
+        keycloak.logout();
+      }, 500);
+    },
    goToLogin() {
      router.push({ path: '/login' });
    },
    tooltip(content) {
      return { content, trigger: 'hover focus', delay: 250 };
    },
-    makeText() {
-      if (this.userType === userStateEnum.loggedIn) {
+    makeUserGreeting() {
+      if (this.userType === userStateEnum.loggedIn
+        || this.userType === userStateEnum.keycloakEnabled) {
        const username = localStorage[localStorageKeys.USERNAME];
        return username ? this.$t('settings.sign-in-welcome', { username }) : '';
      }
@ -73,7 +89,6 @@ export default {

 span.user-type-note {
  color: var(--settings-text-color);
-  text-transform: capitalize;
  margin-right: 0.5rem;
 }

--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@ -10,7 +10,7 @@
        <LayoutSelector :displayLayout="displayLayout" />
        <ItemSizeSelector :iconSize="iconSize" />
        <ConfigLauncher />
-        <AuthButtons  v-if="userState != 'noone'" :userType="userState" />
+        <AuthButtons  v-if="userState !== 0" :userType="userState" />
      </div>
      <div :class="`show-hide-container ${settingsVisible? 'hide-btn' : 'show-btn'}`">
        <button @click="toggleSettingsVisibility()"
@ -80,7 +80,7 @@ export default {
    /**
    * Determines which button should display, based on the user type
    * 0 = Auth not configured, don't show anything
-    * 1 = Auth condifured, and user logged in, show logout button
+    * 1 = Auth configured, and user logged in, show logout button
    * 2 = Auth configured, guest access enabled, and not logged in, show login
    * Note that if auth is enabled, but not guest access, and user not logged in,
    * then they will never be able to view the homepage, so no button needed
--- a/src/components/Widgets/PublicHolidays.vue
+++ b/src/components/Widgets/PublicHolidays.vue
@ -47,12 +47,12 @@ export default {
    },
    startDate() {
      const now = new Date();
-      return `${now.getDate()}-${now.getMonth()}-${now.getFullYear()}`;
+      return `${now.getDate()}-${now.getMonth() + 1}-${now.getFullYear()}`;
    },
    endDate() {
      const now = new Date();
      const then = new Date((now.setMonth(now.getMonth() + this.monthsToShow)));
-      return `${then.getDate()}-${then.getMonth()}-${then.getFullYear()}`;
+      return `${then.getDate()}-${then.getMonth() + 1}-${then.getFullYear()}`;
    },
    endpoint() {
      return `${widgetApiEndpoints.holidays}`
--- a/src/main.js
+++ b/src/main.js
@ -2,7 +2,6 @@
 // Import core framework and essential utils
 import Vue from 'vue';
 import VueI18n from 'vue-i18n'; // i18n for localization
-import Keycloak from 'keycloak-js';

 // Import component Vue plugins, used throughout the app
 import VTooltip from 'v-tooltip';       // A Vue directive for Popper.js, tooltip component
@ -21,7 +20,7 @@ import clickOutside from '@/utils/ClickOutside';      // Directive for closing p
 import { messages } from '@/utils/languages';         // Language texts
 import ErrorReporting from '@/utils/ErrorReporting';  // Error reporting initializer (off)
 import { toastedOptions, tooltipOptions, language as defaultLanguage } from '@/utils/defaults';
-import { isKeycloakEnabled, getKeycloakConfig } from '@/utils/Auth'; // Keycloak auth config
+import { initKeycloakAuth, isKeycloakEnabled } from '@/utils/KeycloakAuth';

 // Initialize global Vue components
 Vue.use(VueI18n);
@ -63,18 +62,7 @@ const mount = () => new Vue({
 if (!isKeycloakEnabled()) {
  mount();
 } else { // Keycloak is enabled, redirect to KC login page
-  const { serverUrl, realm, clientId } = getKeycloakConfig();
-  const initOptions = {
-    url: `${serverUrl}/auth`, realm, clientId, onLoad: 'login-required',
-  };
-  const keycloak = Keycloak(initOptions);
-  keycloak.init({ onLoad: initOptions.onLoad }).then((auth) => {
-    if (!auth) {
-      // Not authenticated, reload to Keycloak login page
-      window.location.reload();
-    } else {
-      // Yay - user successfully authenticated with Keycloak, render the app!
-      mount();
-    }
-  });
+  initKeycloakAuth()
+    .then(() => mount())
+    .catch(() => window.location.reload());
 }
--- a/src/store.js
+++ b/src/store.js
@ -70,8 +70,10 @@ const store = new Vuex.Store({
    getItemById: (state, getters) => (id) => {
      let item;
      getters.sections.forEach(sec => {
+        if (sec.items) {
          const foundItem = sec.items.find((itm) => itm.id === id);
          if (foundItem) item = foundItem;
+        }
      });
      return item;
    },
--- a/src/utils/Auth.js
+++ b/src/utils/Auth.js
@ -2,6 +2,7 @@ import sha256 from 'crypto-js/sha256';
 import ConfigAccumulator from '@/utils/ConfigAccumalator';
 import ErrorHandler from '@/utils/ErrorHandler';
 import { cookieKeys, localStorageKeys, userStateEnum } from '@/utils/defaults';
+import { isKeycloakEnabled } from '@/utils/KeycloakAuth';

 /* Uses config accumulator to get and return app config */
 const getAppConfig = () => {
@ -19,26 +20,6 @@ const printWarning = () => {
  ErrorHandler('From V 1.6.5 onwards, the structure of the users object has changed.');
 };

-/* Returns true if keycloak is enabled */
-export const isKeycloakEnabled = () => {
-  const appConfig = getAppConfig();
-  if (!appConfig.auth) return false;
-  return appConfig.auth.enableKeycloak || false;
-};
-
-/* Returns the users keycloak config */
-export const getKeycloakConfig = () => {
-  const appConfig = getAppConfig();
-  if (!isKeycloakEnabled()) return false;
-  const { keycloak } = appConfig.auth;
-  const { serverUrl, realm, clientId } = keycloak;
-  if (!serverUrl || !realm || !clientId) {
-    ErrorHandler('Keycloak config missing- please ensure you specify: serverUrl, realm, clientId');
-    return false;
-  }
-  return keycloak;
-};
-
 /* Returns array of users from appConfig.auth, if available, else an empty array */
 const getUsers = () => {
  const appConfig = getAppConfig();
@ -65,7 +46,6 @@ const generateUserToken = (user) => {

 /**
 * Checks if the user is currently authenticated
- * @param {Array[Object]} users An array of user objects pulled from the config
 * @returns {Boolean} Will return true if the user is logged in, else false
 */
 export const isLoggedIn = () => {
@ -95,7 +75,7 @@ export const isAuthEnabled = () => {
 /* Returns true if guest access is enabled */
 export const isGuestAccessEnabled = () => {
  const appConfig = getAppConfig();
-  if (appConfig.auth && typeof appConfig.auth === 'object') {
+  if (appConfig.auth && typeof appConfig.auth === 'object' && !isKeycloakEnabled()) {
    return appConfig.auth.enableGuestAccess || false;
  }
  return false;
@ -108,6 +88,7 @@ export const isGuestAccessEnabled = () => {
 * @param {String} username The username entered by the user
 * @param {String} pass The password entered by the user
 * @param {String[]} users An array of valid user objects
+ * @param {Object} messages A static message template object
 * @returns {Object} An object containing a boolean result and a message
 */
 export const checkCredentials = (username, pass, users, messages) => {
@ -146,7 +127,7 @@ export const login = (username, pass, timeout) => {
 };

 /**
- * Removed the browsers cookie, causing user to be logged out
+ * Removed the browsers' cookie, causing user to be logged out
 */
 export const logout = () => {
  document.cookie = 'authenticationToken=null';
@ -164,7 +145,7 @@ export const getCurrentUser = () => {
  if (!username) return false; // No username
  let foundUserObject = false; // Value to return
  getUsers().forEach((user) => {
-    // If current logged in user found, then return that user
+    // If current logged-in user found, then return that user
    if (user.user === username) foundUserObject = user;
  });
  return foundUserObject;
@ -186,7 +167,6 @@ export const isLoggedInAsGuest = () => {
 * But if auth is configured, then will verify user is correctly
 * logged in and then check weather they are of type admin, and
 * return false if any conditions fail
- * @param {String[]} - Array of users
 * @returns {Boolean} - True if admin privileges
 */
 export const isUserAdmin = () => {
@ -212,7 +192,13 @@ export const isUserAdmin = () => {
  * then they will never be able to view the homepage, so no button needed
  */
 export const getUserState = () => {
-  const { notConfigured, loggedIn, guestAccess } = userStateEnum; // Numeric enum options
+  const {
+    notConfigured,
+    loggedIn,
+    guestAccess,
+    keycloakEnabled,
+  } = userStateEnum; // Numeric enum options
+  if (isKeycloakEnabled()) return keycloakEnabled; // Keycloak auth configured
  if (!isAuthEnabled()) return notConfigured; // No auth enabled
  if (isLoggedIn()) return loggedIn; // User is logged in
  if (isGuestAccessEnabled()) return guestAccess; // Guest is viewing
--- a/src/utils/CheckSectionVisibility.js
+++ b/src/utils/CheckSectionVisibility.js
@ -6,24 +6,32 @@

 // Import helper functions from auth, to get current user, and check if guest
 import { getCurrentUser, isLoggedInAsGuest } from '@/utils/Auth';
+import { localStorageKeys } from '@/utils/defaults';

-/* Helper function, checks if a given username appears in a user array */
-const determineVisibility = (visibilityList, cUsername) => {
+/* Helper function, checks if a given testValue is found in the visibility list */
+const determineVisibility = (visibilityList, testValue) => {
  let isFound = false;
-  visibilityList.forEach((userInList) => {
-    if (userInList.toLowerCase() === cUsername) isFound = true;
+  visibilityList.forEach((visibilityItem) => {
+    if (visibilityItem.toLowerCase() === testValue.toLowerCase()) isFound = true;
  });
  return isFound;
 };

+/* Helper function, determines if two arrays have any intersecting elements
+   (one or more items that are the same) */
+const determineIntersection = (source = [], target = []) => {
+  const intersections = source.filter(item => target.indexOf(item) !== -1);
+  return intersections.length > 0;
+};
+
 /* Returns false if this section should not be rendered for the current user/ guest */
 const isSectionVisibleToUser = (displayData, currentUser, isGuest) => {
  // Checks if user explicitly has access to a certain section
-  const checkVisiblity = () => {
+  const checkVisibility = () => {
    if (!currentUser) return true;
-    const hideFor = displayData.hideForUsers || [];
+    const hideForUsers = displayData.hideForUsers || [];
    const cUsername = currentUser.user.toLowerCase();
-    return !determineVisibility(hideFor, cUsername);
+    return !determineVisibility(hideForUsers, cUsername);
  };
  // Checks if user is explicitly prevented from viewing a certain section
  const checkHiddenability = () => {
@ -33,12 +41,36 @@ const isSectionVisibleToUser = (displayData, currentUser, isGuest) => {
    if (showForUsers.length < 1) return true;
    return determineVisibility(showForUsers, cUsername);
  };
+  const checkKeycloakVisibility = () => {
+    if (!displayData.hideForKeycloakUsers) return true;
+
+    const { groups, roles } = JSON.parse(localStorage.getItem(localStorageKeys.KEYCLOAK_INFO) || '{}');
+    const hideForGroups = displayData.hideForKeycloakUsers.groups || [];
+    const hideForRoles = displayData.hideForKeycloakUsers.roles || [];
+
+    return !(determineIntersection(hideForRoles, roles)
+      || determineIntersection(hideForGroups, groups));
+  };
+  const checkKeycloakHiddenability = () => {
+    if (!displayData.showForKeycloakUsers) return true;
+
+    const { groups, roles } = JSON.parse(localStorage.getItem(localStorageKeys.KEYCLOAK_INFO) || '{}');
+    const showForGroups = displayData.showForKeycloakUsers.groups || [];
+    const showForRoles = displayData.showForKeycloakUsers.roles || [];
+
+    return determineIntersection(showForRoles, roles)
+      || determineIntersection(showForGroups, groups);
+  };
  // Checks if the current user is a guest, and if section allows for guests
  const checkIfHideForGuest = () => {
    const hideForGuest = displayData.hideForGuests;
    return !(hideForGuest && isGuest);
  };
-  return checkVisiblity() && checkHiddenability() && checkIfHideForGuest();
+  return checkVisibility()
+    && checkHiddenability()
+    && checkIfHideForGuest()
+    && checkKeycloakVisibility()
+    && checkKeycloakHiddenability();
 };

 /* Putting it all together, the function to export */
--- a/src/utils/ConfigSchema.json
+++ b/src/utils/ConfigSchema.json
@ -84,7 +84,8 @@
            "parent",
            "top",
            "modal",
-            "workspace"
+            "workspace",
+            "clipboard"
          ],
          "default": "newtab",
          "description": "The default opening method for items. Only used if no item.target is specified"
@ -613,6 +614,58 @@
                "type": "boolean",
                "default": false,
                "description": "If set to true, section will be visible for logged in users, but not for guests"
+              },
+              "showForKeycloakUsers": {
+                "title": "Show for select Keycloak groups or roles",
+                "type": "object",
+                "description": "Configure the Keycloak groups or roles that will have access to this section",
+                "additionalProperties": false,
+                "properties": {
+                  "groups": {
+                    "title": "Show for Groups",
+                    "type": "array",
+                    "description": "Section will be hidden from all users except those with one or more of these groups",
+                    "items": {
+                      "type": "string",
+                      "description": "Name of the group that will be able to view this section"
+                    }
+                  },
+                  "roles": {
+                    "title": "Show for Roles",
+                    "type": "array",
+                    "description": "Section will be hidden from all users except those with one or more of these roles",
+                    "items": {
+                      "type": "string",
+                      "description": "Name of the role that will be able to view this section"
+                    }
+                  }
+                }
+              },
+              "hideForKeycloakUsers": {
+                "title": "Hide for select Keycloak groups or roles",
+                "type": "object",
+                "description": "Configure the Keycloak groups or roles that will not have access to this section",
+                "additionalProperties": false,
+                "properties": {
+                  "groups": {
+                    "title": "Hide for Groups",
+                    "type": "array",
+                    "description": "Section will be hidden from users with any of these groups",
+                    "items": {
+                      "type": "string",
+                      "description": "name of the group that will not be able to view this section"
+                    }
+                  },
+                  "roles": {
+                    "title": "Hide for Roles",
+                    "type": "array",
+                    "description": "Section will be hidden from users with any of roles",
+                    "items": {
+                      "type": "string",
+                      "description": "name of the role that will not be able to view this section"
+                    }
+                  }
+                }
              }
            }
          },
@ -658,7 +711,8 @@
                    "parent",
                    "top",
                    "modal",
-                    "workspace"
+                    "workspace",
+                    "clipboard"
                  ],
                  "default": "newtab",
                  "description": "Where / how the item is opened when it's clicked"
--- a/src/utils/KeycloakAuth.js
+++ b/src/utils/KeycloakAuth.js
@ -0,0 +1,92 @@
+import Keycloak from 'keycloak-js';
+import ConfigAccumulator from '@/utils/ConfigAccumalator';
+import { localStorageKeys } from '@/utils/defaults';
+import ErrorHandler from '@/utils/ErrorHandler';
+
+const getAppConfig = () => {
+  const Accumulator = new ConfigAccumulator();
+  const config = Accumulator.config();
+  return config.appConfig || {};
+};
+
+class KeycloakAuth {
+  constructor() {
+    const { auth } = getAppConfig();
+    const { serverUrl, realm, clientId } = auth.keycloak;
+    const initOptions = {
+      url: `${serverUrl}/auth`, realm, clientId, onLoad: 'login-required',
+    };
+
+    this.keycloakClient = Keycloak(initOptions);
+  }
+
+  login() {
+    return new Promise((resolve, reject) => {
+      this.keycloakClient.init({ onLoad: 'login-required' })
+        .then((auth) => {
+          if (auth) {
+            this.storeKeycloakInfo();
+            return resolve();
+          } else {
+            return reject(new Error('Not authenticated'));
+          }
+        })
+        .catch((reason) => reject(reason));
+    });
+  }
+
+  logout() {
+    localStorage.removeItem(localStorageKeys.USERNAME);
+    localStorage.removeItem(localStorageKeys.KEYCLOAK_INFO);
+    this.keycloakClient.logout();
+  }
+
+  storeKeycloakInfo() {
+    if (this.keycloakClient.tokenParsed && typeof this.keycloakClient.tokenParsed === 'object') {
+      const {
+        groups,
+        realm_access: realmAccess,
+        resource_access: resourceAccess,
+        azp: clientId,
+        preferred_username: preferredUsername,
+      } = this.keycloakClient.tokenParsed;
+
+      const realmRoles = realmAccess.roles || [];
+
+      let clientRoles = [];
+      if (Object.hasOwn(resourceAccess, clientId)) {
+        clientRoles = resourceAccess[clientId].roles || [];
+      }
+
+      const roles = [...realmRoles, ...clientRoles];
+
+      const info = {
+        groups,
+        roles,
+      };
+
+      localStorage.setItem(localStorageKeys.KEYCLOAK_INFO, JSON.stringify(info));
+      localStorage.setItem(localStorageKeys.USERNAME, preferredUsername);
+    }
+  }
+}
+
+export const isKeycloakEnabled = () => {
+  const { auth } = getAppConfig();
+  if (!auth) return false;
+  return auth.enableKeycloak || false;
+};
+
+let keycloak;
+
+export const initKeycloakAuth = () => {
+  keycloak = new KeycloakAuth();
+  return keycloak.login();
+};
+
+export const getKeycloakAuth = () => {
+  if (!keycloak) {
+    ErrorHandler("Keycloak not initialized, can't get instance of class");
+  }
+  return keycloak;
+};
--- a/src/utils/SectionHelpers.js
+++ b/src/utils/SectionHelpers.js
@ -8,7 +8,8 @@ export const shouldBeVisible = (routeName) => !hideFurnitureOn.includes(routeNam
 /* Based on section title, item name and index, return a string value for ID */
 const makeItemId = (sectionStr, itemStr, index) => {
  const charSum = sectionStr.split('').map((a) => a.charCodeAt(0)).reduce((x, y) => x + y);
-  const itemTitleStr = itemStr.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase();
+  const newItemStr = itemStr || `unknown_${Math.random()}`;
+  const itemTitleStr = newItemStr.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase();
  return `${index}_${charSum}_${itemTitleStr}`;
 };

--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@ -3,10 +3,7 @@ module.exports = {
  pageInfo: {
    title: 'Dashy',
    description: '',
-    navLinks: [
-      { title: 'Home', path: '/' },
-      { title: 'Source', path: 'https://github.com/Lissy93/dashy' },
-    ],
+    navLinks: [],
    footerText: '',
  },
  /* Default appConfig to be used, if user does not specify their own */
@ -124,6 +121,7 @@ module.exports = {
    USERNAME: 'username',
    MOST_USED: 'mostUsed',
    LAST_USED: 'lastUsed',
+    KEYCLOAK_INFO: 'keycloakInfo',
  },
  /* Key names for cookie identifiers */
  cookieKeys: {
@ -284,6 +282,7 @@ module.exports = {
    loggedIn: 1,
    guestAccess: 2,
    notLoggedIn: 3,
+    keycloakEnabled: 4,
  },
  /* Progressive Web App settings, used by Vue Config */
  pwa: {
				`@ -0,0 +1 @@`
				<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="paste" class="svg-inline--fa fa-paste fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 193.941l-51.882-51.882A48 48 0 0 0 348.118 128H320V80c0-26.51-21.49-48-48-48h-61.414C201.582 13.098 182.294 0 160 0s-41.582 13.098-50.586 32H48C21.49 32 0 53.49 0 80v288c0 26.51 21.49 48 48 48h80v48c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48V227.882a48 48 0 0 0-14.059-33.941zm-84.066-16.184l48.368 48.368a6 6 0 0 1 1.757 4.243V240h-64v-64h9.632a6 6 0 0 1 4.243 1.757zM160 38c9.941 0 18 8.059 18 18s-8.059 18-18 18-18-8.059-18-18 8.059-18 18-18zm-32 138v192H54a6 6 0 0 1-6-6V86a6 6 0 0 1 6-6h55.414c9.004 18.902 28.292 32 50.586 32s41.582-13.098 50.586-32H266a6 6 0 0 1 6 6v42h-96c-26.51 0-48 21.49-48 48zm266 288H182a6 6 0 0 1-6-6V182a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v170a6 6 0 0 1-6 6z"></path></svg>