From 242dfe61c69ec5f2a006a735d3da475281b0659e Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 18 Aug 2021 21:14:26 +0100
Subject: [PATCH 01/10] :sparkles: Implements guest access into Login page

---
 src/components/Settings/AuthButtons.vue |  80 +++++++++++++++
 src/views/Login.vue                     | 131 ++++++++++++++++++++++--
 2 files changed, 202 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Settings/AuthButtons.vue

diff --git a/src/components/Settings/AuthButtons.vue b/src/components/Settings/AuthButtons.vue
new file mode 100644
index 0000000000..5065310295
--- /dev/null
+++ b/src/components/Settings/AuthButtons.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <!-- If auth configured, show status text -->
+    <span class="user-type-note">{{ makeText() }}</span>
+    <div class="display-options">
+      <!-- If user logged in, show logout button -->
+      <IconLogout
+        v-if="userType == userStateEnum.loggedIn"
+        @click="logout()"
+        v-tooltip="tooltip($t('settings.sign-out-tooltip'))"
+        class="layout-icon" tabindex="-2"
+      />
+      <!-- If not logged in, and gues mode enabled, show login button -->
+      <IconLogout
+        v-if="userType == userStateEnum.guestAccess"
+        @click="goToLogin()"
+        v-tooltip="tooltip('Login')"
+        class="layout-icon" tabindex="-2"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import router from '@/router';
+import { logout as registerLogout } from '@/utils/Auth';
+import { localStorageKeys, userStateEnum } from '@/utils/defaults';
+import IconLogout from '@/assets/interface-icons/user-logout.svg';
+
+export default {
+  name: 'AuthButtons',
+  components: {
+    IconLogout,
+  },
+  props: {
+    userType: Number,
+  },
+  data() {
+    return {
+      userStateEnum,
+    };
+  },
+  methods: {
+    logout() {
+      registerLogout();
+      this.$toasted.show(this.$t('login.logout-message'));
+      setTimeout(() => {
+        router.push({ path: '/login' });
+      }, 500);
+    },
+    goToLogin() {
+      router.push({ path: '/login' });
+    },
+    tooltip(content) {
+      return { content, trigger: 'hover focus', delay: 250 };
+    },
+    makeText() {
+      if (this.userType === userStateEnum.loggedIn) return `Hello ${localStorage[localStorageKeys.USERNAME]}!`;
+      if (this.userType === userStateEnum.guestAccess) return 'Log In';
+      return '';
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/style-helpers.scss';
+
+span.user-type-note {
+  color: var(--settings-text-color);
+  text-transform: capitalize;
+  margin-right: 0.5rem;
+}
+
+.display-options {
+  @extend .svg-button;
+  color: var(--settings-text-color);
+}
+
+</style>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 1b8e147b74..dfc2b2dbac 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,6 +1,22 @@
 <template>
   <div class="login-page">
-    <form class="login-form">
+    <!-- User is already logged in -->
+    <div v-if="isUserAlreadyLoggedIn" class="already-logged-in">
+      <h2>Already Logged In</h2>
+      <p class="already-logged-in">
+        You're logged in as <span class="username">{{ existingUsername }}</span>
+      </p>
+      <Button class="login-button" :click="stayLoggedIn">Proceed to Dashboard</Button>
+      <Button class="login-button" :click="getOut">Logout</Button>
+      <span class="already-logged-in-note">
+        You need to log out, in order to proceed as a different user.
+      </span>
+      <transition name="bounce">
+        <p :class="`login-error-message ${status}`" v-show="message">{{ message }}</p>
+      </transition>
+    </div>
+    <!-- Main login form -->
+    <form class="login-form" v-if="(!isUserAlreadyLoggedIn) && isAuthenticationEnabled">
       <h2 class="login-title">{{ $t('login.title') }}</h2>
       <Input
         v-model="username"
@@ -28,6 +44,27 @@
         <p :class="`login-error-message ${status}`" v-show="message">{{ message }}</p>
       </transition>
     </form>
+    <!-- Guest login form -->
+    <form class="guest-form"
+      v-if="appConfig.enableGuestAccess && !isUserAlreadyLoggedIn && isAuthenticationEnabled">
+      <h2 class="login-title">Guest Access</h2>
+      <Button class="login-button" :click="guestLogin">
+        Proceed as Guest
+      </Button>
+      <p class="guest-intro">
+        This instance has guest access enabled.<br>
+        Guests have view-only access to dashboards,
+        so cannot write any changes to disk.
+      </p>
+    </form>
+    <!-- Edge case - guest mode enabled, but no users configured -->
+    <div class="not-configured" v-if="!isAuthenticationEnabled">
+      <h2>Error</h2>
+      <p>Authentication is not enabled, or no users have been configured</p>
+      <Button class="login-button" :click="guestLogin">
+        Go Home
+      </Button>
+    </div>
   </div>
 </template>
 
@@ -36,7 +73,12 @@ import router from '@/router';
 import Button from '@/components/FormElements/Button';
 import Input from '@/components/FormElements/Input';
 import Defaults, { localStorageKeys } from '@/utils/defaults';
-import { checkCredentials, login } from '@/utils/Auth';
+import {
+  checkCredentials,
+  login,
+  isLoggedIn,
+  logout,
+} from '@/utils/Auth';
 
 export default {
   name: 'login',
@@ -76,6 +118,21 @@ export default {
         successMsg: this.$t('login.success-message'),
       };
     },
+    existingUsername() {
+      return localStorage[localStorageKeys.USERNAME];
+    },
+    isUserAlreadyLoggedIn() {
+      const users = this.appConfig.auth;
+      const loggedIn = (!users || users.length === 0 || isLoggedIn(users));
+      return (loggedIn && this.existingUsername);
+    },
+    isGuestAccessEnabled() {
+      if (!this.appConfig || !this.appConfig.enableGuestAccess) return false;
+      return this.appConfig.enableGuestAccess;
+    },
+    isAuthenticationEnabled() {
+      return (this.appConfig && this.appConfig.auth && this.appConfig.auth.length > 0);
+    },
   },
   methods: {
     /* Checks form is filled in, then initiates the login, and redirects to /home */
@@ -93,11 +150,42 @@ export default {
       this.status = response.correct ? 'success' : 'error';
       if (response.correct) { // Yay, credentials were correct :)
         login(this.username, this.password, timeout); // Login, to set the cookie
-        setTimeout(() => { // Wait a short while, then redirect back home
-          router.push({ path: '/' });
-        }, 250);
+        this.goHome();
+      }
+    },
+    /* Calls function to double-check guest access enabled, then log in as guest */
+    guestLogin() {
+      const isAllowed = this.isGuestAccessEnabled;
+      if (isAllowed) {
+        this.$toasted.show('Logged in as Guest, Redirecting...', { className: 'toast-success' });
+        this.goHome();
+      } else {
+        this.$toasted.show('Guest access not allowed', { className: 'toast-error' });
       }
     },
+    /* Calls logout, shows status message, and refreshed page */
+    getOut() {
+      logout();
+      this.status = 'success';
+      this.message = 'Logging out...';
+      this.refreshPage();
+    },
+    /* Logged in user redirects to home page */
+    stayLoggedIn() {
+      this.status = 'success';
+      this.message = 'Redirecting...';
+      this.goHome();
+    },
+    /* Refreshes the page */
+    refreshPage() {
+      setTimeout(() => { location.reload(); }, 250); // eslint-disable-line no-restricted-globals
+    },
+    /* Redirects to the homepage */
+    goHome() {
+      setTimeout(() => { // Wait a short while, then redirect back home
+        router.push({ path: '/' });
+      }, 250);
+    },
     /* Since Theme setter isn't loaded at this point, we must manually get and apply users theme */
     setTheme() {
       const theme = localStorage[localStorageKeys.THEME] || Defaults.theme;
@@ -119,23 +207,43 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
+  justify-content: space-evenly;
   min-height: calc(100vh - var(--footer-height));
 
+  /* User is already logged in note */
+  div.already-logged-in {
+    margin: 0 auto 0.5rem;
+    p.already-logged-in {
+      margin: 0 auto 0.5rem;
+      text-align: center;
+    }
+    span.username {
+      font-weight: bold;
+      text-transform: capitalize;
+    }
+    span.already-logged-in-note {
+      font-size: 0.8rem;
+      opacity: var(--dimming-factor);
+      text-align: left;
+    }
+  }
+
   /* Login form container */
-  form.login-form {
+  form.login-form, form.guest-form, div.already-logged-in, div.not-configured {
     background: var(--login-form-background);
     color: var(--login-form-color);
     border: 1px solid var(--login-form-color);
     border-radius: var(--curve-factor);
     font-size: 1.4rem;
     padding: 2rem;
-    margin: 2rem auto;
+    margin: 2rem;
+    max-width: 22rem;
     display: flex;
     flex-direction: column;
 
     /* Login form title */
-    h2.login-title {
-      font-size: 3rem;
+    h2 {
+      font-size: 2rem;
       margin: 0 0 1rem 0;
       text-align: center;
       cursor: default;
@@ -177,6 +285,11 @@ export default {
       &.success { color: var(--success); }
       &.error { color: var(--warning); }
     }
+    p.guest-intro {
+      font-size: 0.8rem;
+      opacity: var(--dimming-factor);
+      text-align: left;
+    }
   }
 }
 

From e4d76607122430bedccac220bce2b819c164a448 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 18 Aug 2021 21:15:47 +0100
Subject: [PATCH 02/10] :truck: Renames AppButtons to AuthButtons

---
 src/components/Settings/AppButtons.vue        | 62 -------------------
 src/components/Settings/SettingsContainer.vue | 25 ++++++--
 2 files changed, 19 insertions(+), 68 deletions(-)
 delete mode 100644 src/components/Settings/AppButtons.vue

diff --git a/src/components/Settings/AppButtons.vue b/src/components/Settings/AppButtons.vue
deleted file mode 100644
index 875ae11b41..0000000000
--- a/src/components/Settings/AppButtons.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 9c6a1bf6b1..799145986b 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/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(),

From 39ee63ebd3a95693e225110a052d23541e580f94 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 18 Aug 2021 21:23:39 +0100
Subject: [PATCH 03/10] :sparkles: Implements guest access checking functions

---
 src/router.js         | 27 +++++++++++++++------------
 src/utils/Auth.js     | 25 ++++++++++++++++++++++++-
 src/utils/defaults.js |  7 +++++++
 3 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/router.js b/src/router.js
index 9331226f31..aaa52e667d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -22,14 +22,16 @@ import { metaTagData, startingView, routePaths } from '@/utils/defaults';
 
 Vue.use(Router);
 
-/**
- * Checks if the current user is either authenticated,
- * or if authentication is not enabled
- * @returns true if user logged in, or user management not enabled
- */
+/* Checks if guest mode is enabled in appConfig */
+const isGuestEnabled = () => {
+  if (!config || !config.appConfig) return false;
+  return config.appConfig.enableGuestAccess || false;
+};
+
+/* Returns true if user is already authenticated, or if auth is not enabled */
 const isAuthenticated = () => {
   const users = config.appConfig.auth;
-  return (!users || users.length === 0 || isLoggedIn(users));
+  return (!users || users.length === 0 || isLoggedIn(users) || isGuestEnabled());
 };
 
 /* Get the users chosen starting view from app config, or return default */
@@ -94,13 +96,14 @@ const router = new Router({
         appConfig: config.appConfig,
       },
       beforeEnter: (to, from, next) => {
-        if (isAuthenticated()) router.push({ path: '/' });
+        // If the user already logged in + guest mode not enabled, then redirect home
+        if (isAuthenticated() && !isGuestEnabled()) router.push({ path: '/' });
         next();
       },
     },
     { // The about app page
       path: routePaths.about,
-      name: 'about',
+      name: 'about', // We lazy load the About page so as to not slow down the app
       component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
       meta: makeMetaTags('About Dashy'),
     },
@@ -115,9 +118,9 @@ const router = new Router({
 });
 
 /**
- * Before loading a route, check if the user has authentication enabled *
- * if so, then ensure that they are correctly logged in as a valid user *
- * If not logged in, prevent access and redirect them to the login page *
+ * Before loading a route, check if the user has authentication enabled
+ * if so, then ensure that they are correctly logged in as a valid user
+ * If not logged in, prevent all access and redirect them to login page
  * */
 router.beforeEach((to, from, next) => {
   if (to.name !== 'login' && !isAuthenticated()) next({ name: 'login' });
@@ -131,5 +134,5 @@ router.afterEach((to) => {
   });
 });
 
-// Export the now configured router
+// All done - export the now configured router
 export default router;
diff --git a/src/utils/Auth.js b/src/utils/Auth.js
index 9ccca77c37..9086e1f131 100644
--- a/src/utils/Auth.js
+++ b/src/utils/Auth.js
@@ -1,5 +1,5 @@
 import sha256 from 'crypto-js/sha256';
-import { cookieKeys, localStorageKeys } from './defaults';
+import { cookieKeys, localStorageKeys, userStateEnum } from './defaults';
 
 /**
  * Generates a 1-way hash, in order to be stored in local storage for authentication
@@ -34,6 +34,12 @@ export const isLoggedIn = (users) => {
   return userAuthenticated;
 };
 
+/* Returns true if authentication is enabled */
+export const isAuthEnabled = (users) => (users && users.length > 0);
+
+/* Returns true if guest access is enabled */
+export const isGuestAccessEnabled = (appConfig) => appConfig.enableGuestAccess || false;
+
 /**
  * Checks credentials entered by the user against those in the config
  * Returns an object containing a boolean indicating success/ failure
@@ -107,3 +113,20 @@ export const isUserAdmin = (users) => {
   });
   return isAdmin;
 };
+
+/**
+  * Determines which button should display, based on the user type
+  * 0 = Auth not configured (don't show anything)
+  * 1 = Auth configured, and user logged in (show logout button)
+  * 2 = Auth configured, guest access enabled, 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
+  */
+export const getUserState = (appConfig) => {
+  const { notConfigured, loggedIn, guestAccess } = userStateEnum; // Numeric enum options
+  const users = appConfig.auth || []; // Get auth object
+  if (!isAuthEnabled(users)) return notConfigured; // No auth enabled
+  if (isLoggedIn(users)) return loggedIn; // User is logged in
+  if (isGuestAccessEnabled(appConfig || {})) return guestAccess; // Guest is viewing
+  return notConfigured;
+};
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index a1896251f0..4d3d400e04 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -166,4 +166,11 @@ module.exports = {
   ],
   /* Use your own self-hosted Sentry instance. Only used if error reporting is turned on */
   sentryDsn: 'https://3138ea85f15a4fa883a5b27a4dc8ee28@o937511.ingest.sentry.io/5887934',
+  /* A JS enum for indicating the user state, when guest mode + authentication is enabled */
+  userStateEnum: {
+    notConfigured: 0,
+    loggedIn: 1,
+    guestAccess: 2,
+    notLoggedIn: 3,
+  },
 };

From cd4956b1df59789e02804c3535ade4be453175a2 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 18 Aug 2021 21:24:19 +0100
Subject: [PATCH 04/10] :lipstick: Updates SVG button style helper

---
 src/styles/style-helpers.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/styles/style-helpers.scss b/src/styles/style-helpers.scss
index ebcbd6c131..7bac6d6d24 100644
--- a/src/styles/style-helpers.scss
+++ b/src/styles/style-helpers.scss
@@ -17,8 +17,6 @@
 
 .svg-button {
     color: var(--primary);
-    width: 1.5rem;
-    height: 1.5rem;
     svg {
         path {
             fill: var(--settings-text-color);

From a95c91a3809de3ee786195dd62d73b0f86bcb7e6 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 18 Aug 2021 21:35:21 +0100
Subject: [PATCH 05/10] :rotating_light: Adds null check for appConfig

---
 src/components/Settings/SettingsContainer.vue | 7 +++----
 src/utils/Auth.js                             | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 799145986b..e3e2e4d63e 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -1,6 +1,5 @@
 <template>
   <section>
-    <p>{{ getUserState }}</p>
     <SearchBar ref="SearchBar"
       @user-is-searchin="userIsTypingSomething"
       v-if="searchVisible"
@@ -14,7 +13,7 @@
         <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
         <ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
           @modalChanged="modalChanged" />
-        <AuthButtons  v-if="getUserState != 'noone'" :userType="getUserState" />
+        <AuthButtons  v-if="userState != 'noone'" :userType="userState" />
       </div>
       <div :class="`show-hide-container ${settingsVisible? 'hide-btn' : 'show-btn'}`">
         <button @click="toggleSettingsVisibility()"
@@ -114,8 +113,8 @@ export default {
     * 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);
+    userState() {
+      return getUserState(this.appConfig || {});
     },
   },
   data() {
diff --git a/src/utils/Auth.js b/src/utils/Auth.js
index 9086e1f131..269b8e285e 100644
--- a/src/utils/Auth.js
+++ b/src/utils/Auth.js
@@ -127,6 +127,6 @@ export const getUserState = (appConfig) => {
   const users = appConfig.auth || []; // Get auth object
   if (!isAuthEnabled(users)) return notConfigured; // No auth enabled
   if (isLoggedIn(users)) return loggedIn; // User is logged in
-  if (isGuestAccessEnabled(appConfig || {})) return guestAccess; // Guest is viewing
+  if (isGuestAccessEnabled(appConfig)) return guestAccess; // Guest is viewing
   return notConfigured;
 };

From edf941229cf66abcdd0ad1d3d2a43425313eeb1d Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 18 Aug 2021 21:52:47 +0100
Subject: [PATCH 06/10] :globe_with_meridians: Adds translations for Guest
 Access

---
 src/assets/locales/en.json              | 13 ++++++++++---
 src/components/Settings/AuthButtons.vue | 11 ++++++++---
 src/views/Login.vue                     | 13 ++++++++-----
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 0132e31555..f62e397a28 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -23,7 +23,12 @@
     "error-incorrect-username": "User not found",
     "error-incorrect-password": "Incorrect Password",
     "success-message": "Logging in...",
-    "logout-message": "Logged Out"
+    "logout-message": "Logged Out",
+    "already-logged-in-title": "Already Logged In",
+    "already-logged-in-text": "You're logged in as",
+    "proceed-to-dashboard": "Proceed to Dashboard",
+    "log-out-button": "Logout",
+    "proceed-guest-button": "Proceed as Guest"
   },
   "config": {
     "main-tab": "Main Menu",
@@ -67,7 +72,9 @@
     "item-size-large": "Large",
     "config-launcher-label": "Config",
     "config-launcher-tooltip": "Update Configuration",
-    "sign-out-tooltip": "Sign Out"
+    "sign-out-tooltip": "Sign Out",
+    "sign-in-tooltip": "Log In",
+    "sign-in-welcome": "Hello {username}!"
   },
   "updates": {
     "app-version-note": "Dashy version",
@@ -154,4 +161,4 @@
     "modal": "Open in Pop-Up Modal",
     "workspace": "Open in Workspace View"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Settings/AuthButtons.vue b/src/components/Settings/AuthButtons.vue
index 5065310295..29e082cbdd 100644
--- a/src/components/Settings/AuthButtons.vue
+++ b/src/components/Settings/AuthButtons.vue
@@ -14,7 +14,7 @@
       <IconLogout
         v-if="userType == userStateEnum.guestAccess"
         @click="goToLogin()"
-        v-tooltip="tooltip('Login')"
+        v-tooltip="tooltip($t('settings.sign-in-tooltip'))"
         class="layout-icon" tabindex="-2"
       />
     </div>
@@ -55,8 +55,13 @@ export default {
       return { content, trigger: 'hover focus', delay: 250 };
     },
     makeText() {
-      if (this.userType === userStateEnum.loggedIn) return `Hello ${localStorage[localStorageKeys.USERNAME]}!`;
-      if (this.userType === userStateEnum.guestAccess) return 'Log In';
+      if (this.userType === userStateEnum.loggedIn) {
+        const username = localStorage[localStorageKeys.USERNAME];
+        return this.$t('settings.sign-in-welcome', { username });
+      }
+      if (this.userType === userStateEnum.guestAccess) {
+        return this.$t('settings.sign-in-tooltip');
+      }
       return '';
     },
   },
diff --git a/src/views/Login.vue b/src/views/Login.vue
index dfc2b2dbac..3e287a6cc1 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -2,12 +2,15 @@
   <div class="login-page">
     <!-- User is already logged in -->
     <div v-if="isUserAlreadyLoggedIn" class="already-logged-in">
-      <h2>Already Logged In</h2>
+      <h2>{{ $t('login.already-logged-in-title') }}</h2>
       <p class="already-logged-in">
-        You're logged in as <span class="username">{{ existingUsername }}</span>
+        {{ $t('login.already-logged-in-text') }}
+        <span class="username">{{ existingUsername }}</span>
       </p>
-      <Button class="login-button" :click="stayLoggedIn">Proceed to Dashboard</Button>
-      <Button class="login-button" :click="getOut">Logout</Button>
+      <Button class="login-button" :click="stayLoggedIn">
+        {{ $t('login.proceed-to-dashboard') }}
+      </Button>
+      <Button class="login-button" :click="getOut">{{ $t('login.log-out-button') }}</Button>
       <span class="already-logged-in-note">
         You need to log out, in order to proceed as a different user.
       </span>
@@ -49,7 +52,7 @@
       v-if="appConfig.enableGuestAccess && !isUserAlreadyLoggedIn && isAuthenticationEnabled">
       <h2 class="login-title">Guest Access</h2>
       <Button class="login-button" :click="guestLogin">
-        Proceed as Guest
+        {{ $t('login.proceed-guest-button') }}
       </Button>
       <p class="guest-intro">
         This instance has guest access enabled.<br>

From 68fcee0c0ffa0bd26b07d70fb76f83b74f10b019 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 18 Aug 2021 21:55:33 +0100
Subject: [PATCH 07/10] :card_file_box: Adds 'enableGuestAccess' to schema and
 docs

---
 docs/configuring.md         | 1 +
 src/utils/ConfigSchema.json | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/docs/configuring.md b/docs/configuring.md
index c9f4dc22a1..efef35bdd5 100644
--- a/docs/configuring.md
+++ b/docs/configuring.md
@@ -65,6 +65,7 @@ To disallow any changes from being written to disk via the UI config editor, set
 **`fontAwesomeKey`** | `string` | _Optional_ | If you have a font-awesome key, then you can use it here and make use of premium icons. It is a 10-digit alpha-numeric string from you're FA kit URL  (e.g. `13014ae648`)
 **`faviconApi`** | `enum` | _Optional_ | Only applicable if you are using favicons for item icons. Specifies which service to use to resolve favicons. Set to `local` to do this locally, without using an API. Services running locally will use this option always. Available options are: `local`, `faviconkit`, `google`, `clearbit`, `webmasterapi` and `allesedv`. Defaults to `faviconkit`. See [Icons](/docs/icons.md#favicons) for more info
 **`auth`** | `array` | _Optional_ | An array of objects containing usernames and hashed passwords. If this is not provided, then authentication will be off by default, and you will not need any credentials to access the app. Note authentication is done on the client side, and so if your instance of Dashy is exposed to the internet, it is recommend to configure your web server to handle this. See [`auth`](#appconfigauth-optional)
+**`enableGuestAccess`** | `boolean` | _Optional_ | When set to `true`, an unauthenticated user will be able to access the dashboard, with read-only access, without having to login. Requires `auth` to be configured. Defaults to `false`.
 **`layout`** | `enum` | _Optional_ | App layout, either `horizontal`, `vertical`, `auto` or `sidebar`. Defaults to `auto`. This specifies the layout and direction of how sections are positioned on the home screen. This can also be modified from the UI.
 **`iconSize`** | `enum` | _Optional_ | The size of link items / icons. Can be either `small`, `medium,` or `large`. Defaults to `medium`. This can also be set directly from the UI.
 **`theme`** | `string` | _Optional_ | The default theme for first load (you can change this later from the UI)
diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json
index 9637195a4b..96aef5e21d 100644
--- a/src/utils/ConfigSchema.json
+++ b/src/utils/ConfigSchema.json
@@ -248,6 +248,11 @@
             }
           }
         },
+        "enableGuestAccess": {
+          "type": "boolean",
+          "default": false,
+          "description": "If set to true, an unauthenticated user will be able to have read-only access to dashboard, without needing to login. Requires auth to be configured."
+        },
         "enableMultiTasking": {
           "type": "boolean",
           "default": false,

From 9bfd4646812a0a5e7a607d9e5fae9179b408dcad Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 18 Aug 2021 22:16:14 +0100
Subject: [PATCH 08/10] :memo: Adds docs for guest access

---
 README.md              | 5 ++++-
 docs/authentication.md | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b8ab6b203b..5bdc6adb2a 100644
--- a/README.md
+++ b/README.md
@@ -251,7 +251,10 @@ appConfig:
     - user: alicia
       hash: 4D1E58C90B3B94BCAD9848ECCACD6D2A8C9FBC5CA913304BBA5CDEAB36FEEFA3
 ```
-At present, access control is handled on the frontend, and therefore in security-critical situations, it is recommended to use an alternate method for authentication, such as [Authelia](https://www.authelia.com/), a VPN or web server and firewall rules.
+
+By default, when authentication is configured no user can access your dashboard without first logging in. If you would like to allow for read-only access by unauthenticated users, then you can enable guest mode, by setting `appConfig.enableGuestAccess: true`.
+
+**Note**: At present, access control is handled on the frontend, and therefore in security-critical situations, it is recommended to use an alternate method for authentication, such as [Authelia](https://www.authelia.com/), a VPN or web server and firewall rules. Instructions for setting this up can be found [in the docs](docs/authentication.md#alternative-authentication-methods).
 
 <p align="center">
   <img
diff --git a/docs/authentication.md b/docs/authentication.md
index 4cba3e5bdf..cb46cf02e2 100644
--- a/docs/authentication.md
+++ b/docs/authentication.md
@@ -36,6 +36,9 @@ A hash is a one-way cryptographic function, meaning that it is easy to generate
 ## Logging In and Out
 Once authentication is enabled, so long as there is no valid token in cookie storage, the application will redirect the user to the login page. When the user enters credentials in the login page, they will be checked, and if valid, then a token will be generated, and they can be redirected to the home page. If credentials are invalid, then an error message will be shown, and they will remain on the login page. Once in the application, to log out the user can click the logout button (in the top-right), which will clear cookie storage, causing them to be redirected back to the login page.
 
+## Enabling Guest Access
+With authentication setup, by default no access is allowed to your dashboard without first logging in with valid credentials. Guest mode can be enabled to allow for read-only access to a secured dashboard by any user, without the need to log in. A guest user cannot write any changes to the config file, but can apply modifications locally (stored in their browser). You can enable guest access, by setting `appConfig.enableGuestAccess: true`.
+
 ## Security
 Since all authentication is happening entirely on the client-side, it is vulnerable to manipulation by an adversary. An attacker could look at the source code, find the function used generate the auth token, then decode the minified JavaScript to find the hash, and manually generate a token using it, then just insert that value as a cookie using the console, and become a logged in user. Therefore, if you need secure authentication for your app, it is strongly recommended to implement this using your web server, or use a VPN to control access to Dashy. The purpose of the login page is merely to prevent immediate unauthorized access to your homepage.
 

From a08eb1082aae8f9d44ba5c4441a48465daf9fab1 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 18 Aug 2021 22:17:17 +0100
Subject: [PATCH 09/10] :globe_with_meridians: Adds text for no permission to
 edit, in guest mode

---
 src/assets/locales/en.json                  | 3 ++-
 src/components/Configuration/JsonEditor.vue | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index f62e397a28..058ed69c87 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -116,7 +116,8 @@
     "error-msg-save-mode": "Please select a Save Mode: Local or File",
     "error-msg-cannot-save": "An error occurred saving config",
     "error-msg-bad-json": "Error in JSON, possibly malformed",
-    "warning-msg-validation": "Validation Warning"
+    "warning-msg-validation": "Validation Warning",
+    "not-admin-note": "You cannot write changed to disk, because you are not logged in as an admin"
   },
   "app-rebuild": {
     "title": "Rebuild Application",
diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue
index 683ec07919..fc618cf5b8 100644
--- a/src/components/Configuration/JsonEditor.vue
+++ b/src/components/Configuration/JsonEditor.vue
@@ -43,6 +43,9 @@
       {{saveSuccess
         ? $t('config-editor.status-success-msg') : $t('config-editor.status-fail-msg') }}
     </p>
+    <p v-if="!allowWriteToDisk" class="no-permission-note">
+      {{ $t('config-editor.not-admin-note') }}
+    </p>
     <p class="response-output">{{ responseText }}</p>
     <p v-if="saveSuccess" class="response-output">
       {{ $t('config-editor.success-note-l1') }}
@@ -243,6 +246,10 @@ p.response-output {
   }
 }
 
+p.no-permission-note {
+  color: var(--config-settings-color);
+}
+
 button.save-button {
   padding:  0.5rem 1rem;
   margin: 0.25rem auto;

From 788f5029ee2116955305f1a85244347bacb858d8 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 18 Aug 2021 22:18:26 +0100
Subject: [PATCH 10/10] :bookmark: Bumps to V 1.6.2 and updates changelog

---
 .github/CHANGELOG.md | 4 ++++
 package.json         | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md
index 767b4f7c39..e1da2f93eb 100644
--- a/.github/CHANGELOG.md
+++ b/.github/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## ✨ 1.6.2 - Support for Guest Access [PR #167](https://github.com/Lissy93/dashy/pull/167)
+- Adds functionality for optional read-only guest access to dashboards with authentication
+- Can be enabled by setting `appConfig.enableGuestAccess: true`
+
 ## 💄 1.6.1 - Adds new Theme [PR #166](https://github.com/Lissy93/dashy/issues/166)
 - Adds Dashy theme, for use in the dev dashboard
 ## ✨ 1.5.9 - New Minimal/ Startpage View [PR #155](https://github.com/Lissy93/dashy/issues/155)
diff --git a/package.json b/package.json
index e23d884cc1..4c67315a7c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "license": "MIT",
   "main": "server",
   "scripts": {