diff --git a/browserid/static/js/browserid.js b/browserid/static/js/browserid.js index 451f3a369d0b1801120c446afea8a005f840163f..12d0fed2f7aa62d546b2271d667174c06d04aa47 100644 --- a/browserid/static/js/browserid.js +++ b/browserid/static/js/browserid.js @@ -42,7 +42,6 @@ $(function() { BrowserIDNetwork.checkAuth(function(authenticated) { if (authenticated) { - //$("body").addClass("authenticated"); if ($('#emailList').length) { display_saved_ids(); } @@ -137,8 +136,7 @@ $(function() { }); -function display_saved_ids() -{ +function display_saved_ids() { var emails = {}; BrowserIDIdentities.syncIdentities(function() { emails = getEmails(); @@ -162,35 +160,51 @@ function display_saved_ids() } }); - $('#manageAccounts').click(function() { + $('#manageAccounts').click(function(event) { + event.preventDefault(); + $('#emailList').addClass('remove'); $(this).hide(); $("#cancelManage").show(); }); - $('#cancelManage').click(function() { + $('#cancelManage').click(function(event) { + event.preventDefault(); + $('#emailList').removeClass('remove'); $(this).hide(); $("#manageAccounts").show(); }); - $("#emailList").empty(); - _(emails).each(function(data, e) { - var date = _.relative(new Date(data.created)); - - $("<li class='identity cf'/>").append( - _.template("<div class='email'><%= email %></div>", { email : e }), - $("<div class='activity cf'/>").append( - $("<button class='delete'>remove</button>").click(function() { - if (confirm("Remove " + e + " from your BrowserID?")) { - // XXX this callback is not working as expected - BrowserIDNetwork.removeEmail(e, display_saved_ids); - } - }), - _.template("<abbr class='status' title='Registered: <%= created %>'>Registered <%= relative %></abbr>", - { relative: date.friendly, created : date.locale } ) - ) - ).appendTo($("#emailList")); + var list = $("#emailList").empty(); + + // Set up to use mustache style templating, the normal Django style blows + // up the node templates + _.templateSettings = { + interpolate : /\{\{(.+?)\}\}/g + }; + var template = $('#templateUser').html(); + + _(emails).each(function(data, e) { + var date = _.relative(new Date(data.created)); + + var identity = _.template(template, { + email: e, + relative: date.friendly, + created: date.locale + }); + + var idEl = $(identity).appendTo(list); + idEl.find('.delete').click(onRemoveEmail.bind(null, e)); }); + + function onRemoveEmail(email, event) { + event.preventDefault(); + + if (confirm("Remove " + email + " from your BrowserID?")) { + BrowserIDIdentities.removeIdentity(email, display_saved_ids); + } + } } } + diff --git a/browserid/views/index.ejs b/browserid/views/index.ejs index d96f465a6adf596c2bbd7a7332f35a40d8829258..8461a19ac007f2e8c2c8dbc46cfa686d1350c7dd 100644 --- a/browserid/views/index.ejs +++ b/browserid/views/index.ejs @@ -4,8 +4,8 @@ <div class="edit cf"> <strong>Your Accounts</strong> - <a id="manageAccounts" href="javascript:void(0);">edit</a> - <a id="cancelManage" href="javascript:void(0);">done</a> + <a id="manageAccounts" href="#">edit</a> + <a id="cancelManage" href="#">done</a> </div> <ul id="emailList"> <li class="cf"> @@ -38,21 +38,32 @@ </div> </div> +<script type="text/html" id="templateUser"> + <li class="identity cf"> + <div class="email">{{ email }}</div> + <div class="activity cf"> + <button class="delete">remove</button> + <abbr title="Registered: {{ created }}" class="status">Registered {{ relative }} minutes ago</abbr> + </div> + </li> +</script> + <script type="text/javascript"> -$(document).ready(function () { - $('.granted').hover(function() { - $('#card').toggleClass('insert'); - $('#status').delay(400).toggleClass('green'); - }); - - $('.create').hover(function() { - $('#hint').addClass('signUp').removeClass('info'); - }).click(function () { - document.location = '/signup'; - }); - - $('.info').hover(function() { - $('#hint').removeClass('signUp').addClass('info'); - }); -}); + $(document).ready(function () { + $('.granted').hover(function() { + $('#card').toggleClass('insert'); + $('#status').delay(400).toggleClass('green'); + }); + + $('.create').hover(function() { + $('#hint').addClass('signUp').removeClass('info'); + }).click(function () { + document.location = '/signup'; + }); + + $('.info').hover(function() { + $('#hint').removeClass('signUp').addClass('info'); + }); + }); </script> + diff --git a/browserid/views/layout.ejs b/browserid/views/layout.ejs index e13d8d9111e867160e0d990a8c8fc72f3dd0b325..6606c515558a44a2ffddf1550bb53edead1951c0 100644 --- a/browserid/views/layout.ejs +++ b/browserid/views/layout.ejs @@ -18,7 +18,7 @@ <script src="/dialog/resources/crypto.js" type="text/javascript"></script> <script src="/dialog/resources/browserid-network.js" type="text/javascript"></script> <script src="/dialog/resources/browserid-identities.js" type="text/javascript"></script> - <script src="/dialog/resources/underscore-min.js" type="text/javascript"></script> + <script src="/dialog/resources/underscore.js" type="text/javascript"></script> <script src="/js/browserid.js" type="text/javascript"></script> <% } %> </head>