Port from coffeescript to plain ES6

- Use Babel to transpile sources
- Use Webpack to include all libraries

Signed-off-by: Knut Ahlers <knut@ahlers.me>

.gitignore

@@ -1,4 +1,6 @@
-password
 dist
+frontend/assets/*
+js/node_modules/*
+password
 password_darwin_amd64
 PasswordGenerator.alfredworkflow

Makefile

@@ -1,14 +1,19 @@
 default: pack
 
-compile_coffee:
-	coffee -c frontend/assets/application.coffee
+compile_js:
+	docker run --rm -i \
+		-v "$(CURDIR):$(CURDIR)" \
+		-w "$(CURDIR)/js" \
+		-u $(shell id -u) \
+		node:10-alpine \
+		sh -c "yarn && npx webpack"
 
-debug: compile_coffee
+debug:
 	go-bindata --debug frontend/...
 	go run *.go serve
 	open http://127.0.0.1:3000/
 
-pack: compile_coffee
+pack: compile_js
 	go-bindata frontend/...
 	bash generateXKCDWordList.sh
 

frontend/assets/application.coffee

@@ -1,71 +0,0 @@
-if window.Storage and window.JSON
-  window.$storage = (key) ->
-    set: (value) ->
-      localStorage.setItem(key, JSON.stringify(value))
-    get: ->
-      item = localStorage.getItem(key)
-      JSON.parse(item) if item
-
-$ ->
-  window.lastLoad = now()
-  window.refreshPassword = 30000
-  window.tickerInterval = 200
-
-  window.ticker = setInterval tick, window.tickerInterval
-  $('#focusedInput').bind 'click', stopRefresh
-  $('#focusedInput').bind 'blur', restartRefresh
-  $('#optionSave').bind 'click', saveOptions
-
-  loadOptions()
-  loadPassword()
-
-now = () ->
-  d = new Date()
-  d.getTime()
-
-stopRefresh = () ->
-  clearInterval(window.ticker)
-  $('#focusedInput').select()
-  false
-
-restartRefresh = () ->
-  window.lastLoad = now()
-  window.ticker = setInterval tick, window.tickerInterval
-
-setProgress = (perc) ->
-  $('.progress-bar').css('width', "#{perc}%")
-
-loadPassword = () ->
-  options = loadOptions()
-  $.get "/v1/getPassword?length=#{options.passwordLength}&special=#{options.useSpecial}&xkcd=#{options.useXKCD}", (data) ->
-    $('#focusedInput').val(data)
-    window.lastLoad = now()
-
-saveOptions = () ->
-  options =
-    passwordLength: $('#passwordLengthOption').val()
-    useSpecial: $('#useSpecialOption')[0].checked
-    useXKCD: $('#useXKCDOption')[0].checked
-
-  window.$storage('SecurePasswordOptions').set(options)
-  $('#settingsModal').modal('hide')
-  loadPassword()
-
-loadOptions = () ->
-  options = window.$storage('SecurePasswordOptions').get()
-  if options == undefined
-    options =
-      passwordLength: 20
-      useSpecial: false
-      useXKCD: false
-  $('#passwordLengthOption').val(options.passwordLength)
-  $('#useSpecialOption')[0].checked = options.useSpecial
-  $('#useXKCDOption')[0].checked = options.useXKCD
-  options
-
-tick = () ->
-  diff = now() - window.lastLoad
-  perc = (window.refreshPassword - diff) / window.refreshPassword * 100
-  setProgress perc
-  if diff >= window.refreshPassword
-    loadPassword()

frontend/assets/application.js

@@ -1,102 +0,0 @@
-// Generated by CoffeeScript 1.12.4
-(function() {
-  var loadOptions, loadPassword, now, restartRefresh, saveOptions, setProgress, stopRefresh, tick;
-
-  if (window.Storage && window.JSON) {
-    window.$storage = function(key) {
-      return {
-        set: function(value) {
-          return localStorage.setItem(key, JSON.stringify(value));
-        },
-        get: function() {
-          var item;
-          item = localStorage.getItem(key);
-          if (item) {
-            return JSON.parse(item);
-          }
-        }
-      };
-    };
-  }
-
-  $(function() {
-    window.lastLoad = now();
-    window.refreshPassword = 30000;
-    window.tickerInterval = 200;
-    window.ticker = setInterval(tick, window.tickerInterval);
-    $('#focusedInput').bind('click', stopRefresh);
-    $('#focusedInput').bind('blur', restartRefresh);
-    $('#optionSave').bind('click', saveOptions);
-    loadOptions();
-    return loadPassword();
-  });
-
-  now = function() {
-    var d;
-    d = new Date();
-    return d.getTime();
-  };
-
-  stopRefresh = function() {
-    clearInterval(window.ticker);
-    $('#focusedInput').select();
-    return false;
-  };
-
-  restartRefresh = function() {
-    window.lastLoad = now();
-    return window.ticker = setInterval(tick, window.tickerInterval);
-  };
-
-  setProgress = function(perc) {
-    return $('.progress-bar').css('width', perc + "%");
-  };
-
-  loadPassword = function() {
-    var options;
-    options = loadOptions();
-    return $.get("/v1/getPassword?length=" + options.passwordLength + "&special=" + options.useSpecial + "&xkcd=" + options.useXKCD, function(data) {
-      $('#focusedInput').val(data);
-      return window.lastLoad = now();
-    });
-  };
-
-  saveOptions = function() {
-    var options;
-    options = {
-      passwordLength: $('#passwordLengthOption').val(),
-      useSpecial: $('#useSpecialOption')[0].checked,
-      useXKCD: $('#useXKCDOption')[0].checked
-    };
-    window.$storage('SecurePasswordOptions').set(options);
-    $('#settingsModal').modal('hide');
-    return loadPassword();
-  };
-
-  loadOptions = function() {
-    var options;
-    options = window.$storage('SecurePasswordOptions').get();
-    if (options === void 0) {
-      options = {
-        passwordLength: 20,
-        useSpecial: false,
-        useXKCD: false
-      };
-    }
-    $('#passwordLengthOption').val(options.passwordLength);
-    $('#useSpecialOption')[0].checked = options.useSpecial;
-    $('#useXKCDOption')[0].checked = options.useXKCD;
-    return options;
-  };
-
-  tick = function() {
-    var diff, perc;
-    diff = now() - window.lastLoad;
-    perc = (window.refreshPassword - diff) / window.refreshPassword * 100;
-    setProgress(perc);
-    if (diff >= window.refreshPassword) {
-      return loadPassword();
-    }
-  };
-
-}).call(this);

frontend/index.html

@@ -4,27 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
     <title>Secure Password</title>
-
-    <!-- Bootstrap -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css">
-
-    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
-    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-    <!--[if lt IE 9]>
-      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
-      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-    <![endif]-->
-    <style>
-      body { background-color: #e2e2e2; }
-      .white { background-color: #fff; }
-      .center { text-align: center; }
-      .faq { margin-top: 3em; }
-      .progress { margin-bottom: 0px; }
-      .jumbotron p { margin-bottom: 0; }
-    </style>
   </head>
   <body>
     <nav class="navbar navbar-default">
@@ -134,10 +114,6 @@
       </div>
     </div>
 
-    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
-    <!-- Include all compiled plugins (below), or include individual files as needed -->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
-    <script src="assets/application.js"></script>
+    <script src="assets/bundle.js"></script>
   </body>
 </html>

js/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "password",
+  "private": true,
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "babel-loader": "^8.0.4",
+    "css-loader": "^2.1.0",
+    "file-loader": "^3.0.1",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.28.3",
+    "webpack-cli": "^3.1.2"
+  },
+  "dependencies": {
+    "bootstrap": "^3.3.7",
+    "bootswatch": "^3.3.7",
+    "jquery": "^3.3.1"
+  }
+}

js/src/index.js

@@ -0,0 +1,87 @@
+import 'jquery'
+import 'bootstrap'
+
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootswatch/paper/bootstrap.min.css'
+
+import storage from './storage.js'
+
+let now = () => {
+  let d = new Date()
+  return d.getTime()
+}
+
+let stopRefresh = () => {
+  clearInterval(window.ticker)
+  $('#focusedInput').select()
+  return false
+}
+
+let restartRefresh = () => {
+  window.lastLoad = now()
+  window.ticker = setInterval(tick, window.tickerInterval)
+}
+
+let setProgress = (perc) => {
+  $('.progress-bar').css('width', `${perc}%`)
+}
+
+let loadPassword = () => {
+  let options = loadOptions()
+  $.get(`/v1/getPassword?length=${options.passwordLength}&special=${options.useSpecial}&xkcd=${options.useXKCD}`, (data) => {
+    $('#focusedInput').val(data)
+    window.lastLoad = now()
+  })
+}
+
+let saveOptions = () => {
+  let options = {
+    passwordLength: $('#passwordLengthOption').val(),
+    useSpecial: $('#useSpecialOption')[0].checked,
+    useXKCD: $('#useXKCDOption')[0].checked,
+  }
+
+  storage.set('SecurePasswordOptions', options)
+  $('#settingsModal').modal('hide')
+
+  loadPassword()
+}
+
+let loadOptions = () => {
+  let options = storage.get('SecurePasswordOptions')
+  if (!options) {
+    options = {
+      passwordLength: 20,
+      useSpecial: false,
+      useXKCD: false,
+    }
+  }
+  $('#passwordLengthOption').val(options.passwordLength)
+  $('#useSpecialOption')[0].checked = options.useSpecial
+  $('#useXKCDOption')[0].checked = options.useXKCD
+
+  return options
+}
+
+let tick = () => {
+  let diff = now() - window.lastLoad
+  let perc = (window.refreshPassword - diff) / window.refreshPassword * 100
+  setProgress(perc)
+  if (diff >= window.refreshPassword) {
+    loadPassword()
+  }
+}
+
+$(() => {
+  window.lastLoad = now()
+  window.refreshPassword = 30000
+  window.tickerInterval = 200
+
+  window.ticker = setInterval(tick, window.tickerInterval)
+  $('#focusedInput').bind('click', stopRefresh)
+  $('#focusedInput').bind('blur', restartRefresh)
+  $('#optionSave').bind('click', saveOptions)
+
+  loadOptions()
+  loadPassword()
+})

js/src/storage.js

@@ -0,0 +1,9 @@
+export default {
+  set: (key, value) => {
+    localStorage.setItem(key, JSON.stringify(value))
+  },
+  get: (key) => {
+    let item = localStorage.getItem(key)
+    if (item) return JSON.parse(item)
+  }
+}

js/src/style.css

@@ -0,0 +1,7 @@
+body { background-color: #e2e2e2; }
+.white { background-color: #fff; }
+.center { text-align: center; }
+.faq { margin-top: 3em; }
+.progress { margin-bottom: 0px; }
+.jumbotron p { margin-bottom: 0; }
+

js/webpack.config.js

@@ -0,0 +1,43 @@
+const path = require('path')
+const webpack = require('webpack')
+
+module.exports = {
+  entry: './src/index.js',
+
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, '../frontend/assets'),
+    publicPath: "assets/"
+  },
+
+  module: {
+    rules: [{
+        test: /\.m?js$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
+        use: [
+          'file-loader'
+        ]
+      }
+    ]
+  },
+
+  plugins: [
+    new webpack.ProvidePlugin({
+      'jQuery': 'jquery',
+      '$': 'jquery',
+    })
+  ]
+}