ui: split files and use Webpack

Cargo.lock

@@ -55,7 +55,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
 name = "backtrace"
-version = "0.3.30"
+version = "0.3.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "autocfg 0.1.4 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -214,7 +214,7 @@ dependencies = [
  "idna 0.1.5 (registry+https://github.com/rust-lang/crates.io-index)",
  "log 0.4.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "publicsuffix 1.5.2 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.92 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.93 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde_json 1.0.39 (registry+https://github.com/rust-lang/crates.io-index)",
  "time 0.1.42 (registry+https://github.com/rust-lang/crates.io-index)",
  "try_from 0.3.2 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -342,7 +342,7 @@ name = "error-chain"
 version = "0.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "backtrace 0.3.30 (registry+https://github.com/rust-lang/crates.io-index)",
+ "backtrace 0.3.31 (registry+https://github.com/rust-lang/crates.io-index)",
  "version_check 0.1.5 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
@@ -351,7 +351,7 @@ name = "failure"
 version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "backtrace 0.3.30 (registry+https://github.com/rust-lang/crates.io-index)",
+ "backtrace 0.3.31 (registry+https://github.com/rust-lang/crates.io-index)",
  "failure_derive 0.1.5 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
@@ -362,7 +362,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "proc-macro2 0.4.30 (registry+https://github.com/rust-lang/crates.io-index)",
  "quote 0.6.12 (registry+https://github.com/rust-lang/crates.io-index)",
- "syn 0.15.37 (registry+https://github.com/rust-lang/crates.io-index)",
+ "syn 0.15.38 (registry+https://github.com/rust-lang/crates.io-index)",
  "synstructure 0.10.2 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
@@ -636,8 +636,8 @@ dependencies = [
  "regex 1.1.7 (registry+https://github.com/rust-lang/crates.io-index)",
  "reqwest 0.9.18 (registry+https://github.com/rust-lang/crates.io-index)",
  "semver 0.9.0 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.92 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.93 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde_derive 1.0.92 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde_derive 1.0.93 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde_json 1.0.39 (registry+https://github.com/rust-lang/crates.io-index)",
  "slug 0.1.4 (registry+https://github.com/rust-lang/crates.io-index)",
  "sysinfo 0.8.6 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -1227,7 +1227,7 @@ dependencies = [
  "mime 0.3.13 (registry+https://github.com/rust-lang/crates.io-index)",
  "mime_guess 2.0.0-alpha.6 (registry+https://github.com/rust-lang/crates.io-index)",
  "native-tls 0.2.3 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.92 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.93 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde_json 1.0.39 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde_urlencoded 0.5.5 (registry+https://github.com/rust-lang/crates.io-index)",
  "time 0.1.42 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -1320,7 +1320,7 @@ version = "0.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "semver-parser 0.7.0 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.92 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.93 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -1330,20 +1330,20 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
 name = "serde"
-version = "1.0.92"
+version = "1.0.93"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "serde_derive 1.0.92 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde_derive 1.0.93 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
 name = "serde_derive"
-version = "1.0.92"
+version = "1.0.93"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "proc-macro2 0.4.30 (registry+https://github.com/rust-lang/crates.io-index)",
  "quote 0.6.12 (registry+https://github.com/rust-lang/crates.io-index)",
- "syn 0.15.37 (registry+https://github.com/rust-lang/crates.io-index)",
+ "syn 0.15.38 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -1353,7 +1353,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "itoa 0.4.4 (registry+https://github.com/rust-lang/crates.io-index)",
  "ryu 0.2.8 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.92 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.93 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -1363,7 +1363,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "dtoa 0.4.4 (registry+https://github.com/rust-lang/crates.io-index)",
  "itoa 0.4.4 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde 1.0.92 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.93 (registry+https://github.com/rust-lang/crates.io-index)",
  "url 1.7.2 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
@@ -1420,7 +1420,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 
 [[package]]
 name = "syn"
-version = "0.15.37"
+version = "0.15.38"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "proc-macro2 0.4.30 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -1435,7 +1435,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "proc-macro2 0.4.30 (registry+https://github.com/rust-lang/crates.io-index)",
  "quote 0.6.12 (registry+https://github.com/rust-lang/crates.io-index)",
- "syn 0.15.37 (registry+https://github.com/rust-lang/crates.io-index)",
+ "syn 0.15.38 (registry+https://github.com/rust-lang/crates.io-index)",
  "unicode-xid 0.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
@@ -1753,7 +1753,7 @@ name = "toml"
 version = "0.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
- "serde 1.0.92 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde 1.0.93 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
@@ -2004,7 +2004,7 @@ dependencies = [
 "checksum arrayvec 0.4.10 (registry+https://github.com/rust-lang/crates.io-index)" = "92c7fb76bc8826a8b33b4ee5bb07a247a81e76764ab4d55e8f73e3a4d8808c71"
 "checksum atty 0.2.11 (registry+https://github.com/rust-lang/crates.io-index)" = "9a7d5b8723950951411ee34d271d99dddcc2035a16ab25310ea2c8cfd4369652"
 "checksum autocfg 0.1.4 (registry+https://github.com/rust-lang/crates.io-index)" = "0e49efa51329a5fd37e7c79db4621af617cd4e3e5bc224939808d076077077bf"
-"checksum backtrace 0.3.30 (registry+https://github.com/rust-lang/crates.io-index)" = "ada4c783bb7e7443c14e0480f429ae2cc99da95065aeab7ee1b81ada0419404f"
+"checksum backtrace 0.3.31 (registry+https://github.com/rust-lang/crates.io-index)" = "e0f77aa27f55a4beb477ff6bc4d9bf72f90eb422b19c1d8e5a644b8aeb674d66"
 "checksum backtrace-sys 0.1.28 (registry+https://github.com/rust-lang/crates.io-index)" = "797c830ac25ccc92a7f8a7b9862bde440715531514594a6154e3d4a54dd769b6"
 "checksum base64 0.10.1 (registry+https://github.com/rust-lang/crates.io-index)" = "0b25d992356d2eb0ed82172f5248873db5560c4721f564b13cb5193bda5e668e"
 "checksum base64 0.9.3 (registry+https://github.com/rust-lang/crates.io-index)" = "489d6c0ed21b11d038c31b6ceccca973e65d73ba3bd8ecb9a2babf5546164643"
@@ -2145,8 +2145,8 @@ dependencies = [
 "checksum security-framework-sys 0.3.1 (registry+https://github.com/rust-lang/crates.io-index)" = "9636f8989cbf61385ae4824b98c1aaa54c994d7d8b41f11c601ed799f0549a56"
 "checksum semver 0.9.0 (registry+https://github.com/rust-lang/crates.io-index)" = "1d7eb9ef2c18661902cc47e535f9bc51b78acd254da71d375c2f6720d9a40403"
 "checksum semver-parser 0.7.0 (registry+https://github.com/rust-lang/crates.io-index)" = "388a1df253eca08550bef6c72392cfe7c30914bf41df5269b68cbd6ff8f570a3"
-"checksum serde 1.0.92 (registry+https://github.com/rust-lang/crates.io-index)" = "32746bf0f26eab52f06af0d0aa1984f641341d06d8d673c693871da2d188c9be"
+"checksum serde 1.0.93 (registry+https://github.com/rust-lang/crates.io-index)" = "960e29cf7004b3b6e65fc5002981400eb3ccc017a08a2406940823e58e7179a9"
-"checksum serde_derive 1.0.92 (registry+https://github.com/rust-lang/crates.io-index)" = "46a3223d0c9ba936b61c0d2e3e559e3217dbfb8d65d06d26e8b3c25de38bae3e"
+"checksum serde_derive 1.0.93 (registry+https://github.com/rust-lang/crates.io-index)" = "c4cce6663696bd38272e90bf34a0267e1226156c33f52d3f3915a2dd5d802085"
 "checksum serde_json 1.0.39 (registry+https://github.com/rust-lang/crates.io-index)" = "5a23aa71d4a4d43fdbfaac00eff68ba8a06a51759a89ac3304323e800c4dd40d"
 "checksum serde_urlencoded 0.5.5 (registry+https://github.com/rust-lang/crates.io-index)" = "642dd69105886af2efd227f75a520ec9b44a820d65bc133a9131f7d229fd165a"
 "checksum siphasher 0.2.3 (registry+https://github.com/rust-lang/crates.io-index)" = "0b8de496cf83d4ed58b6be86c3a275b8602f6ffe98d3024a869e124147a9a3ac"
@@ -2158,7 +2158,7 @@ dependencies = [
 "checksum stable_deref_trait 1.1.1 (registry+https://github.com/rust-lang/crates.io-index)" = "dba1a27d3efae4351c8051072d619e3ade2820635c3958d826bfea39d59b54c8"
 "checksum string 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)" = "d0bbfb8937e38e34c3444ff00afb28b0811d9554f15c5ad64d12b0308d1d1995"
 "checksum strsim 0.8.0 (registry+https://github.com/rust-lang/crates.io-index)" = "8ea5119cdb4c55b55d432abb513a0429384878c15dde60cc77b1c99de1a95a6a"
-"checksum syn 0.15.37 (registry+https://github.com/rust-lang/crates.io-index)" = "e11410033fd5cf69a1cf2084604e011190c56f11e08ffc53df880f5f65f1c6e4"
+"checksum syn 0.15.38 (registry+https://github.com/rust-lang/crates.io-index)" = "37ea458a750f59ab679b47fef9b6722c586c5742f4cfe18a120bbc807e5e01fd"
 "checksum synstructure 0.10.2 (registry+https://github.com/rust-lang/crates.io-index)" = "02353edf96d6e4dc81aea2d8490a7e9db177bf8acb0e951c24940bf866cb313f"
 "checksum sysinfo 0.8.6 (registry+https://github.com/rust-lang/crates.io-index)" = "d291d07ba27acd519287ca22fb1fb024dcc4b925cddb63d69af24db153ca2c82"
 "checksum take 0.1.0 (registry+https://github.com/rust-lang/crates.io-index)" = "b157868d8ac1f56b64604539990685fa7611d8fa9e5476cf0c02cf34d32917c5"

ui/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 11

ui/.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

ui/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}

ui/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

ui/README.md

@@ -0,0 +1,29 @@
+# ui
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn run serve
+```
+
+### Compiles and minifies for production
+```
+yarn run build
+```
+
+### Run your tests
+```
+yarn run test
+```
+
+### Lints and fixes files
+```
+yarn run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

ui/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

ui/mock-server.js

@@ -0,0 +1,89 @@
+'use strict'
+
+const express = require('express')
+const app = express()
+const port = 3000
+
+function progressSimulation (res) {
+  var progress = 0.0
+  var timer = setInterval(() => {
+    var resp = JSON.stringify({ Status: ['Processing...', progress] }) + '\n'
+    progress += 0.1
+    res.write(resp)
+    if (progress >= 1) {
+      res.status(200).end()
+      clearInterval(timer)
+    }
+  }, 1500)
+}
+
+app.get('/api/attrs', (req, res) => {
+  res.send(
+    `var base_attributes = {"name":"yuzu","target_url":"https://raw.githubusercontent.com/j-selby/test-installer/master/config.linux.v2.toml"};`
+  )
+})
+
+app.get('/api/dark-mode', (req, res) => {
+  res.json(false)
+})
+
+app.get('/api/installation-status', (req, res) => {
+  res.json({
+    database: { packages: [], shortcuts: [] },
+    install_path: null,
+    preexisting_install: false,
+    is_launcher: false,
+    launcher_path: null
+  })
+})
+
+app.get('/api/default-path', (req, res) => {
+  res.json({ path: '/tmp/test/' })
+})
+
+app.get('/api/config', (req, res) => {
+  res.json({
+    installing_message:
+      'Test Banner <strong>Bold</strong>&nbsp;<pre>Code block</pre>&nbsp;<i>Italic</i>&nbsp;<del>Strike</del>',
+    new_tool: null,
+    packages: [
+      {
+        name: 'Test 1',
+        description: 'LiftInstall GUI Test 1',
+        default: true,
+        source: {
+          name: 'github',
+          match: '^test$',
+          config: { repo: 'j-selby/liftinstall' }
+        },
+        shortcuts: []
+      },
+      {
+        name: 'Test 2',
+        description:
+          'Different Banner <strong>Bold</strong>&nbsp;<pre>Code block</pre>&nbsp;<i>Italic</i>&nbsp;<del>Strike</del>',
+        default: null,
+        source: {
+          name: 'github',
+          match: '^test2$',
+          config: { repo: 'j-selby/liftinstall' }
+        },
+        shortcuts: []
+      }
+    ],
+    hide_advanced: false
+  })
+})
+
+app.post('/api/start-install', (req, res) => {
+  console.log(`-- Install: ${req.body}`)
+  progressSimulation(res)
+})
+
+app.get('/api/exit', (req, res) => {
+  console.log('-- Exit')
+  res.status(204)
+})
+
+console.log(`Listening on ${port}...`)
+app.listen(port)

ui/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "ui",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "buefy": "^0.7.7",
+    "vue": "^2.6.6",
+    "vue-router": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.5.0",
+    "@vue/cli-plugin-eslint": "^3.5.0",
+    "@vue/cli-service": "^3.5.0",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "express": "^4.17.1",
+    "http-proxy-middleware": "^0.19.1",
+    "vue-template-compiler": "^2.5.21"
+  }
+}

ui/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

ui/public/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <script src="/api/attrs" type="text/javascript"></script>
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title id="window-title">... Installer</title>
+  </head>
+  <body>
+    <div class="fullscreen" id="ie-blackout" style="display: none">
+        <div class="title">Your computer is out of date.</div>
+        <div class="subtitle">
+            Make sure that your computer is up to date, and that you have Internet Explorer 11 installed.
+        </div>
+        <div class="subtitle">
+            Please note we do not support pirated or unsupported versions of Windows.
+        </div>
+    </div>
+
+    <script type="text/javascript">
+        if (!document.__proto__) {
+            document.getElementById("ie-blackout").style.display = "block";
+        }
+    </script>
+
+    <noscript>
+      <strong>We're sorry but ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

ui/src/App.vue

@@ -0,0 +1,124 @@
+<template>
+  <div id="app" class="is-max-height">
+        <section class="section is-max-height">
+            <div class="container is-max-height">
+                <div class="columns is-max-height">
+                    <div class="column is-one-third has-padding" v-if="!$root.$data.metadata.is_launcher">
+                        <img src="./assets/logo.png" width="60%" />
+                        <br />
+                        <br />
+
+                        <h2 class="subtitle" v-if="!$root.$data.metadata.preexisting_install">
+                            Welcome to the {{ $root.$data.attrs.name }} installer!
+                        </h2>
+                        <h2 class="subtitle" v-if="!$root.$data.metadata.preexisting_install">
+                            We will have you up and running in just a few moments.
+                        </h2>
+
+                        <h2 class="subtitle" v-if="$root.$data.metadata.preexisting_install">
+                            Welcome to the {{ $root.$data.attrs.name }} Maintenance Tool.
+                        </h2>
+                    </div>
+
+                    <router-view />
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<style>
+/* roboto-regular - latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url('./assets/fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
+    src: local('Roboto'), local('Roboto-Regular'),
+    url('./assets/fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+    url('./assets/fonts/roboto-v18-latin-regular.woff') format('woff');
+}
+
+html, body {
+    overflow: hidden;
+    height: 100%;
+}
+
+body, div, span, h1, h2, h3, h4, h5, h6 {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor: default;
+}
+
+pre {
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+    cursor: text;
+}
+
+.tile.is-child > .box {
+    height: 100%;
+}
+
+.has-padding {
+    padding: 2rem;
+    position: relative;
+}
+
+.clickable-box {
+    cursor: pointer;
+}
+
+.clickable-box label {
+    pointer-events: none;
+}
+
+.is-max-height {
+    height: 100%;
+}
+
+.is-bottom-floating {
+    position: absolute;
+    bottom: 0;
+}
+
+.is-right-floating {
+    position: absolute;
+    right: 0;
+}
+
+.has-padding .is-right-floating {
+    right: 1rem;
+}
+
+.is-left-floating {
+    position: absolute;
+    left: 0;
+}
+
+.has-padding .is-left-floating {
+    left: 1rem;
+}
+
+.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+    padding: 20px;
+    background: #fff;
+}
+
+/* Dark mode */
+body.has-background-black-ter .subtitle, body.has-background-black-ter .column > div {
+    color: hsl(0, 0%, 96%);
+}
+</style>

ui/src/helpers.js

@@ -0,0 +1,144 @@
+/**
+ * helpers.js
+ *
+ * Additional state-less helper methods.
+ */
+
+var request_id = 0
+
+/**
+ * Makes a AJAX request.
+ *
+ * @param path The path to connect to.
+ * @param successCallback A callback with a JSON payload.
+ * @param failCallback A fail callback. Optional.
+ * @param data POST data. Optional.
+ */
+export function ajax (path, successCallback, failCallback, data) {
+  if (failCallback === undefined) {
+    failCallback = defaultFailHandler
+  }
+
+  console.log('Making HTTP request to ' + path)
+
+  var req = new XMLHttpRequest()
+
+  req.addEventListener('load', function () {
+    // The server can sometimes return a string error. Make sure we handle this.
+    if (this.status === 200 && this.getResponseHeader('Content-Type').indexOf('application/json') !== -1) {
+      successCallback(JSON.parse(this.responseText))
+    } else {
+      failCallback(this.responseText)
+    }
+  })
+  req.addEventListener('error', failCallback)
+
+  req.open(data == null ? 'GET' : 'POST', path + '?nocache=' + request_id++, true)
+  // Rocket only currently supports URL encoded forms.
+  req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
+
+  if (data != null) {
+    var form = ''
+
+    for (var key in data) {
+      if (!data.hasOwnProperty(key)) {
+        continue
+      }
+
+      if (form !== '') {
+        form += '&'
+      }
+
+      form += encodeURIComponent(key) + '=' + encodeURIComponent(data[key])
+    }
+
+    req.send(form)
+  } else {
+    req.send()
+  }
+}
+
+/**
+ * Makes a AJAX request, streaming each line as it arrives. Type should be text/plain,
+ * each line will be interpreted as JSON separately.
+ *
+ * @param path The path to connect to.
+ * @param callback A callback with a JSON payload. Called for every line as it comes.
+ * @param successCallback A callback with a raw text payload.
+ * @param failCallback A fail callback. Optional.
+ * @param data POST data. Optional.
+ */
+export function stream_ajax (path, callback, successCallback, failCallback, data) {
+  var req = new XMLHttpRequest()
+
+  console.log('Making streaming HTTP request to ' + path)
+
+  req.addEventListener('load', function () {
+    // The server can sometimes return a string error. Make sure we handle this.
+    if (this.status === 200) {
+      successCallback(this.responseText)
+    } else {
+      failCallback(this.responseText)
+    }
+  })
+
+  var buffer = ''
+  var seenBytes = 0
+
+  req.onreadystatechange = function () {
+    if (req.readyState > 2) {
+      buffer += req.responseText.substr(seenBytes)
+
+      var pointer
+      while ((pointer = buffer.indexOf('\n')) >= 0) {
+        var line = buffer.substring(0, pointer).trim()
+        buffer = buffer.substring(pointer + 1)
+
+        if (line.length === 0) {
+          continue
+        }
+
+        var contents = JSON.parse(line)
+        callback(contents)
+      }
+
+      seenBytes = req.responseText.length
+    }
+  }
+
+  req.addEventListener('error', failCallback)
+
+  req.open(data == null ? 'GET' : 'POST', path + '?nocache=' + request_id++, true)
+  // Rocket only currently supports URL encoded forms.
+  req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
+
+  if (data != null) {
+    var form = ''
+
+    for (var key in data) {
+      if (!data.hasOwnProperty(key)) {
+        continue
+      }
+
+      if (form !== '') {
+        form += '&'
+      }
+
+      form += encodeURIComponent(key) + '=' + encodeURIComponent(data[key])
+    }
+
+    req.send(form)
+  } else {
+    req.send()
+  }
+}
+
+/**
+ * The default handler if a AJAX request fails. Not to be used directly.
+ *
+ * @param e The XMLHttpRequest that failed.
+ */
+function defaultFailHandler (e) {
+  console.error('A AJAX request failed, and was not caught:')
+  console.error(e)
+}

ui/src/main.js

@@ -0,0 +1,104 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import { ajax, stream_ajax } from './helpers'
+import 'buefy/dist/buefy.css'
+
+Vue.config.productionTip = false
+
+// Borrowed from http://tobyho.com/2012/07/27/taking-over-console-log/
+function intercept (method) {
+  console[method] = function () {
+    var message = Array.prototype.slice.apply(arguments).join(' ')
+    window.external.invoke(
+      JSON.stringify({
+        Log: {
+          kind: method,
+          msg: message
+        }
+      })
+    )
+  }
+}
+
+// Overwrite loggers with the logging backend
+if (window.external !== undefined && window.external.invoke !== undefined) {
+  window.onerror = function (msg, url, line) {
+    old_onerror(msg, url, line)
+    window.external.invoke(
+      JSON.stringify({
+        Log: {
+          kind: 'error',
+          msg: msg + ' @ ' + url + ':' + line
+        }
+      })
+    )
+  }
+
+  var methods = ['log', 'warn', 'error']
+  for (var i = 0; i < methods.length; i++) {
+    intercept(methods[i])
+  }
+}
+
+// Disable F5
+function disable_shortcuts (e) {
+  switch (e.keyCode) {
+    case 116: // F5
+      e.preventDefault()
+      break
+  }
+}
+
+// Check to see if we need to enable dark mode
+ajax('/api/dark-mode', function (enable) {
+  if (enable) {
+    document.body.classList.add('has-background-black-ter')
+  }
+})
+
+window.addEventListener('keydown', disable_shortcuts)
+
+document.getElementById('window-title').innerText =
+  base_attributes.name + ' Installer'
+
+function selectFileCallback (name) {
+  app.install_location = name
+}
+
+var app = new Vue({
+  router: router,
+  data: {
+    attrs: base_attributes,
+    config: {},
+    install_location: '',
+    // If the option to pick an install location should be provided
+    show_install_location: true,
+    metadata: {
+      database: [],
+      install_path: '',
+      preexisting_install: false
+    }
+  },
+  render: function (h) {
+    return h(App)
+  },
+  methods: {
+    exit: function () {
+      ajax(
+        '/api/exit',
+        function () {},
+        function (msg) {
+          alert(
+            'LiftInstall encountered and error while exiting: ' +
+              msg +
+              '\nPlease upload the log file (in the same directory as the installer) to ' +
+              'the respective maintainers for this application (where you got it from!)'
+          )
+        }
+      )
+    },
+    ajax: ajax,
+    stream_ajax: stream_ajax
+  }
+}).$mount('#app')

ui/src/router.js

@@ -0,0 +1,49 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import DownloadConfig from './views/DownloadConfig.vue'
+import SelectPackages from './views/SelectPackages.vue'
+import ErrorView from './views/ErrorView.vue'
+import InstallPackages from './views/InstallPackages.vue'
+import CompleteView from './views/CompleteView.vue'
+import ModifyView from './views/ModifyView.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/config',
+      name: 'config',
+      component: DownloadConfig
+    },
+    {
+      path: '/packages',
+      name: 'packages',
+      component: SelectPackages
+    },
+    {
+      path: '/install/:kind',
+      name: 'install',
+      component: InstallPackages
+    },
+    {
+      path: '/showerr',
+      name: 'showerr',
+      component: ErrorView
+    },
+    {
+      path: '/complete/:uninstall/:update/:packages_installed',
+      name: 'complete',
+      component: CompleteView
+    },
+    {
+      path: '/modify',
+      name: 'modify',
+      component: ModifyView
+    },
+    {
+      path: '/',
+      redirect: '/config'
+    }
+  ]
+})

ui/src/views/CompleteView.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="column has-padding">
+            <div v-if="was_update">
+                <div v-if="has_installed">
+                    <h4 class="subtitle">{{ $root.$data.attrs.name }} has been updated.</h4>
+
+                    <p>You can find your installed applications in your start menu.</p>
+                </div>
+                <div v-else>
+                    <h4 class="subtitle">{{ $root.$data.attrs.name }} is already up to date!</h4>
+
+                    <p>You can find your installed applications in your start menu.</p>
+                </div>
+            </div>
+            <div v-else-if="was_install">
+                <h4 class="subtitle">Thanks for installing {{ $root.$data.attrs.name }}!</h4>
+
+                <p>You can find your installed applications in your start menu.</p>
+            </div>
+            <div v-else>
+                <h4 class="subtitle">{{ $root.$data.attrs.name }} has been uninstalled.</h4>
+            </div>
+
+            <div class="field is-grouped is-right-floating is-bottom-floating">
+                <p class="control">
+                    <a class="button is-dark is-medium" v-on:click="exit">Exit</a>
+                </p>
+            </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'CompleteView',
+  data: function () {
+    return {
+      was_install: !this.$route.params.uninstall,
+      was_update: this.$route.params.update,
+      has_installed: this.$route.params.packages_installed > 0
+    }
+  },
+  methods: {
+    exit: function () {
+      this.$root.exit()
+    }
+  }
+}
+</script>

ui/src/views/DownloadConfig.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="column has-padding">
+            <h4 class="subtitle">Downloading config...</h4>
+
+            <br />
+            <progress class="progress is-info is-medium" value="0" max="100">
+                0%
+            </progress>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'DownloadConfig',
+  created: function () {
+    this.download_install_status()
+  },
+  methods: {
+    download_install_status: function () {
+      var that = this
+      this.$root.ajax('/api/installation-status', function (e) {
+        that.$root.metadata = e
+
+        that.download_config()
+      })
+    },
+    download_config: function () {
+      var that = this
+      this.$root.ajax('/api/config', function (e) {
+        that.$root.config = e
+
+        that.choose_next_state()
+      }, function (e) {
+        console.error('Got error while downloading config: ' +
+                    e)
+
+        if (that.$root.metadata.is_launcher) {
+          // Just launch the target application
+          that.$root.exit()
+        } else {
+          that.$router.replace({ name: 'showerr',
+            params: { msg: 'Got error while downloading config: ' +
+                                e } })
+        }
+      })
+    },
+    choose_next_state: function () {
+      var app = this.$root
+      // Update the updater if needed
+      if (app.config.new_tool) {
+        this.$router.push('/install/updater')
+        return
+      }
+
+      if (app.metadata.preexisting_install) {
+        app.install_location = app.metadata.install_path
+
+        // Copy over installed packages
+        for (var x = 0; x < app.config.packages.length; x++) {
+          app.config.packages[x].default = false
+          app.config.packages[x].installed = false
+        }
+
+        for (var i = 0; i < app.metadata.database.packages.length; i++) {
+          // Find this config package
+          for (var x = 0; x < app.config.packages.length; x++) {
+            if (app.config.packages[x].name === app.metadata.database.packages[i].name) {
+              app.config.packages[x].default = true
+              app.config.packages[x].installed = true
+            }
+          }
+        }
+
+        if (app.metadata.is_launcher) {
+          this.$router.replace('/install/regular')
+        } else {
+          this.$router.replace('/modify')
+        }
+      } else {
+        for (var x = 0; x < app.config.packages.length; x++) {
+          app.config.packages[x].installed = false
+        }
+
+        // Need to do a bit more digging to get at the
+        // install location.
+        this.$root.ajax('/api/default-path', function (e) {
+          if (e.path != null) {
+            app.install_location = e.path
+          }
+        })
+
+        this.$router.replace('/packages')
+      }
+    }
+  }
+}
+</script>

ui/src/views/ErrorView.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="column has-padding">
+            <h4 class="subtitle">An error occurred:</h4>
+
+            <pre>{{ msg }}</pre>
+
+            <div class="field is-grouped is-right-floating is-bottom-floating">
+                <p class="control">
+                    <a class="button is-primary is-medium" v-if="remaining" v-on:click="go_back">Back</a>
+                </p>
+            </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'ErrorView',
+  data: function () {
+    return {
+      msg: this.$route.params.msg,
+      remaining: window.history.length > 1
+    }
+  },
+  methods: {
+    go_back: function () {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>

ui/src/views/InstallPackages.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="column has-padding">
+            <h4 class="subtitle" v-if="$root.$data.metadata.is_launcher || is_update">Checking for updates...</h4>
+            <h4 class="subtitle" v-else-if="is_uninstall">Uninstalling...</h4>
+            <h4 class="subtitle" v-else-if="is_updater_update">Downloading self-update...</h4>
+            <h4 class="subtitle" v-else>Installing...</h4>
+            <div v-html="$root.$data.config.installing_message"></div>
+            <br />
+
+            <div v-html="progress_message"></div>
+            <progress class="progress is-info is-medium" v-bind:value="progress" max="100">
+                {{ progress }}%
+            </progress>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'InstallPackages',
+  data: function () {
+    return {
+      progress: 0.0,
+      progress_message: 'Please wait...',
+      is_uninstall: false,
+      is_updater_update: false,
+      is_update: false,
+      failed_with_error: false,
+      packages_installed: 0
+    }
+  },
+  created: function () {
+    this.is_uninstall = this.$route.params.kind === 'uninstall'
+    this.is_updater_update = this.$route.params.kind === 'updater'
+    this.is_update = this.$route.params.kind === 'update'
+    console.log('Installer kind: ' + this.$route.params.kind)
+    this.install()
+  },
+  methods: {
+    install: function () {
+      var that = this
+      var app = this.$root
+
+      var results = {}
+
+      for (var package_index = 0; package_index < app.config.packages.length; package_index++) {
+        var current_package = app.config.packages[package_index]
+        if (current_package.default != null) {
+          results[current_package.name] = current_package.default
+        }
+      }
+
+      results['path'] = app.install_location
+
+      var targetUrl = '/api/start-install'
+      if (this.is_uninstall) {
+        targetUrl = '/api/uninstall'
+      }
+      if (this.is_updater_update) {
+        targetUrl = '/api/update-updater'
+      }
+
+      this.$root.stream_ajax(targetUrl, function (line) {
+        if (line.hasOwnProperty('Status')) {
+          that.progress_message = line.Status[0]
+          that.progress = line.Status[1] * 100
+        }
+
+        if (line.hasOwnProperty('PackageInstalled')) {
+          that.packages_installed += 1
+        }
+
+        if (line.hasOwnProperty('Error')) {
+          if (app.metadata.is_launcher) {
+            app.exit()
+          } else {
+            that.failed_with_error = true
+            that.$router.replace({ name: 'showerr', params: { msg: line.Error } })
+          }
+        }
+      }, function (e) {
+        if (that.is_updater_update) {
+          // Continue with what we were doing
+          if (app.metadata.is_launcher) {
+            that.$router.replace('/install/regular')
+          } else {
+            if (app.metadata.preexisting_install) {
+              that.$router.replace('/modify')
+            } else {
+              that.$router.replace('/packages')
+            }
+          }
+        } else {
+          if (app.metadata.is_launcher) {
+            app.exit()
+          } else if (!that.failed_with_error) {
+            if (that.is_uninstall) {
+              that.$router.replace({ name: 'complete',
+                params: {
+                  uninstall: true,
+                  update: that.is_update,
+                  installed: that.packages_installed
+                } })
+            } else {
+              that.$router.replace({ name: 'complete',
+                params: {
+                  uninstall: false,
+                  update: that.is_update,
+                  installed: that.packages_installed
+                } })
+            }
+          }
+        }
+      }, undefined, results)
+    }
+  }
+}
+</script>

ui/src/views/ModifyView.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="column has-padding">
+            <h4 class="subtitle">Choose an option:</h4>
+
+            <a class="button is-dark is-medium" v-on:click="update">
+                Update
+            </a>
+            <br />
+            <br />
+
+            <a class="button is-dark is-medium" v-on:click="modify_packages">
+                Modify
+            </a>
+            <br />
+            <br />
+
+            <a class="button is-dark is-medium" v-on:click="prepare_uninstall">
+                Uninstall
+            </a>
+
+            <div class="modal is-active" v-if="show_uninstall">
+                <div class="modal-background"></div>
+                <div class="modal-card">
+                    <header class="modal-card-head">
+                        <p class="modal-card-title">Are you sure you want to uninstall {{ $root.$data.attrs.name }}?</p>
+                    </header>
+                    <footer class="modal-card-foot">
+                        <button class="button is-danger" v-on:click="uninstall">Yes</button>
+                        <button class="button" v-on:click="cancel_uninstall">No</button>
+                    </footer>
+                </div>
+            </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'ModifyView',
+  data: function () {
+    return {
+      show_uninstall: false
+    }
+  },
+  methods: {
+    update: function () {
+      this.router.push('/install/update')
+    },
+    modify_packages: function () {
+      this.router.push('/packages')
+    },
+    prepare_uninstall: function () {
+      this.show_uninstall = true
+    },
+    cancel_uninstall: function () {
+      this.show_uninstall = false
+    },
+    uninstall: function () {
+      this.router.push('/install/uninstall')
+    }
+  }
+}
+</script>

ui/src/views/SelectPackages.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="column has-padding">
+            <h4 class="subtitle">Select which packages you want to install:</h4>
+
+            <!-- Build options -->
+            <div class="tile is-ancestor">
+                <div class="tile is-parent" v-for="Lpackage in $root.$data.config.packages" :key="Lpackage.name" :index="Lpackage.name">
+                    <div class="tile is-child">
+                        <div class="box clickable-box" v-on:click.capture.stop="Lpackage.default = !Lpackage.default">
+                            <label class="checkbox">
+                                <input type="checkbox" v-model="Lpackage.default" />
+                                {{ Lpackage.name }}
+                                <span v-if="Lpackage.installed"><i>(installed)</i></span>
+                            </label>
+                            <p>
+                                {{ Lpackage.description }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="subtitle is-6" v-if="!$root.$data.metadata.preexisting_install && advanced">Install Location</div>
+            <div class="field has-addons" v-if="!$root.$data.metadata.preexisting_install && advanced">
+                <div class="control is-expanded">
+                    <input class="input" type="text" v-model="$root.$data.install_location"
+                           placeholder="Enter a install path here">
+                </div>
+                <div class="control">
+                    <a class="button is-dark" v-on:click="select_file">
+                        Select
+                    </a>
+                </div>
+            </div>
+
+            <div class="is-right-floating is-bottom-floating">
+                <div class="field is-grouped">
+                    <p class="control">
+                        <a class="button is-medium" v-if="!$root.$data.config.hide_advanced && !$root.$data.metadata.preexisting_install && !advanced"
+                           v-on:click="advanced = true">Advanced...</a>
+                    </p>
+                    <p class="control">
+                        <a class="button is-dark is-medium" v-if="!$root.$data.metadata.preexisting_install"
+                           v-on:click="install">Install</a>
+                    </p>
+                    <p class="control">
+                        <a class="button is-dark is-medium" v-if="$root.$data.metadata.preexisting_install"
+                           v-on:click="install">Modify</a>
+                    </p>
+                </div>
+            </div>
+
+            <div class="field is-grouped is-left-floating is-bottom-floating">
+                <p class="control">
+                    <a class="button is-medium" v-if="$root.$data.metadata.preexisting_install"
+                       v-on:click="go_back">Back</a>
+                </p>
+            </div>
+        </div>
+</template>
+
+<script>
+export default {
+  name: 'SelectPackages',
+  data: function () {
+    return {
+      advanced: false
+    }
+  },
+  methods: {
+    select_file: function () {
+      window.external.invoke(JSON.stringify({
+        SelectInstallDir: {
+          callback_name: 'selectFileCallback'
+        }
+      }))
+    },
+    install: function () {
+      this.$router.push('/install/regular')
+    },
+    go_back: function () {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>

ui/vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  devServer: {
+    proxy: 'http://127.0.0.1:3000'
+  }
+}