From 4f7ccae9af3134af83b80ac0da3237f8fb4a92c5 Mon Sep 17 00:00:00 2001 From: Shane Tomlinson <stomlinson@mozilla.com> Date: Fri, 30 Sep 2011 15:00:55 +0100 Subject: [PATCH] Starting to split off the functionality for each page into its own js file. This is to target CSP related work as well as to simplify browserid.js, which was becoming very unruly. --- browserid/compress.sh | 4 +- browserid/static/js/browserid.js | 252 ++---------------- .../static/js/pages/add_email_address.js | 64 +++++ browserid/static/js/pages/index.js | 54 ++++ browserid/static/js/pages/manage_account.js | 201 ++++++++++++++ .../static/js/pages/verify_email_address.js | 59 ++++ browserid/views/index.ejs | 2 +- browserid/views/layout.ejs | 6 +- 8 files changed, 415 insertions(+), 227 deletions(-) create mode 100644 browserid/static/js/pages/add_email_address.js create mode 100644 browserid/static/js/pages/index.js create mode 100644 browserid/static/js/pages/manage_account.js create mode 100644 browserid/static/js/pages/verify_email_address.js diff --git a/browserid/compress.sh b/browserid/compress.sh index 4ff39c52a..72bb1271d 100755 --- a/browserid/compress.sh +++ b/browserid/compress.sh @@ -44,9 +44,9 @@ echo '' cd ../js # re-minimize everything together -cat jquery-1.6.2.min.js json2.js ../dialog/resources/underscore-min.js ../dialog/resources/storage.js ../dialog/resources/browserid-network.js ../dialog/resources/browserid-identities.js browserid.js > lib.js +cat jquery-1.6.2.min.js json2.js ../dialog/resources/underscore-min.js ../dialog/resources/storage.js ../dialog/resources/browserid-network.js ../dialog/resources/browserid-identities.js browserid.js pages/index.js pages/add_email_address.js pages/verify_email_address.js pages/manage_account.js > lib.js $UGLIFY < lib.js > lib.min.js cd ../css -cat github.css style.css > browserid.css +cat style.css > browserid.css $JAVA -jar $YUI_LOCATION browserid.css -o browserid.min.css diff --git a/browserid/static/js/browserid.js b/browserid/static/js/browserid.js index 5375a4772..d0921a36d 100644 --- a/browserid/static/js/browserid.js +++ b/browserid/static/js/browserid.js @@ -1,4 +1,4 @@ -/*globals BrowserIDNetwork: true, BrowserIDIdentities: true, _: true, confirm: true, display_saved_ids: true*/ +/*globals BrowserIDNetwork: true, BrowserIDIdentities: true, _: true */ /* ***** BEGIN LICENSE BLOCK ***** * Version: MPL 1.1/GPL 2.0/LGPL 2.1 * @@ -34,6 +34,8 @@ * * ***** END LICENSE BLOCK ***** */ +window.BrowserID = window.BrowserID || {}; + $(function() { "use strict"; @@ -41,6 +43,31 @@ $(function() { * For the main page */ + function getParameterByName( name ) { + name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); + var regexS = "[\\?&]"+name+"=([^&#]*)"; + var regex = new RegExp( regexS ); + var results = regex.exec( window.location.href ); + if( results == null ) + return ""; + else + return decodeURIComponent(results[1].replace(/\+/g, " ")); + } + + var token = getParameterByName("token"), + path = document.location.pathname, + bid = BrowserID; + + if (path === "/") { + bid.index(); + } + else if (token && path === "/add_email_address") { + bid.addEmailAddress(token); + } + else if(token && path === "/verify_email_address") { + bid.verifyEmailAddress(token); + } + if ($('#vAlign').length) { $(window).bind('resize', function() { $('#vAlign').css({'height' : $(window).height() }); }).trigger('resize'); } @@ -57,7 +84,7 @@ $(function() { if (authenticated) { $("#content").fadeIn("slow"); if ($('#emailList').length) { - display_saved_ids(); + bid.manageAccount(); } } else { @@ -71,227 +98,6 @@ $(function() { } }); - _.mixin({ - relative: function(date) { - var diff = (((new Date()).getTime() - date.getTime()) / 1000), - day_diff = Math.floor(diff / 86400), - dObj = { "friendly" : date.toLocaleDateString(), - "additional" : date.toLocaleTimeString(), - "utc" : date.toUTCString(), - "locale" : date.toLocaleString() }; - - /* some kind of error */ - if (day_diff < 0) { - dObj.friendly = "in the future!?!"; - return dObj; - } else if (isNaN(day_diff)) { - dObj.friendly = dObj.additional = "unknown"; - return dObj; - } - - if (day_diff === 0) { - if (diff < 60) { - dObj.friendly = "just now"; - return dObj; - } - if (diff < 120 + 30) { /* 1 minute plus some fuzz */ - dObj.friendly = "a minute ago"; - return dObj; - } - if (diff < 3600) { - dObj.friendly = Math.floor(diff / 60) + " minutes ago"; - return dObj; - } - if (diff < (60 * 60) * 2) { - dObj.friendly = "1 hour ago"; - return dObj; - } - if (diff < 24 * 60 * 60) { - dObj.friendly = Math.floor(diff / 3600) + " hours ago"; - return dObj; - } - } - if (day_diff === 1) { - dObj.friendly = "yesterday"; - return dObj; - } - if (day_diff < 7) { - dObj.friendly = day_diff + " days ago"; - return dObj; - } - if (day_diff < 8) { - dObj.friendly = "last week"; - return dObj; - } - /* for this scope: we want day of week and the date - plus the month (if different) */ - if (day_diff < 31) { - dObj.friendly = Math.ceil(day_diff / 7) + " weeks ago"; - return dObj; - } - - /* for this scope: we want month + date */ - if (day_diff < 62) { - dObj.friendly = "a month ago"; - return dObj; - } - if (day_diff < 365) { - dObj.friendly = Math.ceil(day_diff / 31) + " months ago"; - return dObj; - } - - /* for this scope: we want month + year */ - if (day_diff >= 365 && day_diff < 730) { - dObj.additional = date.toLocaleDateString(); - dObj.friendly = "a year ago"; - return dObj; - } - if (day_diff >= 365) { - dObj.additional = date.toLocaleDateString(); - dObj.friendly = Math.ceil(day_diff / 365) + " years ago"; - return dObj; - } - return dObj; - } - }); - - - function display_saved_ids() { - var emails = {}; - - BrowserIDIdentities.syncEmailKeypairs(function() { - emails = BrowserIDIdentities.getStoredEmailKeypairs(); - if (_.isEmpty(emails)) { - console.log(emails); - $("#content").hide(); - } else { - $("#content").show(); - $("#vAlign").hide(); - displayEmails(); - } - }); - - function displayEmails() { - // XXX: this is currently not displayed - $('#cancellink').click(function() { - if (confirm('Are you sure you want to cancel your account?')) { - BrowserIDNetwork.cancelUser(function() { - document.location="/"; - }); - } - }); - - $('#manageAccounts').click(function(event) { - event.preventDefault(); - - $('#emailList').addClass('remove'); - $(this).hide(); - $("#cancelManage").show(); - }); - - $('#cancelManage').click(function(event) { - event.preventDefault(); - - $('#emailList').removeClass('remove'); - $(this).hide(); - $("#manageAccounts").show(); - }); - 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.removeEmail(email, display_saved_ids); - } - } - } - } - - - /** - * For the prove page - */ - function getParameterByName( name ) { - name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); - var regexS = "[\\?&]"+name+"=([^&#]*)"; - var regex = new RegExp( regexS ); - var results = regex.exec( window.location.href ); - if( results == null ) - return ""; - else - return decodeURIComponent(results[1].replace(/\+/g, " ")); - } - - function emailRegistrationSuccess() { - $("div.status").text("Address confirmed!"); - $("body").delay(1000).fadeOut(500, function() { - // if the close didn't work, then let's redirect the the main page where they'll - // get to see the ids that they've created. - document.location = '/'; - }); - } - - function emailRegistrationFailure(why) { - $("div.status").text("Error encountered while attempting to confirm your address. Have you previously verified this address?"); - } - - var token = getParameterByName("token"), - path = document.location.pathname; - - if (token && path === "/add_email_address") { - BrowserIDNetwork.completeEmailRegistration(token, function onSuccess(valid) { - if (valid) { - emailRegistrationSuccess(); - } else { - emailRegistrationFailure("unknown"); - } - - }, function onFailure() { - failure("Error Communicating With Server!"); - }); - } - - - if(token && path === "/verify_email_address") { - $("#signUpForm").submit(function(event) { - event.preventDefault(); - - var email = $("#email").val(), - pass = $("#password").val(), - pass2 = $("#vpassword").val(); - - if (pass && pass === pass2) { - BrowserIDNetwork.completeUserRegistration(token, pass, function onSuccess(registered) { - if (registered) { - $("#congrats").fadeIn(250); - } - }, function onFailure() { - - }); - } - }); - } }); diff --git a/browserid/static/js/pages/add_email_address.js b/browserid/static/js/pages/add_email_address.js new file mode 100644 index 000000000..7df3615cf --- /dev/null +++ b/browserid/static/js/pages/add_email_address.js @@ -0,0 +1,64 @@ +/*globals BrowserID: true, BrowserIDNetwork: true, $:true */ +/* ***** BEGIN LICENSE BLOCK ***** + * Version: MPL 1.1/GPL 2.0/LGPL 2.1 + * + * The contents of this file are subject to the Mozilla Public License Version + * 1.1 (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * http://www.mozilla.org/MPL/ + * + * Software distributed under the License is distributed on an "AS IS" basis, + * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License + * for the specific language governing rights and limitations under the + * License. + * + * The Original Code is Mozilla BrowserID. + * + * The Initial Developer of the Original Code is Mozilla. + * Portions created by the Initial Developer are Copyright (C) 2011 + * the Initial Developer. All Rights Reserved. + * + * Contributor(s): + * + * Alternatively, the contents of this file may be used under the terms of + * either the GNU General Public License Version 2 or later (the "GPL"), or + * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), + * in which case the provisions of the GPL or the LGPL are applicable instead + * of those above. If you wish to allow use of your version of this file only + * under the terms of either the GPL or the LGPL, and not to allow others to + * use your version of this file under the terms of the MPL, indicate your + * decision by deleting the provisions above and replace them with the notice + * and other provisions required by the GPL or the LGPL. If you do not delete + * the provisions above, a recipient may use your version of this file under + * the terms of any one of the MPL, the GPL or the LGPL. + * + * ***** END LICENSE BLOCK ***** */ + +(function() { + "use strict"; + + function emailRegistrationSuccess() { + $("div.status").text("Address confirmed!"); + $("body").delay(1000).fadeOut(500, function() { + // if the close didn't work, then let's redirect the the main page where they'll + // get to see the ids that they've created. + document.location = '/'; + }); + } + + function emailRegistrationFailure(why) { + $("div.status").text("Error encountered while attempting to confirm your address. Have you previously verified this address?"); + } + + BrowserID.addEmailAddress = function(token) { + BrowserIDNetwork.completeEmailRegistration(token, function onSuccess(valid) { + if (valid) { + emailRegistrationSuccess(); + } else { + emailRegistrationFailure("unknown"); + } + }, function onFailure() { + failure("Error Communicating With Server!"); + }); + }; +}()); diff --git a/browserid/static/js/pages/index.js b/browserid/static/js/pages/index.js new file mode 100644 index 000000000..c95ec6166 --- /dev/null +++ b/browserid/static/js/pages/index.js @@ -0,0 +1,54 @@ +/*globals BrowserID:true, $:true*/ +/* ***** BEGIN LICENSE BLOCK ***** + * Version: MPL 1.1/GPL 2.0/LGPL 2.1 + * + * The contents of this file are subject to the Mozilla Public License Version + * 1.1 (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * http://www.mozilla.org/MPL/ + * + * Software distributed under the License is distributed on an "AS IS" basis, + * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License + * for the specific language governing rights and limitations under the + * License. + * + * The Original Code is Mozilla BrowserID. + * + * The Initial Developer of the Original Code is Mozilla. + * Portions created by the Initial Developer are Copyright (C) 2011 + * the Initial Developer. All Rights Reserved. + * + * Contributor(s): + * + * Alternatively, the contents of this file may be used under the terms of + * either the GNU General Public License Version 2 or later (the "GPL"), or + * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), + * in which case the provisions of the GPL or the LGPL are applicable instead + * of those above. If you wish to allow use of your version of this file only + * under the terms of either the GPL or the LGPL, and not to allow others to + * use your version of this file under the terms of the MPL, indicate your + * decision by deleting the provisions above and replace them with the notice + * and other provisions required by the GPL or the LGPL. If you do not delete + * the provisions above, a recipient may use your version of this file under + * the terms of any one of the MPL, the GPL or the LGPL. + * + * ***** END LICENSE BLOCK ***** */ + +(function() { + "use strict"; + + BrowserID.index = function () { + $('.granted').hover(function() { + $('#card').toggleClass('insert'); + $('#status').delay(400).toggleClass('green'); + }); + + $('.create').hover(function() { + $('#hint').addClass('signUp').removeClass('info'); + }); + + $('.info').hover(function() { + $('#hint').removeClass('signUp').addClass('info'); + }); + }; +}()); diff --git a/browserid/static/js/pages/manage_account.js b/browserid/static/js/pages/manage_account.js new file mode 100644 index 000000000..500cbc43d --- /dev/null +++ b/browserid/static/js/pages/manage_account.js @@ -0,0 +1,201 @@ +/*globals BrowserID:true, BrowserIDNetwork: true, BrowserIDIdentities: true, _: true, confirm: true, syncAndDisplayEmails: true, displayEmails: true, onRemoveEmail: true*/ +/* ***** BEGIN LICENSE BLOCK ***** + * Version: MPL 1.1/GPL 2.0/LGPL 2.1 + * + * The contents of this file are subject to the Mozilla Public License Version + * 1.1 (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * http://www.mozilla.org/MPL/ + * + * Software distributed under the License is distributed on an "AS IS" basis, + * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License + * for the specific language governing rights and limitations under the + * License. + * + * The Original Code is Mozilla BrowserID. + * + * The Initial Developer of the Original Code is Mozilla. + * Portions created by the Initial Developer are Copyright (C) 2011 + * the Initial Developer. All Rights Reserved. + * + * Contributor(s): + * + * Alternatively, the contents of this file may be used under the terms of + * either the GNU General Public License Version 2 or later (the "GPL"), or + * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), + * in which case the provisions of the GPL or the LGPL are applicable instead + * of those above. If you wish to allow use of your version of this file only + * under the terms of either the GPL or the LGPL, and not to allow others to + * use your version of this file under the terms of the MPL, indicate your + * decision by deleting the provisions above and replace them with the notice + * and other provisions required by the GPL or the LGPL. If you do not delete + * the provisions above, a recipient may use your version of this file under + * the terms of any one of the MPL, the GPL or the LGPL. + * + * ***** END LICENSE BLOCK ***** */ + +(function() { + "use strict"; + + function relativeDate(date) { + var diff = (((new Date()).getTime() - date.getTime()) / 1000), + day_diff = Math.floor(diff / 86400), + dObj = { "friendly" : date.toLocaleDateString(), + "additional" : date.toLocaleTimeString(), + "utc" : date.toUTCString(), + "locale" : date.toLocaleString() }; + + /* some kind of error */ + if (day_diff < 0) { + dObj.friendly = "in the future!?!"; + return dObj; + } else if (isNaN(day_diff)) { + dObj.friendly = dObj.additional = "unknown"; + return dObj; + } + + if (day_diff === 0) { + if (diff < 60) { + dObj.friendly = "just now"; + return dObj; + } + if (diff < 120 + 30) { /* 1 minute plus some fuzz */ + dObj.friendly = "a minute ago"; + return dObj; + } + if (diff < 3600) { + dObj.friendly = Math.floor(diff / 60) + " minutes ago"; + return dObj; + } + if (diff < (60 * 60) * 2) { + dObj.friendly = "1 hour ago"; + return dObj; + } + if (diff < 24 * 60 * 60) { + dObj.friendly = Math.floor(diff / 3600) + " hours ago"; + return dObj; + } + } + if (day_diff === 1) { + dObj.friendly = "yesterday"; + return dObj; + } + if (day_diff < 7) { + dObj.friendly = day_diff + " days ago"; + return dObj; + } + if (day_diff < 8) { + dObj.friendly = "last week"; + return dObj; + } + /* for this scope: we want day of week and the date + plus the month (if different) */ + if (day_diff < 31) { + dObj.friendly = Math.ceil(day_diff / 7) + " weeks ago"; + return dObj; + } + + /* for this scope: we want month + date */ + if (day_diff < 62) { + dObj.friendly = "a month ago"; + return dObj; + } + if (day_diff < 365) { + dObj.friendly = Math.ceil(day_diff / 31) + " months ago"; + return dObj; + } + + /* for this scope: we want month + year */ + if (day_diff >= 365 && day_diff < 730) { + dObj.additional = date.toLocaleDateString(); + dObj.friendly = "a year ago"; + return dObj; + } + if (day_diff >= 365) { + dObj.additional = date.toLocaleDateString(); + dObj.friendly = Math.ceil(day_diff / 365) + " years ago"; + return dObj; + } + return dObj; + } + + function syncAndDisplayEmails() { + var emails = {}; + + BrowserIDIdentities.syncEmailKeypairs(function() { + emails = BrowserIDIdentities.getStoredEmailKeypairs(); + if (_.isEmpty(emails)) { + $("#content").hide(); + } else { + $("#content").show(); + $("#vAlign").hide(); + displayEmails(emails); + } + }); + } + + function displayEmails(emails) { + 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 = relativeDate(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.removeEmail(email, syncAndDisplayEmails); + } + } + + BrowserID.manageAccount = function() { + $('#cancellink').click(function() { + if (confirm('Are you sure you want to cancel your account?')) { + BrowserIDNetwork.cancelUser(function() { + document.location="/"; + }); + } + }); + + $('#manageAccounts').click(function(event) { + event.preventDefault(); + + $('#emailList').addClass('remove'); + $(this).hide(); + $("#cancelManage").show(); + }); + + $('#cancelManage').click(function(event) { + event.preventDefault(); + + $('#emailList').removeClass('remove'); + $(this).hide(); + $("#manageAccounts").show(); + }); + + syncAndDisplayEmails(); + }; + +}()); + + + diff --git a/browserid/static/js/pages/verify_email_address.js b/browserid/static/js/pages/verify_email_address.js new file mode 100644 index 000000000..5315582c6 --- /dev/null +++ b/browserid/static/js/pages/verify_email_address.js @@ -0,0 +1,59 @@ +/*globals BrowserID:true, BrowserIDNetwork: true, $:true */ +/* ***** BEGIN LICENSE BLOCK ***** + * Version: MPL 1.1/GPL 2.0/LGPL 2.1 + * + * The contents of this file are subject to the Mozilla Public License Version + * 1.1 (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * http://www.mozilla.org/MPL/ + * + * Software distributed under the License is distributed on an "AS IS" basis, + * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License + * for the specific language governing rights and limitations under the + * License. + * + * The Original Code is Mozilla BrowserID. + * + * The Initial Developer of the Original Code is Mozilla. + * Portions created by the Initial Developer are Copyright (C) 2011 + * the Initial Developer. All Rights Reserved. + * + * Contributor(s): + * + * Alternatively, the contents of this file may be used under the terms of + * either the GNU General Public License Version 2 or later (the "GPL"), or + * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), + * in which case the provisions of the GPL or the LGPL are applicable instead + * of those above. If you wish to allow use of your version of this file only + * under the terms of either the GPL or the LGPL, and not to allow others to + * use your version of this file under the terms of the MPL, indicate your + * decision by deleting the provisions above and replace them with the notice + * and other provisions required by the GPL or the LGPL. If you do not delete + * the provisions above, a recipient may use your version of this file under + * the terms of any one of the MPL, the GPL or the LGPL. + * + * ***** END LICENSE BLOCK ***** */ + +(function() { + "use strict"; + + BrowserID.verifyEmailAddress = function(token) { + $("#signUpForm").submit(function(event) { + event.preventDefault(); + + var email = $("#email").val(), + pass = $("#password").val(), + pass2 = $("#vpassword").val(); + + if (pass && pass === pass2) { + BrowserIDNetwork.completeUserRegistration(token, pass, function onSuccess(registered) { + if (registered) { + $("#congrats").fadeIn(250); + } + }, function onFailure() { + + }); + } + }); + }; +}()); diff --git a/browserid/views/index.ejs b/browserid/views/index.ejs index 2d5da1d7e..09fb81328 100644 --- a/browserid/views/index.ejs +++ b/browserid/views/index.ejs @@ -39,7 +39,7 @@ </script> <script type="text/javascript"> - $(document).ready(function () { + $(function () { $('.granted').hover(function() { $('#card').toggleClass('insert'); $('#status').delay(400).toggleClass('green'); diff --git a/browserid/views/layout.ejs b/browserid/views/layout.ejs index 3bb499a15..2760c5567 100644 --- a/browserid/views/layout.ejs +++ b/browserid/views/layout.ejs @@ -17,10 +17,14 @@ <script src="/js/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="/js/json2.js" type="text/javascript"></script> <script src="/dialog/resources/underscore-min.js" type="text/javascript"></script> + <script src="/js/browserid.js" type="text/javascript"></script> + <script src="/js/pages/index.js" type="text/javascript"></script> + <script src="/js/pages/add_email_address.js" type="text/javascript"></script> + <script src="/js/pages/verify_email_address.js" type="text/javascript"></script> + <script src="/js/pages/manage_account.js" type="text/javascript"></script> <script src="/dialog/resources/storage.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="/js/browserid.js" type="text/javascript"></script> <% } %> <title><%- title %></title> </head> -- GitLab