main.js

// flespi login example.
//
// The login is done in a popup window on https://login.flespi.io. After a
// successful sign-in the popup posts the token back to window.opener:
//   'FlespiLogin|token:{"token": "...", "region": {...}}'
// where region is the flespi region object (rest, mqtt-ws, ...).
//
// Two entry points:
//   https://login.flespi.io/#/login           - flespi account login
//   https://login.flespi.io/#/realm/<realm>   - login of a realm user, where
//                                               <realm> is the realm public id
// A realm user gets a token issued by the realm, with the ACL configured there.
var LOGIN_ORIGIN = 'https://login.flespi.io'
var loginPopup = null

function openUrl (url, title) {
  title = title || 'flespi-login'
  var w = 500, h = 650
  var left = window.screenX + (window.outerWidth - w) / 2
  var top = window.screenY + (window.outerHeight - h) / 2
  var newWindow = window.open(url, title, 'toolbar=no,location=no,status=yes,resizable=yes,scrollbars=yes,width=' + w + ',height=' + h + ',top=' + top + ',left=' + left)
  if (!newWindow) {
    alert('Please allow popups for this page to log in')
    return null
  }
  newWindow.focus()
  return newWindow
}

// flespi account login
function login () {
  loginPopup = openUrl(LOGIN_ORIGIN + '/#/login')
}

// realm user login
function loginRealm () {
  var input = document.querySelector('#realm')
  var realm = input.value.trim()
  if (!realm) {
    input.focus()
    return
  }
  loginPopup = openUrl(LOGIN_ORIGIN + '/#/realm/' + encodeURIComponent(realm))
}

function onLogin (data) {
  if (loginPopup && !loginPopup.closed) {
    loginPopup.close()
  }
  // token may come with or without the "FlespiToken " prefix
  var token = data.token.replace(/^FlespiToken /, '')
  var region = data.region || {}

  var div = document.createElement('div')
  div.className = 'token'
  div.textContent = 'FlespiToken ' + token + (region.rest ? '  (' + region.rest + ')' : '')
  document.querySelector('#tokens').appendChild(div)

  // use the token: REST calls go to region.rest, MQTT over WebSocket to region['mqtt-ws']
  fetch((region.rest || 'https://flespi.io') + '/auth/info', {
    headers: { Authorization: 'FlespiToken ' + token }
  })
    .then(function (response) { return response.json() })
    .then(function (info) {
      var pre = document.createElement('pre')
      pre.textContent = JSON.stringify(info.result && info.result[0], null, 2)
      div.appendChild(pre)
    })
}

window.addEventListener('message', function (event) {
  // accept the token only from the flespi login origin
  if (event.origin === LOGIN_ORIGIN && typeof event.data === 'string' && event.data.indexOf('FlespiLogin|token:') === 0) {
    onLogin(JSON.parse(event.data.replace('FlespiLogin|token:', '')))
  }
})

// realm public id can be preset with the url parameter: index.html?realm=<realm public id>
window.addEventListener('DOMContentLoaded', function () {
  var realm = new URLSearchParams(window.location.search).get('realm')
  if (realm) {
    document.querySelector('#realm').value = realm
  }
})