Move JS build to esbuild / resolve vulnerabilities

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

js/build.mjs

@@ -0,0 +1,24 @@
+import { sassPlugin } from 'esbuild-sass-plugin'
+import esbuild from 'esbuild'
+
+esbuild.build({
+  bundle: true,
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'dev'),
+  },
+  entryPoints: ['src/index.js'],
+  loader: {
+    '.woff': 'file',
+    '.woff2': 'file',
+  },
+  minify: true,
+  outfile: '../cmd/password/frontend/assets/bundle.js',
+  plugins: [sassPlugin()],
+  target: [
+    'chrome87',
+    'edge87',
+    'es2020',
+    'firefox84',
+    'safari14',
+  ],
+})

js/package.json

@@ -1,25 +1,17 @@
 {
   "name": "password",
   "private": true,
-  "devDependencies": {
-    "@babel/core": "^7.11.0",
-    "@babel/preset-env": "^7.11.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.30",
-    "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "babel-loader": "^8.1.0",
-    "css-loader": "^2.1.0",
-    "file-loader": "^3.0.1",
-    "style-loader": "^0.23.1",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12"
-  },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "bootstrap": "^4.5.0",
     "bootswatch": "^4.5.0",
     "jquery": "^3.5.1",
-    "node-sass": "^4.14.1",
     "popper.js": "^1.16.1",
-    "sass-loader": "^7.3.1",
     "typeface-roboto": "^0.0.54"
+  },
+  "devDependencies": {
+    "esbuild": "^0.14.47",
+    "esbuild-sass-plugin": "^2.2.6"
   }
 }

js/src/index.js

@@ -1,4 +1,5 @@
 // Libraries
+import $ from 'jquery'
 import 'bootstrap'
 
 // Styles
@@ -6,11 +7,11 @@ import './style.scss'
 
 // FontAwesome 5
 import {
+  dom,
   library,
-  dom
 } from '@fortawesome/fontawesome-svg-core'
 import {
-  faCog
+  faCog,
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(faCog)
@@ -19,36 +20,36 @@ dom.watch()
 // Application code
 import storage from './storage.js'
 
-let now = () => {
+const now = () => {
-  let d = new Date()
+  const d = new Date()
   return d.getTime()
 }
 
-let stopRefresh = () => {
+const stopRefresh = () => {
   clearInterval(window.ticker)
   $('#focusedInput').select()
   return false
 }
 
-let restartRefresh = () => {
+const restartRefresh = () => {
   window.lastLoad = now()
   window.ticker = setInterval(tick, window.tickerInterval)
 }
 
-let setProgress = (perc) => {
+const setProgress = perc => {
   $('.progress-bar').css('width', `${perc}%`)
 }
 
-let loadPassword = () => {
+const loadPassword = () => {
-  let options = loadOptions()
+  const options = loadOptions()
-  $.get(`/v1/getPassword?length=${options.passwordLength}&special=${options.useSpecial}&xkcd=${options.useXKCD}&separator=${options.xkcdSeparator}`, (data) => {
+  $.get(`/v1/getPassword?length=${options.passwordLength}&special=${options.useSpecial}&xkcd=${options.useXKCD}&separator=${options.xkcdSeparator}`, data => {
     $('#focusedInput').val(data)
     window.lastLoad = now()
   })
 }
 
-let saveOptions = () => {
+const saveOptions = () => {
-  let options = {
+  const options = {
     passwordLength: $('#passwordLengthOption').val(),
     useSpecial: $('#useSpecialOption')[0].checked,
     useXKCD: $('#useXKCDOption')[0].checked,
@@ -61,7 +62,7 @@ let saveOptions = () => {
   loadPassword()
 }
 
-let loadOptions = () => {
+const loadOptions = () => {
   let options = storage.get('SecurePasswordOptions')
   if (!options) {
     options = {
@@ -79,9 +80,9 @@ let loadOptions = () => {
   return options
 }
 
-let tick = () => {
+const tick = () => {
-  let diff = now() - window.lastLoad
+  const diff = now() - window.lastLoad
-  let perc = (window.refreshPassword - diff) / window.refreshPassword * 100
+  const perc = (window.refreshPassword - diff) / window.refreshPassword * 100
   setProgress(perc)
   if (diff >= window.refreshPassword) {
     loadPassword()

js/src/style.scss

@@ -1,5 +1,5 @@
 $font-size-base: 0.95rem;
-$web-font-path: '~typeface-roboto/index.css';
+$web-font-path: 'typeface-roboto/index.css';
 @import '~bootswatch/dist/materia/_variables.scss';
 
 @import "~bootstrap/scss/bootstrap";