🚚 Renames AppButtons to AuthButtons

src/components/Settings/AppButtons.vue

@@ -1,62 +0,0 @@
-<template>
-  <div>
-    <div class="display-options">
-      <IconLogout @click="logout()" v-tooltip="tooltip($t('settings.sign-out-tooltip'))"
-        class="layout-icon" tabindex="-2" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { logout as registerLogout } from '@/utils/Auth';
-import IconLogout from '@/assets/interface-icons/user-logout.svg';
-
-export default {
-  name: 'AppButtons',
-  components: {
-    IconLogout,
-  },
-  methods: {
-    logout() {
-      registerLogout();
-      this.$toasted.show(this.$t('login.logout-message'));
-      setTimeout(() => {
-        location.reload(true); // eslint-disable-line no-restricted-globals
-      }, 500);
-    },
-    tooltip(content) {
-      return { content, trigger: 'hover focus', delay: 250 };
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-
-span.options-label {
-  color: var(--settings-text-color);
-}
-
-.display-options {
-  color: var(--settings-text-color);
-  svg {
-    path {
-      fill: var(--settings-text-color);
-    }
-    width: 1rem;
-    height: 1rem;
-    margin: 0.2rem;
-    padding: 0.2rem;
-    text-align: center;
-    background: var(--background);
-    border: 1px solid currentColor;
-    border-radius: var(--curve-factor);
-    cursor: pointer;
-    &:hover, &.selected {
-      background: var(--settings-text-color);
-      path { fill: var(--background); }
-    }
-  }
-}
-
-</style>

src/components/Settings/SettingsContainer.vue

@@ -1,5 +1,6 @@
 <template>
   <section>
+    <p>{{ getUserState }}</p>
     <SearchBar ref="SearchBar"
       @user-is-searchin="userIsTypingSomething"
       v-if="searchVisible"
@@ -13,7 +14,7 @@
         <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
         <ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
           @modalChanged="modalChanged" />
-        <AppButtons  v-if="isUserLoggedIn()" />
+        <AuthButtons  v-if="getUserState != 'noone'" :userType="getUserState" />
       </div>
       <div :class="`show-hide-container ${settingsVisible? 'hide-btn' : 'show-btn'}`">
         <button @click="toggleSettingsVisibility()"
@@ -34,7 +35,7 @@ import ConfigLauncher from '@/components/Settings/ConfigLauncher';
 import ThemeSelector from '@/components/Settings/ThemeSelector';
 import LayoutSelector from '@/components/Settings/LayoutSelector';
 import ItemSizeSelector from '@/components/Settings/ItemSizeSelector';
-import AppButtons from '@/components/Settings/AppButtons';
+import AuthButtons from '@/components/Settings/AuthButtons';
 import KeyboardShortcutInfo from '@/components/Settings/KeyboardShortcutInfo';
 import AppInfoModal from '@/components/Configuration/AppInfoModal';
 import IconOpen from '@/assets/interface-icons/config-open-settings.svg';
@@ -44,6 +45,8 @@ import {
   visibleComponents as defaultVisibleComponents,
 } from '@/utils/defaults';
 
+import { getUserState } from '@/utils/Auth';
+
 export default {
   name: 'SettingsContainer',
   props: {
@@ -61,7 +64,7 @@ export default {
     ThemeSelector,
     LayoutSelector,
     ItemSizeSelector,
-    AppButtons,
+    AuthButtons,
     KeyboardShortcutInfo,
     AppInfoModal,
     IconOpen,
@@ -87,9 +90,6 @@ export default {
     getInitialTheme() {
       return this.appConfig.theme || '';
     },
-    isUserLoggedIn() {
-      return !!localStorage[localStorageKeys.USERNAME];
-    },
     /* Gets user themes if available */
     getUserThemes() {
       const userThemes = this.appConfig.cssThemes || [];
@@ -105,6 +105,19 @@ export default {
         || (this.visibleComponents || defaultVisibleComponents).settings);
     },
   },
+  computed: {
+    /**
+    * 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
+    * 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
+    */
+    getUserState() {
+      return getUserState(this.appConfig);
+    },
+  },
   data() {
     return {
       settingsVisible: this.getSettingsVisibility(),