🚚 Renames AppButtons to AuthButtons

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