Added client assets update detection

/api/check and /api/token/verify will now pass along v1 version string
if used (when config.cacheControl is used) for both home.js and
dashboard.js to use to compare version strings.
This should help notify users using browsers with a bit more overbearing
caching (generally mobile browsers).

Rebuilt client assets and bumped v1 version string

Slight update to yarn.lock (a small syntax change for node-gyp, idk why)

controllers/tokenController.js

@@ -52,11 +52,13 @@ self.verify = async (req, res, next) => {
     if (!user)
       return res.json({ success: false, description: 'Invalid token.' })
 
-    return res.json({
+    const obj = {
       success: true,
       username: user.username,
       permissions: perms.mapPermissions(user)
-    })
+    }
+    if (utils.clientVersion) obj.version = utils.clientVersion
+    return res.json(obj)
   } catch (error) {
     logger.error(error)
     return res.status(500).json({ success: false, description: 'An unexpected error occurred. Try again?' })

lolisafe.js

@@ -149,9 +149,12 @@ safe.use('/api', api)
 
     // Re-map version strings if cache control is enabled (safe.fiery.me)
     utils.versionStrings = {}
-    if (config.cacheControl)
+    if (config.cacheControl) {
       for (const type in versions)
         utils.versionStrings[type] = `?_=${versions[type]}`
+      if (versions['1'])
+        utils.clientVersion = versions['1']
+    }
 
     // Check for custom pages, otherwise fallback to Nunjucks templates
     for (const page of config.pages) {

routes/api.js

@@ -7,7 +7,7 @@ const utilsController = require('./../controllers/utilsController')
 const config = require('./../config')
 
 routes.get('/check', (req, res, next) => {
-  return res.json({
+  const obj = {
     private: config.private,
     enableUserAccounts: config.enableUserAccounts,
     maxSize: config.uploads.maxSize,
@@ -15,7 +15,9 @@ routes.get('/check', (req, res, next) => {
     temporaryUploadAges: config.uploads.temporaryUploadAges,
     fileIdentifierLength: config.uploads.fileIdentifierLength,
     stripTags: config.uploads.stripTags
-  })
+  }
+  if (utilsController.clientVersion) obj.version = utilsController.clientVersion
+  return res.json(obj)
 })
 
 routes.post('/login', (req, res, next) => authController.verify(req, res, next))

src/js/dashboard.js

@@ -141,6 +141,25 @@ page.preparePage = () => {
     window.location = 'auth'
 }
 
+page.checkClientVersion = apiVersion => {
+  const self = document.querySelector('#mainScript')
+  const match = self.src.match(/\?_=(\d+)$/)
+  if (match && match[1] && match[1] !== apiVersion)
+    return swal({
+      title: 'Updated detected!',
+      text: 'Client assets have been updated. Reload to display the latest version?',
+      icon: 'info',
+      buttons: {
+        confirm: {
+          text: 'Reload',
+          closeModal: false
+        }
+      }
+    }).then(() => {
+      location.reload()
+    })
+}
+
 page.verifyToken = (token, reloadOnError) => {
   axios.post('api/tokens/verify', { token }).then(response => {
     if (response.data.success === false)
@@ -157,6 +176,9 @@ page.verifyToken = (token, reloadOnError) => {
     axios.defaults.headers.common.token = token
     localStorage[lsKeys.token] = token
 
+    if (response.data.version)
+      page.checkClientVersion(response.data.version)
+
     page.token = token
     page.username = response.data.username
     page.permissions = response.data.permissions

src/js/home.js

@@ -122,17 +122,39 @@ page.onAxiosError = error => {
   return swal(`${error.response.status} ${statusText}`, description, 'error')
 }
 
+page.checkClientVersion = apiVersion => {
+  const self = document.querySelector('#mainScript')
+  const match = self.src.match(/\?_=(\d+)$/)
+  if (match && match[1] && match[1] !== apiVersion)
+    return swal({
+      title: 'Updated detected!',
+      text: 'Client assets have been updated. Reload to display the latest version?',
+      icon: 'info',
+      buttons: {
+        confirm: {
+          text: 'Reload',
+          closeModal: false
+        }
+      }
+    }).then(() => {
+      location.reload()
+    })
+}
+
 page.checkIfPublic = () => {
   let renderShown = false
   return axios.get('api/check', {
     onDownloadProgress: () => {
-      // Only show render after this request has been initiated
+      // Only show render after this request has been initiated to avoid blocking
       if (!renderShown && typeof page.doRender === 'function') {
         page.doRender()
         renderShown = true
       }
     }
   }).then(response => {
+    if (response.data.version)
+      page.checkClientVersion(response.data.version)
+
     page.private = response.data.private
     page.enableUserAccounts = response.data.enableUserAccounts
     page.maxSize = parseInt(response.data.maxSize)
@@ -141,6 +163,7 @@ page.checkIfPublic = () => {
     page.temporaryUploadAges = response.data.temporaryUploadAges
     page.fileIdentifierLength = response.data.fileIdentifierLength
     page.stripTagsConfig = response.data.stripTags
+
     return page.preparePage()
   }).catch(page.onInitError)
 }

src/versions.json

@@ -1,5 +1,5 @@
 {
-  "1": "1587500638",
+  "1": "1588200827",
   "2": "1581416390",
   "3": "1581416390",
   "4": "1581416390",

views/dashboard.njk

@@ -19,7 +19,8 @@
 <script src="libs/lazyload/lazyload.min.js{{ versions[3] }}"></script>
 {# Polyfill smooth scroll for older browsers #}
 <script src="libs/smoothscroll/smoothscroll.min.js{{ versions[3] }}"></script>
-<script src="js/dashboard.js{{ versions[1] }}"></script>
+{# We assign an ID for this so that the script can find out its own version #}
+<script id="mainScript" src="js/dashboard.js{{ versions[1] }}"></script>
 <script src="js/misc/utils.js{{ versions[1] }}"></script>
 {% endblock %}
 

views/home.njk

@@ -22,7 +22,8 @@
 <script src="libs/axios/axios.min.js{{ versions[3] }}"></script>
 <script src="libs/clipboard.js/clipboard.min.js{{ versions[3] }}"></script>
 <script src="libs/lazyload/lazyload.min.js{{ versions[3] }}"></script>
-<script src="js/home.js{{ versions[1] }}"></script>
+{# We assign an ID for this so that the script can find out its own version #}
+<script id="mainScript" src="js/home.js{{ versions[1] }}"></script>
 <script src="js/misc/utils.js{{ versions[1] }}"></script>
 {# We assign an ID for this so that the script can find out version string for render images #}
 <script id="renderScript" data-version="{{ versions[4] }}" src="js/misc/render.js{{ versions[1] }}"></script>

yarn.lock

@@ -4515,7 +4515,7 @@ node-fetch@^2.6.0:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
   integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
 
-node-pre-gyp@*, node-pre-gyp@0.14.0:
+node-pre-gyp@0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
   integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==