Allows to add multiple accounts

gbraad-apps · Jun 8, 2012 · 20353a7 · 20353a7
1 parent 09b648a
commit 20353a7
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 22 deletions.
diff --git a/README b/README
@@ -1,5 +1,4 @@
 A simple Google Authenticator app written in HTML using jQuery Mobile, jsSHA and LocalStorage.
-Currently supports a single account
 
 Based on the JavaScript implementation as provided by Tin Isles:
 http://blog.tinisles.com/2011/10/google-authenticator-one-time-password-algorithm-in-javascript/
diff --git a/code.js b/code.js
@@ -59,34 +59,74 @@ function timer() {
     var epoch = Math.round(new Date().getTime() / 1000.0);
     var countDown = 30 - (epoch % 30);
     if (epoch % 30 == 0) {
-        $('#otp').text(updateOtp(localStorage.keySecret));
+        updateKeys();
     }
     $('#updatingIn').text(countDown);
 }
 
+function updateKeys() {
+    var accountList = $('#accounts');
+    // Remove all except the first line
+    accountList.find("li:gt(0)").remove();
+
+    $.each(getObject('accounts'), function (index, account) {
+        var key = updateOtp(account.secret);
+        var delLink = $('<a href="#"></a>');
+        delLink.click(function () {
+            deleteAccount(index)
+        });
+        var detLink = $('<a href="#"><h3 id="account' + index + '">' + account.name + '</h3><p id="key' + index + '">' + key + '</p></a>');
+        var accElem = $('<li>').append(detLink).append(delLink);
+
+        accountList.append(accElem);
+    });
+    accountList.listview('refresh');
+}
+
+function deleteAccount(index) {
+    var accounts = getObject('accounts');
+    accounts.splice(index, 1);
+    setObject('accounts', accounts);
+    updateKeys();
+}
+
+function setObject(key, value) {
+    localStorage.setItem(key, JSON.stringify(value));
+}
+
+function getObject(key) {
+    var value = localStorage.getItem(key);
+    return value && JSON.parse(value);
+}
+
 $(function () {
     // Check if local storage is supported
     if (typeof (Storage) !== "undefined") {
-        // Set the overview page
-        $('#otp').text(updateOtp(localStorage.keySecret));
-        $('#account').text(localStorage.keyAccount);
-        setInterval(timer, 1000);
+        if (!getObject('accounts')) {
+            var account = [{
+                'name': 'alice@google.com',
+                'secret': 'JBSWY3DPEHPK3PXP'
+            }, ];
+            setObject('accounts', account);
+        }
 
-        // Load from local storage
-        $('#keySecret').val(localStorage.keySecret);
-        $('#keyAccount').val(localStorage.keyAccount);
+        updateKeys();
+        setInterval(timer, 1000);
     } else {
         $('#updatingIn').text("x");
         $('#account').text("No Storage support");
     }
 
     $('#save').click(function () {
         // Save in local storage
-        localStorage.keySecret = $('#keySecret').val();
-        localStorage.keyAccount = $('#keyAccount').val();
+        var account = {
+            'name': $('#keyAccount').val(),
+            'secret': $('#keySecret').val()
+        };
+        var accounts = getObject('accounts');
+        accounts.push(account);
+        setObject('accounts', accounts);
 
-        // Set the overview page
-        $('#otp').text(updateOtp(localStorage.keySecret));
-        $('#account').text(localStorage.keyAccount);
+        updateKeys();
     });
 });
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <html>
 	<head>
+		<title>Google Authenticator</title>
 		<script src="jquery-1.7.2.min.js"></script>
 		<script src="jquery.mobile-1.1.0.min.js"></script>
 		<script src="sha.js"></script>
@@ -14,12 +15,8 @@ <h1>Google Authenticator</h1>
 			</div>
 
 			<div data-role="content">	
-				<ul data-role="listview" data-inset="true" data-theme="g">
-					<li data-role="list-divider">One-time passwords<span class="ui-li-count" id='updatingIn'></span></li>
-					<li>
-						<h3 id="account"></h3>
-						<p id="otp"></p></li>
-					</li>
+				<ul data-role="listview" data-inset="true" data-theme="g"  data-split-theme="d" data-split-icon="delete" id="accounts">
+					<li data-role="list-divider">One-time passwords<span class="ui-li-count" id='updatingIn'>..</span></li>
 				</ul>
 			</div>
 
@@ -40,8 +37,8 @@ <h1>Settings</h1>
 					</form>
 				</p>
 			        <p>
-					<a href="#main" data-role="button" id="save">Save</a>
-					<a href="#main" data-role="button">Back</a>
+					<a href="#main" data-role="button" data-rel="back" data-theme="b" id="save">Add</a>
+					<a href="#main" data-role="button" data-rel="back" data-theme="c">Cancel</a>
 				</p>
 			</div>
 		</div>