chore: add an HTML linter and fix its warnings (#1077)

This PR creates a script at `scripts/html-lint.js` that runs a NodeJS
HTML linter package that understands AngularJS on top of all our HTML
templates.

The following error was detected and fixed:

```
1 errors at lib/gui/pages/finish/templates/success.tpl.html
  [4:63] Duplicate attribute “class”.
```

This script will run as part of `npm run lint`, but you can call it
independently as `npm run htmllint`.

Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>

lib/gui/pages/finish/templates/success.tpl.html

@@ -1,7 +1,7 @@
 <div class="page-finish row around-xs">
   <div class="col-xs">
     <div class="box text-center">
-      <h3 class="title"><span class="tick tick--success" class="space-right-tiny"></span> Flash Complete!</h3>
+      <h3 class="title"><span class="tick tick--success space-right-tiny"></span> Flash Complete!</h3>
       <p class="soft space-vertical-small" ng-show="finish.settings.get('unmountOnSuccess')">Safely ejected and ready for use</p>
 
       <div class="row center-xs space-vertical-medium">

package.json

@@ -15,8 +15,9 @@
     "sass": "node-sass ./lib/gui/scss/main.scss > ./lib/gui/css/main.css",
     "jslint": "eslint lib tests scripts bin versionist.conf.js",
     "scsslint": "scss-lint lib/gui/scss",
+    "htmllint": "node scripts/html-lint.js",
     "codespell": "codespell.py lib tests",
-    "lint": "npm run jslint && npm run scsslint && npm run codespell",
+    "lint": "npm run jslint && npm run scsslint && npm run codespell && npm run htmllint",
     "changelog": "versionist",
     "start": "electron lib/start.js",
     "clean-shrinkwrap": "node ./scripts/clean-shrinkwrap.js"
@@ -112,6 +113,7 @@
     "electron-prebuilt": "1.4.4",
     "eslint": "^2.13.1",
     "file-exists": "^1.0.0",
+    "html-angular-validate": "^0.1.9",
     "jsonfile": "^2.3.1",
     "mochainon": "^1.0.0",
     "node-sass": "^3.8.0",

scripts/html-lint.js

@@ -0,0 +1,86 @@
+/**
+ * This script setups and runs linting modules on our HTML files.
+ *
+ * See https://github.com/nikestep/html-angular-validate
+ *
+ * Usage:
+ *
+ *   node scripts/html-lint.js
+ */
+
+'use strict';
+
+const chalk = require('chalk');
+const path = require('path');
+const _ = require('lodash');
+const angularValidate = require('html-angular-validate');
+const PROJECT_ROOT = path.join(__dirname, '..');
+const FILENAME = path.relative(PROJECT_ROOT, __filename);
+
+console.log('Scanning...');
+
+angularValidate.validate(
+  [
+    path.join(PROJECT_ROOT, 'lib', 'gui', '**/*.html')
+  ],
+  {
+    customattrs: [
+
+      // Internal
+      'os-open-external',
+      'os-dropzone',
+      'manifest-bind',
+
+      // External
+      'hide-if-state',
+      'show-if-state',
+      'uib-tooltip'
+
+    ],
+    angular: true,
+    tmplext: 'tpl.html',
+    doctype: 'HTML5',
+    charset: 'utf-8',
+    reportpath: null,
+    reportCheckstylePath: null
+  }
+).then((result) => {
+
+  // console.log(result);
+
+  _.each(result.failed, (failure) => {
+
+    // The module has a typo in the "numbers" property
+    console.error(chalk.red(`${failure.numerrs} errors at ${path.relative(PROJECT_ROOT, failure.filepath)}`));
+
+    _.each(failure.errors, (error) => {
+      console.error('  ' + chalk.yellow(`[${error.line}:${error.col}]`) + ` ${error.msg}`);
+
+      if (/^Attribute (.*) not allowed on/.test(error.msg)) {
+        console.error(chalk.dim(`    If this is a valid directive attribute, add it to the whitelist at ${FILENAME}`));
+      }
+    });
+
+    console.error('');
+  });
+
+  if (result.filessucceeded === result.fileschecked) {
+    console.log(chalk.green('Passed'));
+  } else {
+    console.error(chalk.red(`Total: ${result.filessucceeded}/${result.fileschecked}`));
+  }
+
+  if (!result.allpassed) {
+
+    // Add a small timeout, otherwise the scripts exits
+    // before every string was printed on the screen.
+    setTimeout(() => {
+      process.exit(1);
+    }, 500);
+
+  }
+
+}, (error) => {
+  console.error(error);
+  process.exit(1);
+});