filesafe/src/js/dashboard.js

/* global swal, axios, ClipboardJS, LazyLoad */

const lsKeys = {
  token: 'token',
  viewType: {
    uploads: 'viewTypeUploads',
    uploadsAll: 'viewTypeUploadsAll'
  },
  selected: {
    uploads: 'selectedUploads',
    uploadsAll: 'selectedUploadsAll',
    users: 'selectedUsers'
  }
}

const page = {
  // #page
  dom: null,

  // user token
  token: localStorage[lsKeys.token],

  // from api/tokens/verify
  username: null,
  permissions: null,

  // sidebar menus
  menusContainer: null,
  menus: [],

  currentView: null,
  views: {
    // config of uploads view
    uploads: {
      type: localStorage[lsKeys.viewType.uploads],
      album: null, // album's id
      pageNum: null // page num
    },
    // config of uploads view (all)
    uploadsAll: {
      type: localStorage[lsKeys.viewType.uploadsAll],
      filters: null, // uploads' filters
      pageNum: null, // page num
      all: true
    },
    // config of users view
    users: {
      pageNum: null
    }
  },

  // id of selected items (shared across pages and will be synced with localStorage)
  selected: {
    uploads: [],
    uploadsAll: [],
    users: []
  },
  checkboxes: {
    uploads: [],
    uploadsAll: [],
    users: []
  },
  lastSelected: {
    upload: null,
    uploadsAll: null,
    user: null
  },

  // select album dom for dialogs/modals
  selectAlbumContainer: null,

  // cache for dialogs/modals
  cache: {
    uploads: {},
    albums: {},
    users: {}
  },

  clipboardJS: null,
  lazyLoad: null,

  imageExts: ['.webp', '.jpg', '.jpeg', '.gif', '.png', '.tiff', '.tif', '.svg'],
  // some of these extensions can not be played directly in browsers
  videoExts: ['.webm', '.mp4', '.wmv', '.avi', '.mov', '.mkv'],

  isTriggerLoading: null,
  fadingIn: null
}

page.preparePage = () => {
  if (!page.token) {
    window.location = 'auth'
    return
  }
  page.verifyToken(page.token, true)
}

page.verifyToken = (token, reloadOnError) => {
  axios.post('api/tokens/verify', { token }).then(response => {
    if (response.data.success === false)
      return swal({
        title: 'An error occurred!',
        text: response.data.description,
        icon: 'error'
      }).then(() => {
        if (!reloadOnError) return
        localStorage.removeItem(lsKeys.token)
        window.location = 'auth'
      })

    axios.defaults.headers.common.token = token
    localStorage[lsKeys.token] = token
    page.token = token
    page.username = response.data.username
    page.permissions = response.data.permissions
    page.prepareDashboard()
  }).catch(error => {
    console.error(error)
    return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
  })
}

page.prepareDashboard = () => {
  page.dom = document.querySelector('#page')

  // Capture all click events
  page.dom.addEventListener('click', page.domClick, true)

  // Capture all submit events
  page.dom.addEventListener('submit', event => {
    // Prevent default if necessary
    if (event.target && event.target.classList.contains('prevent-default'))
      return event.preventDefault()
  }, true)

  page.menusContainer = document.querySelector('#menu')

  // All item menus in the sidebar
  const itemMenus = [
    { selector: '#itemUploads', onclick: page.getUploads },
    { selector: '#itemDeleteUploadsByNames', onclick: page.deleteUploadsByNames },
    { selector: '#itemManageAlbums', onclick: page.getAlbums },
    { selector: '#itemManageToken', onclick: page.changeToken },
    { selector: '#itemChangePassword', onclick: page.changePassword },
    { selector: '#itemLogout', onclick: page.logout, inactive: true },
    { selector: '#itemManageUploads', onclick: page.getUploads, params: { all: true }, group: 'moderator' },
    { selector: '#itemStatistics', onclick: page.getStatistics, group: 'admin' },
    { selector: '#itemManageUsers', onclick: page.getUsers, group: 'admin' }
  ]

  for (let i = 0; i < itemMenus.length; i++) {
    // Skip item menu if not enough permission
    if (itemMenus[i].group && !page.permissions[itemMenus[i].group])
      continue

    // Add onclick event listener
    const item = document.querySelector(itemMenus[i].selector)
    item.addEventListener('click', event => {
      // This class name isn't actually being applied fast enough
      if (page.menusContainer.classList.contains('is-loading'))
        return
      // eslint-disable-next-line compat/compat
      itemMenus[i].onclick.call(null, Object.assign({
        trigger: event.currentTarget
      }, itemMenus[i].params || {}))
    })

    item.classList.remove('is-hidden')
    page.menus.push(item)
  }

  // If at least a moderator, show administration section
  if (page.permissions.moderator) {
    document.querySelector('#itemLabelAdmin').classList.remove('is-hidden')
    document.querySelector('#itemListAdmin').classList.remove('is-hidden')
  }

  // Update text of logout button
  document.querySelector('#itemLogout').innerHTML = `Logout ( ${page.username} )`

  // Finally display dashboard
  document.querySelector('#dashboard').classList.remove('is-hidden')

  // Load albums sidebar
  page.getAlbumsSidebar()

  if (typeof page.prepareShareX === 'function')
    page.prepareShareX()
}

page.logout = () => {
  localStorage.removeItem(lsKeys.token)
  window.location = 'auth'
}

page.updateTrigger = (trigger, newState) => {
  if (!trigger) return

  // Disable menus container when loading
  if (newState === 'loading')
    page.menusContainer.classList.add('is-loading')
  else
    page.menusContainer.classList.remove('is-loading')

  if (newState === 'loading') {
    trigger.classList.add('is-loading')
  } else if (newState === 'active') {
    if (trigger.parentNode.tagName !== 'LI')
      return
    for (let i = 0; i < page.menus.length; i++)
      page.menus[i].classList.remove('is-active')
    trigger.classList.remove('is-loading')
    trigger.classList.add('is-active')
  } else {
    trigger.classList.remove('is-loading')
    trigger.classList.remove('is-active')
  }
}

page.getItemID = element => {
  // This expects the item's parent to have the item's ID
  let parent = element.parentNode
  // If the element is part of a set of controls, use the container's parent instead
  if (element.parentNode.classList.contains('controls')) parent = parent.parentNode
  return parseInt(parent.dataset.id)
}

page.domClick = event => {
  // We are processing clicks this way to avoid using "onclick" attribute
  // Apparently we will need to use "unsafe-inline" for "script-src" directive
  // of Content Security Policy (CSP), if we want to use "onclick" attribute
  // Though I think that only applies to some browsers (?)
  // Of course it wouldn't have mattered if we didn't use CSP to begin with
  // Anyway, I personally would rather not use "onclick" attribute
  let element = event.target
  if (!element) return

  // Delegate click events to their A or BUTTON parents
  if (['I'].includes(element.tagName) && ['SPAN'].includes(element.parentNode.tagName))
    element = element.parentNode
  if (['SPAN'].includes(element.tagName) && ['A', 'BUTTON'].includes(element.parentNode.tagName))
    element = element.parentNode

  // Skip elements that have no action data
  if (!element.dataset || !element.dataset.action) return

  // Skip disabled elements
  if (element.hasAttribute('disabled')) return

  event.stopPropagation() // maybe necessary
  const id = page.getItemID(element)
  const action = element.dataset.action

  switch (action) {
    case 'view-list':
      return page.setUploadsView('list', element)
    case 'view-thumbs':
      return page.setUploadsView('thumbs', element)
    case 'clear-selection':
      return page.clearSelection()
    case 'add-selected-uploads-to-album':
      return page.addSelectedUploadsToAlbum()
    case 'select':
      return page.select(element, event)
    case 'select-all':
      return page.selectAll(element)
    case 'add-to-album':
      return page.addToAlbum(id)
    case 'delete-upload':
      return page.deleteUpload(id)
    case 'bulk-delete-uploads':
      return page.bulkDeleteUploads()
    case 'display-thumbnail':
      return page.displayThumbnail(id)
    case 'submit-album':
      return page.submitAlbum(element)
    case 'edit-album':
      return page.editAlbum(id)
    case 'delete-album':
      return page.deleteAlbum(id)
    case 'get-new-token':
      return page.getNewToken(element)
    case 'edit-user':
      return page.editUser(id)
    case 'disable-user':
      return page.disableUser(id)
    case 'filters-help':
      return page.filtersHelp(element)
    case 'filter-uploads':
      return page.filterUploads(element)
    case 'view-user-uploads':
      return page.viewUserUploads(id, element)
    case 'page-ellipsis':
      return page.focusJumpToPage()
    case 'page-prev':
    case 'page-next':
    case 'page-goto':
    case 'jump-to-page':
      return page.switchPage(action, element)
  }
}

page.fadeAndScroll = content => {
  if (page.fadingIn) {
    clearTimeout(page.fadingIn)
    page.dom.classList.remove('fade-in')
  }
  page.dom.classList.add('fade-in')
  page.fadingIn = setTimeout(() => {
    page.dom.classList.remove('fade-in')
  }, 500)
  page.dom.scrollIntoView(true)
}

page.switchPage = (action, element) => {
  // eslint-disable-next-line compat/compat
  const params = Object.assign({
    trigger: element
  }, page.views[page.currentView])
  const func = page.currentView === 'users' ? page.getUsers : page.getUploads
  switch (action) {
    case 'page-prev':
      params.pageNum = page.views[page.currentView].pageNum - 1
      if (params.pageNum < 0)
        return swal('An error occurred!', 'This is already the first page.', 'error')
      return func(params)
    case 'page-next':
      params.pageNum = page.views[page.currentView].pageNum + 1
      return func(params)
    case 'page-goto':
      params.pageNum = parseInt(element.dataset.goto)
      return func(params)
    case 'jump-to-page': {
      const jumpToPage = document.querySelector('#jumpToPage')
      if (!jumpToPage.checkValidity()) return
      const parsed = parseInt(jumpToPage.value)
      params.pageNum = isNaN(parsed) ? 0 : (parsed - 1)
      if (params.pageNum < 0) params.pageNum = 0
      return func(params)
    }
  }
}

page.focusJumpToPage = () => {
  const element = document.querySelector('#jumpToPage')
  if (!element) return
  element.focus()
  element.select()
}

page.getUploads = (params = {}) => {
  if (params === undefined)
    params = {}

  if ((params.all || params.filters) && !page.permissions.moderator)
    return swal('An error occurred!', 'You can not do this!', 'error')

  page.updateTrigger(params.trigger, 'loading')

  if (typeof params.pageNum !== 'number' || params.pageNum < 0)
    params.pageNum = 0

  const url = params.album !== undefined
    ? `api/album/${params.album}/${params.pageNum}`
    : `api/uploads/${params.pageNum}`

  const headers = {
    all: params.all ? '1' : '',
    filters: params.filters || ''
  }

  axios.get(url, { headers }).then(response => {
    if (response.data.success === false)
      if (response.data.description === 'No token provided') {
        return page.verifyToken(page.token)
      } else {
        page.updateTrigger(params.trigger)
        return swal('An error occurred!', response.data.description, 'error')
      }

    const files = response.data.files
    if (params.pageNum && (files.length === 0))
      if (params.autoPage) {
        params.pageNum = Math.ceil(response.data.count / 25) - 1
        return page.getUploads(params)
      } else {
        page.updateTrigger(params.trigger)
        return swal('An error occurred!', `There are no more uploads to populate page ${params.pageNum + 1}.`, 'error')
      }

    page.currentView = params.all ? 'uploadsAll' : 'uploads'
    page.cache.uploads = {}

    const albums = response.data.albums
    const users = response.data.users
    const basedomain = response.data.basedomain
    const pagination = page.paginate(response.data.count, 25, params.pageNum)

    let filter = '<div class="column is-hidden-mobile"></div>'
    if (params.all)
      filter = `
        <div class="column">
          <form class="prevent-default">
            <div class="field has-addons">
              <div class="control is-expanded">
                <input id="filters" class="input is-small" type="text" placeholder="Filters" value="${params.filters || ''}">
              </div>
              <div class="control">
                <button type="button" class="button is-small is-info" title="Help?" data-action="filters-help">
                  <span class="icon">
                    <i class="icon-help-circled"></i>
                  </span>
                </button>
              </div>
              <div class="control">
                <button type="submit" class="button is-small is-info" title="Filter uploads" data-action="filter-uploads">
                  <span class="icon">
                    <i class="icon-filter"></i>
                  </span>
                </button>
              </div>
            </div>
          </form>
        </div>
      `
    const extraControls = `
      <div class="columns">
        ${filter}
        <div class="column is-one-quarter">
          <form class="prevent-default">
            <div class="field has-addons">
              <div class="control is-expanded">
                <input id="jumpToPage" class="input is-small" type="number" value="${params.pageNum + 1}">
              </div>
              <div class="control">
                <button type="submit" class="button is-small is-info" title="Jump to page" data-action="jump-to-page">
                  <span class="icon">
                    <i class="icon-paper-plane"></i>
                  </span>
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    `

    const controls = `
      <div class="columns">
        <div class="column is-hidden-mobile"></div>
        <div class="column has-text-centered">
          <a class="button is-small is-danger" title="List view" data-action="view-list">
            <span class="icon">
              <i class="icon-th-list"></i>
            </span>
          </a>
          <a class="button is-small is-danger" title="Thumbs view" data-action="view-thumbs">
            <span class="icon">
              <i class="icon-th-large"></i>
            </span>
          </a>
        </div>
        <div class="column has-text-right">
          <a class="button is-small is-info" title="Clear selection" data-action="clear-selection">
            <span class="icon">
              <i class="icon-cancel"></i>
            </span>
          </a>
          ${params.all ? '' : `
          <a class="button is-small is-warning" title="Bulk add to album" data-action="add-selected-uploads-to-album">
            <span class="icon">
              <i class="icon-plus"></i>
            </span>
          </a>`}
          <a class="button is-small is-danger" title="Bulk delete" data-action="bulk-delete-uploads">
            <span class="icon">
              <i class="icon-trash"></i>
            </span>
            <span>Bulk delete</span>
          </a>
        </div>
      </div>
    `

    // Whether there are any unselected items
    let unselected = false

    const hasExpiryDateColumn = files.some(file => {
      return file.expirydate !== undefined
    })

    for (let i = 0; i < files.length; i++) {
      // Build full URLs
      files[i].file = `${basedomain}/${files[i].name}`
      if (files[i].thumb)
        files[i].thumb = `${basedomain}/${files[i].thumb}`

      // Cache bare minimum data for thumbnails viewer
      page.cache.uploads[files[i].id] = {
        name: files[i].name,
        thumb: files[i].thumb,
        original: files[i].file
      }

      // Prettify
      files[i].prettyBytes = page.getPrettyBytes(parseInt(files[i].size))
      files[i].prettyDate = page.getPrettyDate(new Date(files[i].timestamp * 1000))

      if (hasExpiryDateColumn)
        files[i].prettyExpiryDate = files[i].expirydate
          ? page.getPrettyDate(new Date(files[i].expirydate * 1000))
          : '-'

      // Update selected status
      files[i].selected = page.selected[page.currentView].includes(files[i].id)
      if (!files[i].selected) unselected = true

      // Appendix (display album or user)
      if (params.all)
        files[i].appendix = files[i].userid
          ? users[files[i].userid] || ''
          : ''
      else if (params.album === undefined)
        files[i].appendix = files[i].albumid
          ? albums[files[i].albumid] || ''
          : ''
    }

    if (page.views[page.currentView].type === 'thumbs') {
      page.dom.innerHTML = `
        ${pagination}
        ${extraControls}
        ${controls}
        <div id="table" class="columns is-multiline is-mobile is-centered">
        </div>
        <hr>
        ${pagination}
      `

      const table = document.querySelector('#table')

      for (let i = 0; i < files.length; i++) {
        const upload = files[i]
        const div = document.createElement('div')
        div.className = 'image-container column is-narrow is-relative'
        div.dataset.id = upload.id

        if (upload.thumb !== undefined)
          div.innerHTML = `<a class="image" href="${upload.file}" target="_blank" rel="noopener"><img alt="${upload.name}" data-src="${upload.thumb}"/></a>`
        else
          div.innerHTML = `<a class="image" href="${upload.file}" target="_blank" rel="noopener"><h1 class="title">${upload.extname || 'N/A'}</h1></a>`

        div.innerHTML += `
          <input type="checkbox" class="checkbox" title="Select" data-index="${i}" data-action="select"${upload.selected ? ' checked' : ''}>
          <div class="controls">
            ${upload.thumb ? `
            <a class="button is-small is-primary" title="View thumbnail" data-action="display-thumbnail">
              <span class="icon">
                <i class="icon-picture"></i>
              </span>
            </a>` : ''}
            <a class="button is-small is-info clipboard-js" title="Copy link to clipboard" data-clipboard-text="${upload.file}">
              <span class="icon">
                <i class="icon-clipboard"></i>
              </span>
            </a>
            <a class="button is-small is-warning" title="Add to album" data-action="add-to-album">
              <span class="icon">
                <i class="icon-plus"></i>
              </span>
            </a>
            <a class="button is-small is-danger" title="Delete" data-action="delete-upload">
              <span class="icon">
                <i class="icon-trash"></i>
              </span>
            </a>
          </div>
          <div class="details">
            <p><span class="name" title="${upload.file}">${upload.name}</span></p>
            <p>${upload.appendix ? `<span>${upload.appendix}</span> – ` : ''}${upload.prettyBytes}</p>
          </div>
        `

        table.appendChild(div)
        page.checkboxes[page.currentView] = table.querySelectorAll('.checkbox[data-action="select"]')
        page.lazyLoad.update()
      }
    } else {
      page.dom.innerHTML = `
        ${pagination}
        ${extraControls}
        ${controls}
        <div class="table-container">
          <table class="table is-narrow is-fullwidth is-hoverable">
            <thead>
              <tr>
                <th><input id="selectAll" class="checkbox" type="checkbox" title="Select all" data-action="select-all"></th>
                <th>File</th>
                ${params.album === undefined ? `<th>${params.all ? 'User' : 'Album'}</th>` : ''}
                <th>Size</th>
                ${params.all ? '<th>IP</th>' : ''}
                <th>Date</th>
                ${hasExpiryDateColumn ? '<th>Expiry date</th>' : ''}
                <th></th>
              </tr>
            </thead>
            <tbody id="table">
            </tbody>
          </table>
        </div>
        <hr>
        ${pagination}
      `

      const table = document.querySelector('#table')

      for (let i = 0; i < files.length; i++) {
        const upload = files[i]
        const tr = document.createElement('tr')
        tr.dataset.id = upload.id
        tr.innerHTML = `
          <td class="controls"><input type="checkbox" class="checkbox" title="Select" data-index="${i}" data-action="select"${upload.selected ? ' checked' : ''}></td>
          <th><a href="${upload.file}" target="_blank" rel="noopener" title="${upload.file}">${upload.name}</a></th>
          ${params.album === undefined ? `<th>${upload.appendix}</th>` : ''}
          <td>${upload.prettyBytes}</td>
          ${params.all ? `<td>${upload.ip || ''}</td>` : ''}
          <td>${upload.prettyDate}</td>
          ${hasExpiryDateColumn ? `<td>${upload.prettyExpiryDate}</td>` : ''}
          <td class="controls has-text-right">
            <a class="button is-small is-primary" title="${upload.thumb ? 'View thumbnail' : 'File doesn\'t have thumbnail'}" data-action="display-thumbnail"${upload.thumb ? '' : ' disabled'}>
              <span class="icon">
                <i class="icon-picture"></i>
              </span>
            </a>
            <a class="button is-small is-info clipboard-js" title="Copy link to clipboard" data-clipboard-text="${upload.file}">
              <span class="icon">
                <i class="icon-clipboard"></i>
              </span>
            </a>
            ${params.all ? '' : `
            <a class="button is-small is-warning" title="Add to album" data-action="add-to-album">
              <span class="icon">
                <i class="icon-plus"></i>
              </span>
            </a>`}
            <a class="button is-small is-danger" title="Delete" data-action="delete-upload">
              <span class="icon">
                <i class="icon-trash"></i>
              </span>
            </a>
          </td>
        `

        table.appendChild(tr)
        page.checkboxes[page.currentView] = table.querySelectorAll('.checkbox[data-action="select"]')
      }
    }

    const selectAll = document.querySelector('#selectAll')
    if (selectAll && !unselected) {
      selectAll.checked = true
      selectAll.title = 'Unselect all'
    }

    page.fadeAndScroll()
    page.updateTrigger(params.trigger, 'active')

    if (page.currentView === 'uploads')
      page.views.uploads.album = params.album
    if (page.currentView === 'uploadsAll')
      page.views.uploadsAll.filters = params.filters
    page.views[page.currentView].pageNum = files.length ? params.pageNum : 0
  }).catch(error => {
    console.error(error)
    page.updateTrigger(params.trigger)
    return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
  })
}

page.setUploadsView = (view, element) => {
  localStorage[lsKeys.viewType[page.currentView]] = view
  page.views[page.currentView].type = view
  // eslint-disable-next-line compat/compat
  page.getUploads(Object.assign({
    trigger: element
  }, page.views[page.currentView]))
}

page.displayThumbnail = id => {
  const file = page.cache.uploads[id]
  if (!file.thumb) return

  const div = document.createElement('div')
  div.innerHTML = `
    <div class="field has-text-centered">
      <label class="label">${file.name}</label>
      <div class="controls swal-display-thumb-container">
        <img id="swalThumb" src="${file.thumb}">
      </div>
    </div>
  `

  if (file.original) {
    const exec = /.[\w]+(\?|$)/.exec(file.original)
    const extname = exec && exec[0] ? exec[0].toLowerCase() : null
    const isimage = page.imageExts.includes(extname)
    const isvideo = !isimage && page.videoExts.includes(extname)

    if (isimage || isvideo) {
      div.innerHTML += `
        <div class="field has-text-centered">
          <div class="controls">
            <a id="swalOriginal" type="button" class="button is-info is-fullwidth" data-original="${file.original}">
              <span class="icon">
                <i class="icon-arrows-cw"></i>
              </span>
              <span>Load original</span>
            </a>
          </div>
        </div>
      `

      div.querySelector('#swalOriginal').addEventListener('click', event => {
        const trigger = event.currentTarget
        if (trigger.classList.contains('is-danger'))
          return

        trigger.classList.add('is-loading')
        const thumb = div.querySelector('#swalThumb')

        if (isimage) {
          thumb.src = file.original
          thumb.onload = () => {
            trigger.classList.add('is-hidden')
            document.body.querySelector('.swal-overlay .swal-modal:not(.is-expanded)').classList.add('is-expanded')
          }
          thumb.onerror = event => {
            event.currentTarget.classList.add('is-hidden')
            trigger.className = 'button is-danger is-fullwidth'
            trigger.innerHTML = `
              <span class="icon">
                <i class="icon-block"></i>
              </span>
              <span>Unable to load original</span>
            `
          }
        } else if (isvideo) {
          thumb.classList.add('is-hidden')
          const video = document.createElement('video')
          video.id = 'swalVideo'
          video.controls = true
          video.autoplay = true
          video.src = file.original
          thumb.insertAdjacentElement('afterend', video)

          trigger.classList.add('is-hidden')
          document.body.querySelector('.swal-overlay .swal-modal:not(.is-expanded)').classList.add('is-expanded')
        }
      })
    }
  }

  return swal({
    content: div,
    buttons: false
  }).then(() => {
    // Destroy video, if necessary
    const video = div.querySelector('#swalVideo')
    if (video) video.remove()

    // Restore modal size
    document.body.querySelector('.swal-overlay .swal-modal').classList.remove('is-expanded')
  })
}

page.selectAll = element => {
  for (let i = 0; i < page.checkboxes[page.currentView].length; i++) {
    const id = page.getItemID(page.checkboxes[page.currentView][i])
    if (isNaN(id)) continue
    if (page.checkboxes[page.currentView][i].checked !== element.checked) {
      page.checkboxes[page.currentView][i].checked = element.checked
      if (page.checkboxes[page.currentView][i].checked)
        page.selected[page.currentView].push(id)
      else
        page.selected[page.currentView].splice(page.selected[page.currentView].indexOf(id), 1)
    }
  }

  if (page.selected[page.currentView].length)
    localStorage[lsKeys.selected[page.currentView]] = JSON.stringify(page.selected[page.currentView])
  else
    delete localStorage[lsKeys.selected[page.currentView]]

  element.title = element.checked ? 'Unselect all' : 'Select all'
}

page.selectInBetween = (element, lastElement) => {
  const thisIndex = parseInt(element.dataset.index)
  const lastIndex = parseInt(lastElement.dataset.index)

  const distance = Math.abs(thisIndex - lastIndex)
  if (distance < 2)
    return

  for (let i = 0; i < page.checkboxes[page.currentView].length; i++)
    if ((thisIndex > lastIndex && i > lastIndex && i < thisIndex) ||
      (thisIndex < lastIndex && i > thisIndex && i < lastIndex)) {
      // Check or uncheck depending on the state of the initial checkbox
      const checked = page.checkboxes[page.currentView][i].checked = lastElement.checked
      const id = page.getItemID(page.checkboxes[page.currentView][i])
      if (!page.selected[page.currentView].includes(id) && checked)
        page.selected[page.currentView].push(id)
      else if (page.selected[page.currentView].includes(id) && !checked)
        page.selected[page.currentView].splice(page.selected[page.currentView].indexOf(id), 1)
    }
}

page.select = (element, event) => {
  const id = page.getItemID(element)
  if (isNaN(id)) return

  const lastSelected = page.lastSelected[page.currentView]
  if (event.shiftKey && lastSelected) {
    page.selectInBetween(element, lastSelected)
    // Check or uncheck depending on the state of the initial checkbox
    element.checked = lastSelected.checked
  } else {
    page.lastSelected[page.currentView] = element
  }

  if (!page.selected[page.currentView].includes(id) && element.checked)
    page.selected[page.currentView].push(id)
  else if (page.selected[page.currentView].includes(id) && !element.checked)
    page.selected[page.currentView].splice(page.selected[page.currentView].indexOf(id), 1)

  // Update local storage
  if (page.selected[page.currentView].length)
    localStorage[lsKeys.selected[page.currentView]] = JSON.stringify(page.selected[page.currentView])
  else
    delete localStorage[lsKeys.selected[page.currentView]]
}

page.clearSelection = () => {
  const selected = page.selected[page.currentView]
  const type = page.currentView === 'users' ? 'users' : 'uploads'
  const count = selected.length
  if (!count)
    return swal('An error occurred!', `You have not selected any ${type}.`, 'error')

  const suffix = count === 1 ? type.substring(0, type.length - 1) : type
  return swal({
    title: 'Are you sure?',
    text: `You are going to unselect ${count} ${suffix}.`,
    buttons: true
  }).then(proceed => {
    if (!proceed) return

    const checkboxes = page.checkboxes[page.currentView]
    for (let i = 0; i < checkboxes.length; i++)
      if (checkboxes[i].checked)
        checkboxes[i].checked = false

    page.selected[page.currentView] = []
    delete localStorage[lsKeys.selected[page.currentView]]

    const selectAll = document.querySelector('#selectAll')
    if (selectAll) selectAll.checked = false

    return swal('Cleared selection!', `Unselected ${count} ${suffix}.`, 'success')
  })
}

page.filtersHelp = element => {
  const content = document.createElement('div')
  content.style = 'text-align: left'
  content.innerHTML = `
    This supports 3 filter keys, namely <b>user</b> (username), <b>ip</b> and <b>name</b> (upload name).
    Each key can be specified more than once.
    Backlashes should be used if the usernames have spaces.
    There are also 2 additional flags, namely <b>-user</b> and <b>-ip</b>, which will match uploads by non-registered users and have no IPs respectively.

    How does it work?
    First, it will filter uploads matching ANY of the supplied <b>user</b> or <b>ip</b> keys.
    Then, it will refine the matches using the supplied <b>name</b> keys.

    Examples:

    Uploads from user with username "demo":
    <code>user:demo</code>

    Uploads from users with username either "John Doe" OR "demo":
    <code>user:John\\ Doe user:demo</code>

    Uploads from IP "127.0.0.1" AND which upload names match "*.rar" OR "*.zip":
    <code>ip:127.0.0.1 name:*.rar name:*.zip</code>

    Uploads from user with username "test" OR from non-registered users:
    <code>user:test -user</code>
  `.trim().replace(/^ {6}/gm, '').replace(/\n/g, '<br>')
  swal({ content })
}

page.filterUploads = element => {
  const filters = document.querySelector('#filters').value
  page.getUploads({ all: true, filters }, element)
}

page.viewUserUploads = (id, element) => {
  const user = page.cache.users[id]
  if (!user) return
  element.classList.add('is-loading')
  page.getUploads({
    all: true,
    filters: `user:${user.username.replace(/ /g, '\\ ')}`,
    trigger: document.querySelector('#itemManageUploads')
  })
}

page.deleteUpload = id => {
  page.postBulkDeleteUploads({
    all: page.currentView === 'uploadsAll',
    field: 'id',
    values: [id],
    cb (failed) {
      // Remove from remembered checkboxes if necessary
      if (!failed.length && page.selected[page.currentView].includes(id))
        page.selected[page.currentView].splice(page.selected[page.currentView].indexOf(id), 1)

      // Update local storage
      if (page.selected[page.currentView].length)
        localStorage[lsKeys.selected[page.currentView]] = JSON.stringify(page.selected[page.currentView])
      else
        delete localStorage[lsKeys.selected[page.currentView]]

      // Reload upload list
      // eslint-disable-next-line compat/compat
      page.getUploads(Object.assign({
        autoPage: true
      }, page.views[page.currentView]))
    }
  })
}

page.bulkDeleteUploads = () => {
  const count = page.selected[page.currentView].length
  if (!count)
    return swal('An error occurred!', 'You have not selected any uploads.', 'error')

  page.postBulkDeleteUploads({
    all: page.currentView === 'uploadsAll',
    field: 'id',
    values: page.selected[page.currentView],
    cb (failed) {
      // Update state of checkboxes
      if (failed.length)
        page.selected[page.currentView] = page.selected[page.currentView]
          .filter(id => {
            return failed.includes(id)
          })
      else
        page.selected[page.currentView] = []

      // Update local storage
      if (page.selected[page.currentView].length)
        localStorage[lsKeys.selected[page.currentView]] = JSON.stringify(page.selected[page.currentView])
      else
        delete localStorage[lsKeys.selected[page.currentView]]

      // Reload uploads list
      // eslint-disable-next-line compat/compat
      page.getUploads(Object.assign({
        autoPage: true
      }, page.views[page.currentView]))
    }
  })
}

page.deleteUploadsByNames = (params = {}) => {
  let appendix = ''
  if (page.permissions.moderator)
    appendix = '<br><b>Hint:</b> You can use this feature to delete uploads by other users.'

  page.dom.innerHTML = `
    <form class="prevent-default">
      <div class="field">
        <label class="label">Upload names:</label>
        <div class="control">
          <textarea id="bulkDeleteNames" class="textarea"></textarea>
        </div>
        <p class="help">Separate each entry with a new line.${appendix}</p>
      </div>
      <div class="field">
        <div class="control">
          <button type="submit" id="submitBulkDelete" class="button is-danger is-fullwidth">
            <span class="icon">
              <i class="icon-trash"></i>
            </span>
            <span>Bulk delete</span>
          </button>
        </div>
      </div>
    </form>
  `
  page.fadeAndScroll()
  page.updateTrigger(params.trigger, 'active')

  document.querySelector('#submitBulkDelete').addEventListener('click', () => {
    const textArea = document.querySelector('#bulkDeleteNames')

    // Clean up
    const seen = {}
    const names = textArea.value
      .split(/\r?\n/)
      .map(name => {
        const trimmed = name.trim()
        return /^[^\s]+$/.test(trimmed)
          ? trimmed
          : ''
      })
      .filter(name => {
        // Filter out invalid and duplicate names
        return (!name || Object.prototype.hasOwnProperty.call(seen, name))
          ? false
          : (seen[name] = true)
      })

    // Update textarea with cleaned names
    textArea.value = names.join('\n')

    if (!names.length)
      return swal('An error occurred!', 'You have not entered any upload names.', 'error')

    page.postBulkDeleteUploads({
      all: true,
      field: 'name',
      values: names,
      cb (failed) {
        textArea.value = failed.join('\n')
      }
    })
  })
}

page.postBulkDeleteUploads = (params = {}) => {
  const count = params.values.length

  const objective = `${params.values.length} upload${count === 1 ? '' : 's'}`
  const boldObjective = objective.replace(/^(\d*)(.*)/, '<b>$1</b>$2')
  let text = `<p>You won't be able to recover ${boldObjective}!</p>`

  if (params.all) {
    const obj1 = count === 1 ? 'an upload' : 'some uploads'
    const obj2 = count === 1 ? 'another user' : 'other users'
    text += `\n<p><b>Warning:</b> You may be nuking ${obj1} by ${obj2}!</p>`
  }

  const content = document.createElement('div')
  content.innerHTML = text

  swal({
    title: 'Are you sure?',
    content,
    icon: 'warning',
    dangerMode: true,
    buttons: {
      cancel: true,
      confirm: {
        text: `Yes, nuke ${params.values.length === 1 ? 'it' : 'them'}!`,
        closeModal: false
      }
    }
  }).then(proceed => {
    if (!proceed) return

    axios.post('api/upload/bulkdelete', {
      field: params.fields,
      values: params.values
    }).then(response => {
      if (!response) return

      if (response.data.success === false)
        if (response.data.description === 'No token provided') {
          return page.verifyToken(page.token)
        } else {
          return swal('An error occurred!', response.data.description, 'error')
        }

      const failed = Array.isArray(response.data.failed) ? response.data.failed : []
      if (failed.length === params.values.length)
        swal('An error occurred!', `Unable to delete any of the ${objective}.`, 'error')
      else if (failed.length && failed.length < params.values.length)
        swal('Warning!', `From ${objective}, unable to delete ${failed.length} of them.`, 'warning')
      else
        swal('Deleted!', `${objective} ${count === 1 ? 'has' : 'have'} been deleted.`, 'success')

      if (typeof params.cb === 'function')
        params.cb(failed)
    }).catch(error => {
      console.error(error)
      swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
    })
  })
}

page.addSelectedUploadsToAlbum = () => {
  if (page.currentView !== 'uploads')
    return

  const count = page.selected[page.currentView].length
  if (!count)
    return swal('An error occurred!', 'You have not selected any uploads.', 'error')

  page.addUploadsToAlbum(page.selected[page.currentView], failed => {
    if (!failed) return
    if (failed.length)
      page.selected[page.currentView] = page.selected[page.currentView].filter(id => {
        return failed.includes(id)
      })
    else
      page.selected[page.currentView] = []

    localStorage[lsKeys.selected[page.currentView]] = JSON.stringify(page.selected[page.currentView])
    page.getUploads(page.views[page.currentView])
  })
}

page.addToAlbum = id => {
  page.addUploadsToAlbum([id], failed => {
    if (!failed) return
    page.getUploads(page.views[page.currentView])
  })
}

page.addUploadsToAlbum = (ids, callback) => {
  const count = ids.length

  const content = document.createElement('div')
  content.innerHTML = `
    <div class="field has-text-centered">
      <p>You are about to add <b>${count}</b> upload${count === 1 ? '' : 's'} to an album.</p>
      <p><b>If an upload is already in an album, it will be moved.</b></p>
    </div>
    <div class="field">
      <div class="control">
        <div class="select is-fullwidth">
          <select id="swalAlbum" disabled>
            <option value="-1">Remove from album</option>
            <option value="" selected disabled>Fetching albums list\u2026</option>
          </select>
        </div>
      </div>
    </div>
  `

  swal({
    icon: 'warning',
    content,
    buttons: {
      cancel: true,
      confirm: {
        text: 'OK',
        closeModal: false
      }
    }
  }).then(choose => {
    if (!choose) return

    const albumid = parseInt(document.querySelector('#swalAlbum').value)
    if (isNaN(albumid))
      return swal('An error occurred!', 'You did not choose an album.', 'error')

    axios.post('api/albums/addfiles', {
      ids,
      albumid
    }).then(add => {
      if (!add) return

      if (add.data.success === false) {
        if (add.data.description === 'No token provided')
          page.verifyToken(page.token)
        else
          swal('An error occurred!', add.data.description, 'error')

        return
      }

      let added = ids.length
      if (add.data.failed && add.data.failed.length)
        added -= add.data.failed.length

      const suffix = `upload${ids.length === 1 ? '' : 's'}`
      if (!added)
        return swal('An error occurred!', `Could not add the ${suffix} to the album.`, 'error')

      swal('Woohoo!', `Successfully ${albumid < 0 ? 'removed' : 'added'} ${added} ${suffix} ${albumid < 0 ? 'from' : 'to'} the album.`, 'success')
      callback(add.data.failed)
    }).catch(error => {
      console.error(error)
      return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
    })
  }).catch(error => {
    console.error(error)
    return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
  })

  // Get albums list then update content of swal
  axios.get('api/albums').then(list => {
    if (list.data.success === false) {
      if (list.data.description === 'No token provided')
        page.verifyToken(page.token)
      else
        swal('An error occurred!', list.data.description, 'error')

      return
    }

    // If the prompt was replaced, the container would be missing
    const select = document.querySelector('#swalAlbum')
    if (!select) return

    select.innerHTML += list.data.albums
      .map(album => {
        return `<option value="${album.id}">${album.name}</option>`
      })
      .join('\n')

    select.getElementsByTagName('option')[1].innerHTML = 'Choose an album'
    select.removeAttribute('disabled')
  }).catch(error => {
    console.error(error)
    return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
  })
}

page.getAlbums = (params = {}) => {
  page.updateTrigger(params.trigger, 'loading')
  axios.get('api/albums').then(response => {
    if (!response) return

    if (response.data.success === false)
      if (response.data.description === 'No token provided') {
        return page.verifyToken(page.token)
      } else {
        page.updateTrigger(params.trigger)
        return swal('An error occurred!', response.data.description, 'error')
      }

    page.cache.albums = {}

    page.dom.innerHTML = `
      <h2 class="subtitle">Create new album</h2>
      <form class="prevent-default">
        <div class="field">
          <div class="control">
            <input id="albumName" class="input" type="text" placeholder="Name">
          </div>
        </div>
        <div class="field">
          <div class="control">
            <textarea id="albumDescription" class="textarea" placeholder="Description" rows="1"></textarea>
          </div>
        </div>
        <div class="field">
          <div class="control">
            <button type="submit" id="submitAlbum" class="button is-info is-fullwidth" data-action="submit-album">
              <span class="icon">
                <i class="icon-paper-plane"></i>
              </span>
              <span>Create</span>
            </button>
          </div>
        </div>
      </form>
      <hr>
      <h2 class="subtitle">List of albums</h2>
      <div class="table-container">
        <table class="table is-fullwidth is-hoverable">
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Files</th>
              <th>Created at</th>
              <th>Public link</th>
              <th></th>
            </tr>
          </thead>
          <tbody id="table">
          </tbody>
        </table>
      </div>
    `

    const homeDomain = response.data.homeDomain
    const table = document.querySelector('#table')

    for (let i = 0; i < response.data.albums.length; i++) {
      const album = response.data.albums[i]
      const albumUrl = `${homeDomain}/a/${album.identifier}`

      // Prettify
      album.prettyDate = page.getPrettyDate(new Date(album.timestamp * 1000))

      page.cache.albums[album.id] = {
        name: album.name,
        download: album.download,
        public: album.public,
        description: album.description
      }

      const tr = document.createElement('tr')
      tr.innerHTML = `
        <th>${album.id}</th>
        <th>${album.name}</th>
        <th>${album.files}</th>
        <td>${album.prettyDate}</td>
        <td><a ${album.public ? `href="${albumUrl}"` : 'class="is-linethrough"'} target="_blank" rel="noopener">${albumUrl}</a></td>
        <td class="has-text-right" data-id="${album.id}">
          <a class="button is-small is-primary" title="Edit album" data-action="edit-album">
            <span class="icon is-small">
              <i class="icon-pencil"></i>
            </span>
          </a>
          <a class="button is-small is-info clipboard-js" title="Copy link to clipboard" ${album.public ? `data-clipboard-text="${albumUrl}"` : 'disabled'}>
            <span class="icon is-small">
              <i class="icon-clipboard"></i>
            </span>
          </a>
          <a class="button is-small is-warning" title="Download album" ${album.download ? `href="api/album/zip/${album.identifier}?v=${album.editedAt}"` : 'disabled'}>
            <span class="icon is-small">
              <i class="icon-download"></i>
            </span>
          </a>
          <a class="button is-small is-danger" title="Delete album" data-action="delete-album">
            <span class="icon is-small">
              <i class="icon-trash"></i>
            </span>
          </a>
        </td>
      `

      table.appendChild(tr)
    }
    page.fadeAndScroll()
    page.updateTrigger(params.trigger, 'active')
  }).catch(error => {
    console.error(error)
    page.updateTrigger(params.trigger)
    return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
  })
}

page.editAlbum = id => {
  const album = page.cache.albums[id]
  if (!album) return

  const div = document.createElement('div')
  div.innerHTML = `
    <div class="field">
      <div class="controls">
        <input id="swalName" class="input" type="text" placeholder="Name" value="${album.name || ''}">
      </div>
    </div>
    <div class="field">
      <div class="control">
        <textarea id="swalDescription" class="textarea" placeholder="Description" rows="2">${album.description || ''}</textarea>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <label class="checkbox">
          <input id="swalDownload" type="checkbox" ${album.download ? 'checked' : ''}>
          Enable download
        </label>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <label class="checkbox">
          <input id="swalPublic" type="checkbox" ${album.public ? 'checked' : ''}>
          Enable public link
        </label>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <label class="checkbox">
          <input id="swalRequestLink" type="checkbox">
          Request new public link
        </label>
      </div>
    </div>
  `

  swal({
    title: 'Edit album',
    icon: 'info',
    content: div,
    buttons: {
      cancel: true,
      confirm: {
        closeModal: false
      }
    }
  }).then(value => {
    if (!value) return

    axios.post('api/albums/edit', {
      id,
      name: document.querySelector('#swalName').value.trim(),
      description: document.querySelector('#swalDescription').value.trim(),
      download: document.querySelector('#swalDownload').checked,
      public: document.querySelector('#swalPublic').checked,
      requestLink: document.querySelector('#swalRequestLink').checked
    }).then(response => {
      if (!response) return

      if (response.data.success === false)
        if (response.data.description === 'No token provided') {
          return page.verifyToken(page.token)
        } else {
          return swal('An error occurred!', response.data.description, 'error')
        }

      if (response.data.identifier)
        swal('Success!', `Your album's new identifier is: ${response.data.identifier}.`, 'success')
      else if (response.data.name !== album.name)
        swal('Success!', `Your album was renamed to: ${response.data.name}.`, 'success')
      else
        swal('Success!', 'Your album was edited!', 'success')

      page.getAlbumsSidebar()
      page.getAlbums()
    }).catch(error => {
      console.error(error)
      return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
    })
  })
}

page.deleteAlbum = id => {
  swal({
    title: 'Are you sure?',
    text: 'This won\'t delete your uploads, only the album!',
    icon: 'warning',
    dangerMode: true,
    buttons: {
      cancel: true,
      confirm: {
        text: 'Yes, delete it!',
        closeModal: false
      },
      purge: {
        text: 'Umm, delete the uploads too please?',
        value: 'purge',
        className: 'swal-button--danger',
        closeModal: false
      }
    }
  }).then(proceed => {
    if (!proceed) return

    axios.post('api/albums/delete', {
      id,
      purge: proceed === 'purge'
    }).then(response => {
      if (response.data.success === false)
        if (response.data.description === 'No token provided') {
          return page.verifyToken(page.token)
        } else if (Array.isArray(response.data.failed) && response.data.failed.length) {
          return swal('An error occurred!', 'Unable to delete ', 'error')
        } else {
          return swal('An error occurred!', response.data.description, 'error')
        }

      swal('Deleted!', 'Your album has been deleted.', 'success')
      page.getAlbumsSidebar()
      page.getAlbums()
    }).catch(error => {
      console.error(error)
      return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
    })
  })
}

page.submitAlbum = element => {
  page.updateTrigger(element, 'loading')
  axios.post('api/albums', {
    name: document.querySelector('#albumName').value,
    description: document.querySelector('#albumDescription').value
  }).then(response => {
    if (!response) return

    page.updateTrigger(element)
    if (response.data.success === false)
      if (response.data.description === 'No token provided') {
        return page.verifyToken(page.token)
      } else {
        return swal('An error occurred!', response.data.description, 'error')
      }

    swal('Woohoo!', 'Album was created successfully.', 'success')
    page.getAlbumsSidebar()
    page.getAlbums()
  }).catch(error => {
    console.error(error)
    page.updateTrigger(element)
    return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
  })
}

page.getAlbumsSidebar = () => {
  axios.get('api/albums/sidebar').then(response => {
    if (!response) return

    if (response.data.success === false)
      if (response.data.description === 'No token provided') {
        return page.verifyToken(page.token)
      } else {
        return swal('An error occurred!', response.data.description, 'error')
      }

    const albumsContainer = document.querySelector('#albumsContainer')

    // Clear albums sidebar if necessary
    const oldAlbums = albumsContainer.querySelectorAll('li > a')
    if (oldAlbums.length) {
      for (let i = 0; i < oldAlbums.length; i++)
        page.menus.splice(page.menus.indexOf(oldAlbums[i]), 1)
      albumsContainer.innerHTML = ''
    }

    if (response.data.albums === undefined)
      return

    for (let i = 0; i < response.data.albums.length; i++) {
      const album = response.data.albums[i]
      const li = document.createElement('li')
      const a = document.createElement('a')
      a.id = album.id
      a.innerHTML = album.name
      a.className = 'is-relative'

      a.addEventListener('click', event => {
        page.getUploads({
          album: parseInt(event.currentTarget.id),
          trigger: event.currentTarget
        })
      })
      page.menus.push(a)

      li.appendChild(a)
      albumsContainer.appendChild(li)
    }
  }).catch(error => {
    console.error(error)
    return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
  })
}

page.changeToken = (params = {}) => {
  page.updateTrigger(params.trigger, 'loading')
  axios.get('api/tokens').then(response => {
    if (response.data.success === false)
      if (response.data.description === 'No token provided') {
        return page.verifyToken(page.token)
      } else {
        page.updateTrigger(params.trigger)
        return swal('An error occurred!', response.data.description, 'error')
      }

    page.dom.innerHTML = `
      <div class="field">
        <label class="label">Your current token:</label>
        <div class="field">
          <div class="control">
            <input id="token" readonly class="input" type="text" placeholder="Your token" value="${response.data.token}">
          </div>
        </div>
      </div>
      <div class="field">
        <div class="control">
          <a id="getNewToken" class="button is-info is-fullwidth">
            <span class="icon">
              <i class="icon-arrows-cw"></i>
            </span>
            <span>Request new token</span>
          </a>
        </div>
      </div>
    `
    page.fadeAndScroll()
    page.updateTrigger(params.trigger, 'active')

    document.querySelector('#getNewToken').addEventListener('click', event => {
      const trigger = event.currentTarget
      page.updateTrigger(trigger, 'loading')
      axios.post('api/tokens/change').then(response => {
        if (response.data.success === false)
          if (response.data.description === 'No token provided') {
            return page.verifyToken(page.token)
          } else {
            page.updateTrigger(trigger)
            return swal('An error occurred!', response.data.description, 'error')
          }

        page.updateTrigger(trigger)
        swal({
          title: 'Woohoo!',
          text: 'Your token was successfully changed.',
          icon: 'success'
        }).then(() => {
          axios.defaults.headers.common.token = response.data.token
          localStorage[lsKeys.token] = response.data.token
          page.token = response.data.token
          page.changeToken()
        })
      }).catch(error => {
        console.error(error)
        page.updateTrigger(trigger)
        return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
      })
    })
  }).catch(error => {
    console.error(error)
    page.updateTrigger(params.trigger)
    return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
  })
}

page.changePassword = (params = {}) => {
  page.dom.innerHTML = `
    <form class="prevent-default">
      <div class="field">
        <label class="label">New password:</label>
        <div class="control">
          <input id="password" class="input" type="password" min="6" max="64">
        </div>
      </div>
      <div class="field">
        <label class="label">Re-type new password:</label>
        <div class="control">
          <input id="passwordConfirm" class="input" type="password" min="6" max="64">
        </div>
      </div>
      <div class="field">
        <div class="control">
          <button type="submit" id="sendChangePassword" class="button is-info is-fullwidth">
            <span class="icon">
              <i class="icon-paper-plane"></i>
            </span>
            <span>Set new password</span>
          </button>
        </div>
      </div>
    </form>
  `
  page.fadeAndScroll()
  page.updateTrigger(params.trigger, 'active')

  document.querySelector('#sendChangePassword').addEventListener('click', event => {
    if (document.querySelector('#password').value === document.querySelector('#passwordConfirm').value)
      page.sendNewPassword(document.querySelector('#password').value, event.currentTarget)
    else
      swal({
        title: 'Password mismatch!',
        text: 'Your passwords do not match, please try again.',
        icon: 'error'
      })
  })
}

page.sendNewPassword = (pass, element) => {
  page.updateTrigger(element, 'loading')

  axios.post('api/password/change', { password: pass }).then(response => {
    page.updateTrigger(element)

    if (response.data.success === false)
      if (response.data.description === 'No token provided') {
        return page.verifyToken(page.token)
      } else {
        return swal('An error occurred!', response.data.description, 'error')
      }

    swal({
      title: 'Woohoo!',
      text: 'Your password was successfully changed.',
      icon: 'success'
    }).then(() => {
      page.changePassword()
    })
  }).catch(error => {
    console.error(error)
    page.updateTrigger(element)
    return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
  })
}

page.getUsers = (params = {}) => {
  page.updateTrigger(params.trigger, 'loading')

  if (params.pageNum === undefined)
    params.pageNum = 0

  if (!page.permissions.admin)
    return swal('An error occurred!', 'You can not do this!', 'error')

  const url = `api/users/${params.pageNum}`
  axios.get(url).then(response => {
    if (response.data.success === false)
      if (response.data.description === 'No token provided') {
        return page.verifyToken(page.token)
      } else {
        page.updateTrigger(params.trigger)
        return swal('An error occurred!', response.data.description, 'error')
      }

    if (params.pageNum && (response.data.users.length === 0)) {
      // Only remove loading class here, since beyond this the entire page will be replaced anyways
      page.updateTrigger(params.trigger)
      return swal('An error occurred!', `There are no more users to populate page ${params.pageNum + 1}.`, 'error')
    }

    page.currentView = 'users'
    page.cache.users = {}

    const pagination = page.paginate(response.data.count, 25, params.pageNum)

    const extraControls = `
      <div class="columns">
        <div class="column is-hidden-mobile"></div>
        <div class="column is-one-quarter">
          <form class="prevent-default">
            <div class="field has-addons">
              <div class="control is-expanded">
                <input id="jumpToPage" class="input is-small" type="number" value="${params.pageNum + 1}">
              </div>
              <div class="control">
                <button type="submit" class="button is-small is-info" title="Jump to page" data-action="jump-to-page">
                  <span class="icon">
                    <i class="icon-paper-plane"></i>
                  </span>
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    `

    const controls = `
      <div class="columns is-hidden">
        <div class="column is-hidden-mobile"></div>
        <div class="column has-text-right">
          <a class="button is-small is-info" title="Clear selection" data-action="clear-selection">
            <span class="icon">
              <i class="icon-cancel"></i>
            </span>
          </a>
          <a class="button is-small is-warning" title="Bulk disable (WIP)" data-action="bulk-disable-users" disabled>
            <span class="icon">
              <i class="icon-hammer"></i>
            </span>
            <span>Bulk disable</span>
          </a>
          <a class="button is-small is-danger" title="Bulk delete (WIP)" data-action="bulk-delete-users" disabled>
            <span class="icon">
              <i class="icon-trash"></i>
            </span>
            <span>Bulk delete</span>
          </a>
        </div>
      </div>
    `

    // Whether there are any unselected items
    let unselected = false

    page.dom.innerHTML = `
      ${pagination}
      ${extraControls}
      ${controls}
      <div class="table-container">
        <table class="table is-narrow is-fullwidth is-hoverable">
          <thead>
            <tr>
              <th class="is-hidden"><input id="selectAll" class="checkbox" type="checkbox" title="Select all" data-action="select-all"></th>
              <th>ID</th>
              <th>Username</th>
              <th>Uploads</th>
              <th>Usage</th>
              <th>Group</th>
              <th></th>
            </tr>
          </thead>
          <tbody id="table">
          </tbody>
        </table>
      </div>
      <hr>
      ${pagination}
    `

    const table = document.querySelector('#table')

    for (let i = 0; i < response.data.users.length; i++) {
      const user = response.data.users[i]
      const selected = page.selected.users.includes(user.id)
      if (!selected) unselected = true

      let displayGroup = null
      const groups = Object.keys(user.groups)
      for (let i = 0; i < groups.length; i++) {
        if (!user.groups[groups[i]]) break
        displayGroup = groups[i]
      }

      // Server-side explicitly expects either of these two values to consider a user as disabled
      const enabled = user.enabled !== false && user.enabled !== 0
      page.cache.users[user.id] = {
        username: user.username,
        groups: user.groups,
        enabled,
        displayGroup
      }

      const tr = document.createElement('tr')
      tr.dataset.id = user.id
      tr.innerHTML = `
        <td class="controls is-hidden"><input type="checkbox" class="checkbox" title="Select" data-action="select"${selected ? ' checked' : ''}></td>
        <th>${user.id}</th>
        <th${enabled ? '' : ' class="is-linethrough"'}>${user.username}</td>
        <th>${user.uploads}</th>
        <td>${page.getPrettyBytes(user.usage)}</td>
        <td>${displayGroup}</td>
        <td class="controls has-text-right">
          <a class="button is-small is-primary" title="Edit user" data-action="edit-user">
            <span class="icon">
              <i class="icon-pencil"></i>
            </span>
          </a>
          <a class="button is-small is-info" title="${user.uploads ? 'View uploads' : 'User doesn\'t have uploads'}" data-action="view-user-uploads" ${user.uploads ? '' : 'disabled'}>
            <span class="icon">
              <i class="icon-docs"></i>
            </span>
          </a>
          <a class="button is-small is-warning" title="${enabled ? 'Disable user' : 'User is disabled'}" data-action="disable-user" ${enabled ? '' : 'disabled'}>
            <span class="icon">
              <i class="icon-hammer"></i>
            </span>
          </a>
          <a class="button is-small is-danger is-hidden" title="Delete user (WIP)" data-action="delete-user" disabled>
            <span class="icon">
              <i class="icon-trash"></i>
            </span>
          </a>
        </td>
      `

      table.appendChild(tr)
      page.checkboxes.users = table.querySelectorAll('.checkbox[data-action="select"]')
    }

    const selectAll = document.querySelector('#selectAll')
    if (selectAll && !unselected) {
      selectAll.checked = true
      selectAll.title = 'Unselect all'
    }

    page.fadeAndScroll()
    page.updateTrigger(params.trigger, 'active')

    page.views.users.pageNum = response.data.users.length ? params.pageNum : 0
  }).catch(error => {
    page.updateTrigger(params.trigger)
    console.error(error)
    return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
  })
}

page.editUser = id => {
  const user = page.cache.users[id]
  if (!user) return

  const groupOptions = Object.keys(page.permissions).map((g, i, a) => {
    const selected = g === user.displayGroup
    const disabled = !(a[i + 1] && page.permissions[a[i + 1]])
    return `<option value="${g}"${selected ? ' selected' : ''}${disabled ? ' disabled' : ''}>${g}</option>`
  }).join('\n')

  const div = document.createElement('div')
  div.innerHTML = `
    <div class="field">
      <label class="label">Username</label>
      <div class="controls">
        <input id="swalUsername" class="input" type="text" value="${user.username || ''}">
      </div>
    </div>
    <div class="field">
      <label class="label">User group</label>
      <div class="control">
        <div class="select is-fullwidth">
          <select id="swalGroup">
            ${groupOptions}
          </select>
        </div>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <label class="checkbox">
          <input id="swalEnabled" type="checkbox" ${user.enabled ? 'checked' : ''}>
          Enabled
        </label>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <label class="checkbox">
          <input id="swalResetPassword" type="checkbox">
          Reset password
        </label>
      </div>
    </div>
  `

  swal({
    title: 'Edit user',
    icon: 'info',
    content: div,
    buttons: {
      cancel: true,
      confirm: {
        closeModal: false
      }
    }
  }).then(proceed => {
    if (!proceed) return

    axios.post('api/users/edit', {
      id,
      username: document.querySelector('#swalUsername').value,
      group: document.querySelector('#swalGroup').value,
      enabled: document.querySelector('#swalEnabled').checked,
      resetPassword: document.querySelector('#swalResetPassword').checked
    }).then(response => {
      if (!response) return

      if (response.data.success === false)
        if (response.data.description === 'No token provided') {
          return page.verifyToken(page.token)
        } else {
          return swal('An error occurred!', response.data.description, 'error')
        }

      if (response.data.password) {
        const div = document.createElement('div')
        div.innerHTML = `
          <p><b>${user.username}</b>'s new password is:</p>
          <p><code>${response.data.password}</code></p>
        `
        swal({
          title: 'Success!',
          icon: 'success',
          content: div
        })
      } else if (response.data.update && response.data.update.username !== user.username) {
        swal('Success!', `${user.username} was renamed into: ${response.data.update.name}.`, 'success')
      } else {
        swal('Success!', 'The user was edited!', 'success')
      }

      page.getUsers(page.views.users)
    }).catch(error => {
      console.error(error)
      return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
    })
  })
}

page.disableUser = id => {
  const user = page.cache.users[id]
  if (!user || !user.enabled) return

  const content = document.createElement('div')
  content.innerHTML = `You will be disabling a user with the username <b>${page.cache.users[id].username}</b>.`

  swal({
    title: 'Are you sure?',
    icon: 'warning',
    content,
    dangerMode: true,
    buttons: {
      cancel: true,
      confirm: {
        text: 'Yes, disable them!',
        closeModal: false
      }
    }
  }).then(proceed => {
    if (!proceed) return

    axios.post('api/users/disable', { id }).then(response => {
      if (!response) return

      if (response.data.success === false)
        if (response.data.description === 'No token provided')
          return page.verifyToken(page.token)
        else
          return swal('An error occurred!', response.data.description, 'error')

      swal('Success!', 'The user has been disabled.', 'success')
      page.getUsers(page.views.users)
    }).catch(error => {
      console.error(error)
      return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error')
    })
  })
}

// Roughly based on https://github.com/mayuska/pagination/blob/master/index.js
page.paginate = (totalItems, itemsPerPage, currentPage) => {
  currentPage = currentPage + 1
  const step = 3
  const numPages = Math.ceil(totalItems / itemsPerPage)

  let template = ''
  const elementsToShow = step * 2
  const add = {
    pageNum (start, end) {
      for (let i = start; i <= end; ++i)
        template += `<li><a class="button pagination-link ${i === currentPage ? ' is-current' : ''}" aria-label="Goto page ${i}" data-action="page-goto" data-goto="${i - 1}">${i}</a></li>`
    },
    startDots () {
      template += `
        <li><a class="button pagination-link" aria-label="Goto page 1" data-action="page-goto" data-goto="0">1</a></li>
        <li data-action="page-ellipsis"><span class="pagination-ellipsis">&hellip;</span></li>
      `
    },
    endDots () {
      template += `
        <li data-action="page-ellipsis"><span class="pagination-ellipsis">&hellip;</span></li>
        <li><a class="button pagination-link" aria-label="Goto page ${numPages}" data-action="page-goto" data-goto="${numPages - 1}">${numPages}</a></li>
      `
    }
  }

  if (elementsToShow + 1 >= numPages) {
    add.pageNum(1, numPages)
  } else if (currentPage < elementsToShow) {
    add.pageNum(1, elementsToShow)
    add.endDots()
  } else if (currentPage > numPages - elementsToShow + 1) {
    add.startDots()
    add.pageNum(numPages - elementsToShow + 1, numPages)
  } else {
    add.startDots()
    add.pageNum(currentPage - step + 1, currentPage + step - 1)
    add.endDots()
  }

  return `
    <nav class="pagination is-centered is-small">
      <a class="button pagination-previous" data-action="page-prev">Previous</a>
      <a class="button pagination-next" data-action="page-next">Next page</a>
      <ul class="pagination-list">${template}</ul>
    </nav>
  `
}

page.getStatistics = (params = {}) => {
  if (!page.permissions.admin)
    return swal('An error occurred!', 'You can not do this!', 'error')

  page.updateTrigger(params.trigger, 'loading')
  const url = 'api/stats'
  axios.get(url).then(response => {
    if (response.data.success === false)
      if (response.data.description === 'No token provided') {
        return page.verifyToken(page.token)
      } else {
        page.updateTrigger(params.trigger)
        return swal('An error occurred!', response.data.description, 'error')
      }

    let content = ''
    const keys = Object.keys(response.data.stats)
    for (let i = 0; i < keys.length; i++) {
      let rows = ''
      if (!response.data.stats[keys[i]])
        rows += `
          <tr>
            <td>Generating, please try again later\u2026</td>
            <td></td>
          </tr>
        `
      else
        try {
          const types = response.data.stats[keys[i]]._types || {}
          const valKeys = Object.keys(response.data.stats[keys[i]])
          for (let j = 0; j < valKeys.length; j++) {
            // Skip keys that starts with an underscore
            if (/^_/.test(valKeys[j]))
              continue

            const value = response.data.stats[keys[i]][valKeys[j]]
            let parsed = value

            // Parse values with some preset formatting
            if ((types.number || []).includes(valKeys[j]))
              parsed = value.toLocaleString()
            if ((types.byte || []).includes(valKeys[j]))
              parsed = page.getPrettyBytes(value)
            if ((types.byteUsage || []).includes(valKeys[j]))
              parsed = `${page.getPrettyBytes(value.used)} / ${page.getPrettyBytes(value.total)} (${Math.round(value.used / value.total * 100)}%)`

            const string = valKeys[j]
              .replace(/([A-Z])/g, ' $1')
              .toUpperCase()
            rows += `
              <tr>
                <th>${string}</th>
                <td>${parsed}</td>
              </tr>
            `
          }
        } catch (error) {
          console.error(error)
          rows = `
              <tr>
                <td>Error parsing response. Try again?</td>
                <td></td>
              </tr>
            `
        }

      content += `
        <div class="table-container">
          <table id="statistics" class="table is-fullwidth is-hoverable">
            <thead>
              <tr>
                <th>${keys[i].toUpperCase()}</th>
                <td></td>
              </tr>
            </thead>
            <tbody>
              ${rows}
            </tbody>
          </table>
        </div>
      `
    }

    page.dom.innerHTML = content
    page.fadeAndScroll()
    page.updateTrigger(params.trigger, 'active')
  }).catch(error => {
    console.error(error)
    page.updateTrigger(params.trigger)
    const description = error.response.data && error.response.data.description
      ? error.response.data && error.response.data.description
      : 'There was an error with the request, please check the console for more information.'
    return swal('An error occurred!', description, 'error')
  })
}

window.onload = () => {
  // eslint-disable-next-line compat/compat
  if (typeof Object.assign !== 'function')
    // Must be writable: true, enumerable: false, configurable: true
    Object.defineProperty(Object, 'assign', {
      value: function assign (target, varArgs) { // .length of function is 2
        'use strict'
        if (target === null || target === undefined)
          throw new TypeError('Cannot convert undefined or null to object')
        const to = Object(target)
        for (let i = 1; i < arguments.length; i++) {
          const nextSource = arguments[i]
          if (nextSource !== null && nextSource !== undefined)
            for (const nextKey in nextSource)
              // Avoid bugs when hasOwnProperty is shadowed
              if (Object.prototype.hasOwnProperty.call(nextSource, nextKey))
                to[nextKey] = nextSource[nextKey]
        }
        return to
      },
      writable: true,
      configurable: true
    })

  // Add 'no-touch' class to non-touch devices
  if (!('ontouchstart' in document.documentElement))
    document.documentElement.classList.add('no-touch')

  const selectedKeys = ['uploads', 'uploadsAll', 'users']
  for (let i = 0; i < selectedKeys.length; i++) {
    const ls = localStorage[lsKeys.selected[selectedKeys[i]]]
    if (ls) page.selected[selectedKeys[i]] = JSON.parse(ls)
  }

  page.preparePage()

  page.clipboardJS = new ClipboardJS('.clipboard-js')

  page.clipboardJS.on('success', () => {
    return swal('Copied!', 'The link has been copied to clipboard.', 'success')
  })

  page.clipboardJS.on('error', event => {
    console.error(event)
    return swal('An error occurred!', 'There was an error when trying to copy the link to clipboard, please check the console for more information.', 'error')
  })

  page.lazyLoad = new LazyLoad()
}