diff --git a/example/index.html b/example/index.html
index cb3438f555eab89ef1b1aabc08e5b836543d77ac..49546b47e357d2279a5bf89ccc2387090e9a3466 100644
--- a/example/index.html
+++ b/example/index.html
@@ -6,18 +6,16 @@
<title>
BrowserID Relying Party
</title>
-<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<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 ; }
-.number { font-family: 'Permanent Marker', arial, serif; font-size: 4em; float: left; padding: 0; margin: 0; vertical-align: top; width: 1.3em}
.title { font-size: 2em; font-weight: bold; text-align: center; margin: 1.5em; }
.intro { font-size: 1.2em; width: 600px; margin: auto; }
-.step { width: 600px; margin: auto; margin-top: 1em;}
-.desc { padding-top: 1.5em; min-height: 4.5em;}
-.output {
+.specify { font-size: 1.1em; width: 600px; padding-top: 2em; margin: auto; }
+.assertion, .verifierResp { 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;
@@ -43,49 +41,33 @@ a:hover { border-bottom: 2px solid black ; }
</head>
<body>
<div class="title">
- Example BrowserID Relying Party
+ BrowserID Test Relying Party
</div>
<div class="intro">
- This is the simplest possible BrowserID Relying Party. It
- demonstrates the steps required to use BrowserID to verify
- the identity of a user. Follow the steps below...
+ 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="step">
- <div class="number">1.</div>
- <div class="desc">At page load time, check to see if the user is already (persistently) signed in by calling <tt>navigator.id.get(<callback>, {silent:true});</tt>
- <div class="output" id="oPersistent">...</div>
+<div class="specify">
+ What flavor of assertion would you like? <br/>
+ <p>
+ <input type="checkbox" id="silent"> Silent <br/>
+ <input type="checkbox" id="allowPersistent"> Allow persistent sign-in <br/>
+ <input type="text" id="requiredEmail" width="80"> Require a specific email <br/>
+ <button>Get an assertion</button>
+ </p>
</div>
-<div class="step">
- <div class="number">2.</div>
- <div class="desc">If the user is *not already signed in, wait for <a id="clickForLogin" href="#">their click</a>.
+<div class="verifierResp">
+ <pre> ... verifier response ... </pre>
</div>
-<div class="step">
- <div class="number">3.</div>
- <div class="desc">Once an assertion is obtained, pass it up to the server for verification. The assertion looks like this:</div>
- <div class="output" id="oAssertion">...</div>
-</div>
-
-<div class="step">
- <div class="number">4.</div>
- <div class="desc">The verification servers checks the assertion and returns a response, that looks like this:</div>
- <div class="output" id="oVerificationResponse"><pre>...</pre></div>
-</div>
-
-<div class="step">
- <div class="number">5.</div>
- <div class="desc">Next, you should provide a logout button that calls <tt>navigator.id.logout()</tt> and then does whatever application specific logout steps are required. <a href="#" id="logout">Click here to logout</a></div>
-</div>
+<div class="assertion">
+ <pre> ... ye' ol' assertion ... </pre>
+</body>
-<div class="step">
- <div class="number">6.</div>
- <div class="desc"><b>All Done!</b> The site can now create an account keyed on the users identity (email address), set cookies, etc! Signing in again is just re-running these same steps.</div>
</div>
-
-</body>
<script src="jquery-min.js"></script>
<script src="https://browserid.org/include.js"></script>
<script>
@@ -101,47 +83,35 @@ function checkAssertion(assertion) {
audience: window.location.protocol + "//" + window.location.host
},
success: function(data, textStatus, jqXHR) {
- $("#oVerificationResponse > pre").text(JSON.stringify(data, null, 4));
+ $(".verifierResp > pre").text(JSON.stringify(data, null, 4));
},
error: function(jqXHR, textStatus, errorThrown) {
var resp = jqXHR.responseText ? JSON.parse(jqXHR.responseText) : errorThrown;
- $("#oVerificationResponse > pre").text(resp);
+ $(".verifierResp > pre").text(resp);
}
});
};
$(document).ready(function() {
-// at page load time, we'll check to see if the user is already signed in
-// for IE, this MUST be done after document ready.
-navigator.id.get(function(assertion) {
- if (!assertion) {
- $("#oPersistent").text("user isn't (persistently) signed in");
- } else {
- $("#oPersistent").text(assertion);
- checkAssertion(assertion);
- };
-}, { silent: true });
+ $(".specify button").click(function() {
+ $("pre").text("... waiting ...");
+
+ var requiredEmail = $.trim($('#requiredEmail').val());
+ if (!requiredEmail.length) requiredEmail = undefined;
- // install a click handler for when the user clicks 'sign in'
- $("#clickForLogin").click(function(event) {
- event.preventDefault();
navigator.id.get(function(assertion) {
if (!assertion) {
- $("#oAssertion").text("user didn't select an identity.");
+ $(".assertion pre").text("navigator.id.get() returns NULL");
} else {
- $("#oAssertion").text(assertion);
+ $(".assertion pre").text(assertion);
checkAssertion(assertion);
- };
- }, {allowPersistent: true});
- });
-
- $("#logout").click(function(event) {
- event.preventDefault();
- navigator.id.logout(function() {
- // XXX: what should we do after logout?
+ }
+ }, {
+ silent: $('#silent').attr('checked'),
+ allowPersistent: $('#allowPersistent').attr('checked'),
+ requiredEmail: requiredEmail
});
});
-
});
</script>