From 0927ea879b82056b8c9bfe9f82cce5b99eb2a9f4 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 19 Sep 2021 21:18:41 +0100 Subject: [PATCH 1/8] :zap: Show loader when route changes --- src/router.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/router.js b/src/router.js index 1db8ceaec5..a1bdd95b93 100644 --- a/src/router.js +++ b/src/router.js @@ -7,6 +7,7 @@ // Import Vue.js and vue router import Vue from 'vue'; import Router from 'vue-router'; +import ProgressBar from 'rsup-progress'; // Import views import Home from '@/views/Home.vue'; @@ -21,6 +22,7 @@ import { config } from '@/utils/ConfigHelpers'; import { metaTagData, startingView, routePaths } from '@/utils/defaults'; Vue.use(Router); +const progress = new ProgressBar({ color: 'var(--progress-bar)' }); /* Returns true if user is already authenticated, or if auth is not enabled */ const isAuthenticated = () => { @@ -119,12 +121,14 @@ const router = new Router({ * If not logged in, prevent all access and redirect them to login page * */ router.beforeEach((to, from, next) => { + progress.start(); if (to.name !== 'login' && !isAuthenticated()) next({ name: 'login' }); else next(); }); /* If title is missing, then apply default page title */ router.afterEach((to) => { + progress.end(); Vue.nextTick(() => { document.title = to.meta.title || 'Dashy'; }); From 6e0cda8709de6aded9c97e7f016b68c5b01cf5ee Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 19 Sep 2021 21:28:05 +0100 Subject: [PATCH 2/8] :children_crossing: Adds user-facing warning logging --- src/utils/CoolConsole.js | 2 +- src/utils/ErrorHandler.js | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/utils/CoolConsole.js b/src/utils/CoolConsole.js index 09efcd1714..2871d0a505 100644 --- a/src/utils/CoolConsole.js +++ b/src/utils/CoolConsole.js @@ -28,7 +28,7 @@ export const statusMsg = (title, msg) => { /* Prints status message, with a stack trace */ export const statusErrorMsg = (title, msg, errorLog) => { console.log( - `%c${title || ''}\n%c${msg} \n%c${errorLog}`, + `%c${title || ''}\n%c${msg} \n%c${errorLog || ''}`, 'font-weight: bold; color: #0dd8d8; text-decoration: underline;', 'color: #ff025a', 'color: #ff025a80;', diff --git a/src/utils/ErrorHandler.js b/src/utils/ErrorHandler.js index d0c96f083a..1d25328131 100644 --- a/src/utils/ErrorHandler.js +++ b/src/utils/ErrorHandler.js @@ -1,5 +1,5 @@ import * as Sentry from '@sentry/vue'; -import { warningMsg, statusMsg } from '@/utils/CoolConsole'; +import { warningMsg, statusMsg, statusErrorMsg } from '@/utils/CoolConsole'; import { sessionStorageKeys } from '@/utils/defaults'; /* Makes the current time, like hh:mm:ss */ @@ -33,4 +33,9 @@ export const InfoHandler = (msg, title) => { statusMsg(title || 'Info', msg); }; +/* Outputs warnings caused by the user, such as missing field */ +export const WarningInfoHandler = (msg, title, log) => { + statusErrorMsg(title || 'Warning', msg, log); +}; + export default ErrorHandler; From cdab7981bd3bbb36e39b980d601830742d3dae67 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 19 Sep 2021 21:29:39 +0100 Subject: [PATCH 3/8] :zap: Replace error with warning for failed user actions --- src/components/Configuration/CloudBackupRestore.vue | 4 ++-- src/views/Login.vue | 8 +++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/Configuration/CloudBackupRestore.vue b/src/components/Configuration/CloudBackupRestore.vue index 83b303f469..e4a4139c02 100644 --- a/src/components/Configuration/CloudBackupRestore.vue +++ b/src/components/Configuration/CloudBackupRestore.vue @@ -66,7 +66,7 @@ import IconBackup from '@/assets/interface-icons/config-backup.svg'; import IconRestore from '@/assets/interface-icons/config-restore.svg'; import { backup, update, restore } from '@/utils/CloudBackup'; import { localStorageKeys } from '@/utils/defaults'; -import ErrorHandler, { InfoHandler } from '@/utils/ErrorHandler'; +import { InfoHandler, WarningInfoHandler } from '@/utils/ErrorHandler'; export default { name: 'CloudBackupRestore', @@ -161,7 +161,7 @@ export default { this.backupPassword = ''; }, showErrorMsg(errorMsg) { - ErrorHandler(errorMsg); + WarningInfoHandler(errorMsg, 'Cloud Backup'); this.$toasted.show(errorMsg, { className: 'toast-error' }); }, showSuccessMsg(msg) { diff --git a/src/views/Login.vue b/src/views/Login.vue index 0b159f2cb7..270302083e 100644 --- a/src/views/Login.vue +++ b/src/views/Login.vue @@ -76,7 +76,7 @@ import router from '@/router'; import Button from '@/components/FormElements/Button'; import Input from '@/components/FormElements/Input'; import Defaults, { localStorageKeys } from '@/utils/defaults'; -import { InfoHandler } from '@/utils/ErrorHandler'; +import { InfoHandler, WarningInfoHandler } from '@/utils/ErrorHandler'; import { checkCredentials, login, @@ -160,7 +160,7 @@ export default { this.goHome(); InfoHandler(`Succesfully signed in as ${this.username}`, 'Authentication'); } else { - InfoHandler(`Unable to Sign In - ${this.message}`, 'Authentication'); + WarningInfoHandler('Unable to Sign In', 'Authentication', this.message); } }, /* Calls function to double-check guest access enabled, then log in as guest */ @@ -168,9 +168,11 @@ export default { const isAllowed = this.isGuestAccessEnabled; if (isAllowed) { this.$toasted.show('Logged in as Guest, Redirecting...', { className: 'toast-success' }); + InfoHandler('Logged in as Guest', 'Authentication'); this.goHome(); } else { - this.$toasted.show('Guest access not allowed', { className: 'toast-error' }); + this.$toasted.show('Guest Access Not Allowed', { className: 'toast-error' }); + WarningInfoHandler('Guest Access Not Allowed', 'Authentication'); } }, /* Calls logout, shows status message, and refreshed page */ From b00c9ad90297ff1bb2c69de664b50c824a0fdc50 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 19 Sep 2021 22:22:12 +0100 Subject: [PATCH 4/8] :sparkles: Show splash screen before app loaded --- public/index.html | 51 ++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 42 insertions(+), 9 deletions(-) diff --git a/public/index.html b/public/index.html index c02e9e4d1e..589395f578 100644 --- a/public/index.html +++ b/public/index.html @@ -1,27 +1,60 @@ - - - - + + + + Dashy + +
+ +

Dashy

Loading...

+
- - -
+ + - \ No newline at end of file From b532e168fe2da0fb6b96f8d2601ed3e9e8641ec5 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 19 Sep 2021 22:23:26 +0100 Subject: [PATCH 5/8] :dizzy: Hide loader, if still visible --- src/App.vue | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/App.vue b/src/App.vue index 098656e9b7..cb34b125e9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -53,8 +53,7 @@ export default { }, /* Determine if splash screen should be shown */ shouldShowSplash() { - return (this.visibleComponents || defaultVisibleComponents).splashScreen - || !localStorage[localStorageKeys.HIDE_WELCOME_BANNER]; + return (this.visibleComponents || defaultVisibleComponents).splashScreen; }, }, methods: { @@ -107,6 +106,10 @@ export default { this.$i18n.locale = language; document.getElementsByTagName('html')[0].setAttribute('lang', language); }, + hideLoader() { + const loader = document.getElementById('loader'); + if (loader) loader.style.display = 'none'; + }, }, /* When component mounted, hide splash and initiate the injection of custom styles */ mounted() { @@ -115,6 +118,7 @@ export default { if (this.appConfig.customCss) { const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, ''); this.injectCustomStyles(cleanedCss); + this.hideLoader(); } welcomeMsg(); }, From d6a2c4d8106dcf9363f01355a9749d1ffd8e77c4 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 19 Sep 2021 22:23:53 +0100 Subject: [PATCH 6/8] :fire: Splash screen now off by default --- src/utils/defaults.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/utils/defaults.js b/src/utils/defaults.js index 115cd82b91..35695eea23 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -71,8 +71,9 @@ module.exports = { ], /* Which structural components should be visible by default */ visibleComponents: { - pageTitle: true, + splashScreen: false, navigation: true, + pageTitle: true, searchBar: true, settings: true, footer: true, From b3d0519d8d750d3146a916ca60df1e9fb3c1f71f Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 19 Sep 2021 22:44:02 +0100 Subject: [PATCH 7/8] :bookmark: Bumps to V 1.8.3 and updates changelog --- .github/CHANGELOG.md | 5 +++++ package.json | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md index 899b7da725..a8514e7610 100644 --- a/.github/CHANGELOG.md +++ b/.github/CHANGELOG.md @@ -1,5 +1,10 @@ # Changelog +## ⚡️ 1.8.3 - Improved UX for Initial Load [PR #238](https://github.com/Lissy93/dashy/pull/238) +- Removes the old splash screen +- Adds placeholder in the HTML index, which will usually be visible on initial load +- Show progress bar on route switcher + ## ✨ 1.8.2 - Serverless Functions for Netlify Instances [PR #235](https://github.com/Lissy93/dashy/pull/235) - Previously when Dashy was deployed as a static site to Netlify, it was not possible to use several features, which required server-side code - This PR adds serverless cloud functions to provide most of this functionality diff --git a/package.json b/package.json index 8ceda39258..023a0a46e7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Dashy", - "version": "1.8.2", + "version": "1.8.3", "license": "MIT", "main": "server", "scripts": { From 3a301afc6542c52eb4fd2530ad0ef6632687f2a3 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 19 Sep 2021 22:48:56 +0100 Subject: [PATCH 8/8] :wheelchair: Adds lang attr, for accessibility --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 589395f578..fe4c82e04b 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ - +