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

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>

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

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,
   },
 };

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() {

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;
 }
 

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

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}`