Skip to content

Commit

Permalink
moved all static to dynamic views with templates
Browse files Browse the repository at this point in the history
  • Loading branch information
@benadida
benadida committed Jul 7, 2011
1 parent 7935192 commit b4a9250
Show file tree
Hide file tree
Showing 6 changed files with 191 additions and 44 deletions.
12 changes: 12 additions & 0 deletions browserid/app.js
View file
Expand Up @@ -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});
});
Expand Down
103 changes: 103 additions & 0 deletions browserid/views/developers.ejs
View file
@@ -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>&lt;head&gt;</tt></p>

<pre><code>&lt;script src="https://browserid.org/include.js" type="text/javascript"&gt;&lt;/script&gt;</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=&lt;ASSERTION&gt;&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>
4 changes: 2 additions & 2 deletions browserid/views/index.ejs
View file
Expand Up @@ -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>
90 changes: 48 additions & 42 deletions browserid/views/layout.ejs
View file
Expand Up @@ -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>&nbsp;&nbsp;&nbsp;<a href="https://wiki.mozilla.org/Identity/Verified_Email_Protocol">Specification</a>&nbsp;&nbsp;&nbsp;<a href="http://groups.google.com/group/mozilla-labs">Mailing list</a>&nbsp;&nbsp;&nbsp;<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 = {};
Expand Down Expand Up @@ -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();
});
});
Expand All @@ -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>&nbsp;&nbsp;&nbsp;<a href="https://wiki.mozilla.org/Identity/Verified_Email_Protocol">Specification</a>&nbsp;&nbsp;&nbsp;<a href="http://groups.google.com/group/mozilla-labs">Mailing list</a>&nbsp;&nbsp;&nbsp;<a href="/privacy">Privacy</a> </p>
<p class="copyright">Copyright © 2011 Mozilla. All rights reserved. </p>
</div>
</div>
</div>
</div>
</body>
</html>
10 changes: 10 additions & 0 deletions browserid/views/manage.ejs
View file
@@ -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>
16 changes: 16 additions & 0 deletions browserid/views/primaries.ejs
View file
@@ -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>

0 comments on commit b4a9250

Please sign in to comment.