Update Master Password Web version to support all algorithm versions and Tom's latest mpw-js.

.gitmodules

@@ -16,6 +16,6 @@
 [submodule "External/jrswizzle"]
 	path = External/jrswizzle
 	url = git://github.com/jonmarimba/jrswizzle.git
-[submodule "Site/mpw-js/js/mpw-js"]
+[submodule "MasterPassword/Web/js/mpw-js"]
-	path = Site/mpw-js/js/mpw-js
+	path = MasterPassword/Web/js/mpw-js
 	url = https://github.com/tmthrgd/mpw-js.git

MasterPassword/Web/.gitignore

@@ -0,0 +1 @@
+js/es5

MasterPassword/Web/css/main.css

@@ -60,6 +60,9 @@ input:focus, select:focus {
 input.half, select.half {
     width:              33%;
 }
+input.minimal, select.minimal {
+    width:              auto;
+}
 input[type="submit"], input[type="image"] {
     background:         transparent;
     border:             none;

MasterPassword/Web/index.html

@@ -22,6 +22,12 @@
                 <input id="masterPassword" type="password" placeholder="Your Master Password" /><br>
                 <input type="submit" value="⏎" /><br>
                 <input type="image" src="img/spinner.svg" />
+                <select id="version" class="minimal">
+                    <option value="0">V0</option>
+                    <option value="1">V1</option>
+                    <option value="2">V2</option>
+                    <option value="3" selected>V3</option>
+                </select>
             </p>
         </form></section>
 

MasterPassword/Web/js/Makefile

@@ -0,0 +1,15 @@
+build: mkdir-es5 es5/mpw-js/pbkdf2.js es5/mpw-js/scrypt.js es5/mpw-js/mpw.js es5/setImmediate-polyfill.js
+
+mkdir-es5:
+	mkdir -p es5
+	mkdir -p es5/mpw-js
+
+es5/%: $*
+	babel $* -o $@ --presets es2015 --source-maps
+
+clean:
+	rm -rf es5 2>/dev/null
+
+update:
+	git submodule update --init --recursive
+	git submodule foreach git pull origin master

MasterPassword/Web/js/README.md

@@ -0,0 +1,8 @@
+ES5
+===
+
+If your browser does not support ECMAScript 6, you will need to run babel to compile an ES5-compatible version of the ES6 mpw-js code.
+
+1. Install npm.  On OS X, you can use `brew install npm`.
+2. Install babel.  With npm installed, you can use `npm -g install babel-cli babel-preset-es2015`
+3. Build the ES5-translation of the ES6 code.  From this directory, just run `make`.

MasterPassword/Web/js/dependencies.js

@@ -1,3 +1,13 @@
+// Test for required ES6 features
+// Use an eval call to avoid a hard-fail on ES5 parsers.
+var ES6 = false;
+var esdir = "es5/";
+try {
+    // Use ES6 code if the ES6 class, let, destructive assignment and rest arguments are supported.
+    eval("class $ES6 { constructor() { let b = true; this.b = b; } } var [ES6, esdir] = ((...args) => args)(new $ES6().b, '')");
+} catch (e) {
+}
+
 // If crypto.subtle is not supported, try crypto.webkitSubtle instead.
 if (window.crypto && !window.crypto.subtle && window.crypto.webkitSubtle)
     window.crypto.subtle = window.crypto.webkitSubtle;
@@ -12,9 +22,8 @@ if (!window.crypto || !window.crypto.subtle) {
     document.write("<script src=https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/lib-typedarrays-min.js><\/script>");
 }
 
-if (!Number.MAX_SAFE_INTEGER) {
+if (!Number.MAX_SAFE_INTEGER)
     Number.MAX_SAFE_INTEGER = Math.pow(2, 53) - 1;
-}
 
 // If Typed Arrays are not supported we include the polyfill
 // https://github.com/inexorabletash/polyfill
@@ -29,24 +38,11 @@ window.TextEncoder || document.write("<script src=js/encoding-polyfill.js><\/scr
 window.Promise || document.write("<script src=js/promise-polyfill.js><\/script>");
 
 // If setImmediate is not implemented we include the polyfill
-window.setImmediate || document.write("<script src=js/setImmediate-polyfill.js><\/script>");
+window.setImmediate || document.write("<script src=js/" + esdir + "setImmediate-polyfill.js><\/script>");
-
-// Test for required ES6 features
-// Use an eval call to avoid a hard-fail on ES5 parsers.
-var ES6 = false;
-var esdir = "es5/";
-try {
-    // Use ES6 code if the ES6 class, let, destructive assignment and rest arguments are supported.
-    eval("class $ES6 { constructor() { let b = true; this.b = b; } } var [ES6, esdir] = ((...args) => args)(new $ES6().b, '')");
-} catch (e) {
-}
-
-// If ES6 is not supported we must include traceur-runtime.js
-ES6 || document.write("<script src=js/mpw-js/traceur-runtime.js><\/script>");
 
 // Include the scrypt implementation
-document.write("<script src=lib/" + esdir + "pbkdf2.js><\/script>");
+document.write("<script src=js/" + esdir + "mpw-js/pbkdf2.js><\/script>");
-document.write("<script src=js/mpw-js/" + esdir + "scrypt.js?1><\/script>");
+document.write("<script src=js/" + esdir + "mpw-js/scrypt.js?1><\/script>");
 
 // Include the MPW class
-document.write("<script src=js/mpw-js/" + esdir + "mpw.js?1><\/script>");
+document.write("<script src=js/" + esdir + "mpw-js/mpw.js?1><\/script>");

MasterPassword/Web/js/main.js

@@ -1,71 +1,78 @@
-var mpw;
+var mpw, error;
 
 function updateMPW() {
-    update('identity', 'identity');
+    mpw = null;
-    mpw = new MPW( $('#userName')[0].value, $('#masterPassword')[0].value );
+    startWork();
-    updateActive();
+    mpw = new MPW( $('#userName')[0].value, $('#masterPassword')[0].value, $('#version')[0].valueAsNumber );
-}
-function updateActive() {
-    if (!mpw)
-        update('identity');
-
-    else
     mpw.key.then(
         function() {
-                update('site');
+            doneWork();
         },
         function(reason) {
-                update('identity', null, reason);
+            error = reason;
+            mpw = null;
+            doneWork();
         }
     );
 }
-function update(active, working, error) {
+function startWork() {
-    // Working
+    update(true);
-    if (working == 'identity') {
+}
-        $('#identity').addClass('working').find('input, select').attr('disabled', 'disabled');
+function doneWork() {
-    }
+    update(false);
-    else {
+}
-        $('#userName')[0].value = $('#masterPassword')[0].value = '';
+function update(working) {
-        $('#identity').removeClass('working').find('input, select').removeAttr('disabled');
+    var screen = mpw? 'site': 'identity';
-    }
-    if (working == 'site')
-        $('#site').addClass('working');
-    else
-        $('#site').removeClass('working');
 
-    // Active
+    // Screen Name
-    if (active == 'identity') {
+    if (screen == 'identity') {
         $('#identity').addClass('active');
-        $('#site').removeClass('active');
 
         if (!working)
             $('#userName').focus();
     }
-    else {
+    else
         $('#identity').removeClass('active');
+
+    if (screen == 'site') {
         $('#site').addClass('active');
-        $('#siteName').focus();
 
         if (!working)
             $('#siteName').focus();
     }
+    else
+        $('#site').removeClass('active');
+
+    // Working
+    if (working && screen == 'identity')
+        $('#identity').addClass('working').find('input, select').attr('disabled', 'disabled');
+    else {
+        $('#userName')[0].value = $('#masterPassword')[0].value = '';
+        $('#identity').removeClass('working').find('input, select').removeAttr('disabled');
+    }
+
+    if (working && screen == 'site')
+        $('#site').addClass('working');
+    else
+        $('#site').removeClass('working');
 
     // Error
     $('#error').text(error);
 }
 function updateSite() {
-    update('site', 'site');
+    if (!mpw) {
+        doneWork();
+        return
+    }
 
-    if (!mpw)
+    startWork();
-        updateActive();
-
-    else
     mpw.generatePassword( $('#siteName')[0].value, $('#siteCounter')[0].valueAsNumber, $('#siteType')[0].value )
        .then( function (sitePassword) {
            $('#sitePassword').text(sitePassword);
-               update('site');
+           doneWork();
        }, function (reason) {
-               update('site', null, reason);
+           error = reason;
+           doneWork();
        });
 }
 function selectText(element) {
@@ -95,11 +102,11 @@ $(function() {
     });
     $('#logout').on('click', function() {
         mpw = null;
-        updateActive();
+        doneWork();
     });
     $('#sitePassword').on('click', function() {
         selectText(this);
     });
 
-    updateActive();
+    doneWork();
 });