diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md index 899b7da7..a8514e76 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 8ceda392..023a0a46 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": { diff --git a/public/index.html b/public/index.html index c02e9e4d..fe4c82e0 100644 --- a/public/index.html +++ b/public/index.html @@ -1,27 +1,60 @@ - - - + + + Dashy + +
+ +

Dashy

Loading...

+
- - -
+ + - \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 098656e9..cb34b125 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(); }, diff --git a/src/components/Configuration/CloudBackupRestore.vue b/src/components/Configuration/CloudBackupRestore.vue index 83b303f4..e4a4139c 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/router.js b/src/router.js index 1db8ceae..a1bdd95b 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'; }); diff --git a/src/utils/CoolConsole.js b/src/utils/CoolConsole.js index 09efcd17..2871d0a5 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 d0c96f08..1d253281 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; diff --git a/src/utils/defaults.js b/src/utils/defaults.js index 115cd82b..35695eea 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, diff --git a/src/views/Login.vue b/src/views/Login.vue index 0b159f2c..27030208 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 */