Issue fxbox#13 - Add very basic FTU, r=ferjm

michielbdejong · Feb 9, 2016 · 9d681a1 · 9d681a1
1 parent b924113
commit 9d681a1
Show file tree

Hide file tree

Showing 7 changed files with 239 additions and 10 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -0,0 +1,32 @@
+{
+  "camelcase": false,
+  "curly": true,
+  "forin": false,
+  "latedef": "nofunc",
+  "newcap": false,
+  "noarg": true,
+  "nonew": true,
+  "quotmark": "single",
+  "undef": true,
+  "unused": "vars",
+  "strict": true,
+  "trailing": true,
+  "maxlen": 80,
+
+  "eqnull": true,
+  "esnext": true,
+  "expr": true,
+  "globalstrict": true,
+
+  "maxerr": 1000,
+  "regexdash": true,
+  "laxcomma": true,
+  "proto": true,
+
+  "browser": true,
+  "devel": true,
+  "nonstandard": true,
+  "worker": true,
+
+  "-W078": true
+}
diff --git a/.travis.yml b/.travis.yml
@@ -2,6 +2,10 @@ language: rust
 rust:
     - nightly
 
+addons:
+  hosts:
+    - foxbox.local
+
 before_script:
     - "sh -e /etc/init.d/xvfb start"
     - "export DISPLAY=:99.0"
@@ -10,9 +14,10 @@ before_script:
     - sleep 5
     - nvm install 4.2
     - nvm use 4.2
-    - npm install selenium-webdriver
+    - npm install selenium-webdriver mocha jshint
 
 script:
     - cargo build # Linter is also executed here
     - RUST_BACKTRACE=1 cargo test
-    - (cargo run > /dev/null &) ; node test/selenium/ftu_test.js
+    - jshint static/*.js
+    - (cargo run > /dev/null &) ; ./node_modules/.bin/mocha test/selenium/ftu_test.js
diff --git a/docs/user-manual.md b/docs/user-manual.md
@@ -0,0 +1,5 @@
+# Setting up your FoxBox
+
+* Connect your FoxBox to your internet router, using the ethernet cable provided.
+* Browse to [http://foxbox.local/](http://foxbox.local/).
+* Follow the instructions there.
diff --git a/static/index.html b/static/index.html
@@ -2,8 +2,45 @@
 <html>
   <head>
     <title>FoxBox</title>
+    <meta charset="utf-8">
   </head>
   <body>
-    <h1>Welcome To FoxBox!</h1>
+    <div id="set-admin-pwd">
+      <h1>Welcome to your FoxBox!</h1>
+      <p>
+        <label for="pwd1-input">Please choose an admin password (8 characters minimum):</label>
+        <input type="password" id="pwd1-input">
+      </p>
+      <p>
+        <label for="pwd2-input">Please repeat your admin password:</label>
+        <input type="password" id="pwd2-input">
+      </p>
+      <p>
+        <input id="set-button" type="submit" value="Set">
+      </p>
+    </div>
+    <div id="success-message" style="display: none;">
+      <h1 id="thank-you">Thank you!</h1>
+      <p>
+        Now please use an app like
+        <a href="http://example.com/">http://example.com/</a>
+        to connect your IoT devices and set everything up. Please write down the
+        following information:
+      </p>
+      <ul>
+        <li>
+          FoxBox location ('<span id="location-span">
+            <em>determining...</em>
+          </span>').
+        </li>
+        <li>
+          Your username ('admin')
+        </li>
+        <li>
+          Your password (the one you just created).
+        </li>
+      </ul>
+    </div>
   </body>
+  <script src="setup.js"></script>
 </html>
diff --git a/static/setup.js b/static/setup.js
@@ -0,0 +1,47 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+'use strict';
+
+function success() {
+  document.getElementById('location-span').innerHTML = window.location.href;
+  document.getElementById('set-admin-pwd').style.display = 'none';
+  document.getElementById('success-message').style.display = 'block';
+}
+
+function setPassword() {
+  var pwd = document.getElementById('pwd1-input').value;
+  if (document.getElementById('pwd2-input').value != pwd) {
+    window.alert('Passwords don\'t match! Please try again.');
+    return;
+  }
+  if (pwd.length < 8) {
+    window.alert('Please use a password of at least 8 characters.');
+    return;
+  }
+  var xhr = new XMLHttpRequest();
+  xhr.open('POST', '/setup', true);
+  xhr.onload = function() {
+    if (xhr.status != 204) {
+      console.log('TO DO: Deal with unsuccessful API response', xhr.status,
+          xhr.responseText);
+    }
+    // Note: If successful, the API call will have returned a session token,
+    // but we currently don't use this for anything.
+    // TODO: Save this session token on the client-side (e.g. in IndexedDB)
+    // for reuse in the OAuth dialog UI, so that the user does not have to
+    // retype the password they just created when connecting an app via OAuth
+    // the first time.
+    success();
+  };
+  // See https://github.com/fxbox/users/blob/master/doc/API.md#post-setup
+  xhr.setRequestHeader('Content-Type', 'application/json');
+  xhr.send(JSON.stringify({
+    email: 'admin@foxbox.local',
+    username: 'admin',
+    password: pwd
+  }));
+}
+
+document.getElementById('set-button').onclick =  setPassword;
diff --git a/test/selenium/.jshintrc b/test/selenium/.jshintrc
@@ -0,0 +1,7 @@
+{
+  "extends": "../../.jshintrc",
+  "predef": [
+    "require"
+  ],
+  "mocha": true
+}
diff --git a/test/selenium/ftu_test.js b/test/selenium/ftu_test.js
@@ -1,10 +1,106 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+'use strict';
+
 var webdriver = require('selenium-webdriver'),
-  until = require('selenium-webdriver').until;
+  assert = require('assert');
+
+describe('setup page', function() {
+  var driver;
+  this.timeout(8000);
+  before(function() {
+    driver = new webdriver.Builder().
+      forBrowser('firefox').
+      build();
+  });
+  beforeEach(function() {
+    driver.get('http://foxbox.local:3000/');
+  });
+  after(function() {
+    driver.quit();
+  });
+
+  it('should be titled FoxBox', function () {
+    return driver.wait(webdriver.until.titleIs('FoxBox'), 5000)
+      .then(function(value) {
+        assert.equal(value, true);
+      });
+  });
+  describe('UI to set admin password', function() {
+    var elts;
+    beforeEach(function() {
+      elts = {
+        pwd1: driver.findElement(webdriver.By.id('pwd1-input')),
+        pwd2: driver.findElement(webdriver.By.id('pwd2-input')),
+        set: driver.findElement(webdriver.By.id('set-button'))
+      };
+    });
+    it('should have the right fields', function () {
+      var types = {
+        pwd1: 'password',
+        pwd2: 'password',
+        set: 'submit'
+      };
+      var promises = Object.keys(elts).map(function(key) {
+        return elts[key].getAttribute('type').then(function(value) {
+          assert.equal(value, types[key]);
+        });
+      });
+      return Promise.all(promises);
+    });
+
+    it('should reject non-matching passwords', function () {
+      return elts.pwd1.sendKeys('asdfasdf').then(function() {
+        return elts.pwd2.sendKeys('qwerqwer');
+      }).then(function() {
+        return elts.set.click();
+      }).then(function() {
+        return driver.wait(webdriver.until.alertIsPresent(), 5000);
+      }).then(function() {
+        return driver.switchTo().alert();
+      }).then(function(alert) {
+        return alert.getText().then(function(text) {
+          assert.equal(text, 'Passwords don\'t match! Please try again.');
+        }).then(function() {
+          alert.dismiss();
+        });
+      });
+    });
 
-var driver = new webdriver.Builder().
-  forBrowser('firefox').
-  build();
+    it('should reject short passwords', function () {
+      return elts.pwd1.sendKeys('asdf').then(function() {
+        return elts.pwd2.sendKeys('asdf');
+      }).then(function() {
+        return elts.set.click();
+      }).then(function() {
+        return driver.wait(webdriver.until.alertIsPresent(), 5000);
+      }).then(function() {
+        return driver.switchTo().alert();
+      }).then(function(alert) {
+        return alert.getText().then(function(text) {
+          assert.equal(text, 'Please use a password of at least 8 characters.');
+        }).then(function() {
+          alert.dismiss();
+        });
+      });
+    });
 
-driver.get('http://localhost:3000/');
-driver.wait(until.titleIs('FoxBox'), 10000);
-driver.quit();
+    it('should accept matching, long-enough passwords', function () {
+      return elts.pwd1.sendKeys('asdfasdf').then(function() {
+        return elts.pwd2.sendKeys('asdfasdf');
+      }).then(function() {
+        return elts.set.click();
+      }).then(function() {
+        return driver.findElement(webdriver.By.id('thank-you'));
+      }).then(function(elt) {
+        return driver.wait(webdriver.until.elementIsVisible(elt), 5000)
+          .then(function() {
+            return elt.getAttribute('innerHTML');
+          }).then(function(value) {
+            assert.equal(value, 'Thank you!');
+          });
+      });
+    });
+  });
+});