EFForg · vzelmanov · Apr 18, 2015 · Apr 18, 2015 · Apr 18, 2015 · Apr 18, 2015
diff --git a/app/changePassword.html b/app/changePassword.html
@@ -6,6 +6,9 @@
     <link rel="shortcut icon" href="images/favicon.png" media="screen" />
     <script type="text/javascript" src="lib/jquery-2.1.0.min.js"></script>
     <script type="text/javascript" src="lib/jstz-1.0.4.min.js"></script>
+    <script type="text/javascript" src="lib/handlebars-v1.3.0.min.js"></script>
+    <script type="text/javascript" src="js/app.js"></script>
+    <script type="text/javascript" src="js/templates.js"></script>
     <script type="text/javascript" src="js/helper.js"></script>
     <script type="text/javascript" src="js/request.js"></script>
     <script type="text/javascript" src="js/errorCallback.js"></script>
@@ -16,18 +19,6 @@
     <div id="outerContainer">
       <header></header>
       <div class="formDiv">
-        <h1 class="changePassword">Change Administrator Password</h1>
-        <h1 class="setPassword">Set Administrator Password</h1>
-        <form>
-          <div id="genericError" class="inputError"></div>
-          <input type="password" id="oldPassword" class="changePassword" placeholder="Old password"/><br>
-          <br>
-          <input type="password" id="newPassword" placeholder="New password"/><br>
-          <div id="newPasswordError" class="inputError"></div>
-          <input type="password" id="retypePassword" placeholder="Retype new password"/><br>
-          <div id="retypePasswordError" class="inputError"></div>
-          <input type="submit" value="Submit"></input>
-        </form>
       </div>
     </div>
   </body>

diff --git a/app/js/changePassword.js b/app/js/changePassword.js
@@ -1,4 +1,6 @@
-var changePassword = (function() {
+var changePassword = (function(root) {
+  var changePasswordTemplate = Handlebars.templates.changePassword;
+  root.html(changePasswordTemplate());
   var form = $('form');
   var oldPassword = $('#oldPassword');
   var newPassword = $('#newPassword');
@@ -92,5 +94,5 @@ var changePassword = (function() {
 });
 
 $(function() {
-  changePassword();
+  changePassword($('.formDiv'));
 });
diff --git a/app/js/login.js b/app/js/login.js
@@ -5,12 +5,18 @@ var loginModule = (function() {
   var passwordError;
   var genericError;
 
-  var init = function(){
+  var init = function(root){
+    initializeTemplate(root);
     initializeFields();
     initializeEvents();
     initializeForm();
   };
 
+  var initializeTemplate = function(root) {
+    var loginTemplate = Handlebars.templates.login;
+    root.html(loginTemplate());
+  }
+
   var initializeFields = function(){
     form = $('form');
     password = $('#password');
@@ -69,6 +75,6 @@ var loginModule = (function() {
 })();
 
 $(document).ready(function() {
-  loginModule.init();
+  loginModule.init($(".formDiv"));
 });
 
diff --git a/app/js/templates.js b/app/js/templates.js
diff --git a/app/login.html b/app/login.html
@@ -5,6 +5,10 @@
     <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
     <link rel="shortcut icon" href="images/favicon.png" media="screen" />
     <script type="text/javascript" src="lib/jquery-2.1.0.min.js"></script>
+    <script type="text/javascript" src="lib/handlebars-v1.3.0.min.js"></script>
+    <script type="text/javascript" src="lib/jquery-timer.js"></script>
+    <script type="text/javascript" src="js/app.js"></script>
+    <script type="text/javascript" src="js/templates.js"></script>
     <script type="text/javascript" src="js/request.js"></script>
     <script type="text/javascript" src="js/helper.js"></script>
     <script type="text/javascript" src="js/errorCallback.js"></script>
@@ -15,15 +19,6 @@
   <body>
     <header></header>
     <div class="formDiv">
-      <h1>Open Wireless</h1>
-      <h4>Administrator Login</h4>
-      <form>
-        <div id="genericError" class="inputError"></div>
-        <input type="password" placeholder="Administrator password" id="password"/><br>
-        <input type="checkbox" id="showPassword"><label for="showPassword">Show password</label><br>
-        <div id="passwordError" class="inputError"></div>
-        <input type="submit" value="Login"/>
-      </form>
     </div>
   </body>
 </html>
diff --git a/app/templates/changePassword.handlebars b/app/templates/changePassword.handlebars
@@ -0,0 +1,11 @@
+<h1 class="setPassword">Set Administrator Password</h1>
+<form>
+  <div id="genericError" class="inputError"></div>
+  <input type="password" id="oldPassword" class="changePassword" placeholder="Old password"/><br>
+  <br>
+  <input type="password" id="newPassword" placeholder="New password"/><br>
+  <div id="newPasswordError" class="inputError"></div>
+  <input type="password" id="retypePassword" placeholder="Retype new password"/><br>
+  <div id="retypePasswordError" class="inputError"></div>
+  <input type="submit" value="Submit"></input>
+</form>
diff --git a/app/templates/login.handlebars b/app/templates/login.handlebars
@@ -0,0 +1,9 @@
+<h1>Open Wireless</h1>
+<h4>Administrator Login</h4>
+<form>
+  <div id="genericError" class="inputError"></div>
+  <input type="password" placeholder="Administrator password" id="password"/><br>
+  <input type="checkbox" id="showPassword"><label for="showPassword">Show password</label><br>
+  <div id="passwordError" class="inputError"></div>
+  <input type="submit" value="Login"/>
+</form>
diff --git a/karma.conf.js b/karma.conf.js
@@ -18,7 +18,6 @@ module.exports = function(config) {
         'app/lib/jquery-2.1.0.min.js',
         'app/lib/*.js',
         'app/js/*.js',
-        'spec/jasmine-fixture.min.js',
         'spec/**/*.js'
     ],
 

diff --git a/run-tests.sh b/run-tests.sh
@@ -15,10 +15,7 @@ else
 fi
 pip install $USER -qr requirements.txt
 
-if ! make assert_templates_js_up_to_date ; then
-  echo 'Error: templates.js out-of-date. Run `make app/js/templates.js`'
-  exit 1
-fi
+make
 
 scripts/unit
 if which nodejs ; then

diff --git a/spec/index.html b/spec/index.html
@@ -8,9 +8,11 @@
   <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
   <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
   <script type="text/javascript" src="lib/jquery-2.1.0.min.js"></script>
-  <script type="text/javascript" src="lib/jasmine-fixture.min.js"></script>
 
   <!-- include source files here... -->
+  <script type="text/javascript" src="lib/handlebars-v1.3.0.min.js"></script>
+  <script type="text/javascript" src="../js/app.js"></script>
+  <script type="text/javascript" src="../js/templates.js"></script>
   <script type="text/javascript" src="../app/js/request.js" data-cover></script>
   <script type="text/javascript" src="../app/js/helper.js" data-cover></script>
   <script type="text/javascript" src="../app/js/login.js" data-cover></script>

diff --git a/spec/integration/changePasswordSpec.js b/spec/integration/changePasswordSpec.js
@@ -1,19 +1,29 @@
 describe("Change password page", function() {
-  var newPassword, retypePassword, passwordForm, newPasswordError, retypePasswordError;
+  var newPassword, retypePassword, passwordForm, newPasswordError, retypePasswordError, root, initTest;
 
   beforeEach(function() {
-    affix('form input#newPassword+input#retypePassword+input#newPasswordError+input#retypePasswordError+input#oldPassword+div#genericError');
-    passwordForm   = $('form');
-    oldPassword = $("#oldPassword");
-    newPassword    = $("#newPassword");
-    retypePassword = $("#retypePassword");
-    newPasswordError = $("#newPasswordError");
-    retypePasswordError = $("#retypePasswordError");
-    genericError = $("#genericError");
+    root = $('<div />');
+    $('body').append(root);
+
     spyOn(helperModule, "redirectTo").andCallFake(function(url) {
       redirect = url;
     });
-    changePassword();
+
+    initTest = function() {
+      changePassword(root);
+      passwordForm   = $('form', root);
+      oldPassword = $("#oldPassword", root);
+      newPassword    = $("#newPassword", root);
+      retypePassword = $("#retypePassword", root);
+      newPasswordError = $("#newPasswordError", root);
+      retypePasswordError = $("#retypePasswordError", root);
+      genericError = $("#genericError", root);
+    }
+    initTest();
+  });
+
+  afterEach(function() {
+    root.remove();
   });
 
   it("should show the user an error if the password field is empty", function() {
@@ -75,10 +85,11 @@ describe("Change password page", function() {
 
   it("should redirect to setSSID page on first time change", function() {
     spyOn($, "ajax").andCallFake(function(params){
-        params.success({});
+      params.success({});
     });
     spyOn(helperModule, "url").andReturn("https://gw.home.lan/changePassword.html?first_time=true");
-    changePassword();
+    initTest();
+
     newPassword.val("asdfghjkl12P");
     retypePassword.val("asdfghjkl12P");
     passwordForm.submit();
@@ -87,7 +98,7 @@ describe("Change password page", function() {
 
   it("should redirect to settings page on change that's not the first time", function() {
     spyOn($, "ajax").andCallFake(function(params){
-        params.success({});
+      params.success({});
     });
     newPassword.val("asdfghjkl12P");
     retypePassword.val("asdfghjkl12P");
@@ -98,7 +109,7 @@ describe("Change password page", function() {
 
   it("should stay on page and display error if old password was incorrect", function() {
     spyOn($, "ajax").andCallFake(function(params){
-        params.error({responseJSON: {'error': 'Bad password'}});
+      params.error({responseJSON: {'error': 'Bad password'}});
     });
     oldPassword.val("badpass");
     newPassword.val("asdfghjkl12P");

diff --git a/spec/integration/loginSpec.js b/spec/integration/loginSpec.js
@@ -1,15 +1,20 @@
 describe("Login Module", function() {
-  var password, showPassword, loginForm, redirect, passwordError, genericError;
+  var root, password, showPassword, loginForm, redirect, passwordError, genericError;
 
   beforeEach(function() {
-    affix('form input#password[type="password"]+input#showPassword+input#passwordError+div#genericError');
-    loginForm = $('form');
-    password = $('#password');
-    showPassword = $('#showPassword');
-    passwordError = $("#passwordError");
-    genericError = $("#genericError");
+    root = $("<div/>");
+    $('body').append(root);
+    loginModule.init(root);
+    loginForm = $('form', root);
+    password = $('#password', root);
+    showPassword = $('#showPassword', root);
+    passwordError = $("#passwordError", root);
+    genericError = $("#genericError", root);
     helperModule.redirectTo = function(url) { redirect = url; }
-    loginModule.init();
+  });
+
+  afterEach(function() {
+    root.remove();
   });
 
   it("should show the user an error if password field is empty", function() {

diff --git a/spec/jasmine-fixture.min.js b/spec/jasmine-fixture.min.js