Polish Vue UI split

Cargo.lock

@@ -646,6 +646,7 @@ dependencies = [
  "url 1.7.2 (registry+https://github.com/rust-lang/crates.io-index)",
  "walkdir 2.2.8 (registry+https://github.com/rust-lang/crates.io-index)",
  "web-view 0.4.1 (git+https://github.com/j-selby/web-view.git?rev=752106e4637356cbdb39a0bf1113ea3ae8a14243)",
+ "which 2.0.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "winapi 0.3.7 (registry+https://github.com/rust-lang/crates.io-index)",
  "winres 0.1.11 (registry+https://github.com/rust-lang/crates.io-index)",
  "xz2 0.1.6 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -1914,6 +1915,15 @@ dependencies = [
  "pkg-config 0.3.14 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
+[[package]]
+name = "which"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+dependencies = [
+ "failure 0.1.5 (registry+https://github.com/rust-lang/crates.io-index)",
+ "libc 0.2.58 (registry+https://github.com/rust-lang/crates.io-index)",
+]
+
 [[package]]
 name = "winapi"
 version = "0.2.8"
@@ -2209,6 +2219,7 @@ dependencies = [
 "checksum want 0.0.6 (registry+https://github.com/rust-lang/crates.io-index)" = "797464475f30ddb8830cc529aaaae648d581f99e2036a928877dfde027ddf6b3"
 "checksum web-view 0.4.1 (git+https://github.com/j-selby/web-view.git?rev=752106e4637356cbdb39a0bf1113ea3ae8a14243)" = "<none>"
 "checksum webview-sys 0.1.2 (git+https://github.com/j-selby/web-view.git?rev=752106e4637356cbdb39a0bf1113ea3ae8a14243)" = "<none>"
+"checksum which 2.0.1 (registry+https://github.com/rust-lang/crates.io-index)" = "b57acb10231b9493c8472b20cb57317d0679a49e0bdbee44b3b803a6473af164"
 "checksum winapi 0.2.8 (registry+https://github.com/rust-lang/crates.io-index)" = "167dc9d6949a9b857f3451275e911c3f44255842c1f7a76f33c55103a909087a"
 "checksum winapi 0.3.7 (registry+https://github.com/rust-lang/crates.io-index)" = "f10e386af2b13e47c89e7236a7a14a086791a2b88ebad6df9bf42040195cf770"
 "checksum winapi-build 0.1.1 (registry+https://github.com/rust-lang/crates.io-index)" = "2d315eee3b34aca4797b2da6b13ed88266e6d612562a0c46390af8299fc699bc"

Cargo.toml

@@ -43,6 +43,7 @@ walkdir = "2.2.7"
 serde = "1.0.89"
 serde_derive = "1.0.89"
 toml = "0.5.0"
+which = "2.0.1"
 
 [target.'cfg(windows)'.dependencies]
 winapi = { version = "0.3", features = ["psapi", "winbase", "winioctl", "winnt"] }

README.md

@@ -33,8 +33,8 @@ apt install -y build-essential libwebkit2gtk-4.0-dev libssl-dev
 
 In order to build yourself an installer, as a bare minimum, you need to:
 
-- Add your favicon to `static/favicon.ico`
-- Add your logo to `static/logo.png`
+- Add your favicon to `ui/public/favicon.ico`
+- Add your logo to `ui/src/assets/logo.png`
 - Modify the bootstrap configuration file as needed (`config.PLATFORM.toml`).
 - Have the main configuration file somewhere useful, reachable over HTTP.
 - Run:

build.rs

@@ -9,6 +9,8 @@ extern crate serde;
 extern crate serde_derive;
 extern crate toml;
 
+extern crate which;
+
 use std::env;
 use std::path::PathBuf;
 
@@ -30,7 +32,7 @@ pub struct BaseAttributes {
 #[cfg(windows)]
 fn handle_binary(config: &BaseAttributes) {
     let mut res = winres::WindowsResource::new();
-    res.set_icon("static/favicon.ico");
+    res.set_icon("ui/public/favicon.ico");
     res.set(
         "FileDescription",
         &format!("Interactive installer for {}", config.name),
@@ -85,18 +87,21 @@ fn main() {
     // Copy for the main build
     copy(&target_config, output_dir.join("bootstrap.toml")).expect("Unable to copy config file");
 
+    let yarn_binary = which::which("yarn")
+        .expect("Failed to find yarn - please go ahead and install it!");
+
     // Build and deploy frontend files
-    Command::new("yarn")
+    Command::new(&yarn_binary)
         .arg("--version")
         .spawn()
-        .expect("Please install Yarn");
-    Command::new("yarn")
+        .expect("Yarn could not be launched");
+    Command::new(&yarn_binary)
         .arg("--cwd")
         .arg(ui_dir.to_str().expect("Unable to covert path"))
         .spawn()
         .unwrap()
         .wait().expect("Unable to install Node.JS dependencies using Yarn");
-    Command::new("yarn")
+    Command::new(&yarn_binary)
         .args(&[
             "--cwd",
             ui_dir.to_str().expect("Unable to covert path"),

src/frontend/rest/services/exit.rs

@@ -25,7 +25,7 @@ pub fn handle(service: &WebService, _req: Request) -> Future {
                 Response::new()
                     .with_status(StatusCode::InternalServerError)
                     .with_header(ContentType::plaintext())
-                    .with_body("Failed to complete framework shutdown"),
+                    .with_body(format!("Failed to complete framework shutdown - {}", e)),
             )
         }
     }

static/css/app.css

@@ -1 +0,0 @@
-@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:url(../fonts/roboto-v18-latin-regular.eot);src:local("Roboto"),local("Roboto-Regular"),url(../fonts/roboto-v18-latin-regular.woff2) format("woff2"),url(../fonts/roboto-v18-latin-regular.woff) format("woff")}body,html{overflow:hidden;height:100%}body,div,h1,h2,h3,h4,h5,h6,span{-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}body.has-background-black-ter .column>div,body.has-background-black-ter .subtitle{color:#f5f5f5}

static/index.html

@@ -1,3 +0,0 @@
-<!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"><script src=/api/attrs></script><link rel=icon href=/favicon.ico><title id=window-title>... Installer</title><link href=/css/app.css rel=preload as=style><link href=/css/chunk-vendors.css rel=preload as=style><link href=/js/app.js rel=preload as=script><link href=/js/chunk-vendors.js rel=preload as=script><link href=/css/chunk-vendors.css rel=stylesheet><link href=/css/app.css rel=stylesheet></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>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><script src=/js/chunk-vendors.js></script><script src=/js/app.js></script></body></html>

ui/public/index.html

@@ -26,8 +26,9 @@
     </script>
 
     <noscript>
-      <strong>We're sorry but ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>You need JavaScript enabled in your Windows Internet Options to install this application.</strong>
     </noscript>
+
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>

ui/src/App.vue

@@ -4,7 +4,7 @@
             <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%" />
+                        <img src="./assets/logo.png" width="60%" alt="Application icon" />
                         <br />
                         <br />
 

ui/src/main.js

@@ -80,8 +80,8 @@ var app = new Vue({
       preexisting_install: false
     }
   },
-  render: function (h) {
-    return h(App)
+  render: function (caller) {
+    return caller(App)
   },
   methods: {
     exit: function () {
@@ -90,7 +90,7 @@ var app = new Vue({
         function () {},
         function (msg) {
           alert(
-            'LiftInstall encountered and error while exiting: ' +
+            'LiftInstall encountered an 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!)'

ui/src/views/ErrorView.vue

@@ -2,7 +2,7 @@
     <div class="column has-padding">
             <h4 class="subtitle">An error occurred:</h4>
 
-            <pre>{{ msg }}</pre>
+            <pre class="pre-wrap">{{ msg }}</pre>
 
             <div class="field is-grouped is-right-floating is-bottom-floating">
                 <p class="control">
@@ -12,6 +12,17 @@
     </div>
 </template>
 
+<style>
+.pre-wrap {
+  /* https://css-tricks.com/snippets/css/make-pre-text-wrap/ */
+  white-space: pre-wrap;       /* css-3 */
+  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+  white-space: -pre-wrap;      /* Opera 4-6 */
+  white-space: -o-pre-wrap;    /* Opera 7 */
+  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
+</style>
+
 <script>
 export default {
   name: 'ErrorView',

ui/src/views/ModifyView.vue

@@ -43,10 +43,10 @@ export default {
   },
   methods: {
     update: function () {
-      this.router.push('/install/update')
+      this.$router.push('/install/update')
     },
     modify_packages: function () {
-      this.router.push('/packages')
+      this.$router.push('/packages')
     },
     prepare_uninstall: function () {
       this.show_uninstall = true
@@ -55,7 +55,7 @@ export default {
       this.show_uninstall = false
     },
     uninstall: function () {
-      this.router.push('/install/uninstall')
+      this.$router.push('/install/uninstall')
     }
   }
 }