Init 'browser-ecma5' branch (#7)

* Downgraded ecma version of client-side scripts to v5. This change means no more backtick strings and some others. * Massively modified auth.js, dashboard.js and home.js to support the downgrade (dashboard.js had the most changes). * Removed enter key event handler from auth page. The previous code had some small issues. I'd rather not have the handler than let the issues persist. I'll eventually look into adding this again in the future. * Updated uploadController.js to handle some invalid requests into /api/delete and /api/bulkdelete.
2024-12-12 23:46:22 +00:00 · 2018-09-04 22:49:37 +07:00 · 2018-09-04 22:49:37 +07:00 · 56bdd08ee7
commit 56bdd08ee7
parent a207c4a806
7 changed files with 516 additions and 489 deletions
--- a/controllers/uploadController.js
+++ b/controllers/uploadController.js
@ -607,8 +607,9 @@ uploadsController.processFilesForDisplay = async (req, res, files, existingFiles
 }

 uploadsController.delete = async (req, res) => {
+  const id = parseInt(req.body.id)
  req.body.field = 'id'
-  req.body.values = [req.body.id]
+  req.body.values = isNaN(id) ? undefined : [id]
  delete req.body.id
  return uploadsController.bulkDelete(req, res)
 }
@ -619,8 +620,9 @@ uploadsController.bulkDelete = async (req, res) => {

  const field = req.body.field || 'id'
  const values = req.body.values
-  if (values === undefined || !values.length) {
-    return res.json({ success: false, description: 'No files specified.' })
+
+  if (!values || values.constructor.name !== 'Array' || !values.length) {
+    return res.json({ success: false, description: 'No array of files specified.' })
  }

  const failed = await utils.bulkDeleteFiles(field, values, user)
--- a/public/js/.eslintrc.json
+++ b/public/js/.eslintrc.json
@ -1,7 +1,7 @@
 {
  "root": true,
  "parserOptions": {
-    "ecmaVersion": 6
+    "ecmaVersion": 5
  },
  "env": {
    "browser": true
--- a/public/js/auth.js
+++ b/public/js/auth.js
@ -9,15 +9,10 @@ var page = {
  pass: null
 }

-page.do = function (dest, onEnter) {
+page.do = function (dest) {
  var user = page.user.value
  var pass = page.pass.value

-  // If the form is submitted with Enter button and the form is still empty
-  if (onEnter && !user.length && !pass.length) { return }
-
-  console.log('page.do()\'ing: ' + dest)
-
  if (!user) {
    return swal('Error', 'You need to specify a username', 'error')
  }
@ -26,7 +21,7 @@ page.do = function (dest, onEnter) {
    return swal('Error', 'You need to specify a username', 'error')
  }

-  axios.post(`api/${dest}`, {
+  axios.post('api/' + dest, {
    username: user,
    password: pass
  })
@ -63,28 +58,12 @@ page.verify = function () {
    })
 }

-page.formEnter = function (event) {
-  if (event.keyCode === 13 || event.which === 13) {
-    event.preventDefault()
-    event.stopPropagation()
-    page.do('login', true)
-  }
-}
-
 window.onload = function () {
  page.verify()

  page.user = document.getElementById('user')
  page.pass = document.getElementById('pass')

-  var form = document.getElementById('authForm')
-  form.addEventListener('keyup', page.formEnter)
-  form.addEventListener('keypress', page.formEnter)
-  form.onsubmit = function (event) {
-    event.preventDefault()
-    event.stopPropagation()
-  }
-
  document.getElementById('loginBtn').addEventListener('click', function () {
    page.do('login')
  })
--- a/public/js/dashboard.js
+++ b/public/js/dashboard.js
--- a/public/js/home.js
+++ b/public/js/home.js
@ -64,7 +64,7 @@ page.preparePage = function () {
 page.verifyToken = function (token, reloadOnError) {
  if (reloadOnError === undefined) { reloadOnError = false }

-  axios.post('api/tokens/verify', { token })
+  axios.post('api/tokens/verify', { token: token })
    .then(function (response) {
      if (response.data.success === false) {
        return swal({
@ -104,7 +104,7 @@ page.prepareUpload = function () {
    document.getElementById('albumDiv').style.display = 'flex'
  }

-  document.getElementById('maxFileSize').innerHTML = `Maximum upload size per file is ${page.maxFileSize}`
+  document.getElementById('maxFileSize').innerHTML = 'Maximum upload size per file is ' + page.maxFileSize
  document.getElementById('loginToUpload').style.display = 'none'

  if (!page.token && page.enableUserAccounts) {
@ -154,7 +154,8 @@ page.prepareAlbums = function () {
      if (!response.data.albums.length) { return }

      // Loop through the albums and create an option for each album
-      for (var album of response.data.albums) {
+      for (var i = 0; i < response.data.albums.length; i++) {
+        var album = response.data.albums[i]
        var option = document.createElement('option')
        option.value = album.id
        option.innerHTML = album.name
@ -185,14 +186,14 @@ page.prepareDropzone = function () {
  var tabDiv = document.getElementById('tab-files')
  var div = document.createElement('div')
  div.className = 'control is-expanded'
-  div.innerHTML = `
-    <div id="dropzone" class="button is-danger is-fullwidth is-unselectable">
-      <span class="icon">
-        <i class="icon-upload-cloud"></i>
-      </span>
-      <span>Click here or drag and drop files</span>
-    </div>
-  `
+  div.innerHTML =
+    '<div id="dropzone" class="button is-danger is-fullwidth is-unselectable">\n' +
+    '  <span class="icon">\n' +
+    '    <i class="icon-upload-cloud"></i>\n' +
+    '  </span>\n' +
+    '  <span>Click here or drag and drop files</span>\n' +
+    '</div>'
+
  tabDiv.getElementsByClassName('dz-container')[0].appendChild(div)

  var previewsContainer = tabDiv.getElementsByClassName('uploads')[0]
@ -202,7 +203,7 @@ page.prepareDropzone = function () {
    maxFilesize: parseInt(page.maxFileSize),
    parallelUploads: 2,
    uploadMultiple: false,
-    previewsContainer,
+    previewsContainer: previewsContainer,
    previewTemplate: page.previewTemplate,
    createImageThumbnails: false,
    maxFiles: 1000,
@ -268,7 +269,7 @@ page.prepareDropzone = function () {
  page.dropzone.on('uploadprogress', function (file, progress) {
    if (file.upload.chunked && progress === 100) { return }
    file.previewElement.querySelector('.progress').setAttribute('value', progress)
-    file.previewElement.querySelector('.progress').innerHTML = `${progress}%`
+    file.previewElement.querySelector('.progress').innerHTML = progress + '%'
  })

  page.dropzone.on('success', function (file, response) {
@ -326,7 +327,10 @@ page.uploadUrls = function (button) {
      var previewElement = previewTemplate.content.firstChild
      previewElement.querySelector('.name').innerHTML = url
      previewsContainer.appendChild(previewElement)
-      return { url, previewElement }
+      return {
+        url: url,
+        previewElement: previewElement
+      }
    })

    function post(i) {
@ -351,7 +355,7 @@ page.uploadUrls = function (button) {
        {
          headers: {
            token: page.token,
-            albumid
+            albumid: albumid
          }
        })
        .then(function (response) {
@ -392,13 +396,13 @@ page.prepareShareX = function () {
    var sharexElement = document.getElementById('ShareX')
    var sharexFile =
      '{\r\n' +
-      `  "Name": "${location.hostname}",\r\n` +
+      '  "Name": "' + location.hostname + '",\r\n' +
      '  "DestinationType": "ImageUploader, FileUploader",\r\n' +
      '  "RequestType": "POST",\r\n' +
-      `  "RequestURL": "${location.origin}/api/upload",\r\n` +
+      '  "RequestURL": "' + location.origin + '/api/upload",\r\n' +
      '  "FileFormName": "files[]",\r\n' +
      '  "Headers": {\r\n' +
-      `    "token": "${page.token}"\r\n` +
+      '    "token": "' + page.token + '"\r\n' +
      '  },\r\n' +
      '  "ResponseType": "Text",\r\n' +
      '  "URL": "$json:files[0].url$",\r\n' +
@ -406,36 +410,36 @@ page.prepareShareX = function () {
      '}'
    var sharexBlob = new Blob([sharexFile], { type: 'application/octet-binary' })
    sharexElement.setAttribute('href', URL.createObjectURL(sharexBlob))
-    sharexElement.setAttribute('download', `${location.hostname}.sxcu`)
+    sharexElement.setAttribute('download', location.hostname + '.sxcu')
  }
 }

 page.createAlbum = function () {
  var div = document.createElement('div')
-  div.innerHTML = `
-    <div class="field">
-      <label class="label">Album name</label>
-      <div class="controls">
-        <input id="_name" class="input" type="text" placeholder="My super album">
-      </div>
-    </div>
-    <div class="field">
-      <div class="control">
-        <label class="checkbox">
-          <input id="_download" type="checkbox" checked>
-          Enable download
-        </label>
-      </div>
-    </div>
-    <div class="field">
-      <div class="control">
-        <label class="checkbox">
-          <input id="_public" type="checkbox" checked>
-          Enable public link
-        </label>
-      </div>
-    </div>
-  `
+  div.innerHTML =
+    '<div class="field">\n' +
+    '  <label class="label">Album name</label>\n' +
+    '  <div class="controls">\n' +
+    '    <input id="_name" class="input" type="text" placeholder="My super album">\n' +
+    '  </div>\n' +
+    '</div>\n' +
+    '<div class="field">\n' +
+    '  <div class="control">\n' +
+    '    <label class="checkbox">\n' +
+    '      <input id="_download" type="checkbox" checked>\n' +
+    '      Enable download\n' +
+    '    </label>\n' +
+    '  </div>\n' +
+    '</div>\n' +
+    '<div class="field">\n' +
+    '  <div class="control">\n' +
+    '    <label class="checkbox">\n' +
+    '      <input id="_public" type="checkbox" checked>\n' +
+    '      Enable public link\n' +
+    '    </label>\n' +
+    '  </div>\n' +
+    '</div>'
+
  swal({
    title: 'Create new album',
    icon: 'info',
@ -452,7 +456,7 @@ page.createAlbum = function () {

      var name = document.getElementById('_name').value
      axios.post('api/albums', {
-        name,
+        name: name,
        download: document.getElementById('_download').checked,
        public: document.getElementById('_public').checked
      }, { headers: { token: page.token } })
@ -483,7 +487,7 @@ window.addEventListener('paste', function (event) {
    var item = items[index]
    if (item.kind === 'file') {
      var blob = item.getAsFile()
-      var file = new File([blob], `pasted-image.${blob.type.match(/(?:[^/]*\/)([^;]*)/)[1]}`)
+      var file = new File([blob], 'pasted-image.' + blob.type.match(/(?:[^/]*\/)([^;]*)/)[1])
      file.type = blob.type
      page.dropzone.addFile(file)
    }
--- a/views/_globals.njk
+++ b/views/_globals.njk
@ -15,7 +15,7 @@
  v2: Images and config files (manifest.json, browserconfig.xml, etc).
  v3: CSS and JS files (libs such as bulma, lazyload, etc).
 #}
-{% set v1 = "iz81GIx05U" %}
+{% set v1 = "IooRwmMNti" %}
 {% set v2 = "Ii3JYKIhb0" %}
 {% set v3 = "HrvcYD3KTh" %}

--- a/views/auth.njk
+++ b/views/auth.njk
@ -28,36 +28,34 @@
          <h2 class="subtitle">
            Login or register
          </h2>
-          <form id="authForm">
-            <div class="field">
-              <div class="control">
-                <input id="user" name="user" class="input" type="text" placeholder="Your username">
-              </div>
+          <div class="field">
+            <div class="control">
+              <input id="user" name="user" class="input" type="text" placeholder="Your username">
            </div>
-            <div class="field">
-              <div class="control">
-                <input id="pass" name="pass" class="input" type="password" placeholder="Your password">
-              </div>
+          </div>
+          <div class="field">
+            <div class="control">
+              <input id="pass" name="pass" class="input" type="password" placeholder="Your password">
            </div>
-            <div class="field is-grouped is-grouped-right">
-              <div class="control">
-                <a id="registerBtn" class="button">
-                  <span class="icon">
-                    <i class="icon-user-plus"></i>
-                  </span>
-                  <span>Register</span>
-                </a>
-              </div>
-              <div class="control">
-                <button id="loginBtn" type="submit" class="button">
-                  <span class="icon">
-                    <i class="icon-login"></i>
-                  </span>
-                  <span>Log in</span>
-                </button>
-              </div>
+          </div>
+          <div class="field is-grouped is-grouped-right">
+            <div class="control">
+              <a id="registerBtn" class="button">
+                <span class="icon">
+                  <i class="icon-user-plus"></i>
+                </span>
+                <span>Register</span>
+              </a>
            </div>
-          </form>
+            <div class="control">
+              <button id="loginBtn" type="submit" class="button">
+                <span class="icon">
+                  <i class="icon-login"></i>
+                </span>
+                <span>Log in</span>
+              </button>
+            </div>
+          </div>
        </div>
        <div class="column is-one-third is-hidden-mobile"></div>
      </div>