From b4a9250ae2bc33c10c7fda211ecf2a766eb62f3e Mon Sep 17 00:00:00 2001
From: Ben Adida <ben@adida.net>
Date: Thu, 7 Jul 2011 11:41:27 -0700
Subject: [PATCH] moved all static to dynamic views with templates
---
browserid/app.js | 12 ++++
browserid/views/developers.ejs | 103 +++++++++++++++++++++++++++++++++
browserid/views/index.ejs | 4 +-
browserid/views/layout.ejs | 90 ++++++++++++++--------------
browserid/views/manage.ejs | 10 ++++
browserid/views/primaries.ejs | 16 +++++
6 files changed, 191 insertions(+), 44 deletions(-)
create mode 100644 browserid/views/developers.ejs
create mode 100644 browserid/views/manage.ejs
create mode 100644 browserid/views/primaries.ejs
diff --git a/browserid/app.js b/browserid/app.js
index dff83159f..604fe03eb 100644
--- a/browserid/app.js
+++ b/browserid/app.js
@@ -43,6 +43,18 @@ function router(app) {
res.render('users.ejs', {title: 'for Users', fullpage: false});
});
+ app.get('/developers', function(req,res) {
+ res.render('developers.ejs', {title: 'for Developers', fullpage: false});
+ });
+
+ app.get('/primaries', function(req,res) {
+ res.render('primaries.ejs', {title: 'for Primary Authorities', fullpage: false});
+ });
+
+ app.get('/manage', function(req,res) {
+ res.render('manage.ejs', {title: 'My Account', fullpage: false});
+ });
+
app.get('/privacy', function(req, res) {
res.render('privacy.ejs', {title: 'Privacy and Terms of Service', fullpage: false});
});
diff --git a/browserid/views/developers.ejs b/browserid/views/developers.ejs
new file mode 100644
index 000000000..4d3d03e89
--- /dev/null
+++ b/browserid/views/developers.ejs
@@ -0,0 +1,103 @@
+ <script src="js/highlight.js"></script>
+ <script>hljs.initHighlightingOnLoad();</script>
+ <div class="why">
+ <p>
+ BrowserID provides a <b>simple</b> and <b>sophisticated</b>
+ login process that your <b>users will love</b>. 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>
+
+ <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 login button:
+ </p>
+<pre><code class="javascript">navigator.id.getVerifiedEmail(function(assertion) {
+ if (assertion) {
+ // This code will be invoked once the user has successfully
+ // selected an email address they control to log in with.
+ } else {
+ // something went wrong! the user isn't logged in.
+ }
+});
+</code></pre>
+ <p>
+ Upon a successful login, 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 login/signin 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>
+ <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>
+ <pre><code>$ curl "https://browserid.org/verify?assertion=<ASSERTION>&audience=mysite.com"
+{
+ "status": "okay",
+ "email": "lloyd@mozilla.com",
+ "audience": "mysite.com",
+ "valid-until": 1308859352261,
+ "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 log 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>
+ <div class="why">
+ <p>
+ You're done! <b>Welcome to BrowserID!</b> 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>
+ </div>
diff --git a/browserid/views/index.ejs b/browserid/views/index.ejs
index fffcde351..6d89bc145 100644
--- a/browserid/views/index.ejs
+++ b/browserid/views/index.ejs
@@ -4,9 +4,9 @@
</div>
<div class="why">
<img style="float: left;" src="i/developers.png">
- <p>For <b>developers</b>, BrowserID offers a world class login experience with only a couple lines of code. <a href="developers.html">Get Started.</a></p>
+ <p>For <b>developers</b>, BrowserID offers a world class login experience with only a couple lines of code. <a href="developers">Get Started.</a></p>
</div>
<div class="why">
<img style="float: right;" src="i/id.png">
- <p>For <b>identity providers</b>, BrowserID lets your give your users an identity they can <b>use everywhere</b>. <a href="primaries.html">Dig Deeper.</a> </p>
+ <p>For <b>identity providers</b>, BrowserID lets your give your users an identity they can <b>use everywhere</b>. <a href="primaries">Dig Deeper.</a> </p>
</div>
diff --git a/browserid/views/layout.ejs b/browserid/views/layout.ejs
index 16768db9c..673bc45c3 100644
--- a/browserid/views/layout.ejs
+++ b/browserid/views/layout.ejs
@@ -4,45 +4,16 @@
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title><%- title %></title>
<link rel="stylesheet" href="/css/style.css" type="text/css">
-</head>
-<body>
-<div id="splash">
- <% if (fullpage) { %>
- <div class="header">
- <div class="manage"><a id="manageLink" href="manage.html">manage my logins</a></div>
- </div>
- <div class="tophalf">
- <div class="title"><img src="i/browserid_logo.png"></div>
- <div class="subtitle">A better way to log in.</div>
- </div>
- <% } else { %>
- <div class="topquarter">
- <div>
- <a href="/"><div class="title"><img src="i/browserid_logo_lil.png"></div></a>
- <div class="subtitle"><%- title %></div>
- </div>
- </div>
- <% } %>
- <div class="bottomhalf">
- <%- body %>
- </div>
- <div class="footer">
- <div>
- <div class="right">
- <p><img src="i/browserid_logo_sm.png"> is an <b>open source experiment</b> into improving identity and authentication on the web, by
- <a href="https://mozillalabs.com">mozilla labs</a>.</p>
- </div>
- <div class="left">
- <p> <a href="https://github.com/mozilla/browserid">Source Code</a> <a href="https://wiki.mozilla.org/Identity/Verified_Email_Protocol">Specification</a> <a href="http://groups.google.com/group/mozilla-labs">Mailing list</a> <a href="/privacy">Privacy</a> </p>
- <p class="copyright">Copyright © 2011 Mozilla. All rights reserved. </p>
- </div>
- </div>
- </div>
-</div>
-</body>
-<script src="dialog/jquery-min.js"></script>
-<script src="dialog/underscore-min.js"></script>
+ <link rel="stylesheet" href="css/github.css">
+ <script src="dialog/jquery-min.js"></script>
+ <script src="dialog/underscore-min.js"></script>
<script>
+$(document).ready(function() {
+ if ($('#emailList')) {
+ display_saved_ids();
+ }
+});
+
function display_saved_ids()
{
var emails = {};
@@ -85,11 +56,11 @@ function display_saved_ids()
meta.append(deauth);
deauth.click(function() {
var t = JSON.parse(window.localStorage.emails);
- delete t[e];
- window.localStorage.emails = JSON.stringify(t);
// remove email from server
$.post("/wsapi/remove_email", {"email" : e}, function(response) {
- alert("response is : " +response);
+ // we delete from store only once we got response
+ delete t[e];
+ window.localStorage.emails = JSON.stringify(t);
display_saved_ids();
});
});
@@ -109,5 +80,40 @@ function display_saved_ids()
});
}
</script>
-
+</head>
+<body>
+<div id="splash">
+ <div class="header">
+ <div class="manage"><a id="manageLink" href="manage">manage my logins</a></div>
+ </div>
+ <% if (fullpage) { %>
+ <div class="tophalf">
+ <div class="title"><img src="i/browserid_logo.png"></div>
+ <div class="subtitle">A better way to log in.</div>
+ </div>
+ <% } else { %>
+ <div class="topquarter">
+ <div>
+ <a href="/"><div class="title"><img src="i/browserid_logo_lil.png"></div></a>
+ <div class="subtitle"><%- title %></div>
+ </div>
+ </div>
+ <% } %>
+ <div class="bottomhalf">
+ <%- body %>
+ </div>
+ <div class="footer">
+ <div>
+ <div class="right">
+ <p><img src="i/browserid_logo_sm.png"> is an <b>open source experiment</b> into improving identity and authentication on the web, by
+ <a href="https://mozillalabs.com">mozilla labs</a>.</p>
+ </div>
+ <div class="left">
+ <p> <a href="https://github.com/mozilla/browserid">Source Code</a> <a href="https://wiki.mozilla.org/Identity/Verified_Email_Protocol">Specification</a> <a href="http://groups.google.com/group/mozilla-labs">Mailing list</a> <a href="/privacy">Privacy</a> </p>
+ <p class="copyright">Copyright © 2011 Mozilla. All rights reserved. </p>
+ </div>
+ </div>
+ </div>
+</div>
+</body>
</html>
diff --git a/browserid/views/manage.ejs b/browserid/views/manage.ejs
new file mode 100644
index 000000000..f48ac42d9
--- /dev/null
+++ b/browserid/views/manage.ejs
@@ -0,0 +1,10 @@
+ <div class="why">
+ <p>
+ Manage your email addresses in BrowserID.
+ </p>
+ </div>
+ <div id="emailList">
+ </div>
+ <div id="cancelaccount">
+ You may, at any time, <a href="#" id="cancellink">cancel your account</a>.
+ </div>
diff --git a/browserid/views/primaries.ejs b/browserid/views/primaries.ejs
new file mode 100644
index 000000000..30bef1ff6
--- /dev/null
+++ b/browserid/views/primaries.ejs
@@ -0,0 +1,16 @@
+ <div class="why">
+ <p>
+ This page is dedicated to the <b>Identity Providers</b>.
+ These are dudes like Yahoo!, Google, Twitter, Facebook, and
+ even github. If someone new wants to join they party, hey,
+ they <a href="http://www.mozilla.org/about/manifesto">should
+ be able to</a>.
+ </p>
+ <p>
+ But there's a catch. This page hasn't been written yet! No no, don't
+ get frustrated, just go write something and
+ then <a href="https://github.com/mozilla/browserid/blob/master/authority/static/primaries.html">contribute
+ it on github</a>.
+ </p>
+ <br><br><br>
+ </div>
--
GitLab