index.html

<!DOCTYPE html>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">
<title>
BrowserID Relying Party
</title>
<style type="text/css">

body { margin: auto; font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; }
a:link, a:visited { font-style: italic; text-decoration: none; color: #008; }
a:hover { border-bottom: 2px solid black ; }
.title { font-size: 2em; font-weight: bold; text-align: center; margin: 1.5em auto 1.5em auto; }
.intro { font-size: 1.2em;  }
.specify, .session { font-size: 1.1em; padding-top: 2em; }
body div { width: 600px; margin: auto; }

pre {
  font-family: 'lucida console', monaco, 'andale mono', 'bitstream vera sans mono', consolas, monospace;
  border: 3px solid #666;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: .5em;
  margin: .5em;
  color: #ccc;
  background-color: #333;
/*  white-space: pre;*/
  font-size: .9em;
  word-wrap: break-word;
}

.specify ul { padding-left: 0px; }
.specify li { list-style: none; }

@media screen and (max-width: 640px) {
  .intro, .output, .step {
    width: 90%;
  }
}

</style>
</head>
<body>
<div class="title">
  BrowserID Test Relying Party
</div>

<div class="intro">
  This is a RP for testing, it allows you to drive the <tt>navigator.id.get()</tt> call manually
  to locally test BrowserID.
</div>

<div class="specify">
  <p><b>What flavor of assertion would you like?</b></p>
  <ul>
    <li>
      <input type="checkbox" id="privacy">
      <label for="privacy">Supply a privacy policy</label>
    </li><li>
      <input type="checkbox" id="tos">
      <label for="tos">Supply a ToS</label>
    </li><li>
      <input type="text" id="requiredEmail" width="80">
      <label for="requiredEmail">Require a specific email</label><br />
    </li>
  </ul>
    <button class="assertion">Get an assertion</button>
    <button class="logout">logout</button>
</div>

<div class="session">
  <p><b>Care to simulate a session?</b></p>
  <p>If you enter an email address or 'null' here, upon reload this value will
     be passed to .watch() as the first parameter.  This lets you test things like
     assertion generation suppression when the site and browser agree on who is logged in.
  </p>
  <input type="text" id="loggedInUser" width="80">
  <button class="update_session">Update "session"</button>
</div>

<div class="loginEvents">
  <h2>logins</h2>
  <pre> ... </pre>
</div>

<div class="logoutEvents">
  <h2>logouts</h2>
  <pre> ... </pre>
</div>

<div class="readiness">
  <h2>readiness</h2>
  <pre> ... </pre>
</div>

</body>

<script src="jquery-min.js"></script>
<script src="https://browserid.org/include.js"></script>
<script>

try {
  var storage = localStorage;
}
catch(e) {
  // Fx with cookies disabled with blow up when trying to access localStorage.
  storage = {};
}


function loggit() {
  try {
    console.log.apply(console, arguments);
  } catch(e) {}
}

var serial = 1;

// a function to check an assertion against the server
function checkAssertion(assertion) {
  $.ajax({
    url: "/process_assertion",
    type: "post",
    dataType: "json",
    data: {
      assertion: assertion,
      audience: window.location.protocol + "//" + window.location.host
    },
    success: function(data, textStatus, jqXHR) {
      var old = $(".loginEvents > pre").text() + "\n";
      $(".loginEvents > pre").text(old + JSON.stringify(data, null, 4));
    },
    error: function(jqXHR, textStatus, errorThrown) {
      var resp = jqXHR.responseText ? JSON.parse(jqXHR.responseText) : errorThrown;
      $(".loginEvents > pre").text(resp);
    }
  });
};

navigator.id.experimental.watch({
  email: (storage.loggedInUser === 'null') ? null : storage.loggedInUser,
  onready: function () {
    loggit("onready");
    var txt = serial++ + ' navigator.id ready at ' + (new Date).toString();
    $(".readiness > pre").text(txt);

  },
  onlogin: function (assertion) {
    loggit("onlogin");
    var txt = serial++ + ' got assertion at ' + (new Date).toString();
    $(".loginEvents > pre").text(txt);

    checkAssertion(assertion);
  },
  onlogout: function () {
    loggit("onlogout");
    var txt = serial++ + ' logout callback invoked at ' + (new Date).toString();
    $(".logoutEvents > pre").text(txt);
  }
});

$(document).ready(function() {
  $(".specify button.assertion").click(function() {
    $("pre").text("... waiting ...");

    var requiredEmail = $.trim($('#requiredEmail').val());
    if (!requiredEmail.length) requiredEmail = undefined;

    $(".specify button.assertion").attr('disabled', 'true');

    navigator.id.experimental.request({
      privacyURL: $('#privacy').attr('checked') ? "/privacy.html" : undefined,
      tosURL: $('#tos').attr('checked') ? "/TOS.html" : undefined,
      requiredEmail: requiredEmail,
      onclose: function() {
        loggit("onclose");
        $(".specify button.assertion").removeAttr('disabled');
      }
    });
  });

  $(".specify button.logout").click(navigator.id.logout);

  $(".session button.update_session").click(function() {
    storage.loggedInUser = $.trim($('#loggedInUser').val());
    $(".session input").fadeOut(100).fadeIn(350);
  });
  $('#loggedInUser').val(storage.loggedInUser ? storage.loggedInUser : "");
});

</script>

</html>