Primitive password protection

It is possible to hadd extremely primitive password protection to OliveTin. This is not at all secure to someone that knows the absolute basics of "view source", but if you just want to keep family members away or add a very primitive layer of "security", there are some members of the community that have found this useful.

This assumes you are running OliveTin as a systemd service, if you are running in a container, jump on the discord server for help how to do this.

  1. Open /var/www/olivetin/index.html in a text editor

  2. This will be a very long line of code all in one line. Scroll all the way to the end and find that code that says </body>. Just before that code statement, add this code, save and close the file.

    <script src = "custom-webui/password.js"></script>

    You will need to this every time you upgrade OliveTin.

  3. Create the password.js using the code below, at /etc/OliveTin/custom-webui/password.js.

password.js
const myPassword = 'sekrit'

const domMain = document.getElementsByTagName('main')[0]
domMain.style.display = 'none'

const domPassword = document.createElement('input')
const domLogin = document.createElement('button')

function checkPassword () {
  if (domPassword.value === myPassword) {
    domMain.style.display = 'block'
    domPassword.remove()
    domLogin.remove()
  } else {
    window.alert('Incorrect password. Please try again.')
  }
}

function setupPasswordForm () {
  domPassword.setAttribute('type', 'password')
  domPassword.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      checkPassword()
    }
  })

  domLogin.innerText = 'Login'
  domLogin.onclick = checkPassword

  const domHeader = document.querySelector('header')
  domHeader.appendChild(domPassword)
  domHeader.appendChild(domLogin)
}

document.addEventListener('DOMContentLoaded', setupPasswordForm)