users/sessionHandling.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>Session handling</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">
      .session-form-group {
        flex: 0 1 260px;
        margin: 20px;
        margin-top: 0;
      }
      .session-display {
        margin-bottom: 10px;
      }
      .session-display-user-id {
        color: #666;
        border: 1px solid #888;
        border-radius: 5px;
        padding: 0px 10px 5px 10px;
        background: #fff;
        word-break: break-all;
      }
    </style>
  </head>
<body>
  <header></header>
  <main>
    <section>
      <div class="about">
        <h2>Session handling example</h2>
        This example shows how to save and load login sessions with <a href="https://get.cct.ericsson.net/latest/docs/reference/Client.html#auth__anchor"><code>cct.Client.auth</code></a> and <a href="https://get.cct.ericsson.net/latest/docs/reference/Client.html#toc5__anchor"><code>cct.Client.authInfo</code></a>. Try clicking "Create new session", then "Save session", and then reload the page.
      </div>
    </section>
    <section>
      <div class="session-form-group">
        <div class="session-display">
          <h3>Current session</h3>
          <div id='current-session' class="session-display-user-id">none</div>
        </div>
        <form id="create-session-form">
          <button type="submit" name="submit">Create new session</button>
        </form>
        <form id="save-session-form">
          <button type="submit" name="submit" disabled>Save session</button>
        </form>
        <form id="logout-session-form">
          <button type="submit" name="submit" disabled>Logout session</button>
        </form>
      </div>
      <div class="session-form-group">
        <div class="session-display">
          <h3>Stored session</h3>
          <div id='available-session' class="session-display-user-id">none</div>
        </div>
        <form id="restore-session-form">
          <button type="submit" name="submit" disabled>Restore session</button>
        </form>
        <form id="clear-session-form">
          <button type="submit" name="submit" disabled>Clear session</button>
        </form>
      </div>
    </section>
    <footer></footer>
  </main>
<script type="text/javascript">
'use strict'

cct.log.setLogLevel(cct.log.ALL)
cct.log.color = true

var STORAGE = window.sessionStorage
var STORAGE_KEY = 'session-handling-example-session'

var client = new cct.Client()
var availableSession = null

// Session save / load

function loadSessionFromStorage() {
  var jsonStr = STORAGE.getItem(STORAGE_KEY)
  if (!jsonStr) {
    return null
  }
  try {
    return JSON.parse(jsonStr)
  } catch (error) {
    cct.log.error('example', 'Failed to load session: ' + error.message)
    return null
  }
}

function saveSessionToStorage(authInfo) {
  var jsonStr = JSON.stringify(authInfo)
  STORAGE.setItem(STORAGE_KEY, jsonStr)
}

function clearSessionStorage() {
  STORAGE.removeItem(STORAGE_KEY)
}

// GUI update functions

function setCurrentSession(authInfo) {
  var saveSessionForm = document.getElementById('save-session-form')
  var logoutSessionForm = document.getElementById('logout-session-form')
  var currentSessionLabel = document.getElementById('current-session')

  if (authInfo) {
    saveSessionForm.elements.submit.disabled = false
    logoutSessionForm.elements.submit.disabled = false
    currentSessionLabel.textContent = authInfo.userId
  } else {
    saveSessionForm.elements.submit.disabled = true
    logoutSessionForm.elements.submit.disabled = true
    currentSessionLabel.textContent = 'none'
  }
}

function setStoredSession(authInfo) {
  var restoreSessionForm = document.getElementById('restore-session-form')
  var clearSessionForm = document.getElementById('clear-session-form')
  var availableSessionLabel = document.getElementById('available-session')

  availableSession = authInfo

  if (authInfo) {
    restoreSessionForm.elements.submit.disabled = false
    clearSessionForm.elements.submit.disabled = false
    availableSessionLabel.textContent = authInfo.userId
  } else {
    restoreSessionForm.elements.submit.disabled = true
    clearSessionForm.elements.submit.disabled = true
    availableSessionLabel.textContent = 'none'
  }
}

// Event handlers

function createSession(event) {
  event.preventDefault()

  cct.log.info('example', 'Creating anonymous user')

  cct.Auth.anonymous({serverUrl: getCctAddress()})
    .then(client.auth)
    .then(function (client) {
      setCurrentSession(client.authInfo)
      cct.log.info('example', 'Created and saved session')
    })
}

function saveSession(event) {
  event.preventDefault()

  saveSessionToStorage(client.authInfo)
  setStoredSession(client.authInfo)
  cct.log.info('example', 'Saved current session')
}

function logoutSession(event) {
  event.preventDefault()

  client.logout()
  setCurrentSession(null)
  cct.log.info('example', 'Logged out of current session')
}

function restoreSession(event) {
  event.preventDefault()

  client.auth(availableSession)
    .then(function (client) {
      setCurrentSession(client.authInfo)
      cct.log.info('example', 'Restored session')
    })
}

function clearSession(event) {
  event.preventDefault()
  setStoredSession(null)
  clearSessionStorage()
  cct.log.info('example', 'Cleared the stored session')
}

window.onload = function () {
  var createSessionForm = document.getElementById('create-session-form')
  var saveSessionForm = document.getElementById('save-session-form')
  var logoutSessionForm = document.getElementById('logout-session-form')
  var restoreSessionForm = document.getElementById('restore-session-form')
  var clearSessionForm = document.getElementById('clear-session-form')

  createSessionForm.onsubmit = createSession
  saveSessionForm.onsubmit = saveSession
  logoutSessionForm.onsubmit = logoutSession
  restoreSessionForm.onsubmit = restoreSession
  clearSessionForm.onsubmit = clearSession

  var loadedSession = loadSessionFromStorage()
  setStoredSession(loadedSession)
}
  </script>
</body>
</html>