users/pinSession.html

<!--
 * Copyright (C) 2016 Ericsson AB. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->

<!DOCTYPE html>
<html>
<head>
  <title>Pin Session Setup</title>
  <link rel="stylesheet" type="text/css" href="../resources/main.css">
  <link rel="icon" href="../resources/favicon.ico">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.2.1/es6-promise.min.js"></script>
  <script type="text/javascript" src="https://get.cct.ericsson.net/latest/cct.js"></script>
  <script type="text/javascript" src="../exampleUtils.js"></script>
  <style type="text/css">
    #error-message {
      color: #f00;
      font-size: 1.2em;
    }
    label {
      color: #555;
      margin-bottom: 3px;
    }
    .pin-form {
      flex: 0 1 260px;
      max-width: 260px;
      display: flex;
      flex-flow: column nowrap;
      align-items: stretch;
    }
    .pin-form-row {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      margin: 5px 0;
    }
    #join-meeting {
      flex: 1;
    }
  </style>
</head>
<body>
  <header></header>
  <main>
    <section>
      <div class="about">
        <h2>Pin Session Setup</h2>
        A simple session setup example using pin codes and guest access via <a href="https://get.cct.ericsson.net/latest/docs/reference/Auth.html#-static-guest__anchor"><code>cct.Auth.guest</code></a>.
      </div>
    </section>
    <section class="margins">
      <div id="error-message" hidden></div>
      <div id="join-meeting">
        <form id="join-room-form" class="pin-form">
          <div class="pin-form-row">
            <label>Enter PIN</label>
            <input name="pin" type="number" required>
          </div>
          <div class="pin-form-row">
            <label></label>
            <button type="submit">Join room</button>
          </div>
        </form>
        <form id="create-room-form" class="pin-form">
          <div class="pin-form-row">
            <label>OR</label>
          </div>
          <div class="pin-form-row">
            <label></label>
            <button type="submit">Create room with random PIN</button>
          </div>
        </form>
      </div>
      <div id="inside-meeting" hidden>
        <h1>In room with pin <span id="room-pin-label">345</span></h1>
        Other users in the room:
        <ul id="member-list"></ul>
      </div>
    </section>
    <footer></footer>
  </main>
  <script type="text/javascript">
'use strict'

cct.log.setLogLevel(cct.log.ALL)
cct.log.setLogLevel('events', cct.log.NONE)
cct.log.setLogLevel('own-events', cct.log.NONE)
cct.log.color = true

var el = {
  errorMessage: document.getElementById('error-message'),
  joinMeeting: document.getElementById('join-meeting'),
  insideMeeting: document.getElementById('inside-meeting'),

  createRoomForm: document.getElementById('create-room-form'),
  joinRoomForm: document.getElementById('join-room-form'),
  roomPinLabel: document.getElementById('room-pin-label'),
  memberList: document.getElementById('member-list'),
}

var MAX_CREATION_ATTEMPTS = 5
var DATE_CODE_OFFSET = 1000 * 3600

var client = new cct.Client()
cct.Auth.anonymous({serverUrl: getCctAddress()})
  .then(client.auth)
  .then(connectControls)
  .catch(handleError)

function connectControls() {
  cct.log.info('example', 'Authenticated as anonymous user')

  el.createRoomForm.addEventListener('submit', function (event) {
    event.preventDefault()

    createNewRoom()
      .then(enterRoom)
      .catch(handleError)
  })

  el.joinRoomForm.addEventListener('submit', function (event) {
    event.preventDefault()

    var pin = event.target.elements.pin.value
    findRoomByPin(pin)
      .then(enterRoom)
      .catch(handleError)
  })
}

// When creating or joining a room, a date code is added to the pin to create the alias.
// The date code is a YYMMDDHH string, and is calculated from UTC time.
// It will change once an hour, ensuring that the available PIN codes do not run out, unless
// they are all used up within the date code offset.
// When looking up a room by pin, both the current, previous, and next date codes are checked,
// since it might take time to transmit the PIN, and client clock may differ.
// This means that PIN codes valid for at least an hour, and at most two hours, assuming the
// client clocks are in sync.
function createNewRoom(attemptNumber) {
  if (attemptNumber > MAX_CREATION_ATTEMPTS) {
    throw new Error('Too many attempts with duplicate PIN, giving up')
  }
  el.joinMeeting.hidden = true
  var pin = generatePin(6)
  var dateCode = getDateCodeFromDate(new Date)
  var alias = formatAlias(pin, dateCode)

  cct.log.info('example', 'Creating room with random PIN: ' + pin + ', and date code: ' + dateCode)
  return client.createRoom({
    type: 'test-room',
    name: pin,
    alias: alias,
    joinRule: 'open',
    guestAccessRule: 'open',
  }).catch(function (error) {
    if (error.body.error === 'Room alias already taken') {
      cct.log.info('example', 'Pin already taken, retrying')
      return createNewRoom((attemptNumber || 1) + 1)
    } else {
      throw error
    }
  })
}

function findRoomByPin(pin) {
  el.joinMeeting.hidden = true
  cct.log.info('example', 'joining room with pin ' + pin)
  var now = new Date()

  // Always try current date code first
  return tryJoiningPinWithDate(pin, now)
    .then(function (room) {
      if (room) {
        return room
      } else {
        return Promise.all([
          // try previous and next date codes
          tryJoiningPinWithDate(pin, new Date(now.getTime() - DATE_CODE_OFFSET)),
          tryJoiningPinWithDate(pin, new Date(now.getTime() + DATE_CODE_OFFSET)),
        ]).then(function (results) {
          return results[0] || results[1]
        })
      }
    })
    .then(function (room) {
      if (room) {
        return room.join()
      } else {
        throw new Error('Could not find any room with pin ' + pin)
      }
    })
}

// Will resolve to null if the room is not found
function tryJoiningPinWithDate(pin, date) {
  var dateCode = getDateCodeFromDate(date)
  var alias = formatAlias(pin, dateCode)
  return client.fetchRoomByAlias(alias)
    .catch(function (error) {
      if (error.status === 404) {
        return null
      } else {
        throw error
      }
    })
}

// At this point we have joined the room and can start communicating. In this example we
// simply just list the other users in the room.
function enterRoom(room) {
  el.insideMeeting.hidden = false

  el.roomPinLabel.textContent = room.name

  render(room)
  room.on('otherMembers', render)

  function render() {
    el.memberList.innerHTML = ''
    room.otherMembers.forEach(function (user) {
      var item = document.createElement('li')
      item.textContent = user.id
      el.memberList.appendChild(item)
    })
  }
}

function generatePin(length) {
  return Math.random().toString(10).slice(2, 2 + length)
}

// Returns a date code with the format YYMMDDHH, left-padding 1-digit values with '0'
function getDateCodeFromDate(date) {
  return [
    date.getUTCFullYear().toString().slice(2),
    ('0' + date.getUTCMonth()).slice(-2),
    ('0' + date.getUTCDate()).slice(-2),
    ('0' + date.getUTCHours()).slice(-2),
  ].join('')
}

function formatAlias(pin, dateCode) {
  return pin + '_' + dateCode
}

function handleError(error) {
  cct.log.error('example', '' + error)
  if (error instanceof Error || typeof(error) === 'string') {
    el.errorMessage.textContent = '' + error
  } else {
    el.errorMessage.textContent = '' + JSON.stringify(error)
  }
  el.errorMessage.hidden = false
}

</script>
</body>
</html>