diff --git a/browserid/static/css/style.css b/browserid/static/css/style.css
index 2c37d0596c76330fb6f070ae9d6191746b206923..fa20420c74fa67e718af1cac022e834c1c7ea859 100644
--- a/browserid/static/css/style.css
+++ b/browserid/static/css/style.css
@@ -174,20 +174,38 @@ footer .copyright {
font-size: .8em;
}
+#steps {
+ list-style: none;
+ width: 800px;
+ margin: 0 auto;
+ padding: 0;
+}
+
+.step {
+ margin: 1em 0 2em 0;
+ padding: 0 0 0 50px;
+ font-size: 14px;
+ position: relative;
+}
+
.step .number {
+ position: absolute;
+ top: -5px;
+ left: 0;
font-family: 'Shadows Into Light', arial, serif;
font-size: 4em;
- float: left;
font-weight: bold;
- margin-top : -.4em;
+ line-height: 1em;
+}
- width: 50px;
+.step > h3 {
+ font-size: 1em;
+ margin: 0;
+ display: inline;
}
-.step {
- margin: 1em auto 2em auto;
- font-size: 14px;
- width: 800px;
+.step > pre {
+ clear: both;
}
.step > p, .step > ol {
@@ -205,10 +223,11 @@ footer .copyright {
pre code {
padding: 10px 15px 10px 15px;
- margin: 1em 60px 1em 60px;
+ margin: .75em;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px 10px 10px 10px;
+ width: 650px;
}
#emailList {
diff --git a/browserid/views/developers.ejs b/browserid/views/developers.ejs
index 85a67d0110f3645aa19503e1146c296f4a590956..572ac555d85c761075fc79bfe8be4671253b1579 100644
--- a/browserid/views/developers.ejs
+++ b/browserid/views/developers.ejs
@@ -2,24 +2,25 @@
<script>hljs.initHighlightingOnLoad();</script>
<div class="why">
<p>
- BrowserID provides a <b>simple</b> and <b>sophisticated</b>
- sign-in process that your <b>users will love</b>. It can be
+ BrowserID provides a <strong>simple</strong> and <strong>sophisticated</strong>
+ sign-in process that your <strong>users will love</strong>. It can be
integrated in three easy steps:
</p>
</div>
- <div class="step">
- <div class="number">1.</div>
- <p><b>Enable BrowserID:</b> Include the BrowserID JavaScript library in your site by adding a script tag to your <tt><head></tt></p>
+ <ol id="steps">
+ <li class="step">
+ <div class="number">1.</div>
+ <h3>Enable BrowserID:</h3>
+ Include the BrowserID JavaScript library in your site by adding a script tag to your <tt><head></tt>
- <pre><code><script src="https://browserid.org/include.js" type="text/javascript"></script></code></pre>
- </div>
- <div class="step">
- <div class="number">2.</div>
- <p>
- <b>Identify the User:</b> Instead of displaying a form on your
- site which takes a username and password, use the BrowserID
- JavaScript API when the user clicks your sign-in button:
- </p>
+ <pre><code><script src="https://browserid.org/include.js" type="text/javascript"></script></code></pre>
+ </li>
+ <li class="step">
+ <div class="number">2.</div>
+ <h3>Identify the User:</h3>
+ Instead of displaying a form on your
+ site which takes a username and password, use the BrowserID
+ JavaScript API when the user clicks your sign-in button:
<pre><code class="javascript">navigator.id.getVerifiedEmail(function(assertion) {
if (assertion) {
// This code will be invoked once the user has successfully
@@ -29,43 +30,43 @@
}
});
</code></pre>
- <p>
- Upon a successful sign-in, you'll be called back with
- an <i>assertion</i>, a string containing a signed claim that proves
- the user is who they say they are.
- </p>
- <p>
- <b>NOTE:</b> While completely optional, you might consider
- replacing your sign-in button with a pretty BrowserID button:
+ <p>
+ Upon a successful sign-in, you'll be called back with
+ an <i>assertion</i>, a string containing a signed claim that proves
+ the user is who they say they are.
+ </p>
+ <p>
+ <strong>NOTE:</strong> While completely optional, you might consider
+ replacing your sign-in button with a pretty BrowserID button:
- <div class="buttonbox">
- <div><img src="i/sign_in_red.png"></div>
- <div><img src="i/sign_in_blue.png"></div>
- <div><img src="i/sign_in_orange.png"></div>
- <div><img src="i/sign_in_green.png"></div>
- <div><img src="i/sign_in_grey.png"></div>
- </div>
- </p>
- </div>
- <div class="step">
- <div class="number">3.</div>
- <p>
- <b>Verify the User's Identity:</b> You must verify the <i>assertion</i>
- is authentic, and extract the user's email address from it.
- The easiest way to do these is to use the
- free verification service provided by BrowserID.
- </p><p>
- To use it, you send a request
- to <tt>https://browserid.org/verify</tt> with two GET parameters:
- </p>
+ <div class="buttonbox">
+ <div><img src="i/sign_in_red.png"></div>
+ <div><img src="i/sign_in_blue.png"></div>
+ <div><img src="i/sign_in_orange.png"></div>
+ <div><img src="i/sign_in_green.png"></div>
+ <div><img src="i/sign_in_grey.png"></div>
+ </div>
+ </p>
+ </li>
+ <li class="step">
+ <div class="number">3.</div>
+ <h3>Verify the User's Identity:</h3>
+ You must verify the <i>assertion</i>
+ is authentic, and extract the user's email address from it.
+ The easiest way to do these is to use the
+ free verification service provided by BrowserID.
+ <p>
+ To use it, you send a request
+ to <tt>https://browserid.org/verify</tt> with two GET parameters:
+ </p>
<ol>
<li> <tt>assertion</tt>: The encoded assertion
<li> <tt>audience</tt>: The hostname and optional port of your site
</ol>
- <p>
- The verifier will check the the assertion was meant for your site and
- is valid, here's an example:
- </p>
+ <p>
+ The verifier will check the the assertion was meant for your site and
+ is valid, here's an example:
+ </p>
<pre><code>$ curl "https://browserid.org/verify?assertion=<ASSERTION>&audience=mysite.com"
{
"status": "okay",
@@ -75,28 +76,29 @@
"issuer": "browserid.org:443"
}
</pre></code>
- </p>
- <p>
- <b>NOTE:</b> You may choose to validate assertions on your own
- server. While a bit more complicated you can reduce your
- dependencies on others. Refer
- to <a href="https://wiki.mozilla.org/Identity/Verified_Email_Protocol">the
- specification</a> and the <a href="https://github.com/mozilla/browserid/tree/master/verifier">source for the reference
- validator</a>.
- </p>
- </div>
- <div class="step">
- <p><b>Complete the sign in!</b> Having completed the steps
- above, you can trust that the present user really owns the
- email address returned by the verifier. You don't need to
- perform any additional authentication unless you want to!
- From here, you can perform whatever post-authentication steps
- you like.
- </p>
- </div>
+ </p>
+ <p>
+ <strong>NOTE:</strong> You may choose to validate assertions on your own
+ server. While a bit more complicated you can reduce your
+ dependencies on others. Refer
+ to <a href="https://wiki.mozilla.org/Identity/Verified_Email_Protocol">the
+ specification</a> and the <a href="https://github.com/mozilla/browserid/tree/master/verifier">source for the reference
+ validator</a>.
+ </p>
+ </li>
+ <li class="step">
+ <h3>Complete the sign in!</h3>
+ Having completed the steps
+ above, you can trust that the present user really owns the
+ email address returned by the verifier. You don't need to
+ perform any additional authentication unless you want to!
+ From here, you can perform whatever post-authentication steps
+ you like.
+ </li>
+ </ol>
<div class="why">
<p>
- You're done! <b>Welcome to BrowserID!</b> For more details, have a look at
+ You're done! <strong>Welcome to BrowserID!</strong> For more details, have a look at
our <a href="http://myfavoritebeer.org/">demonstration</a>, and view
<a href="https://github.com/lloyd/myfavoritebeer.org/">the code</a> behind it.
</p>
diff --git a/browserid/views/layout.ejs b/browserid/views/layout.ejs
index bdac4768f56184020b13b3799d6fa222833a53fa..ceb5a887eec5cede1281e8b07deb4d7f3048c667 100644
--- a/browserid/views/layout.ejs
+++ b/browserid/views/layout.ejs
@@ -7,79 +7,7 @@
<link rel="stylesheet" href="/css/style.css" type="text/css">
<script src="/js/jquery-1.6.2.min.js"></script>
<script src="/dialog/resources/underscore-min.js"></script>
-<script>
-$(function() {
- if ($('#emailList')) {
- display_saved_ids();
- }
-});
-
-function display_saved_ids()
-{
- var emails = {};
- if (window.localStorage.emails) {
- emails = JSON.parse(window.localStorage.emails);
- }
-
- $('#cancellink').click(function() {
- if (confirm('Are you sure you want to cancel your account?')) {
- $.post("/wsapi/account_cancel", {}, function(result) {
- window.localStorage.emails = null;
- document.location="/";
- });
- }
- });
-
- $("#emailList").empty();
- _(emails).each(function(data, e) {
- var block = $("<div>").addClass("emailblock");
- var label = $("<div>").addClass("email").text(e);
- var meta = $("<div>").addClass("meta");
-
- /*
- var priv = $("<div class='keyblock'>").text(data.priv);
- priv.hide();
- */
-
- var pub = $("<div class='keyblock'>").text(data.pub);
- pub.hide();
- var linkblock = $("<div>");
- var puba = $("<a>").text("[show public key]");
- // var priva = $("<a>").text("[show private key]");
- puba.click(function() {pub.show()});
- // priva.click(function() {priv.show()});
- linkblock.append(puba);
- // linkblock.append(" / ");
- // linkblock.append(priva);
-
- var deauth = $("<button>").text("Forget this Email");
- meta.append(deauth);
- deauth.click(function() {
- var t = JSON.parse(window.localStorage.emails);
- // remove email from server
- $.post("/wsapi/remove_email", {"email" : e}, function(response) {
- // we delete from store only once we got response
- delete t[e];
- window.localStorage.emails = JSON.stringify(t);
- display_saved_ids();
- });
- });
-
- var d = new Date(data.created);
- var datestamp = $("<div class='date'>").text("Signed in at " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() + ", " + d.getMonth() + "/" + d.getDay() + "/" + d.getUTCFullYear());
-
- meta.append(datestamp);
- meta.append(linkblock);
-
- block.append(label);
- block.append(meta);
- // block.append(priv);
- block.append(pub);
-
- $("#emailList").append(block);
- });
-}
-</script>
+ <script src="/js/browserid.js"></script>
</head>
<body>
<header class="<% if(fullpage) { %> half <% } else { %> quarter <% } %>">