patch: Add etcherPro documentation

Signed-off-by: Vipul Gupta (@vipulgupta2048) <vipul@balena.io>

.editorconfig

@@ -7,7 +7,15 @@ indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
-insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
 
 [Makefile]
 indent_style = tab
+
+[*.ts]
+indent_style = tab
+
+[*.tsx]
+indent_style = tab

.eslintrc.yml

@@ -7,7 +7,13 @@ env:
 plugins:
   - lodash
   - jsdoc
-extends: 'eslint:recommended'
+  - node
+  - react
+extends: 'standard'
+parserOptions:
+  sourceType: 'script'
+  ecmaFeatures:
+    jsx: true
 settings:
   jsdoc:
     additionalTagNames:
@@ -17,63 +23,16 @@ rules:
 
   # Possible Errors
 
-  no-cond-assign:
-    - error
   no-console:
     - off
-  no-constant-condition:
-    - error
-  no-control-regex:
-    - error
-  no-debugger:
-    - error
-  no-dupe-args:
-    - error
-  no-dupe-keys:
-    - error
-  no-duplicate-case:
-    - error
   no-empty:
     - error
-  no-empty-character-class:
-    - error
-  no-ex-assign:
-    - error
-  no-extra-boolean-cast:
-    - error
-  no-extra-parens:
-    - error
   no-extra-semi:
     - error
-  no-func-assign:
-    - error
-  no-inner-declarations:
-    - error
-    - both
-  no-invalid-regexp:
-    - error
-  no-irregular-whitespace:
-    - error
   no-negated-in-lhs:
     - error
-  no-obj-calls:
-    - error
   no-prototype-builtins:
     - error
-  no-regex-spaces:
-    - error
-  no-sparse-arrays:
-    - error
-  no-template-curly-in-string:
-    - error
-  no-unexpected-multiline:
-    - error
-  no-unreachable:
-    - error
-  no-unsafe-finally:
-    - error
-  use-isnan:
-    - error
   valid-jsdoc:
     - error
     - requireReturn: false
@@ -89,13 +48,9 @@ rules:
       prefer:
         arg: "param"
         return: "returns"
-  valid-typeof:
-    - error
 
   # Best Practices
 
-  accessor-pairs:
-    - error
   array-callback-return:
     - error
   block-scoped-var:
@@ -110,19 +65,12 @@ rules:
     - error
   default-case:
     - error
-  dot-location:
-    - error
-    - property
   dot-notation:
     - error
-  eqeqeq:
-    - error
   guard-for-in:
     - error
   no-alert:
     - error
-  no-caller:
-    - error
   no-case-declarations:
     - error
   no-div-regex:
@@ -131,106 +79,43 @@ rules:
     - error
   no-empty-function:
     - error
-  no-empty-pattern:
-    - error
   no-eq-null:
     - error
-  no-eval:
-    - error
-  no-extend-native:
-    - error
-  no-extra-bind:
-    - error
   no-extra-label:
     - error
-  no-fallthrough:
-    - error
-  no-floating-decimal:
-    - error
-  no-global-assign:
-    - error
   no-implicit-coercion:
     - error
   no-implicit-globals:
     - error
-  no-implied-eval:
-    - error
-  no-iterator:
-    - error
-  no-labels:
-    - error
-  no-lone-blocks:
-    - error
   no-loop-func:
     - error
   no-magic-numbers:
     - error
-  no-multi-spaces:
-    - error
-  no-multi-str:
-    - error
   no-native-reassign:
     - error
-  no-new:
-    - error
-  no-new-func:
-    - error
-  no-new-wrappers:
-    - error
-  no-octal:
-    - error
-  no-octal-escape:
-    - error
   no-param-reassign:
     - error
-  no-proto:
-    - error
-  no-redeclare:
-    - error
   no-restricted-properties:
     - error
     - property: __proto__
-  no-return-assign:
-    - error
   no-return-await:
     - error
   no-script-url:
     - error
-  no-self-assign:
-    - error
-  no-self-compare:
-    - error
-  no-sequences:
-    - error
-  no-throw-literal:
-    - error
-  no-unmodified-loop-condition:
-    - error
   no-unused-expressions:
     - error
   no-unused-labels:
     - error
-  no-useless-call:
-    - error
   no-useless-concat:
     - error
-  no-useless-escape:
-    - error
   no-void:
     - error
   no-warning-comments:
     - off
-  no-with:
-    - error
   radix:
     - error
   vars-on-top:
     - off
-  wrap-iife:
-    - error
-    - outside
-  yoda:
-    - error
 
   # Strict mode
 
@@ -245,21 +130,11 @@ rules:
     - always
   no-catch-shadow:
     - error
-  no-delete-var:
-    - error
-  no-label-var:
-    - error
   no-restricted-globals:
     - error
     - event
   no-shadow:
     - error
-  no-shadow-restricted-names:
-    - error
-  no-undef:
-    - error
-  no-undef-init:
-    - error
   no-undefined:
     - error
   no-unused-vars:
@@ -273,14 +148,8 @@ rules:
     - error
   global-require:
     - off
-  handle-callback-err:
-    - error
   no-mixed-requires:
     - error
-  no-new-require:
-    - error
-  no-path-concat:
-    - error
   no-process-env:
     - off
   no-process-exit:
@@ -293,38 +162,20 @@ rules:
   array-bracket-spacing:
     - error
     - always
-  block-spacing:
-    - error
-  brace-style:
-    - error
-    - 1tbs
-  camelcase:
-    - error
   capitalized-comments:
     - error
     - always
     - ignoreConsecutiveComments: true
-  comma-dangle:
-    - error
-    - never
   comma-spacing:
     - error
     - before: false
       after: true
-  comma-style:
-    - error
-    - last
   computed-property-spacing:
     - error
     - never
   consistent-this:
     - error
     - self
-  eol-last:
-    - error
-  func-call-spacing:
-    - error
-    - never
   func-name-matching:
     - error
     - always
@@ -341,19 +192,9 @@ rules:
     - min: 2
       exceptions:
         - "_"
-  indent:
+  id-match:
     - error
-    - 2
-    - SwitchCase: 1
-  key-spacing:
-    - error
-    - beforeColon: false
-      afterColon: true
-      mode: strict
-  keyword-spacing:
-    - error
-    - before: true
-      after: true
+    - "^[_0-9A-Za-z\\$]+$"
   line-comment-position:
     - error
     - position: above
@@ -388,16 +229,9 @@ rules:
     - error
     - max: 1
   multiline-ternary:
-    - error
-    - never
-  new-cap:
-    - error
-  new-parens:
-    - error
+    - off
   newline-per-chained-call:
     - off
-  no-array-constructor:
-    - error
   no-bitwise:
     - error
   no-continue:
@@ -408,21 +242,12 @@ rules:
     - error
   no-mixed-operators:
     - error
-  no-mixed-spaces-and-tabs:
-    - error
   no-multi-assign:
     - error
-  no-multiple-empty-lines:
-    - error
-    - max: 1
-      maxEOF: 1
-      maxBOF: 0
   no-negated-condition:
     - error
   no-nested-ternary:
     - error
-  no-new-object:
-    - error
   no-plusplus:
     - error
   no-restricted-syntax:
@@ -431,46 +256,28 @@ rules:
     - ForInStatement
   no-spaced-func:
     - error
-  no-tabs:
-    - error
-  no-trailing-spaces:
-    - error
   no-underscore-dangle:
     - error
     - allowAfterThis: false
-  no-unneeded-ternary:
-    - error
-  no-whitespace-before-property:
-    - error
   object-curly-newline:
     - error
-    - minProperties: 1
+    - minProperties: 3
+      consistent: true
   object-curly-spacing:
     - error
     - always
-  object-property-newline:
-    - error
   one-var-declaration-per-line:
     - error
     - always
-  one-var:
-    - error
-    - never
   operator-assignment:
     - error
     - always
-  operator-linebreak:
-    - error
-    - before
-  padded-blocks:
-    - error
-    - classes: always
-  quote-props:
-    - error
-    - as-needed
   quotes:
     - error
     - single
+  quote-props:
+    - error
+    - as-needed
   require-jsdoc:
     - error
     - require:
@@ -478,30 +285,11 @@ rules:
         ClassDeclaration: true
         MethodDefinition: true
         ArrowFunctionExpression: true
-  semi:
-    - error
-    - always
-  semi-spacing:
-    - error
-    - before: false
-      after: true
-  space-before-blocks:
-    - error
   space-before-function-paren:
     - error
-    - never
-  space-in-parens:
-    - error
-    - never
-  space-infix-ops:
-    - error
-  space-unary-ops:
-    - error
-    - words: true
-      nonwords: false
-  spaced-comment:
-    - error
-    - always
+    - anonymous: always
+      named: always
+      asyncArrow: always
   template-tag-spacing:
     - error
     - always
@@ -510,9 +298,6 @@ rules:
 
   # ECMAScript 6
 
-  arrow-body-style:
-    - error
-    - always
   arrow-parens:
     - error
     - always
@@ -520,32 +305,12 @@ rules:
     - error
     - before: true
       after: true
-  constructor-super:
-    - error
   generator-star-spacing:
     - error
     - before: true
       after: false
-  no-class-assign:
-    - error
   no-confusing-arrow:
     - error
-  no-const-assign:
-    - error
-  no-dupe-class-members:
-    - error
-  no-duplicate-imports:
-    - error
-  no-new-symbol:
-    - error
-  no-this-before-super:
-    - error
-  no-useless-computed-key:
-    - error
-  no-useless-constructor:
-    - error
-  no-useless-rename:
-    - error
   no-var:
     - error
   object-shorthand:
@@ -553,8 +318,6 @@ rules:
     - always
   prefer-const:
     - error
-  prefer-reflect:
-    - error
   prefer-spread:
     - error
   prefer-numeric-literals:
@@ -568,17 +331,8 @@ rules:
     - allowNamedFunctions: false
   require-yield:
     - error
-  rest-spread-spacing:
-    - error
-  template-curly-spacing:
-    - error
-    - never
   symbol-description:
     - error
-  yield-star-spacing:
-    - error
-    - before: true
-      after: false
 
   # Lodash
 
@@ -672,3 +426,29 @@ rules:
     - error
   jsdoc/require-returns-type:
     - error
+
+  # Node
+
+  node/no-deprecated-api:
+    - error
+  node/no-missing-import:
+    - error
+  node/no-missing-require:
+    - error
+  node/process-exit-as-throw:
+    - error
+  node/no-extraneous-require:
+    - error
+  node/no-extraneous-import:
+    - error
+
+  # React
+
+  react/jsx-uses-vars:
+    - error
+
+overrides:
+  files: ['*.jsx']
+  rules:
+    require-jsdoc:
+    - off

.gitattributes

@@ -1,18 +1,20 @@
 # Javascript files must retain LF line-endings (to keep eslint happy)
 *.js text eol=lf
+*.jsx text eol=lf
+*.ts text eol=lf
+*.tsx text eol=lf
 # CSS and SCSS files must retain LF line-endings (to keep ensure-staged-sass.sh happy)
 *.css text eol=lf
 *.scss text eol=lf
 
 # Text files
-dictionary text
 Dockerfile* text
 .dockerignore text
 .editorconfig text
 etcher text
 .git* text
 *.html text
-*.json text
+*.json text eol=lf
 *.cpp text
 *.h text
 *.gyp text
@@ -25,6 +27,9 @@ Makefile text
 *.yml text
 *.patch text
 *.txt text
+*.tpl text
+CODEOWNERS text
+*.plist text
 
 # Binary files (no line-ending conversions)
 *.bz2 binary diff=hex
@@ -35,9 +40,22 @@ Makefile text
 *.img binary diff=hex
 *.iso binary diff=hex
 *.png binary diff=hex
+*.bin binary diff=hex
+*.elf binary diff=hex
 *.xz binary diff=hex
 *.zip binary diff=hex
+*.dtb binary diff=hex
+*.dtbo binary diff=hex
+*.dat binary diff=hex
+*.bin binary diff=hex
 *.dmg binary diff=hex
 *.rpi-sdcard binary diff=hex
+*.wic binary diff=hex
 *.foo binary diff=hex
+*.eot binary diff=hex
+*.otf binary diff=hex
+*.woff binary diff=hex
+*.woff2 binary diff=hex
+*.ttf binary diff=hex
 xz-without-extension binary diff=hex
+wmic-output.txt binary diff=hex

.github/ISSUE_TEMPLATE.md

@@ -1,6 +1,11 @@
-- **Etcher version:**
-- **Operating system and architecture:**
-- **Image flashed:**
-- **Do you see any meaningful error information in the DevTools?**
+- **Etcher version:** 
+- **Operating system and architecture:** 
+- **Image flashed:** 
+- **What do you think should have happened:** <!-- or a step by step reproduction process -->
+- **What happened:**
+- **Do you see any meaningful error information in the DevTools?** 
+<!-- You can open DevTools by pressing `Ctrl+Shift+I` (`Ctrl+Alt+I` for Etcher before v1.3.x), or `Cmd+Opt+I` if you're on macOS. -->
 
-<!-- You can open DevTools by pressing `Ctrl+Alt+I`, or `Cmd+Alt+I` if you're running OS X. -->
+<!-- issues with missing information will be labeled as not-enough-info and closed shortly -->
+<!-- please try to include as many influencing elements as possible are you root, does any other process block the device, etc. -->
+<!-- if you find a solution in the meantime thank you for sharing the fix and not just closing / abandoning your issue -->

.gitignore

@@ -11,6 +11,9 @@ pids
 # Directory for instrumented libs generated by jscoverage/JSCover
 /lib-cov
 
+# Image stream output directory
+/tests/image-stream/output
+
 # Coverage directory used by tools like istanbul
 /coverage
 
@@ -23,6 +26,9 @@ pids
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 /build
 
+# Generated files
+/generated
+
 # Dependency directory
 # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
 node_modules
@@ -37,3 +43,11 @@ node_modules
 *.cer
 *.crt
 *.pem
+
+# OSX files
+
+.DS_Store
+
+# VSCode files
+
+.vscode

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "scripts/resin"]
+	path = scripts/resin
+	url = https://github.com/balena-io/scripts.git
+	branch = master

.resinci.json

@@ -0,0 +1,74 @@
+{
+  "electron": {
+    "npm_version": "6.14.5",
+    "dependencies": {
+      "linux": [
+        "libudev-dev",
+        "libusb-1.0-0-dev",
+        "libyaml-dev",
+        "libgtk-3-0",
+        "libatk-bridge2.0-0",
+        "libdbus-1-3",
+        "libgbm1",
+        "libc6"
+      ]
+    },
+    "builder": {
+      "appId": "io.balena.etcher",
+      "copyright": "Copyright 2016-2021 Balena Ltd",
+      "productName": "balenaEtcher",
+      "nodeGypRebuild": false,
+      "afterPack": "./afterPack.js",
+      "asar": false,
+      "files": [
+        "generated",
+        "lib/shared/catalina-sudo/sudo-askpass.osascript.js"
+      ],
+      "afterSign": "./afterSignHook.js",
+      "mac": {
+        "category": "public.app-category.developer-tools",
+        "hardenedRuntime": true,
+        "entitlements": "entitlements.mac.plist",
+        "entitlementsInherit": "entitlements.mac.plist",
+        "artifactName": "${productName}-${version}.${ext}"
+      },
+      "dmg": {
+        "iconSize": 110,
+        "contents": [
+          {
+            "x": 140,
+            "y": 245
+          },
+          {
+            "x": 415,
+            "y": 245,
+            "type": "link",
+            "path": "/Applications"
+          }
+        ],
+        "window": {
+          "width": 544,
+          "height": 407
+        }
+      },
+      "linux": {
+        "category": "Utility",
+        "packageCategory": "utils",
+        "synopsis": "balenaEtcher is a powerful OS image flasher built with web technologies to ensure flashing an SDCard or USB drive is a pleasant and safe experience. It protects you from accidentally writing to your hard-drives, ensures every byte of data was written correctly and much more."
+      },
+      "deb": {
+        "compression": "bzip2",
+        "priority": "optional",
+        "depends": [
+          "polkit-1-auth-agent | policykit-1-gnome | polkit-kde-1"
+        ]
+      },
+      "protocols": {
+        "name": "etcher",
+        "schemes": [
+          "etcher"
+        ]
+      }
+    }
+  }
+}

.sass-lint.yml

@@ -1,17 +0,0 @@
-# sass-lint config generated by make-sass-lint-config v0.1.2
-
-files:
-  include: lib/gui/scss/**/*.scss
-options:
-  formatter: stylish
-  merge-default-rules: false
-rules:
-  no-css-comments: 0
-  no-important: 0
-  no-qualifying-elements: 0
-  placeholder-in-extend: 0
-  property-sort-order: 0
-  quotes:
-    - 1
-    - style: double
-

.travis.yml

@@ -1,81 +0,0 @@
-language: node_js
-sudo: false
-node_js:
-  - "6.10.3"
-
-# Remove wine from cache
-before_cache:
-  - rm -rf $HOME/.cache/electron-builder/wine
-
-cache:
-  ccache: true
-  directories:
-    - $HOME/.cache/electron
-    - $HOME/.cache/electron-builder
-    - $HOME/.npm/_prebuilds
-    - $HOME/Library/Caches/electron
-    - $HOME/Library/Caches/electron-builder
-    - $HOME/.pkg-cache
-    - node_modules
-
-services:
-  - docker
-
-addons:
-  apt:
-    sources:
-      - ubuntu-toolchain-r-test
-    packages:
-      - libstdc++-6-dev
-
-env:
-  global:
-    - CCACHE_TEMPDIR=/tmp/.ccache-temp
-    - CCACHE_COMPRESS=1
-    - CC="clang"
-    - CXX="clang++"
-    - HOMEBREW_NO_AUTO_UPDATE=1
-  matrix:
-    - TARGET_ARCH=x64
-    - TARGET_ARCH=x86
-
-matrix:
-  fast_finish: true
-  exclude:
-    - os: osx
-      env: TARGET_ARCH=x86
-
-os:
-  - linux
-  - osx
-
-before_install:
-  - if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then PATH=/usr/local/opt/ccache/libexec:$PATH; fi
-  - if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then
-      export HOST_OS="darwin";
-    else
-      export HOST_OS="$TRAVIS_OS_NAME";
-    fi
-
-install:
-  - travis_wait ./scripts/ci/install.sh -o $HOST_OS -r $TARGET_ARCH
-
-script:
-  - ./scripts/ci/test.sh -o $HOST_OS -r $TARGET_ARCH
-  - ./scripts/ci/build-installers.sh -o $HOST_OS -r $TARGET_ARCH
-
-deploy:
-  provider: script
-  skip_cleanup: true
-  script: scripts/ci/deploy-aws-s3.sh -o $HOST_OS -r $TARGET_ARCH
-  on:
-    branch: master
-
-notifications:
-  email: false
-  webhooks:
-    urls:
-      - https://webhooks.gitter.im/e/0a019c8b9828eb9f6a72
-    on_success: change
-    on_failure: always
-    on_start: never

FAQ.md

@@ -0,0 +1,46 @@
+## Why is my drive not bootable?
+
+Etcher copies images to drives byte by byte, without doing any transformation to the final device, which means images that require special treatment to be made bootable, like Windows images, will not work out of the box. In these cases, the general advice is to use software specific to those kind of images, usually available from the image publishers themselves. You can find more information [here](https://github.com/balena-io/etcher/blob/master/docs/USER-DOCUMENTATION.md#why-is-my-drive-not-bootable).
+
+## How can I configure persistent storage?
+
+Some programs, usually oriented at making GNU/Linux live USB drives, include an option to set persistent storage. This is currently not supported by Etcher, so if you require this functionality, we advise to fallback to [UNetbootin](https://unetbootin.github.io/).
+
+## How do I flash Ubuntu ISOs
+
+Ubuntu images (and potentially some other related GNU/Linux distributions) have a peculiar format that allows the image to boot without any further modification from both CDs and USB drives.
+A consequence of this enhancement is that some programs, like parted get confused about the drive's format and partition table, printing warnings such as:
+
+> /dev/xxx contains GPT signatures, indicating that it has a GPT table. However, it does not have a valid fake msdos partition table, as it should. Perhaps it was corrupted -- possibly by a program that doesn't understand GPT partition tables. Or perhaps you deleted the GPT table, and are now using an msdos partition table. Is this a GPT partition table? Both the primary and backup GPT tables are corrupt. Try making a fresh table, and using Parted's rescue feature to recover partitions.
+
+> Warning: The driver descriptor says the physical block size is 2048 bytes, but Linux says it is 512 bytes.
+
+All these warnings are safe to ignore, and your drive should be able to boot without any problems.
+Refer to [the following message from Ubuntu's mailing list](https://lists.ubuntu.com/archives/ubuntu-devel/2011-June/033495.html) if you want to learn more.
+
+## How do I run Etcher on Wayland?
+
+The XWayland Server provides backwards compatibility to run any X client on Wayland, including Etcher.
+This usually works out of the box on mainstream GNU/Linux distributions that properly support Wayland. If it doesn't, make sure the xwayland.so module is being loaded by declaring it in your [weston.ini](http://manpages.ubuntu.com/manpages/wily/man5/weston.ini.5.html):
+
+```
+[core]
+modules=xwayland.so
+```
+
+## What are the runtime GNU/LINUX dependencies?
+
+[This entry](https://github.com/balena-io/etcher/blob/master/docs/USER-DOCUMENTATION.md#runtime-gnulinux-dependencies) aims to provide an up to date list of runtime dependencies needed to run Etcher on a GNU/Linux system.
+
+## How can I recover the broken drive?
+
+Sometimes, things might go wrong, and you end up with a half-flashed drive that is unusable by your operating systems, and common graphical tools might even refuse to get it back to a normal state.
+To solve these kinds of problems, we've collected [a list of fail-proof methods](https://github.com/balena-io/etcher/blob/master/docs/USER-DOCUMENTATION.md#recovering-broken-drives) to completely erase your drive in major operating systems.
+
+## I receive "No polkit authentication agent found" error in GNU/Linux
+
+Etcher requires an available [polkit authentication agent](https://wiki.archlinux.org/index.php/Polkit#Authentication_agents) in your system in order to show a secure password prompt dialog to perform elevation. Make sure you have one installed for the desktop environment of your choice.
+
+## May I run Etcher in older macOS versions?
+
+Etcher GUI is based on the [Electron](http://electron.atom.io/) framework, [which only supports macOS 10.10 and newer versions](https://github.com/electron/electron/blob/master/docs/tutorial/support.md#supported-platforms).

Makefile

@@ -2,49 +2,22 @@
 # Build configuration
 # ---------------------------------------------------------------------
 
-NPX = ./node_modules/.bin/npx
+RESIN_SCRIPTS ?= ./scripts/resin
+export NPM_VERSION ?= 6.14.8
+S3_BUCKET = artifacts.ci.balena-cloud.com
 
 # This directory will be completely deleted by the `clean` rule
 BUILD_DIRECTORY ?= dist
 
-# See http://stackoverflow.com/a/20763842/1641422
-BUILD_DIRECTORY_PARENT = $(dir $(BUILD_DIRECTORY))
-ifeq ($(wildcard $(BUILD_DIRECTORY_PARENT).),)
-$(error $(BUILD_DIRECTORY_PARENT) does not exist)
-endif
-
 BUILD_TEMPORARY_DIRECTORY = $(BUILD_DIRECTORY)/.tmp
 
-# ---------------------------------------------------------------------
-# Application configuration
-# ---------------------------------------------------------------------
+$(BUILD_DIRECTORY):
+	mkdir $@
 
-ELECTRON_VERSION = $(shell jq -r '.devDependencies["electron"]' package.json)
-NODE_VERSION = 6.1.0
-COMPANY_NAME = Resinio Ltd
-APPLICATION_NAME = $(shell jq -r '.displayName' package.json)
-APPLICATION_DESCRIPTION = $(shell jq -r '.description' package.json)
-APPLICATION_COPYRIGHT = $(shell cat electron-builder.yml | shyaml get-value copyright)
+$(BUILD_TEMPORARY_DIRECTORY): | $(BUILD_DIRECTORY)
+	mkdir $@
 
-# ---------------------------------------------------------------------
-# Release type
-# ---------------------------------------------------------------------
-
-# Add the current commit to the version if release type is "snapshot"
-RELEASE_TYPE ?= snapshot
-PACKAGE_JSON_VERSION = $(shell jq -r '.version' package.json)
-ifeq ($(RELEASE_TYPE),production)
-APPLICATION_VERSION = $(PACKAGE_JSON_VERSION)
-S3_BUCKET = resin-production-downloads
-endif
-ifeq ($(RELEASE_TYPE),snapshot)
-CURRENT_COMMIT_HASH = $(shell git log -1 --format="%h")
-APPLICATION_VERSION = $(PACKAGE_JSON_VERSION)+$(CURRENT_COMMIT_HASH)
-S3_BUCKET = resin-nightly-downloads
-endif
-ifndef APPLICATION_VERSION
-$(error Invalid release type: $(RELEASE_TYPE))
-endif
+SHELL := /bin/bash
 
 # ---------------------------------------------------------------------
 # Operating system and architecture detection
@@ -52,7 +25,7 @@ endif
 
 # http://stackoverflow.com/a/12099167
 ifeq ($(OS),Windows_NT)
-	HOST_PLATFORM = win32
+	PLATFORM = win32
 
 	ifeq ($(PROCESSOR_ARCHITEW6432),AMD64)
 		HOST_ARCH = x64
@@ -66,7 +39,7 @@ ifeq ($(OS),Windows_NT)
 	endif
 else
 	ifeq ($(shell uname -s),Linux)
-		HOST_PLATFORM = linux
+		PLATFORM = linux
 
 		ifeq ($(shell uname -m),x86_64)
 			HOST_ARCH = x64
@@ -75,29 +48,35 @@ else
 			HOST_ARCH = x86
 		endif
 		ifeq ($(shell uname -m),armv7l)
-			HOST_ARCH = armv7l
+			HOST_ARCH = armv7hf
+		endif
+		ifeq ($(shell uname -m),aarch64)
+			HOST_ARCH = aarch64
+		endif
+		ifeq ($(shell uname -m),armv8)
+			HOST_ARCH = aarch64
+		endif
+		ifeq ($(shell uname -m),arm64)
+			HOST_ARCH = aarch64
 		endif
 	endif
 	ifeq ($(shell uname -s),Darwin)
-		HOST_PLATFORM = darwin
+		PLATFORM = darwin
 
 		ifeq ($(shell uname -m),x86_64)
 			HOST_ARCH = x64
 		endif
+		ifeq ($(shell uname -m),arm64)
+			HOST_ARCH = aarch64
+		endif
 	endif
 endif
 
-ifndef HOST_PLATFORM
-$(error We couldn't detect your host platform)
+ifndef PLATFORM
+$(error We could not detect your host platform)
 endif
 ifndef HOST_ARCH
-$(error We couldn't detect your host architecture)
-endif
-
-TARGET_PLATFORM = $(HOST_PLATFORM)
-
-ifneq ($(TARGET_PLATFORM),$(HOST_PLATFORM))
-$(error We don't support cross-platform builds yet)
+$(error We could not detect your host architecture)
 endif
 
 # Default to host architecture. You can override by doing:
@@ -106,235 +85,29 @@ endif
 #
 TARGET_ARCH ?= $(HOST_ARCH)
 
-# Support x86 builds from x64 in GNU/Linux
-# See https://github.com/addaleax/lzma-native/issues/27
-ifeq ($(TARGET_PLATFORM),linux)
-	ifneq ($(HOST_ARCH),$(TARGET_ARCH))
-		ifeq ($(TARGET_ARCH),x86)
-			export CFLAGS += -m32
-		else
-$(error Can't build $(TARGET_ARCH) binaries on a $(HOST_ARCH) host)
-		endif
-	endif
-endif
-
 # ---------------------------------------------------------------------
-# Code signing
+# Electron
 # ---------------------------------------------------------------------
+electron-develop:
+	git submodule update --init && \
+	npm ci && \
+	npm run webpack
 
-ifeq ($(TARGET_PLATFORM),darwin)
-ifndef CSC_NAME
-$(warning No code-sign identity found (CSC_NAME is not set))
-endif
-endif
+electron-test:
+	$(RESIN_SCRIPTS)/electron/test.sh \
+		-b $(shell pwd) \
+		-s $(PLATFORM)
 
-ifeq ($(TARGET_PLATFORM),win32)
-ifndef CSC_LINK
-$(warning No code-sign certificate found (CSC_LINK is not set))
-ifndef CSC_KEY_PASSWORD
-$(warning No code-sign certificate password found (CSC_KEY_PASSWORD is not set))
-endif
-endif
-endif
-
-# ---------------------------------------------------------------------
-# Electron Builder
-# ---------------------------------------------------------------------
-
-ELECTRON_BUILDER_OPTIONS = --$(TARGET_ARCH_ELECTRON_BUILDER)
-
-# ---------------------------------------------------------------------
-# Updates
-# ---------------------------------------------------------------------
-
-DISABLE_UPDATES_ELECTRON_BUILDER_OPTIONS = --extraMetadata.analytics.updates.enabled=false
-
-ifdef DISABLE_UPDATES
-$(warning Update notification dialog has been disabled (DISABLE_UPDATES is set))
-ELECTRON_BUILDER_OPTIONS += $(DISABLE_UPDATES_ELECTRON_BUILDER_OPTIONS)
-endif
-
-# ---------------------------------------------------------------------
-# Analytics
-# ---------------------------------------------------------------------
-
-ifndef ANALYTICS_SENTRY_TOKEN
-$(warning No Sentry token found (ANALYTICS_SENTRY_TOKEN is not set))
-else
-ELECTRON_BUILDER_OPTIONS += --extraMetadata.analytics.sentry.token=$(ANALYTICS_SENTRY_TOKEN)
-endif
-
-ifndef ANALYTICS_MIXPANEL_TOKEN
-$(warning No Mixpanel token found (ANALYTICS_MIXPANEL_TOKEN is not set))
-else
-ELECTRON_BUILDER_OPTIONS += --extraMetadata.analytics.mixpanel.token=$(ANALYTICS_MIXPANEL_TOKEN)
-endif
-
-# ---------------------------------------------------------------------
-# Extra variables
-# ---------------------------------------------------------------------
-
-TARGET_ARCH_DEBIAN = $(shell ./scripts/build/architecture-convert.sh -r $(TARGET_ARCH) -t debian)
-TARGET_ARCH_REDHAT = $(shell ./scripts/build/architecture-convert.sh -r $(TARGET_ARCH) -t redhat)
-TARGET_ARCH_APPIMAGE = $(shell ./scripts/build/architecture-convert.sh -r $(TARGET_ARCH) -t appimage)
-TARGET_ARCH_ELECTRON_BUILDER = $(shell ./scripts/build/architecture-convert.sh -r $(TARGET_ARCH) -t electron-builder)
-TARGET_PLATFORM_PKG = $(shell ./scripts/build/target-convert.sh -r $(TARGET_PLATFORM) -t pkg)
-ENTRY_POINT_CLI = lib/cli/etcher.js
-ETCHER_CLI_BINARY = $(APPLICATION_NAME_LOWERCASE)
-ifeq ($(TARGET_PLATFORM),win32)
-ETCHER_CLI_BINARY = $(APPLICATION_NAME_LOWERCASE).exe
-endif
-
-PRODUCT_NAME = etcher
-APPLICATION_NAME_LOWERCASE = $(shell echo $(APPLICATION_NAME) | tr A-Z a-z)
-APPLICATION_VERSION_DEBIAN = $(shell echo $(APPLICATION_VERSION) | tr "-" "~")
-APPLICATION_VERSION_REDHAT = $(shell echo $(APPLICATION_VERSION) | tr "-" "~")
-
-# ---------------------------------------------------------------------
-# Rules
-# ---------------------------------------------------------------------
-
-# See http://stackoverflow.com/a/12528721
-# Note that the blank line before 'endef' is actually important - don't delete it
-define execute-command
-	$(1)
-
-endef
-
-$(BUILD_DIRECTORY):
-	mkdir $@
-
-$(BUILD_TEMPORARY_DIRECTORY): | $(BUILD_DIRECTORY)
-	mkdir $@
-
-# ---------------------------------------------------------------------
-# CLI
-# ---------------------------------------------------------------------
-
-$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-cli-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH)-app: \
-	package.json npm-shrinkwrap.json \
-	| $(BUILD_DIRECTORY)
-	mkdir -p $@
-	./scripts/build/dependencies-npm.sh -p \
-		-r "$(TARGET_ARCH)" \
-		-v "$(NODE_VERSION)" \
-		-x $@ \
-		-t node \
-		-s "$(TARGET_PLATFORM)"
-	git apply --directory $@/node_modules/lzma-native patches/cli/lzma-native-index-static-addon-require.patch
-	cp -r lib $@
-	cp package.json $@
-
-$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-cli-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH): \
-	$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-cli-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH)-app \
-	| $(BUILD_DIRECTORY)
-	mkdir $@
-	$(NPX) pkg --output $@/$(ETCHER_CLI_BINARY) -t node6-$(TARGET_PLATFORM_PKG)-$(TARGET_ARCH) $</$(ENTRY_POINT_CLI)
-	./scripts/build/dependencies-npm-extract-addons.sh \
-		-d $</node_modules \
-		-o $@/node_modules
-# pkg currently has a bug where darwin executables
-# can't be code-signed
-# See https://github.com/zeit/pkg/issues/128
-# ifeq ($(TARGET_PLATFORM),darwin)
-# ifdef CSC_NAME
-#		./scripts/build/electron-sign-file-darwin.sh -f $@/$(ETCHER_CLI_BINARY) -i "$(CSC_NAME)"
-# endif
-# endif
-
-# pkg currently has a bug where Windows executables
-# can't be branded
-# See https://github.com/zeit/pkg/issues/149
-# ifeq ($(TARGET_PLATFORM),win32)
-#		./scripts/build/electron-brand-exe.sh \
-#			-f $@/$(ETCHER_CLI_BINARY) \
-#			-n $(APPLICATION_NAME) \
-#			-d "$(APPLICATION_DESCRIPTION)" \
-#			-v "$(APPLICATION_VERSION)" \
-#			-c "$(APPLICATION_COPYRIGHT)" \
-#			-m "$(COMPANY_NAME)" \
-#			-i assets/icon.ico \
-#			-w $(BUILD_TEMPORARY_DIRECTORY)
-# endif
-
-ifeq ($(TARGET_PLATFORM),win32)
-ifdef CSC_LINK
-ifdef CSC_KEY_PASSWORD
-	./scripts/build/electron-sign-exe-win32.sh -f $@/$(ETCHER_CLI_BINARY) \
-		-d "$(APPLICATION_NAME) - $(APPLICATION_VERSION)" \
-		-c $(CSC_LINK) \
-		-p $(CSC_KEY_PASSWORD)
-endif
-endif
-endif
-
-$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-cli-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).zip: \
-	$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-cli-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH)
-	./scripts/build/zip-file.sh -f $< -s $(TARGET_PLATFORM) -o $@
-
-$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-cli-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).tar.gz: \
-	$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-cli-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH)
-	./scripts/build/tar-gz-file.sh -f $< -o $@
-
-# ---------------------------------------------------------------------
-# GUI
-# ---------------------------------------------------------------------
-
-assets/osx/installer.tiff: assets/osx/installer.png assets/osx/installer@2x.png
+assets/dmg/background.tiff: assets/dmg/background.png assets/dmg/background@2x.png
 	tiffutil -cathidpicheck $^ -out $@
 
-$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-$(APPLICATION_VERSION)-darwin-$(TARGET_ARCH).dmg: assets/osx/installer.tiff \
-	| $(BUILD_DIRECTORY)
-	TARGET_ARCH=$(TARGET_ARCH) $(NPX) build --mac dmg $(ELECTRON_BUILDER_OPTIONS) \
-		--extraMetadata.version=$(APPLICATION_VERSION) \
-		--extraMetadata.packageType=dmg
-
-$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-$(APPLICATION_VERSION)-darwin-$(TARGET_ARCH).zip: assets/osx/installer.tiff \
-	| $(BUILD_DIRECTORY)
-	TARGET_ARCH=$(TARGET_ARCH) $(NPX) build --mac zip $(ELECTRON_BUILDER_OPTIONS) \
-		--extraMetadata.version=$(APPLICATION_VERSION) \
-		--extraMetadata.packageType=zip
-
-APPLICATION_NAME_ELECTRON = $(APPLICATION_NAME_LOWERCASE)-electron
-
-$(BUILD_DIRECTORY)/$(APPLICATION_NAME_ELECTRON)-$(APPLICATION_VERSION_REDHAT).$(TARGET_ARCH_REDHAT).rpm: \
-	| $(BUILD_DIRECTORY)
-	$(NPX) build --linux rpm $(ELECTRON_BUILDER_OPTIONS) \
-		--extraMetadata.name=$(APPLICATION_NAME_ELECTRON) \
-		--extraMetadata.version=$(APPLICATION_VERSION_REDHAT) \
-		--extraMetadata.packageType=rpm \
-		$(DISABLE_UPDATES_ELECTRON_BUILDER_OPTIONS)
-
-$(BUILD_DIRECTORY)/$(APPLICATION_NAME_ELECTRON)_$(APPLICATION_VERSION_DEBIAN)_$(TARGET_ARCH_DEBIAN).deb: \
-	| $(BUILD_DIRECTORY)
-	$(NPX) build --linux deb $(ELECTRON_BUILDER_OPTIONS) \
-		--extraMetadata.name=$(APPLICATION_NAME_ELECTRON) \
-		--extraMetadata.version=$(APPLICATION_VERSION_DEBIAN) \
-		--extraMetadata.packageType=deb \
-		$(DISABLE_UPDATES_ELECTRON_BUILDER_OPTIONS)
-
-$(BUILD_DIRECTORY)/$(APPLICATION_NAME_LOWERCASE)-$(APPLICATION_VERSION)-$(TARGET_ARCH_APPIMAGE).AppImage: \
-	| $(BUILD_DIRECTORY)
-	$(NPX) build --linux AppImage $(ELECTRON_BUILDER_OPTIONS) \
-		--extraMetadata.version=$(APPLICATION_VERSION) \
-		--extraMetadata.packageType=AppImage
-
-$(BUILD_DIRECTORY)/$(APPLICATION_NAME_LOWERCASE)-$(APPLICATION_VERSION)-linux-$(TARGET_ARCH).zip: \
-	$(BUILD_DIRECTORY)/$(APPLICATION_NAME_LOWERCASE)-$(APPLICATION_VERSION)-$(TARGET_ARCH_APPIMAGE).AppImage \
-	| $(BUILD_DIRECTORY)
-	./scripts/build/zip-file.sh -f $< -s $(TARGET_PLATFORM) -o $@
-
-$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-$(APPLICATION_VERSION)-win32-$(TARGET_ARCH)-portable.exe: \
-	| $(BUILD_DIRECTORY)
-	TARGET_ARCH=$(TARGET_ARCH) $(NPX) build --win portable $(ELECTRON_BUILDER_OPTIONS) \
-		--extraMetadata.version=$(APPLICATION_VERSION) \
-		--extraMetadata.packageType=portable
-
-$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-$(APPLICATION_VERSION)-win32-$(TARGET_ARCH).exe: \
-	| $(BUILD_DIRECTORY)
-	TARGET_ARCH=$(TARGET_ARCH) $(NPX) build --win nsis $(ELECTRON_BUILDER_OPTIONS) \
-		--extraMetadata.version=$(APPLICATION_VERSION) \
-		--extraMetadata.packageType=nsis
+electron-build: assets/dmg/background.tiff | $(BUILD_TEMPORARY_DIRECTORY)
+	$(RESIN_SCRIPTS)/electron/build.sh \
+		-b $(shell pwd) \
+		-r $(TARGET_ARCH) \
+		-s $(PLATFORM) \
+		-v production \
+		-n $(BUILD_TEMPORARY_DIRECTORY)/npm
 
 # ---------------------------------------------------------------------
 # Phony targets
@@ -344,197 +117,36 @@ TARGETS = \
 	help \
 	info \
 	lint \
-	lint-js \
-	lint-sass \
-	lint-cpp \
-	lint-html \
-	lint-spell \
-	test-gui \
-	test-sdk \
 	test \
-	sanity-checks \
 	clean \
 	distclean \
-	changelog \
-	package-electron \
-	package-cli \
-	cli-develop \
-	installers-all \
-	electron-develop
-
-changelog:
-	$(NPX) versionist
-
-package-electron:
-	TARGET_ARCH=$(TARGET_ARCH) $(NPX) build --dir $(ELECTRON_BUILDER_OPTIONS)
-
-package-cli: $(BUILD_DIRECTORY)/$(APPLICATION_NAME)-cli-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH)
-
-ifeq ($(TARGET_PLATFORM),darwin)
-electron-installer-app-zip: $(BUILD_DIRECTORY)/$(APPLICATION_NAME)-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).zip
-electron-installer-dmg: $(BUILD_DIRECTORY)/$(APPLICATION_NAME)-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).dmg
-cli-installer-tar-gz: $(BUILD_DIRECTORY)/$(APPLICATION_NAME)-cli-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).tar.gz
-TARGETS += \
-	electron-installer-dmg \
-	electron-installer-app-zip \
-	cli-installer-tar-gz
-PUBLISH_AWS_S3 += \
-	$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).zip \
-	$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).dmg \
-	$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-cli-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).tar.gz
-endif
-
-ifeq ($(TARGET_PLATFORM),linux)
-electron-installer-appimage: $(BUILD_DIRECTORY)/$(APPLICATION_NAME_LOWERCASE)-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).zip
-electron-installer-debian: $(BUILD_DIRECTORY)/$(APPLICATION_NAME_ELECTRON)_$(APPLICATION_VERSION_DEBIAN)_$(TARGET_ARCH_DEBIAN).deb
-electron-installer-redhat: $(BUILD_DIRECTORY)/$(APPLICATION_NAME_ELECTRON)-$(APPLICATION_VERSION_REDHAT).$(TARGET_ARCH_REDHAT).rpm
-cli-installer-tar-gz: $(BUILD_DIRECTORY)/$(APPLICATION_NAME)-cli-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).tar.gz
-TARGETS +=  \
-	electron-installer-appimage \
-	electron-installer-debian \
-	electron-installer-redhat \
-	cli-installer-tar-gz
-PUBLISH_AWS_S3 += \
-	$(BUILD_DIRECTORY)/$(APPLICATION_NAME_LOWERCASE)-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).zip \
-	$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-cli-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).tar.gz
-PUBLISH_BINTRAY_DEBIAN += \
-		$(BUILD_DIRECTORY)/$(APPLICATION_NAME_ELECTRON)_$(APPLICATION_VERSION_DEBIAN)_$(TARGET_ARCH_DEBIAN).deb
-PUBLISH_BINTRAY_REDHAT += \
-		$(BUILD_DIRECTORY)/$(APPLICATION_NAME_ELECTRON)-$(APPLICATION_VERSION_REDHAT).$(TARGET_ARCH_REDHAT).rpm
-endif
-
-ifeq ($(TARGET_PLATFORM),win32)
-electron-installer-portable: $(BUILD_DIRECTORY)/$(APPLICATION_NAME)-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH)-portable.exe
-electron-installer-nsis: $(BUILD_DIRECTORY)/$(APPLICATION_NAME)-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).exe
-cli-installer-zip: $(BUILD_DIRECTORY)/$(APPLICATION_NAME)-cli-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).zip
-TARGETS += \
-	electron-installer-portable \
-	electron-installer-nsis \
-	cli-installer-zip
-PUBLISH_AWS_S3 += \
-	$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH)-portable.exe \
-	$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).exe \
-	$(BUILD_DIRECTORY)/$(APPLICATION_NAME)-cli-$(APPLICATION_VERSION)-$(TARGET_PLATFORM)-$(TARGET_ARCH).zip
-endif
-
-installers-all: $(PUBLISH_AWS_S3) $(PUBLISH_BINTRAY_DEBIAN) $(PUBLISH_BINTRAY_REDHAT)
-
-ifdef PUBLISH_AWS_S3
-publish-aws-s3: $(PUBLISH_AWS_S3)
-ifeq ($(RELEASE_TYPE),production)
-	$(foreach publishable,$^,$(call execute-command,./scripts/publish/aws-s3.sh \
-		-f $(publishable) \
-		-b $(S3_BUCKET) \
-		-v $(APPLICATION_VERSION) \
-		-p $(PRODUCT_NAME)))
-endif
-ifeq ($(RELEASE_TYPE),snapshot)
-	$(foreach publishable,$^,$(call execute-command,./scripts/publish/aws-s3.sh \
-		-f $(publishable) \
-		-b $(S3_BUCKET) \
-		-v $(APPLICATION_VERSION) \
-		-p $(PRODUCT_NAME) \
-		-k $(shell date +"%Y-%m-%d")))
-endif
-
-TARGETS += publish-aws-s3
-endif
-
-ifdef PUBLISH_BINTRAY_DEBIAN
-publish-bintray-debian: $(PUBLISH_BINTRAY_DEBIAN)
-	$(foreach publishable,$^,$(call execute-command,./scripts/publish/bintray-debian.sh \
-		-f $(publishable) \
-		-v $(APPLICATION_VERSION_DEBIAN) \
-		-r $(TARGET_ARCH) \
-		-c $(APPLICATION_NAME_LOWERCASE) \
-		-t $(RELEASE_TYPE)))
-
-TARGETS += publish-bintray-debian
-endif
-
-ifdef PUBLISH_BINTRAY_REDHAT
-publish-bintray-redhat: $(PUBLISH_BINTRAY_REDHAT)
-# TODO: Update this after we've created ./scripts/publish/bintray-redhat.sh
-
-TARGETS += publish-bintray-redhat
-endif
+	electron-develop \
+	electron-test \
+	electron-build
 
 .PHONY: $(TARGETS)
 
-cli-develop:
-	./scripts/build/dependencies-npm.sh \
-		-r "$(TARGET_ARCH)" \
-		-v "$(NODE_VERSION)" \
-		-t node \
-		-s "$(TARGET_PLATFORM)"
+lint:
+	npm run lint
 
-electron-develop:
-	./scripts/build/dependencies-npm.sh \
-		-r "$(TARGET_ARCH)" \
-		-v "$(ELECTRON_VERSION)" \
-		-t electron \
-		-s "$(TARGET_PLATFORM)"
-
-sass:
-	$(NPX) node-sass lib/gui/scss/main.scss > lib/gui/css/main.css
-
-lint-js:
-	$(NPX) eslint lib tests scripts bin versionist.conf.js
-
-lint-sass:
-	$(NPX) sass-lint lib/gui/scss
-
-lint-cpp:
-	cpplint --recursive src
-
-lint-html:
-	node scripts/html-lint.js
-
-lint-spell:
-	codespell.py \
-		--skip *.gz,*.bz2,*.xz,*.zip,*.img,*.dmg,*.iso,*.rpi-sdcard,.DS_Store \
-		lib tests docs scripts Makefile *.md LICENSE
-
-lint: lint-js lint-sass lint-cpp lint-html lint-spell
-
-ELECTRON_MOCHA_OPTIONS=--recursive --reporter spec
-
-test-gui:
-	$(NPX) electron-mocha $(ELECTRON_MOCHA_OPTIONS) --renderer tests/gui
-
-test-sdk:
-	$(NPX) electron-mocha $(ELECTRON_MOCHA_OPTIONS) \
-		tests/shared \
-		tests/child-writer \
-		tests/image-stream
-
-test: test-gui test-sdk
+test:
+	npm run test
 
 help:
 	@echo "Available targets: $(TARGETS)"
 
 info:
-	@echo "Application version : $(APPLICATION_VERSION)"
-	@echo "Release type        : $(RELEASE_TYPE)"
-	@echo "Host platform       : $(HOST_PLATFORM)"
+	@echo "Platform            : $(PLATFORM)"
 	@echo "Host arch           : $(HOST_ARCH)"
-	@echo "Target platform     : $(TARGET_PLATFORM)"
 	@echo "Target arch         : $(TARGET_ARCH)"
 
-sanity-checks:
-	./scripts/ci/ensure-all-node-requirements-available.sh
-	./scripts/ci/ensure-staged-sass.sh
-	./scripts/ci/ensure-staged-shrinkwrap.sh
-	./scripts/ci/ensure-npm-dependencies-compatibility.sh
-	./scripts/ci/ensure-npm-valid-dependencies.sh
-	./scripts/ci/ensure-npm-shrinkwrap-versions.sh
-	./scripts/ci/ensure-all-file-extensions-in-gitattributes.sh
-	./scripts/ci/ensure-all-text-files-only-ascii.sh
-
 clean:
 	rm -rf $(BUILD_DIRECTORY)
 
 distclean: clean
 	rm -rf node_modules
+	rm -rf dist
+	rm -rf generated
+	rm -rf $(BUILD_TEMPORARY_DIRECTORY)
 
 .DEFAULT_GOAL = help

README.md

@@ -1,108 +1,222 @@
-Etcher
-======
+# Etcher
 
 > Flash OS images to SD cards & USB drives, safely and easily.
 
 Etcher is a powerful OS image flasher built with web technologies to ensure
 flashing an SDCard or USB drive is a pleasant and safe experience. It protects
 you from accidentally writing to your hard-drives, ensures every byte of data
-was written correctly and much more.
+was written correctly, and much more. It can also directly flash Raspberry Pi devices that support [USB device boot mode](https://www.raspberrypi.com/documentation/computers/raspberry-pi.html#usb-device-boot-mode).
 
-[![Current Release](https://img.shields.io/github/release/resin-io/etcher.svg?style=flat-square)](https://etcher.io)
-![License](https://img.shields.io/github/license/resin-io/etcher.svg?style=flat-square)
-[![Travis CI status](https://img.shields.io/travis/resin-io/etcher/master.svg?style=flat-square&label=linux%20|%20mac)](https://travis-ci.org/resin-io/etcher/branches)
-[![AppVeyor status](https://img.shields.io/appveyor/ci/resin-io/etcher/master.svg?style=flat-square&label=windows)](https://ci.appveyor.com/project/resin-io/etcher/branch/master)
-[![Dependency status](https://img.shields.io/david/resin-io/etcher.svg?style=flat-square)](https://david-dm.org/resin-io/etcher)
-[![Gitter Chat](https://img.shields.io/gitter/room/resin-io/etcher.svg?style=flat-square)](https://gitter.im/resin-io/etcher)
-[![Stories in Progress](https://img.shields.io/waffle/label/resin-io/etcher/in%20progress.svg?style=flat-square)](https://waffle.io/resin-io/etcher)
+[![Current Release](https://img.shields.io/github/release/balena-io/etcher.svg?style=flat-square)](https://balena.io/etcher)
+[![License](https://img.shields.io/github/license/balena-io/etcher.svg?style=flat-square)](https://github.com/balena-io/etcher/blob/master/LICENSE)
+[![Balena.io Forums](https://img.shields.io/discourse/https/forums.balena.io/topics.svg?style=flat-square&label=balena.io%20forums)](https://forums.balena.io/c/etcher)
 
-***
+---
 
-[**Download**][etcher] | [**Support**][SUPPORT] | [**Documentation**][USER-DOCUMENTATION] | [**Contributing**][CONTRIBUTING] | [**Roadmap**][milestones] | [**CLI**][CLI]
+[**Download**][etcher] | [**Support**][support] | [**Documentation**][user-documentation] | [**Contributing**][contributing] | [**Roadmap**][milestones]
 
-![Etcher](https://raw.githubusercontent.com/resin-io/etcher/master/screenshot.png)
-
-Supported Operating Systems
----------------------------
+## Supported Operating Systems
 
 - Linux (most distros)
-- macOS 10.9 and later
+- macOS 10.10 (Yosemite) and later
 - Microsoft Windows 7 and later
 
-Note that Etcher will run on any platform officially supported by
+**Note**: Etcher will run on any platform officially supported by
 [Electron][electron]. Read more in their
 [documentation][electron-supported-platforms].
 
-Installers
-----------
+## Installers
 
 Refer to the [downloads page][etcher] for the latest pre-made
 installers for all supported operating systems.
 
+## Packages
+
+> [![Hosted By: Cloudsmith](https://img.shields.io/badge/OSS%20hosting%20by-cloudsmith-blue?logo=cloudsmith&style=for-the-badge)](https://cloudsmith.com) \
+Package repository hosting is graciously provided by  [Cloudsmith](https://cloudsmith.com).
+Cloudsmith is the only fully hosted, cloud-native, universal package management solution, that
+enables your organization to create, store and share packages in any format, to any place, with total
+confidence.
+
 #### Debian and Ubuntu based Package Repository (GNU/Linux x86/x64)
 
-1. Save the following as `/etc/apt/sources.list.d/etcher.list`:
+> Detailed or alternative steps in the [instructions by Cloudsmith](https://cloudsmith.io/~balena/repos/etcher/setup/#formats-deb)
 
-    ```
-    deb https://dl.bintray.com/resin-io/debian stable etcher
-    ```
+1. Add Etcher Debian repository:
 
-2. Trust Bintray.com's GPG key:
+   ```sh
+   curl -1sLf \
+      'https://dl.cloudsmith.io/public/balena/etcher/setup.deb.sh' \
+      | sudo -E bash
+   ```
 
-    ```sh
-    sudo apt-key adv --keyserver hkp://pgp.mit.edu:80 --recv-keys 379CE192D401AB61
-    ```
+2. Update and install:
 
-3. Update and install:
-
-    ```sh
-    sudo apt-get update
-    sudo apt-get install etcher-electron
-    ```
+   ```sh
+   sudo apt-get update
+   sudo apt-get install balena-etcher-electron
+   ```
 
 ##### Uninstall
 
 ```sh
-sudo apt-get remove etcher-electron
-sudo rm /etc/apt/sources.list.d/etcher.list
-sudo apt-get update
+sudo apt-get remove balena-etcher-electron
+rm /etc/apt/sources.list.d/balena-etcher.list
+apt-get clean
+rm -rf /var/lib/apt/lists/*
+apt-get update
 ```
 
-#### Brew Cask (macOS)
+#### Redhat (RHEL) and Fedora-based Package Repository (GNU/Linux x86/x64)
 
-Note that the Etcher Cask has to be updated manually to point to new versions,
+> Detailed or alternative steps in the [instructions by Cloudsmith](https://cloudsmith.io/~balena/repos/etcher/setup/#formats-rpm)
+
+
+##### DNF
+
+1. Add Etcher rpm repository:
+
+   ```sh
+   curl -1sLf \
+      'https://dl.cloudsmith.io/public/balena/etcher/setup.rpm.sh' \
+      | sudo -E bash
+   ```
+
+2. Update and install:
+
+   ```sh
+   sudo dnf install -y balena-etcher-electron
+   ```
+
+###### Uninstall
+
+```sh
+rm /etc/yum.repos.d/balena-etcher.repo
+rm /etc/yum.repos.d/balena-etcher-source.repo
+```
+
+##### Yum
+
+1. Add Etcher rpm repository:
+
+   ```sh
+   curl -1sLf \
+      'https://dl.cloudsmith.io/public/balena/etcher/setup.rpm.sh' \
+      | sudo -E bash
+   ```
+
+2. Update and install:
+
+   ```sh
+   sudo yum install -y balena-etcher-electron
+   ```
+
+###### Uninstall
+
+```sh
+sudo yum remove -y balena-etcher-electron
+rm /etc/yum.repos.d/balena-etcher.repo
+rm /etc/yum.repos.d/balena-etcher-source.repo
+```
+
+#### OpenSUSE LEAP & Tumbleweed install (zypper)
+
+1. Add the repo
+
+   ```sh
+   curl -1sLf \
+   'https://dl.cloudsmith.io/public/balena/etcher/setup.rpm.sh' \
+   | sudo -E bash
+   ```
+2. Update and install
+
+   ```sh
+   sudo zypper up
+   sudo zypper install balena-etcher-electron
+   ```
+
+##### Uninstall
+
+```sh
+sudo zypper rm balena-etcher-electron
+# remove the repo
+sudo zypper rr balena-etcher
+sudo zypper rr balena-etcher-source
+```
+
+#### Solus (GNU/Linux x64)
+
+```sh
+sudo eopkg it etcher
+```
+
+##### Uninstall
+
+```sh
+sudo eopkg rm etcher
+```
+
+#### Arch/Manjaro Linux (GNU/Linux x64)
+
+Etcher is offered through the Arch User Repository and can be installed on both Manjaro and Arch systems. You can compile it from the source code in this repository using [`balena-etcher`](https://aur.archlinux.org/packages/balena-etcher/). The following example uses a common AUR helper to install the latest release:
+
+```sh
+yay -S balena-etcher
+```
+
+##### Uninstall
+
+```sh
+yay -R balena-etcher
+```
+
+#### Brew (macOS)
+
+**Note**: Etcher has to be updated manually to point to new versions,
 so it might not refer to the latest version immediately after an Etcher
 release.
 
 ```sh
-brew cask install etcher
+brew install balenaetcher
 ```
 
 ##### Uninstall
 
 ```sh
-brew cask uninstall etcher
+brew uninstall balenaetcher
 ```
 
-Support
--------
+#### Chocolatey (Windows)
 
-If you're having any problem, please [raise an issue][newissue] on GitHub and
-the resin.io team will be happy to help.
+This package is maintained by [@majkinetor](https://github.com/majkinetor), and
+is kept up to date automatically.
 
-License
--------
+```sh
+choco install etcher
+```
 
-Etcher is free software, and may be redistributed under the terms specified in
+##### Uninstall
+
+```sh
+choco uninstall etcher
+```
+
+## Support
+
+If you're having any problem, please [raise an issue][newissue] on GitHub, and
+the balena.io team will be happy to help.
+
+## License
+
+Etcher is free software and may be redistributed under the terms specified in
 the [license].
 
-[etcher]: https://etcher.io
-[electron]: http://electron.atom.io
-[electron-supported-platforms]: http://electron.atom.io/docs/tutorial/supported-platforms/
-[SUPPORT]: https://github.com/resin-io/etcher/blob/master/SUPPORT.md
-[CONTRIBUTING]: https://github.com/resin-io/etcher/blob/master/docs/CONTRIBUTING.md
-[CLI]: https://github.com/resin-io/etcher/blob/master/docs/CLI.md
-[USER-DOCUMENTATION]: https://github.com/resin-io/etcher/blob/master/docs/USER-DOCUMENTATION.md
-[milestones]: https://github.com/resin-io/etcher/milestones
-[newissue]: https://github.com/resin-io/etcher/issues/new
-[license]: https://github.com/resin-io/etcher/blob/master/LICENSE
+[etcher]: https://balena.io/etcher
+[electron]: https://electronjs.org/
+[electron-supported-platforms]: https://electronjs.org/docs/tutorial/support#supported-platforms
+[support]: https://github.com/balena-io/etcher/blob/master/SUPPORT.md
+[contributing]: https://github.com/balena-io/etcher/blob/master/docs/CONTRIBUTING.md
+[user-documentation]: https://github.com/balena-io/etcher/blob/master/docs/USER-DOCUMENTATION.md
+[milestones]: https://github.com/balena-io/etcher/milestones
+[newissue]: https://github.com/balena-io/etcher/issues/new
+[license]: https://github.com/balena-io/etcher/blob/master/LICENSE

SUPPORT.md

@@ -1,33 +1,43 @@
-Getting help with Etcher
-========================
+Getting help with BalenaEtcher
+===============================
 
 There are various ways to get support for Etcher if you experience an issue or
 have an idea you'd like to share with us.
 
-Gitter
+Documentation
 ------
 
-We have a [Gitter chat room][gitter] for Etcher which is open to everyone,
-please come join us :). Drop us a line there and the resin.io staff and
-community users will be happy to assist.
+We have answers to a variety of frequently asked questions in the [user 
+documentation][documentation] and also in the [FAQs][faq] on the Etcher website.
+
+
+Forums
+------
+
+We have a [Discourse forum][discourse] which is open to everyone, so please
+come join us :). Drop us a line there and the balena.io staff and community
+users will be happy to assist. Your question might already be answered, so take
+a look at the existing threads before opening a new one!
 
 Make sure to mention the following information to help us provide better
 support:
 
-- The Etcher version you're running.
+- The BalenaEtcher version you're running.
 
 - The operating system you're running Etcher in.
 
 - Relevant logging output, if any, from DevTools, which you can open by
-  pressing `Ctrl+Alt+I` or `Cmd+Alt+I` depending on your platform.
+  pressing `Ctrl+Shift+I` or `Cmd+Alt+I` depending on your platform.
 
 GitHub
 ------
 
-If you encounter an issue or have a suggestion, head on over to Etcher's [issue
+If you encounter an issue or have a suggestion, head on over to BalenaEtcher's [issue
 tracker][issues] and if there isn't a ticket covering it, [create
 one][new-issue].
 
-[gitter]: https://gitter.im/resin-io/etcher
-[issues]: https://github.com/resin-io/etcher/issues
-[new-issue]: https://github.com/resin-io/etcher/issues/new
+[discourse]: https://forums.balena.io/c/etcher
+[issues]: https://github.com/balena-io/etcher/issues
+[new-issue]: https://github.com/balena-io/etcher/issues/new
+[documentation]: https://github.com/balena-io/etcher/blob/master/docs/USER-DOCUMENTATION.md
+[faq]: https://etcher.io

after-install.tpl

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+# Link to the binary
+# Must hardcode balenaEtcher directory; no variable available
+ln -sf '/opt/balenaEtcher/${executable}' '/usr/bin/${executable}'
+
+# SUID chrome-sandbox for Electron 5+
+chmod 4755 '/opt/balenaEtcher/chrome-sandbox' || true
+
+update-mime-database /usr/share/mime || true
+update-desktop-database /usr/share/applications || true

afterPack.js

@@ -0,0 +1,31 @@
+'use strict'
+
+const cp = require('child_process')
+const fs = require('fs')
+const outdent = require('outdent')
+const path = require('path')
+
+exports.default = function(context) {
+  if (context.packager.platform.name !== 'linux') {
+    return
+  }
+  const scriptPath = path.join(context.appOutDir, context.packager.executableName)
+  const binPath = scriptPath + '.bin'
+  cp.execFileSync('mv', [scriptPath, binPath])
+  fs.writeFileSync(
+    scriptPath,
+    outdent({trimTrailingNewline: false})`
+      #!/bin/bash
+
+      # Resolve symlinks. Warning, readlink -f doesn't work on MacOS/BSD
+      script_dir="$(dirname "$(readlink -f "\${BASH_SOURCE[0]}")")"
+
+      if [[ $EUID -ne 0 ]] || [[ $ELECTRON_RUN_AS_NODE ]]; then
+        "\${script_dir}"/${context.packager.executableName}.bin "$@"
+      else
+        "\${script_dir}"/${context.packager.executableName}.bin "$@" --no-sandbox
+      fi
+    `
+  )
+  cp.execFileSync('chmod', ['+x', scriptPath])
+}

afterSignHook.js

@@ -0,0 +1,23 @@
+'use strict'
+
+const { notarize } = require('electron-notarize')
+const { ELECTRON_SKIP_NOTARIZATION } = process.env
+
+async function main(context) {
+  const { electronPlatformName, appOutDir } = context
+  if (electronPlatformName !== 'darwin' || ELECTRON_SKIP_NOTARIZATION === 'true') {
+    return
+  }
+
+  const appName = context.packager.appInfo.productFilename
+  const appleId = 'accounts+apple@balena.io'
+
+  await notarize({
+    appBundleId: 'io.balena.etcher',
+    appPath: `${appOutDir}/${appName}.app`,
+    appleId,
+    appleIdPassword: `@keychain:Application Loader: ${appleId}`
+  })
+}
+
+exports.default = main

appveyor.yml

@@ -1,54 +0,0 @@
-# appveyor file
-# http://www.appveyor.com/docs/appveyor-yml
-
-image: Visual Studio 2015
-
-cache:
-  - C:\Users\appveyor\.node-gyp
-  - '%LOCALAPPDATA%\electron\Cache'
-  - '%LOCALAPPDATA%\electron-builder\cache'
-  - '%AppData%\npm-cache'
-  - '%USERPROFILE%\.pkg-cache'
-  - node_modules -> npm-shrinkwrap.json
-  - C:\ProgramData\chocolatey\bin -> appveyor.yml
-  - C:\ProgramData\chocolatey\lib -> appveyor.yml
-  - C:\Users\appveyor\AppData\Local\Temp\chocolatey -> appveyor.yml
-
-# what combinations to test
-environment:
-  global:
-    ELECTRON_NO_ATTACH_CONSOLE: true
-    nodejs_version: "6.10.3"
-  matrix:
-    - TARGET_ARCH: x64
-    - TARGET_ARCH: x86
-
-matrix:
-  fast_finish: true
-
-install:
-  - ps: Update-NodeJsInstallation $env:nodejs_version $env:TARGET_ARCH
-  - set PATH=C:\Program Files (x86)\Windows Kits\8.1\bin\x86;%PATH%
-  - set PATH=C:\Program Files (x86)\NSIS;%PATH%
-  - set PATH=C:\MinGW\bin;%PATH%
-  - set PATH=C:\MinGW\msys\1.0\bin;%PATH%
-  - bash .\scripts\ci\install.sh -o win32 -r %TARGET_ARCH%
-
-build: off
-
-test_script:
-  - node --version
-  - npm --version
-  - bash .\scripts\ci\test.sh -o win32 -r %TARGET_ARCH%
-  - bash .\scripts\ci\build-installers.sh -o win32 -r %TARGET_ARCH%
-
-deploy_script:
-  - bash .\scripts\ci\deploy-aws-s3.sh -o win32 -r %TARGET_ARCH%
-
-notifications:
-
-  - provider: Webhook
-    url: https://webhooks.gitter.im/e/0becb34b32e20d389bb8
-    on_build_success: false
-    on_build_failure: true
-    on_build_status_changed: true

bin/etcher

@@ -1,2 +0,0 @@
-#!/usr/bin/env node
-require('../lib/cli/etcher');

binding.gyp

@@ -1,25 +0,0 @@
-{
-  "targets": [
-    {
-      "target_name": "elevator",
-      "include_dirs" : [
-        "src",
-        "<!(node -e \"require('nan')\")"
-      ],
-      'conditions': [
-
-        [ 'OS=="win"', {
-          "sources": [
-            "src/utils/v8utils.cpp",
-            "src/os/win32/elevate.cpp",
-            "src/elevator_init.cpp",
-          ],
-          "libraries": [
-            "-lShell32.lib",
-          ],
-        } ]
-
-      ],
-    }
-  ],
-}

dev-app-update.yml

@@ -0,0 +1,4 @@
+owner: balena-io
+repo: etcher
+provider: github
+updaterCacheDirName: balena-etcher-updater

dictionary

@@ -1,5 +0,0 @@
-boolen->boolean
-aknowledge->acknowledge
-seleted->selected
-reming->remind
-locl->local

dictionary.txt

@@ -0,0 +1,9 @@
+boolen->boolean
+aknowledge->acknowledge
+seleted->selected
+reming->remind
+locl->local
+subsribe->subscribe
+unsubsribe->unsubscribe
+calcluate->calculate
+dictionaty->dictionary

docs/ARCHITECTURE.md

@@ -12,12 +12,9 @@ technologies used in Etcher that you should become familiar with:
 
 - [Electron][electron]
 - [NodeJS][nodejs]
-- [AngularJS][angularjs]
 - [Redux][redux]
 - [ImmutableJS][immutablejs]
-- [Bootstrap][bootstrap]
 - [Sass][sass]
-- [Flexbox Grid][flexbox-grid]
 - [Mocha][mocha]
 - [JSDoc][jsdoc]
 
@@ -40,64 +37,18 @@ to submit their work or bug reports.
 
 These are the main Etcher components, in a nutshell:
 
-- [Etcher Image Write][etcher-image-write]
-
-This is the repository that implements the actual procedures to write an image
-to a raw device and the place where image validation resides. Its main purpose
-is to abstract the messy details of interacting with raw devices in all major
-operating systems.
-
-- [Etcher Image Stream](https://github.com/resin-io-modules/etcher-image-stream)
-
-The goal of this project is to convert any kind of input into a readable stream
-representing the image so it can be plugged to [etcher-image-write]. Inputs
-that this module might handle could be, for example: a simple image file, a URL
-to an image, a compressed image, an image inside a ZIP archive, etc. Together
-with [etcher-image-write], these modules are the building blocks needed to take
-an image representation to the user's device, the "Etcher's backend".
-
-- [Drivelist](https://github.com/resin-io-modules/drivelist)
+- [Drivelist](https://github.com/balena-io-modules/drivelist)
 
 As the name implies, this module's duty is to detect the connected drives
 uniformly in all major operating systems, along with valuable metadata, like if
 a drive is removable or not, to prevent users from trying to write an image to
 a system drive.
 
-- [Etcher](https://github.com/resin-io/etcher)
+- [Etcher](https://github.com/balena-io/etcher)
 
 This is the *"main repository"*, from which you're reading this from, which is
 basically the front-end and glue for all previously listed projects.
 
-Front-ends
-----------
-
-The main repository consists of the implementation of the Etcher CLI and the
-Etcher GUI (the desktop application), located at [`lib/cli/`][cli-dir] and
-[`lib/gui/`][gui-dir], respectively.
-
-In fact, the only front-end that interacts directly with Etcher's backend is
-the CLI. The GUI merely forks the CLI and communicates with its child process
-to get state information.
-
-In this sense, you can consider the GUI as being the front-end to the CLI,
-which is in turn the front-end to the actual image writing functionality.
-
-As a way to simplify how the GUI forks the CLI in a packaged and distributed
-context, both the CLI and GUI share the same application entry point. This
-means that the same Etcher binary can behave as CLI or GUI as needed.
-
-## Process communication
-
-As mentioned before, the Etcher GUI forks the CLI and retrieves information
-from it to update its state. In order to accomplish this, the Etcher CLI
-contains certain features to ease communication:
-
-- [Well-documented exit codes.][exit-codes]
-
-- An environment variable called `ETCHER_CLI_ROBOT` option, which when set
-  causes the Etcher CLI to output state in a way that can be easily
-  parsed by a machine.
-
 Summary
 -------
 
@@ -108,17 +59,12 @@ since fresh eyes could help unveil things that we take for granted, but should
 be documented instead!
 
 [lego-blocks]: https://github.com/sindresorhus/ama/issues/10#issuecomment-117766328
-[etcher-image-write]: https://github.com/resin-io-modules/etcher-image-write
-[exit-codes]: https://github.com/resin-io/etcher/blob/master/lib/shared/exit-codes.js
-[cli-dir]: https://github.com/resin-io/etcher/tree/master/lib/cli
-[gui-dir]: https://github.com/resin-io/etcher/tree/master/lib/gui
+[exit-codes]: https://github.com/balena-io/etcher/blob/master/lib/shared/exit-codes.js
+[gui-dir]: https://github.com/balena-io/etcher/tree/master/lib/gui
 [electron]: http://electron.atom.io
 [nodejs]: https://nodejs.org
-[angularjs]: https://angularjs.org
 [redux]: http://redux.js.org
 [immutablejs]: http://facebook.github.io/immutable-js/
-[bootstrap]: http://getbootstrap.com
 [sass]: http://sass-lang.com
-[flexbox-grid]: http://flexboxgrid.com
 [mocha]: http://mochajs.org
 [jsdoc]: http://usejsdoc.org

docs/CLI-INSTALLATION.md

@@ -1,61 +0,0 @@
-### macOS and GNU/Linux
-
-- Extract the `.tar.gz` package by running:
-
-```sh
-tar fvx path/to/cli.tar.gz
-```
-
-- Move the resulting directory to `/opt/etcher-cli`
-
-- Add `/opt/etcher-cli` to the `PATH`. For example, add the following to
-  `.bashrc` or `.zshrc`:
-
-```sh
-export PATH="$PATH:/opt/etcher-cli"
-```
-
-### Windows
-
-- Unzip the `.zip` package by right-clicking on it and selecting "Extract All"
-
-- Move the resulting directory to `C:\etcher-cli`
-
-- Add `C:\etcher-cli` to the `%PATH%`
-
-  - On Windows 10 and Windows 8
-    - Open *Control Panel*
-    - Open *System
-    - Click the *Advanced system settings* link
-    - Click *Environment Variables*
-    - Find the `PATH` environment variable, and click *Edit*
-    - Append `;C:\etcher-cli` to the environment variable value
-    - Click *OK*
-
-  - On Windows 7
-    - Right-click the *My Computer* icon
-    - Open the *Properties* menu
-    - Open the *Advanced* tab
-    - Click *Environment Variables*
-    - Find the `PATH` environment variable, and click *Edit*
-    - Append `;C:\etcher-cli` to the environment variable value
-    - Click *OK*
-
-  - Re-open `cmd.exe`, or PowerShell
-
-### Running
-
-```sh
-etcher -v
-```
-
-### Options
-
-```
-  --help, -h     show help
-  --version, -v  show version number
-  --drive, -d    drive
-  --check, -c    validate write
-  --yes, -y      confirm non-interactively
-  --unmount, -u  unmount on success
-```

docs/CLI.md

@@ -1,42 +0,0 @@
-Etcher CLI
-==========
-
-The Etcher CLI is a command-line tool that aims to provide all the benefits of
-the Etcher desktop application in a way that can be run from a terminal, or
-even used from a script.
-
-In fact, the Etcher desktop application is simply a wrapper around the CLI,
-which is the place where the actual writing logic takes place.
-
-Installing
-----------
-
-Head over to [etcher.io/cli][etcher-cli], download the package that corresponds to
-your operating system, and then follow the installation instructions there.
-
-Running
--------
-
-```sh
-etcher -v
-```
-
-Options
--------
-
-```
-  --help, -h     show help
-  --version, -v  show version number
-  --drive, -d    drive
-  --check, -c    validate write
-  --yes, -y      confirm non-interactively
-  --unmount, -u  unmount on success
-```
-
-Debug mode
-----------
-
-You can set the `ETCHER_CLI_DEBUG` environment variable to make the Etcher CLI
-print error stack traces.
-
-[etcher-cli]: https://etcher.io/cli

docs/COMMIT-GUIDELINES.md

@@ -56,11 +56,6 @@ The scope is required for types that make sense, such as `feat`, `fix`,
 `test`, etc. Certain commit types, such as `chore` might not have a clearly
 defined scope, in which case its better to omit it.
 
-When it applies, the scope must be either `GUI` or `CLI`.
-
-A commit that takes part in both the GUI and CLI scopes, and makes more logical
-sense that way, might entirely omit the scope.
-
 Subject
 -------
 
@@ -122,8 +117,8 @@ A commit can include multiple instances of this tag.
 Examples:
 
 ```
-Closes: https://github.com/resin-io/etcher/issues/XXX
-Fixes: https://github.com/resin-io/etcher/issues/XXX
+Closes: https://github.com/balena-io/etcher/issues/XXX
+Fixes: https://github.com/balena-io/etcher/issues/XXX
 ```
 
 ### `Change-Type: <type>`
@@ -198,7 +193,7 @@ first non compressed extension.
 
 Change-Type: patch
 Changelog-Entry: Don't interpret image file name information between dots as image extensions.
-Fixes: https://github.com/resin-io/etcher/issues/492
+Fixes: https://github.com/balena-io/etcher/issues/492
 ```
 
 ***
@@ -212,8 +207,8 @@ the operating system still thinks the drive has a file system.
 
 Change-Type: patch
 Changelog-Entry: Upgrade `etcher-image-write` to v5.0.2.
-Link: https://github.com/resin-io-modules/etcher-image-write/blob/master/CHANGELOG.md#502---2016-06-27
-Fixes: https://github.com/resin-io/etcher/issues/531
+Link: https://github.com/balena-io-modules/etcher-image-write/blob/master/CHANGELOG.md#502---2016-06-27
+Fixes: https://github.com/balena-io/etcher/issues/531
 ```
 
 ***
@@ -243,7 +238,7 @@ re-used by other services.
 
 Change-Type: minor
 Changelog-Entry: Check for updates and show a modal prompting the user to download the latest version.
-Closes: https://github.com/resin-io/etcher/issues/396
+Closes: https://github.com/balena-io/etcher/issues/396
 ```
 
 [angular-commit-guidelines]: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit

docs/CONTRIBUTING.md

@@ -10,15 +10,116 @@ High-level Etcher overview
 Make sure you checkout our [ARCHITECTURE.md][ARCHITECTURE] guide, which aims to
 explain how all the pieces fit together.
 
-Running locally
----------------
-
-See the [RUNNING-LOCALLY.md][RUNNING-LOCALLY] guide.
-
 Developing
 ----------
 
-We rely on various `make` targets to perform some common tasks:
+### Prerequisites
+
+#### Common
+
+- [NodeJS](https://nodejs.org) (at least v6.11)
+- [Python 2.7](https://www.python.org)
+- [jq](https://stedolan.github.io/jq/)
+- [curl](https://curl.haxx.se/)
+- [npm](https://www.npmjs.com/) (version 6.7)
+
+```sh
+pip install -r requirements.txt
+```
+
+You might need to run this with `sudo` or administrator permissions.
+
+#### Windows
+
+- [NSIS v2.51](http://nsis.sourceforge.net/Main_Page) (v3.x won't work)
+- Either one of the following:
+  - [Visual C++ 2015 Build Tools](http://landinghub.visualstudio.com/visual-cpp-build-tools) containing standalone compilers, libraries and scripts
+  - Install the [windows-build-tools](https://github.com/felixrieseberg/windows-build-tools) via npm with `npm install --global windows-build-tools`
+  - [Visual Studio Community 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48146) (free) (other editions, like Professional and Enterprise, should work too)
+    **NOTE:** Visual Studio 2015 doesn't install C++ by default. You have to rerun the
+    setup, select "Modify" and then check `Visual C++ -> Common Tools for Visual
+    C++ 2015` (see http://stackoverflow.com/a/31955339)
+- [MinGW](http://www.mingw.org)
+
+You might need to `npm config set msvs_version 2015` for node-gyp to correctly detect
+the version of Visual Studio you're using (in this example VS2015).
+
+The following MinGW packages are required:
+
+- `msys-make`
+- `msys-unzip`
+- `msys-zip`
+- `msys-bash`
+- `msys-coreutils`
+
+#### macOS
+
+- [Xcode](https://developer.apple.com/xcode/)
+
+It's not enough to have [Xcode Command Line Tools] installed. Xcode must be installed
+as well.
+
+#### Linux
+
+- `libudev-dev` for libusb (install with `sudo apt install libudev-dev` for example)
+
+### Cloning the project
+
+```sh
+git clone --recursive https://github.com/balena-io/etcher
+cd etcher
+```
+
+### Installing npm dependencies
+
+**NOTE:** Please make use of the following command to install npm dependencies rather
+than simply running `npm install` given that we need to do extra configuration
+to make sure native dependencies are correctly compiled for Electron, otherwise
+the application might not run successfully.
+
+If you're on Windows, **run the command from the _Developer Command Prompt for
+VS2015_**, to ensure all Visual Studio command utilities are available in the
+`%PATH%`.
+
+```sh
+make electron-develop
+```
+
+### Running the application
+
+#### GUI
+
+```sh
+# Build the GUI
+npm run webpack
+# Start Electron
+npm start
+```
+
+Testing
+-------
+
+To run the test suite, run the following command:
+
+```sh
+npm test
+```
+
+Given the nature of this application, not everything can be unit tested. For
+example:
+
+- The writing operating on real raw devices.
+- Platform inconsistencies.
+- Style changes.
+- Artwork.
+
+We encourage our contributors to test the application on as many operating
+systems as they can before sending a pull request.
+
+*The test suite is run automatically by CI servers when you send a pull
+request.*
+
+We also rely on various `make` targets to perform some common tasks:
 
 - `make lint`: Run the linter.
 - `make sass`: Compile SCSS files.
@@ -46,29 +147,6 @@ Use the following steps to ensure everything goes flawlessly:
 
 - Commit *both* `package.json` and `npm-shrinkwrap.json`.
 
-Testing
--------
-
-To run the test suite, run the following command:
-
-```sh
-npm test
-```
-
-Given the nature of this application, not everything can be unit tested. For
-example:
-
-- The writing operating on real raw devices.
-- Platform inconsistencies.
-- Style changes.
-- Artwork.
-
-We encourage our contributors to test the application on as many operating
-systems as they can before sending a pull request.
-
-*The test suite is run automatically by CI servers when you send a pull
-request.*
-
 Diffing Binaries
 ----------------
 
@@ -91,6 +169,12 @@ $ git config --global diff.hex.binary true
 If you don't have `hexdump` available on your platform,
 you can try [hxd], which is also a bit faster.
 
+Commit Guidelines
+-----------------
+
+See [COMMIT-GUIDELINES.md][COMMIT-GUIDELINES] for a thorough guide on how to
+write commit messages.
+
 Sending a pull request
 ----------------------
 
@@ -117,7 +201,7 @@ Before your pull request can be merged, the following conditions must hold:
 
 - The linter doesn't throw any warning.
 
-- All the tests passes.
+- All the tests pass.
 
 - The coding style aligns with the project's convention.
 
@@ -126,8 +210,9 @@ systems we support.
 
 Don't hesitate to get in touch if you have any questions or need any help!
 
-[ARCHITECTURE]: https://github.com/resin-io/etcher/blob/master/docs/ARCHITECTURE.md
-[RUNNING-LOCALLY]: https://github.com/resin-io/etcher/blob/master/docs/RUNNING-LOCALLY.md
+[ARCHITECTURE]: https://github.com/balena-io/etcher/blob/master/docs/ARCHITECTURE.md
+[COMMIT-GUIDELINES]: https://github.com/balena-io/etcher/blob/master/docs/COMMIT-GUIDELINES.md
 [EditorConfig]: http://editorconfig.org
 [shrinkwrap]: https://docs.npmjs.com/cli/shrinkwrap
 [hxd]: https://github.com/jhermsmeier/hxd
+[Xcode Command Line Tools]: https://developer.apple.com/library/content/technotes/tn2339/_index.html

docs/MAINTAINERS.md

@@ -1,52 +1,144 @@
 Maintaining Etcher
 ==================
 
-This document is meant to serve as a guide for maintainers to perform common
-tasks.
+This document is meant to serve as a guide for maintainers to perform common tasks.
 
-Preparing a new version
------------------------
+Releasing
+---------
 
-- Bump the version number in the `package.json`'s `version` property.
+### Release Types
 
-- Bump the version number in the `npm-shrinkwrap.json`'s `version` property.
+- **snapshot** (default): A continues snapshot of current master, made by the CI services
+- **production**: Full releases
 
-- Add a new entry to `CHANGELOG.md` by running `make CHANGELOG.md`.
+### Flight Plan
 
-- Re-take `screenshot.png` so it displays the latest version in the bottom
-right corner.
+#### Preparation
 
-- Revise the `updates.semverRange` version in `package.json`
+- [Prepare the new version](#preparing-a-new-version)
+- [Generate build artifacts](#generating-binaries) (binaries, archives, etc.)
+- [Draft a release on GitHub](https://github.com/balena-io/etcher/releases)
+    - Upload build artifacts to GitHub release draft
 
-- Commit the changes with the version number as the commit title, including the
-`v` prefix, to `master`. For example:
+#### Testing
 
-```sh
-git commit -m "v1.0.0" # not 1.0.0
+- Test the prepared release and build artifacts properly on **all supported operating systems** to prevent regressions that went uncaught by the CI tests (see [MANUAL-TESTING.md](MANUAL-TESTING.md))
+- If regressions or other issues arise, create issues on the repository for each one, and decide whether to fix them in this release (meaning repeating the process up until this point), or to follow up with a patch release
+
+#### Publishing
+
+- [Publish release draft on GitHub](https://github.com/balena-io/etcher/releases)
+- [Post release note to forums](https://forums.balena.io/c/etcher)
+- [Submit Windows binaries to Symantec for whitelisting](#submitting-binaries-to-symantec)
+- [Update the website](https://github.com/balena-io/etcher-homepage)
+- Wait 2-3 hours for analytics (Sentry, Mixpanel) to trickle in and check for elevated error rates, or regressions
+- If regressions arise; pull the release, and release a patched version, else:
+- [Upload deb & rpm packages to Bintray](#uploading-packages-to-bintray)
+- [Upload build artifacts to Amazon S3](#uploading-binaries-to-amazon-s3)
+- Post changelog with `#release-notes` tag on Flowdock
+- If this release packs noteworthy major changes:
+  - Write a blog post about it, and / or
+  - Write about it to the Etcher mailing list
+
+### Generating binaries
+
+**Environment**
+
+Make sure to set the analytics tokens when generating production release binaries:
+
+```bash
+export ANALYTICS_SENTRY_TOKEN="xxxxxx"
+export ANALYTICS_MIXPANEL_TOKEN="xxxxxx"
 ```
 
-- Create an annotated tag for the new version. The commit title should equal
-the annotated tag name. For example:
+#### Linux
 
-```sh
-git tag -a v1.0.0 -m "v1.0.0"
+##### Clean dist folder
+
+**NOTE:** Make sure to adjust the path as necessary (here the Etcher repository has been cloned to `/home/$USER/code/etcher`)
+
+```bash
+./scripts/build/docker/run-command.sh -r x64 -s . -c "make distclean"
 ```
 
-- Push the commit and the annotated tag.
+##### Generating artifacts
 
-```sh
-git push
-git push --tags
+```bash
+# x64
+
+# Build Debian packages
+./scripts/build/docker/run-command.sh -r x64 -s . -c "make electron-develop && make RELEASE_TYPE=production electron-installer-debian"
+# Build RPM packages
+./scripts/build/docker/run-command.sh -r x64 -s . -c "make electron-develop && make RELEASE_TYPE=production electron-installer-redhat"
+# Build AppImages
+./scripts/build/docker/run-command.sh -r x64 -s . -c "make electron-develop && make RELEASE_TYPE=production electron-installer-appimage"
+
+# x86
+
+# Build Debian packages
+./scripts/build/docker/run-command.sh -r x86 -s . -c "make electron-develop && make RELEASE_TYPE=production electron-installer-debian"
+# Build RPM packages
+./scripts/build/docker/run-command.sh -r x86 -s . -c "make electron-develop && make RELEASE_TYPE=production electron-installer-redhat"
+# Build AppImages
+./scripts/build/docker/run-command.sh -r x86 -s . -c "make electron-develop && make RELEASE_TYPE=production electron-installer-appimage"
 ```
 
-Upgrading Electron
-------------------
+#### Mac OS
 
-- Upgrade the `electron` dependency version in `package.json` to an *exact
-  version* (no `~`, `^`, etc).
+**ATTENTION:** For production releases you'll need the code-signing key,
+and set `CSC_NAME` to generate signed binaries on Mac OS.
 
-Dealing with a problematic release
-----------------------------------
+```bash
+make electron-develop
+
+# Build the zip
+make RELEASE_TYPE=production electron-installer-app-zip
+# Build the dmg
+make RELEASE_TYPE=production electron-installer-dmg
+```
+
+#### Windows
+
+**ATTENTION:** For production releases you'll need the code-signing key,
+and set `CSC_LINK`, and `CSC_KEY_PASSWORD` to generate signed binaries on Windows.
+
+**NOTE:**
+- Keep in mind to also generate artifacts for x86, with `TARGET_ARCH=x86`.
+
+```bash
+make electron-develop
+
+# Build the Portable version
+make RELEASE_TYPE=production electron-installer-portable
+# Build the Installer
+make RELEASE_TYPE=production electron-installer-nsis
+```
+
+### Uploading packages to Bintray
+
+```bash
+export BINTRAY_USER="username@account"
+export BINTRAY_API_KEY="youruserapikey"
+```
+
+```bash
+./scripts/publish/bintray.sh -c "etcher" -t "production" -v "1.2.1" -o "etcher" -p "debian" -y "debian" -r "x64" -f "dist/etcher-electron_1.2.1_amd64.deb"
+./scripts/publish/bintray.sh -c "etcher" -t "production" -v "1.2.1" -o "etcher" -p "debian" -y "debian" -r "x86" -f "dist/etcher-electron_1.2.1_i386.deb"
+./scripts/publish/bintray.sh -c "etcher" -t "production" -v "1.2.1" -o "etcher" -p "redhat" -y "redhat" -r "x64" -f "dist/etcher-electron-1.2.1.x86_64.rpm"
+./scripts/publish/bintray.sh -c "etcher" -t "production" -v "1.2.1" -o "etcher" -p "redhat" -y "redhat" -r "x86" -f "dist/etcher-electron-1.2.1.i686.rpm"
+```
+
+### Uploading binaries to Amazon S3
+
+```bash
+export S3_KEY="..."
+```
+
+```bash
+./scripts/publish/aws-s3.sh -b "balena-production-downloads" -v "1.2.1" -p "etcher" -f "dist/<filename>"
+```
+
+### Dealing with a Problematic Release
 
 There can be times where a release is accidentally plagued with bugs. If you
 released a new version and notice the error rates are higher than normal, then
@@ -54,7 +146,7 @@ revert the problematic release as soon as possible, until the bugs are fixed.
 
 You can revert a version by deleting its builds from the S3 bucket and Bintray.
 Refer to the `Makefile` for the up to date information about the S3 bucket
-where we push builds to, and get in touch with the resin.io operations team to
+where we push builds to, and get in touch with the balena.io operations team to
 get write access to it.
 
 The Etcher update notifier dialog and the website only show the a certain
@@ -63,8 +155,20 @@ single package or two is enough to bring down the whole version.
 
 Use the following command to delete files from S3:
 
-```sh
+```bash
 aws s3api delete-object --bucket <bucket name> --key <file name>
 ```
 
 The Bintray dashboard provides an easy way to delete a version's files.
+
+
+### Submitting binaries to Symantec
+
+- [Report a Suspected Erroneous Detection](https://submit.symantec.com/false_positive/standard/)
+- Fill out form:
+  - **Select Submission Type:** "Provide a direct download URL"
+  - **Name of the software being detected:** Etcher
+  - **Name of detection given by Symantec product:** WS.Reputation.1
+  - **Contact name:** Balena.io Ltd
+  - **E-mail address:** hello@etcher.io
+  - **Are you the creator or distributor of the software in question?** Yes

docs/MANUAL-TESTING.md

@@ -0,0 +1,115 @@
+Manual Testing
+==============
+
+This document describes a high-level script of manual tests to check for. We
+should aim to replace items on this list with automated Spectron test cases.
+
+Image Selection
+---------------
+
+- [ ] Cancel image selection dialog
+- [ ] Select an unbootable image (without a partition table), and expect a
+  sensible warning
+- [ ] Attempt to select a ZIP archive with more than one image
+- [ ] Attempt to select a tar archive (with any compression method)
+- [ ] Change image selection
+- [ ] Select a Windows image, and expect a sensible warning
+
+Drive Selection
+---------------
+
+- [ ] Open the drive selection modal
+- [ ] Switch drive selection
+- [ ] Insert a single drive, and expect auto-selection
+- [ ] Insert more than one drive, and don't expect auto-selection
+- [ ] Insert a locked SD Card and expect a warning
+- [ ] Insert a too small drive and expect a warning
+- [ ] Put an image into a drive and attempt to flash the image to the drive
+  that contains it
+- [ ] Attempt to flash a compressed image (for which we can get the
+  uncompressed size) into a drive that is big enough to hold the compressed
+  image, but not big enough to hold the uncompressed version
+- [ ] Enable "Unsafe Mode" and attempt to select a system drive
+- [ ] Enable "Unsafe Mode", and if there is only one system drive (and no
+  removable ones), don't expect autoselection
+
+Image Support
+-------------
+
+Run the following tests with and without validation enabled:
+
+- [ ] Flash an uncompressed image
+- [ ] Flash a Bzip2 image
+- [ ] Flash a XZ image
+- [ ] Flash a ZIP image
+- [ ] Flash a GZ image
+- [ ] Flash a DMG image
+- [ ] Flash an image whose size is not a multiple of 512 bytes
+- [ ] Flash a compressed image whose size is not a multiple of 512 bytes
+- [ ] Flash an archive whose image size is not a multiple of 512 bytes
+- [ ] Flash an archive image containing a logo
+- [ ] Flash an archive image containing a blockmap file
+- [ ] Flash an archive image containing a manifest metadata file
+
+Flashing Process
+----------------
+
+- [ ] Unplug the drive during flash or validation
+- [ ] Click "Flash", cancel elevation dialog, and click "Flash" again
+- [ ] Start flashing an image, try to close Etcher, cancel the application
+  close warning dialog, and check that Etcher continues to flash the image
+
+### Child Writer
+
+- [ ] Kill the child writer process (i.e. with `SIGINT` or `SIGKILL`), and
+  check that the UI reacts appropriately
+- [ ] Close the application while flashing using the window manager close icon
+- [ ] Close the application while flashing using the OS keyboard shortcut
+- [ ] Close the application from the terminal using Ctrl-C while flashing
+- [ ] Force kill the application (using a process monitor tool, etc)
+
+In all these cases, the child writer process should not remain alive. Note that
+in some systems you need to open your process monitor tool of choice with extra
+permissions to see the elevated child writer process.
+
+GUI
+----
+
+- [ ] Close application from the terminal using Ctrl-C while the application is
+  idle
+- [ ] Click footer links that take you to an external website
+- [ ] Attempt to change image or drive selection while flashing
+- [ ] Go to the settings page while flashing and come back
+- [ ] Flash consecutive images without closing the application
+- [ ] Remove the selected drive right before clicking "Flash"
+- [ ] Minimize the application
+- [ ] Start the application given no internet connection
+
+Success Banner
+--------------
+
+- [ ] Click an external link on the success banner (with and without internet
+  connection)
+
+Elevation Prompt
+----------------
+
+- [ ] Flash an image as `root`/administrator
+- [ ] Reject elevation prompt
+- [ ] Put incorrect elevation prompt password
+- [ ] Unplug the drive during elevation
+
+Unmounting
+----------
+
+- [ ] Disable unmounting and flash an image
+- [ ] Flash an image with a file system that is readable by the host OS, and
+  check that is unmounted correctly
+
+Analytics
+---------
+
+- [ ] Disable analytics, open DevTools Network pane or a packet sniffer, and
+  check that no request is sent
+- [ ] **Disable analytics, refresh application from DevTools (using Cmd-R or
+  F5), and check that initial events are not sent to Mixpanel**

docs/PUBLISHING.md

@@ -52,7 +52,7 @@ Signing
 ### OS X
 
 1. Get our Apple Developer ID certificate for signing applications distributed
-outside the Mac App Store from the resin.io Apple account.
+outside the Mac App Store from the balena.io Apple account.
 
 2. Install the Developer ID certificate to your Mac's Keychain by double
 clicking on the certificate file.
@@ -62,7 +62,7 @@ packaging for OS X.
 
 ### Windows
 
-1. Get access to our code signing certificate and decryption key as a resin.io
+1. Get access to our code signing certificate and decryption key as a balena.io
 employee by asking for it from the relevant people.
 
 2. Place the certificate in the root of the Etcher repository naming it
@@ -118,7 +118,7 @@ Publishing to S3
 - [AWS CLI][aws-cli]
 
 Make sure you have the [AWS CLI tool][aws-cli] installed and configured to
-access resin.io's production or snapshot S3 bucket.
+access balena.io's production or snapshot S3 bucket.
 
 Run the following command to publish all files for the current combination of
 _platform_ and _arch_ (building them if necessary):
@@ -128,7 +128,7 @@ make publish-aws-s3
 ```
 
 Also add links to each AWS S3 file in [GitHub Releases][github-releases]. See
-[`v1.0.0-beta.17`](https://github.com/resin-io/etcher/releases/tag/v1.0.0-beta.17)
+[`v1.0.0-beta.17`](https://github.com/balena-io/etcher/releases/tag/v1.0.0-beta.17)
 as an example.
 
 Publishing to Homebrew Cask
@@ -143,14 +143,12 @@ Publishing to Homebrew Cask
 Announcing
 ----------
 
-Post messages to the [Etcher forum][resin-forum-etcher] and
-[Etcher gitter channel][gitter-etcher] announcing the new version
+Post messages to the [Etcher forum][balena-forum-etcher] announcing the new version
 of Etcher, and including the relevant section of the Changelog.
 
 [aws-cli]: https://aws.amazon.com/cli
 [bintray]: https://bintray.com
-[etcher-cask-file]: https://github.com/caskroom/homebrew-cask/blob/master/Casks/etcher.rb
+[etcher-cask-file]: https://github.com/caskroom/homebrew-cask/blob/master/Casks/balenaetcher.rb
 [homebrew-cask]: https://github.com/caskroom/homebrew-cask
-[resin-forum-etcher]: https://talk.resin.io/c/etcher/annoucements
-[gitter-etcher]: https://gitter.im/resin-io/etcher
-[github-releases]: https://github.com/resin-io/etcher/releases
+[balena-forum-etcher]: https://forums.balena.io/c/etcher
+[github-releases]: https://github.com/balena-io/etcher/releases

docs/RUNNING-LOCALLY.md

@@ -1,87 +0,0 @@
-Running locally
-===============
-
-This document aims to serve as a guide to get Etcher running locally on your
-development machine.
-
-Prerequisites
--------------
-
-### Common
-
-- [NodeJS](https://nodejs.org) (at least v6)
-- [Python](https://www.python.org)
-- [jq](https://stedolan.github.io/jq/)
-- [curl](https://curl.haxx.se/)
-
-```sh
-pip install -r requirements.txt
-```
-
-You might need to run this with `sudo` or administrator permissions.
-
-### Windows
-
-- [NSIS v2.51](http://nsis.sourceforge.net/Main_Page) (v3.x won't work)
-- Either one of the following:
-  - [Visual C++ 2015 Build Tools](http://landinghub.visualstudio.com/visual-cpp-build-tools) containing standalone compilers, libraries and scripts
-  - Install the [windows-build-tools](https://github.com/felixrieseberg/windows-build-tools) via npm with `npm install --global windows-build-tools`
-  - [Visual Studio Community 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48146) (free) (other editions, like Professional and Enterprise, should work too)
-    **NOTE:** Visual Studio 2015 doesn't install C++ by default. You have to rerun the
-    setup, select "Modify" and then check `Visual C++ -> Common Tools for Visual
-    C++ 2015` (see http://stackoverflow.com/a/31955339)
-- [MinGW](http://www.mingw.org)
-
-The following MinGW packages are required:
-
-- `msys-make`
-- `msys-unzip`
-- `msys-zip`
-- `msys-bash`
-- `msys-coreutils`
-
-### OS X
-
-- [XCode](https://developer.apple.com/xcode/)
-
-Cloning the project
--------------------
-
-```sh
-git clone https://github.com/resin-io/etcher
-cd etcher
-```
-
-Installing npm dependencies
----------------------------
-
-**Make sure you have all the pre-requisites listed above installed in your
-system before running the `install` script.**
-
-Please make use of the following scripts to install npm dependencies rather
-than simply running `npm install` given that we need to do extra configuration
-to make sure native dependencies are correctly compiled for Electron, otherwise
-the application might not run successfully.
-
-If you're on Windows, **run the command from the _Developer Command Prompt for
-VS2015_**, to ensure all Visual Studio command utilities are available in the
-`%PATH%`.
-
-```sh
-make electron-develop
-```
-
-Running the application
------------------------
-
-### GUI
-
-```sh
-npm start
-```
-
-### CLI
-
-```sh
-node bin/etcher
-```

docs/USER-DOCUMENTATION.md

@@ -14,8 +14,8 @@ images, usually available from the image publishers themselves.
 
 Images known to require special treatment:
 
-- Microsoft Windows (use [Windows USB/DVD Download Tool][windows-usb-tool], or
-  [Rufus][rufus]).
+- Microsoft Windows (use [Windows USB/DVD Download Tool][windows-usb-tool], 
+  [Rufus][rufus], or [WoeUSB][woeusb]).
 
 - Windows 10 IoT (use the [Windows 10 IoT Core Dashboard][windows-iot-dashboard])
 
@@ -30,7 +30,7 @@ if you require this functionality, we advise to fallback to
 Deactivate desktop shortcut prompt on GNU/Linux
 -----------------------------------------------
 
-This is a feature provided by [AppImages](appimage), where the applications
+This is a feature provided by [AppImages][appimage], where the applications
 prompts the user to automatically register a desktop shortcut to easily access
 the application.
 
@@ -130,21 +130,6 @@ run Etcher on a GNU/Linux system.
 
 - liblzma (for xz decompression)
 
-Simulate an update alert
-------------------------
-
-You can set the `ETCHER_FAKE_S3_LATEST_VERSION` environment variable to a valid
-semver version (greater than the current version) to trick the application into
-thinking that what you put there is the latest available version, therefore
-causing the update notification dialog to be presented at startup.
-
-Note that the value of the variable will be ignored if it doesn't match the
-release type of the current application version. For example, setting the
-variable to a production version (e.g. `ETCHER_FAKE_S3_LATEST_VERSION=2.0.0`)
-will be ignored if you're running a snapshot build, and vice-versa.
-
-See [`PUBLISHING.md`][publishing] for more details about release types.
-
 Recovering broken drives
 ------------------------
 
@@ -174,6 +159,18 @@ pre-installed in all modern Windows versions.
 
 - Run `clean`. This command will completely clean your drive by erasing any
   existent filesystem.
+  
+- Run `create partition primary`. This command will create a new partition.
+
+- Run  `active`. This command will active the partition.
+
+- Run  `list partition`. This command will show available partition.
+
+- Run  `select partition N`, where `N` corresponds to the id of the newly available partition.
+
+- Run `format override quick`. This command will format the partition. You can choose a specific formatting by adding `FS=xx` where `xx` could be `NTFS or FAT or FAT32` after `format`. Example : `format FS=NTFS override quick`
+
+- Run `exit` to quit diskpart.
 
 ### OS X
 
@@ -181,7 +178,7 @@ Run the following command in `Terminal.app`, replacing `N` by the corresponding
 disk number, which you can find by running `diskutil list`:
 
 ```sh
-diskutil eraseDisk free UNTITLED /dev/diskN
+diskutil eraseDisk FAT32 UNTITLED MBRFormat /dev/diskN
 ```
 
 ### GNU/Linux
@@ -206,21 +203,18 @@ Running in older macOS versions
 -------------------------------
 
 Etcher GUI is based on the [Electron][electron] framework, [which only supports
-macOS 10.9 and newer versions][electron-supported-platforms].
+macOS 10.10 (Yosemite) and newer versions][electron-supported-platforms].
 
-You can however, run the [Etcher CLI][etcher-cli], which should work in older
-platforms.
-
-[resin.io]: https://resin.io
+[balena.io]: https://balena.io
 [appimage]: http://appimage.org
 [xwayland]: https://wayland.freedesktop.org/xserver.html
 [weston.ini]: http://manpages.ubuntu.com/manpages/wily/man5/weston.ini.5.html
 [diskpart]: https://technet.microsoft.com/en-us/library/cc770877(v=ws.11).aspx
-[electron]: http://electron.atom.io
-[electron-supported-platforms]: https://github.com/electron/electron/blob/master/docs/tutorial/supported-platforms.md
-[etcher-cli]: https://github.com/resin-io/etcher/blob/master/docs/CLI.md
-[publishing]: https://github.com/resin-io/etcher/blob/master/docs/PUBLISHING.md
+[electron]: https://electronjs.org/
+[electron-supported-platforms]: https://electronjs.org/docs/tutorial/support#supported-platforms
+[publishing]: https://github.com/balena-io/etcher/blob/master/docs/PUBLISHING.md
 [windows-usb-tool]: https://www.microsoft.com/en-us/download/windows-usb-dvd-download-tool
 [rufus]: https://rufus.akeo.ie
 [unetbootin]: https://unetbootin.github.io
 [windows-iot-dashboard]: https://developer.microsoft.com/en-us/windows/iot/downloads
+[woeusb]: https://github.com/slacka/WoeUSB

docs/_config.yml

@@ -1 +0,0 @@
-theme: jekyll-theme-minimal

docs/docs/getting-started.md

@@ -0,0 +1,178 @@
+---
+description: Getting started for etcherPro 
+slug: /
+---
+
+# EtcherPro User manual
+
+## 1. Features
+
+![EtcherPro-manual-01](img/etcher-pro-top-view.jpeg)
+![EtcherPro-manual-02](img/etcher-pro-slots.jpeg)
+![EtcherPro-manual-03](img/etcher-pro-rear-view.jpeg)
+
+| Specifications |  |
+| --- | --- |
+| Voltage in | 100 to 240 V AC - 10A -  50 to 60 Hz |
+| Voltage out | 100 to 240 V AC - 10A -  50 to 60 Hz |
+| Ports | 16 x USB 3.0, 16 X SD, 16 x mSD |
+| Flashing capacity | 16 x targets when using an online image or, 15 x target drives and 1 x local source drive |
+| Daisy-chaining | Up to 10 EtcherPro devices supported (160 x targets) |
+| Language support | English |
+| Software | balenaEtcher on balenaOS with auto-updates  |
+| Display | 7in RGB touch screen |
+| Network connectivity | WiFi 2.4GHz, 5GHz |
+| Working temperature | 5°C ~ 30°C |
+| Certifications | CE, FCC |
+
+## 2. Getting started
+
+### 2.1 Setup
+### Powering up the device
+
+- EtcherPro is supplied with a mains power cable according to your region's plug standards
+- On the back of the device, there are two groups of sockets, labelled as **IN** and **OUT**
+- Plug the AC power cable to the socket labelled **POWER IN**, and then to the mains outlet
+- The device should boot up automatically; wait until you see the Etcher interface show up
+- [Warning] Please avoid using adaptors or extension leads, as this may damage the device or cause it to malfunction
+
+### Connecting to WiFi
+
+- The device will prompt you to connect to a local network the first time it boots (you can skip this step if you are not connecting to WiFi)
+- Select the network to which you want to connect, type the password and select **OK**
+- You can access the WiFi settings by selecting the WiFi icon at the top left corner of the screen
+
+### 2.2 Etcher functions
+
+### Flash from file
+
+Using an image file as source to flash to one or multiple targets
+
+- From the Etcher menu, select **Flash from file**
+- Plug a drive that contains the image you would like to flash into the slot with the blue-colored blinking LED
+- Select the image you want to flash from the file browser and select **OK**
+- Plug at least one drive or device into an available slot. The plugged target(s) will be selected automatically and the LEDs will turn white
+- Select **Flash**, to begin the flashing process
+- The LED of each slot will first blink purple for flashing and then green for validating
+- Once the flashing is complete, the LEDs will turn green for successfully flashed drives, and red for the failed ones
+- You may safely unplug the drives when flashing is complete
+
+### Flash from URL
+
+Using an online image file as source to flash to one or multiple targets
+
+- From the Etcher menu, select **Flash from URL**
+- Enter the image URL of you would like to flash in the input field, and select **OK**
+- Plug at least one drive or device into an available slot. The plugged target(s) will be selected automatically, and the LEDs will turn white
+- Select **Flash**, to begin the flashing process
+- The LED of each slot will first blink purple for flashing and then green for validating
+- Once the flashing is complete, the LEDs will turn green for successfully flashed drives, and red for the failed ones
+- You may safely unplug the drives when flashing is complete
+
+### Clone drive
+
+Using a drive as source, and cloning it to multiple drives
+
+- From the Etcher menu, select **Clone drive**
+- Plug a drive you would like to clone into the slot with the blue-colored blinking LED
+- The drive will be selected automatically and the LED will stop blinking
+- Plug at least one drive into an available slot. The plugged targets will be selected automatically, and the LEDs will turn white
+- Select **Flash**, to begin the flashing process
+- The LED of each slot will first blink purple for flashing and then green for validating
+- Once the flashing is complete, the LEDs will turn green for successfully flashed drives, and red for the failed ones
+- You may safely unplug the drives when flashing is complete
+
+### Backup drive
+
+Backing up one or multiple drives into another drive
+
+- From the Etcher menu, select **more options**, then **Backup drive**
+- Plug one or more drives you would like to backup into the slot(s) with the blue-colored blinking LED
+- The drives will be autoselected and the LED will stop blinking
+- Select **OK** to move on to the next step
+- Plug the backup drive into the slot with the white-colored blinking LED. The plugged target will be automatically selected and the LED will stop blinking
+- Select **Flash**, to begin the flashing process
+- The LED of the target slot will first blink purple for flashing, and then green for validating
+- Once the flashing is complete, the LED will turn green for a successful flash, and red for a failed one
+- You may safely unplug the drive when flashing is complete
+
+### Format drive
+
+Formatting one or multiple drives
+
+- From the Etcher menu, select **more options**, then **Format drive**
+- Plug one or more drives you would like to format on the slots with the white-colored blinking LEDs
+- The drives will be selected automatically, and the LED will stop blinking
+- Select **Flash**, to begin the flashing process
+- The LED of the target slot will first blink purple for flashing, and then green for validating
+- Once the formatting is complete, the LEDs will turn green for successfully formatted drives, and red for the failed ones
+- You may safely unplug the drive when formatting is complete
+
+### 2.3 Daisy-chaining (power only)
+
+Connecting up to 10 EtcherPro devices and power them from one socket.
+
+- EtcherPro allows you to chain power (data chaining will be released later). To do this, you will need a male to female IEC C13/C14 power extension lead (min 10A rated) to connect one EtcherPro to another
+- Plug the power extension lead to the 'POWER IN' side of the leading EtcherPro, and then to the 'POWER OUT' side of the successive EtcherPro
+- The last EtcherPro of the stack should be plugged directly to the mains power socket
+
+### 2.4 Sleep, wake and power off
+
+- EtcherPro is set to automatically go into sleep mode after a few minutes
+- You may change this setting by selecting the settings icon on the top right corner of the screen
+- You may put the device to sleep manually by selecting the sleep button on the top left corner of the screen
+- To wake up your device, just tap anywhere on the screen
+- It is not necessary to power off your device, but if you would like to, you may simply unplug the power-in cable
+
+### 3. Safety and handling
+
+WARNING: Make sure you read and follow the safety and handling instructions before using EtcherPro in order to avoid the potential risk of causing damage to the device, electrical shock, fire, or damage to any other property. If EtcherPro gets physically damaged in any way, or you suspect liquid has leaked into the enclosure, unplug the power cable from the socket and avoid using the device before contacting support (pro@etcher.io).
+Handling
+It is important not to block the air vents on the back and bottom of the device. As such, we suggest setting up EtcherPro on a well supported desk, with plenty of surrounding space to ensure the device is properly ventilated while in use.
+Liquid exposure
+EtcherPro’s enclosure is not waterproof. It is important to keep liquids away from the device to avoid spillages. High humidity environments, rain or snow may also cause damage to the device.
+Power
+EtcherPro does not have an on/off switch. If you would like to power on the device, you need to plug the power cable into the mains socket. If you would like to power off the device, you need to unplug the power cable. Be sure to unplug the power cable from the socket if you suspect either the cable or the device is physically damaged in some way.
+
+For your own protection and protection of the device, EtcherPro comes with a grounded AC power cable which only fits a grounded mains socket. If you don’t have a grounded socket installed, you should contact a specialist who can safely install an appropriate grounded socket. Do not attempt to power on the device without a connected grounding wire or with a power cable that does not meet the original specifications.
+Repairing
+EtcherPro is not meant to be serviced or repaired by the user. If your device has any issues you should contact support (pro@etcher.io). Attempting to disassemble the device will void the warranty, and could also cause injury or harm.
+Radio interference
+EtcherPro contains components and radios that emit electromagnetic fields. These electromagnetic fields may interfere with medical devices, such as pacemakers and defibrillators. Consult your physician and medical device manufacturer for information specific to your medical device and whether you need to maintain a safe distance of separation between your medical device(s) and EtcherPro. If you suspect EtcherPro is interfering with your medical device, stop using EtcherPro immediately.
+
+EtcherPro emits electromagnetic fields due to the usage of components and radios. These fields can interfere with other devices and potentially cause them to malfunction. If you suspect EtcherPro is interfering with another device, unplug EtcherPro from the power and contact support (pro@etcher.io).
+
+This equipment is not suitable for use in locations where children are likely to be present.
+
+Atmospheric conditions (dust and vapor)
+The EtcherPro enclosure is not sealed. Using the device in an environment that has increased amounts of dust, powder, vapors, corrosive substances, or other contaminants can cause malfunction, injury, and/or fire.
+
+### 4. Warranty
+
+**Limited Product Warranty**
+Balena warrants that, for a period of one (1) year after the date of shipment, the Products will be free from defects in materials and workmanship under normal use.  As Balena’s sole liability and Customer’s sole and exclusive remedy for any breach of the limited warranty set forth herein, Balena will, at its option and expense, repair or replace any Product returned to Customer during the warranty period that does not comply with such warranty, as confirmed by Balena.  Replacement Products will be warranted for the remainder of the original warranty period or ninety (90) days, whichever is longer. All Products that are replaced become the property of Balena. Balena will have no obligation to the extent that any failure of a Product to comply with the limited warranty set forth in this limited product warranty results from or is otherwise attributable to: (i) negligence, misuse, or abuse of the Product; (ii) use of the Product other than in accordance with Balena’s published specifications or user manual; (iii) modifications, alterations or repairs to the Product made by a party other than Balena or a party authorized by Balena; (iv) any failure by Customer or a third party to comply with environmental and storage requirements for the Product specified by Balena, including, but not limited to, temperature or humidity ranges; or (v) use of the Product in combination with any third-party devices or products that have not been provided or recommended by Balena. The parties agree that Balena’s RMA Policy shall apply to Products returned pursuant to this limited product warranty for a breach of warranty.
+
+THE LIMITED WARRANTY SET FORTH HEREIN IS IN LIEU OF, AND BALENA SPECIFICALLY DISCLAIMS, ANY AND ALL OTHER WARRANTIES AND CONDITIONS, WHETHER EXPRESS, IMPLIED OR STATUTORY, INCLUDING, BUT NOT LIMITED TO, ANY IMPLIED WARRANTIES OR CONDITIONS OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE OR NON-INFRINGEMENT, AND ANY WARRANTIES ARISING OUT OF COURSE OF DEALING OR USAGE OF TRADE.  NO ADVICE OR INFORMATION, WHETHER ORAL OR WRITTEN, OBTAINED FROM BALENA OR ELSEWHERE, WILL CREATE ANY WARRANTY NOT EXPRESSLY STATED IN THESE TERMS.
+
+The limited warranty does not apply to:
+
+- Returned items that failed due to an accident, purchaser’s abuse, neglect or failure to operate in accordance with instructions provided in this refund policy.
+- Returned items that failed due to incorrect voltage or improper wiring.
+- Returned items that failed due to rain, excessive humidity, corrosive environments, or other contaminants.
+- Any item damaged in shipment.
+- Any product failure caused by installing or operating product under conditions not in accordance with installation and operation guidelines, or damaged by contact with tools or surroundings.
+- Returned items with cosmetic defects that do not interfere with product functionality.
+- Returned items that are incomplete or defaced.
+- Returned items with a different serial number from what was authorized for return.
+- Freight damaged items. If your shipment arrives damaged, you must note the damage on the carrier's delivery record in accordance with the carrier's policy, save the merchandise in the original box and packing it arrived in, and arrange for a carrier inspection of damaged merchandise.
+
+**Initiating a warranty claim**
+To initiate a warranty claim, please contact support (pro@etcher.io) to receive a copy of the RMA form. When filling the form, make sure you describe the issue as accurately as possible since it will be used as a basis for determining if the warranty claim is valid or not.
+
+After Balena’s evaluation of the return item, Warranty or Out-of-Warranty status will be determined. If the description of the problem is the same as listed on Page 1 of the RMA form, the product will be repaired or replaced under warranty at no charge and shipped back, prepaid, to the customer.
+
+If the description of the problem is different from the problem listed on Page 1 of the RMA form we will contact the customer. At such time, the customer must issue a written confirmation to proceed with the repair(s), agree to cover the costs of the repair and return freight, or authorize the product to be shipped back as is, at the customer’s expense. Failure to obtain written confirmation within thirty (30) days of notification will result in the product being returned as is, at the customer’s expense.
+
+If the product has no identifiable problem, we reserve the right to charge for testing and return shipping costs.
+
+For any product returned to balena for reasons other than warranty, a 20% restocking fee and round-trip shipping costs will be deducted from the credit refund. All returned items must be in their original box or crating and must include all packing material, manuals, and accessories.

electron-builder.yml

@@ -1,20 +1,23 @@
-appId: io.resin.etcher
-copyright: Copyright 2016 Resinio Ltd
-productName: Etcher
+appId: io.balena.etcher
+copyright: Copyright 2016-2021 Balena Ltd
+productName: balenaEtcher
 npmRebuild: true
-nodeGypRebuild: true
+nodeGypRebuild: false
 publish: null
+afterPack: "./afterPack.js"
+asar: false
 files:
-  - lib
-  - build/**/*.node
-  - assets/icon.png
-  - node_modules/**/*
+  - generated
+  - lib/shared/catalina-sudo/sudo-askpass.osascript.js
 mac:
   icon: assets/icon.icns
-  artifactName: "${productName}-${version}-darwin-${env.TARGET_ARCH}.${ext}"
   category: public.app-category.developer-tools
+  hardenedRuntime: true
+  entitlements: "entitlements.mac.plist"
+  entitlementsInherit: "entitlements.mac.plist"
+  artifactName: "${productName}-${version}.${ext}"
 dmg:
-  background: assets/osx/installer.tiff
+  background: assets/dmg/background.tiff
   icon: assets/icon.icns
   iconSize: 110
   contents:
@@ -36,22 +39,21 @@ nsis:
   uninstallerIcon: assets/icon.ico
   deleteAppDataOnUninstall: true
   license: LICENSE
-  artifactName: "${productName}-${version}-win32-${env.TARGET_ARCH}.${ext}"
+  artifactName: "${productName}-Setup-${version}.${ext}"
 portable:
-  artifactName: "${productName}-${version}-win32-${env.TARGET_ARCH}-portable.${ext}"
+  artifactName: "${productName}-Portable-${version}.${ext}"
   requestExecutionLevel: user
 linux:
   category: Utility
   packageCategory: utils
-  executableName: etcher-electron
-  synopsis: Etcher is a powerful OS image flasher built with web technologies to ensure flashing an SDCard or USB drive is a pleasant and safe experience. It protects you from accidentally writing to your hard-drives, ensures every byte of data was written correctly and much more.
+  executableName: balena-etcher-electron
+  synopsis: balenaEtcher is a powerful OS image flasher built with web technologies to ensure flashing an SDCard or USB drive is a pleasant and safe experience. It protects you from accidentally writing to your hard-drives, ensures every byte of data was written correctly and much more.
+  icon: assets/iconset
 deb:
-  icon: assets/icon.png
   priority: optional
   depends:
     - gconf2
     - gconf-service
-    - libappindicator1
     - libasound2
     - libatk1.0-0
     - libc6
@@ -61,16 +63,17 @@ deb:
     - libexpat1
     - libfontconfig1
     - libfreetype6
+    - libgbm1
     - libgcc1
     - libgconf-2-4
     - libgdk-pixbuf2.0-0
     - libglib2.0-0
-    - libgtk2.0-0
+    - libgtk-3-0
     - liblzma5
     - libnotify4
     - libnspr4
     - libnss3
-    - libpango1.0-0
+    - libpango1.0-0 | libpango-1.0-0
     - libstdc++6
     - libx11-6
     - libxcomposite1
@@ -84,10 +87,11 @@ deb:
     - libxss1
     - libxtst6
     - polkit-1-auth-agent | policykit-1-gnome | polkit-kde-1
+  afterInstall: "./after-install.tpl"
 rpm:
-  icon: assets/icon.png
   depends:
-    - lsb
-    - libXScrnSaver
-appImage:
-  icon: assets/icon.png
+    - util-linux
+protocols:
+  name: etcher
+  schemes:
+    - etcher

entitlements.mac.plist

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
+    <true/>
+    <key>com.apple.security.device.usb</key>
+    <true/>
+    <key>com.apple.security.files.user-selected.read-only</key>
+    <true/>
+    <key>com.apple.security.network.client</key>
+    <true/>
+  </dict>
+</plist>

lib/child-writer/README.md

@@ -1,69 +0,0 @@
-Etcher Child Writer
-===================
-
-This module is in charge of dealing with the gory details of elevating and
-managing the child writer process. As a word of warning, it contains tons of
-workarounds and "hacks" to deal with platform differences, packaging, and
-inter-process communication. This empowers us to write this small guide to
-explain how it works in a more high level manner, hoping to make it easier to
-grok for contributors.
-
-The problem
------------
-
-Elevating a forked process is an easy task. Thanks to the widely available NPM
-modules to display nice GUI prompt dialogs, elevation is just a matter of
-executing the process with one of those modules instead of with `child_process`
-directly.
-
-The main problems we faced are:
-
-- The modules that implement elevation provide "execution" support, but don't
-  allow us to fork/spawn the process and consume its `stdout` and `stderr` in a
-  stream fashion. This also means that we can't use the nice `process.send` IPC
-  communication channel directly that `child_process.fork` gives us to send
-  messages back to the parent.
-
-- Since we can't assume anything from the environment Etcher is running on, we
-  must make use of the same application entry point to execute both the GUI and
-  the CLI code, which starts to get messy once we throw `asar` packaging into
-  the mix.
-
-- Each elevation mechanism has its quirks, mainly on GNU/Linux. Making sure
-  that the forked process was elevated correctly and could work without issues
-  required various workarounds targeting `pkexec` or `kdesudo`.
-
-How it works
-------------
-
-The Etcher binary runs in CLI or GUI mode depending on an environment variable
-called `ELECTRON_RUN_AS_NODE`. When this variable is set, it instructs Electron
-to run as a normal NodeJS process (without Chromium, etc), but still keep any
-patches applied by Electron, like `asar` support.
-
-When the Etcher GUI is ran, and the user presses the "Flash!" button, the GUI
-creates an IPC server, and forks a process called the "writer proxy", passing
-it all the required information to perform the flashing, such as the image
-path, the device path, the current settings, etc.
-
-The writer proxy then checks if its currently elevated, and if not, prompts the
-user for elevation and re-spawns itself.
-
-Once the writer proxy has enough permissions to directly access devices, it
-spawns the Etcher CLI passing the `--robot` option along with all the
-information gathered before. The `--robot` option basically tells the Etcher
-CLI to output state information in a way that can be very easily parsed by the
-parent process.
-
-The output of the Etcher CLI is then sent to the IPC server that was opened by
-the GUI, which nicely displays them in the progress bar the user sees.
-
-Summary
--------
-
-There are lots of details we're omitting for the sake of clarity. Feel free to
-dive in inside the child writer code, which is heavily commented to explain the
-reasons behind each decision or workaround.
-
-Don't hesitate in getting in touch if you have any suggestion, or just want to
-know more!

lib/child-writer/cli.js

@@ -1,100 +0,0 @@
-/*
- * Copyright 2016 resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict';
-
-const _ = require('lodash');
-
-/**
- * @summary Get the explicit boolean form of an argument
- * @function
- * @private
- *
- * @description
- * We refer as "explicit boolean form of an argument" to a boolean
- * argument in either normal or negated form.
- *
- * For example: `--check` and `--no-check`;
- *
- * @param {String} argumentName - argument name
- * @param {Boolean} value - argument value
- * @returns {String} argument
- *
- * @example
- * console.log(cli.getBooleanArgumentForm('check', true));
- * > '--check'
- *
- * @example
- * console.log(cli.getBooleanArgumentForm('check', false));
- * > '--no-check'
- */
-exports.getBooleanArgumentForm = (argumentName, value) => {
-  const prefix = _.attempt(() => {
-    if (!value) {
-      return '--no-';
-    }
-
-    const SHORT_OPTION_LENGTH = 1;
-    if (_.size(argumentName) === SHORT_OPTION_LENGTH) {
-      return '-';
-    }
-
-    return '--';
-  });
-
-  return prefix + argumentName;
-};
-
-/**
- * @summary Get CLI writer arguments
- * @function
- * @public
- *
- * @param {Object} options - options
- * @param {String} options.image - image
- * @param {String} options.device - device
- * @param {String} options.entryPoint - entry point
- * @param {Boolean} [options.validateWriteOnSuccess] - validate write on success
- * @param {Boolean} [options.unmountOnSuccess] - unmount on success
- * @returns {String[]} arguments
- *
- * @example
- * const argv = cli.getArguments({
- *   image: 'path/to/rpi.img',
- *   device: '/dev/disk2'
- *   entryPoint: 'path/to/app.asar',
- *   validateWriteOnSuccess: true,
- *   unmountOnSuccess: true
- * });
- */
-exports.getArguments = (options) => {
-  const argv = [
-    options.entryPoint,
-    options.image,
-    '--drive',
-    options.device,
-
-    // Explicitly set the boolean flag in positive
-    // or negative way in order to be on the safe
-    // side in case the Etcher CLI changes the
-    // default value of these options.
-    exports.getBooleanArgumentForm('unmount', options.unmountOnSuccess),
-    exports.getBooleanArgumentForm('check', options.validateWriteOnSuccess)
-
-  ];
-
-  return argv;
-};

lib/child-writer/index.js

@@ -1,224 +0,0 @@
-/*
- * Copyright 2016 resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict';
-
-const EventEmitter = require('events').EventEmitter;
-const _ = require('lodash');
-const childProcess = require('child_process');
-const ipc = require('node-ipc');
-const rendererUtils = require('./renderer-utils');
-const cli = require('./cli');
-const CONSTANTS = require('./constants');
-const EXIT_CODES = require('../shared/exit-codes');
-const robot = require('../shared/robot');
-
-/**
- * @summary Perform a write
- * @function
- * @public
- *
- * @param {String} image - image
- * @param {Object} drive - drive
- * @param {Object} options - options
- * @returns {EventEmitter} event emitter
- *
- * @example
- * const child = childWriter.write('path/to/rpi.img', {
- *   device: '/dev/disk2'
- * }, {
- *   validateWriteOnSuccess: true,
- *   unmountOnSuccess: true
- * });
- *
- * child.on('progress', (state) => {
- *   console.log(state);
- * });
- *
- * child.on('error', (error) => {
- *   throw error;
- * });
- *
- * child.on('done', () => {
- *   console.log('Validation was successful!');
- * });
- */
-exports.write = (image, drive, options) => {
-  const emitter = new EventEmitter();
-
-  const argv = cli.getArguments({
-    entryPoint: rendererUtils.getApplicationEntryPoint(),
-    image,
-    device: drive.device,
-    validateWriteOnSuccess: options.validateWriteOnSuccess,
-    unmountOnSuccess: options.unmountOnSuccess
-  });
-
-  // There might be multiple Etcher instances running at
-  // the same time, therefore we must ensure each IPC
-  // server/client has a different name.
-  process.env.IPC_SERVER_ID = `etcher-server-${process.pid}`;
-  process.env.IPC_CLIENT_ID = `etcher-client-${process.pid}`;
-
-  ipc.config.id = process.env.IPC_SERVER_ID;
-  ipc.config.silent = true;
-  ipc.serve();
-
-  /**
-   * @summary Safely terminate the IPC server
-   * @function
-   * @private
-   *
-   * @example
-   * terminateServer();
-   */
-  const terminateServer = () => {
-
-    // Turns out we need to destroy all sockets for
-    // the server to actually close. Otherwise, it
-    // just stops receiving any further connections,
-    // but remains open if there are active ones.
-    _.each(ipc.server.sockets, (socket) => {
-      socket.destroy();
-    });
-
-    ipc.server.stop();
-  };
-
-  /**
-   * @summary Emit an error to the client
-   * @function
-   * @private
-   *
-   * @param {Error} error - error
-   *
-   * @example
-   * emitError(new Error('foo bar'));
-   */
-  const emitError = (error) => {
-    terminateServer();
-    emitter.emit('error', error);
-  };
-
-  /**
-   * @summary Bridge robot message to the child writer caller
-   * @function
-   * @private
-   *
-   * @param {String} message - robot message
-   *
-   * @example
-   * bridgeRobotMessage(robot.buildMessage('foo', {
-   *   bar: 'baz'
-   * }));
-   */
-  const bridgeRobotMessage = (message) => {
-    const parsedMessage = _.attempt(() => {
-      if (robot.isMessage(message)) {
-        return robot.parseMessage(message);
-      }
-
-      // Don't be so strict. If a message doesn't look like
-      // a robot message, then make the child writer log it
-      // for debugging purposes.
-      return robot.parseMessage(robot.buildMessage(robot.COMMAND.LOG, {
-        message
-      }));
-
-    });
-
-    if (_.isError(parsedMessage)) {
-      emitError(parsedMessage);
-      return;
-    }
-
-    try {
-
-      // These are lighweight accessor methods for
-      // the properties of the parsed message
-      const messageCommand = robot.getCommand(parsedMessage);
-      const messageData = robot.getData(parsedMessage);
-
-      // The error object is decomposed by the CLI for serialisation
-      // purposes. We compose it back to an `Error` here in order
-      // to provide better encapsulation.
-      if (messageCommand === robot.COMMAND.ERROR) {
-        emitError(robot.recomposeErrorMessage(parsedMessage));
-      } else if (messageCommand === robot.COMMAND.LOG) {
-
-        // If the message data is an object and it contains a
-        // message string then log the message string only.
-        if (_.isPlainObject(messageData) && _.isString(messageData.message)) {
-          console.log(messageData.message);
-        } else {
-          console.log(messageData);
-        }
-
-      } else {
-        emitter.emit(messageCommand, messageData);
-      }
-
-    } catch (error) {
-      emitError(error);
-    }
-  };
-
-  ipc.server.on('error', emitError);
-  ipc.server.on('message', bridgeRobotMessage);
-
-  ipc.server.on('start', () => {
-    const child = childProcess.fork(CONSTANTS.WRITER_PROXY_SCRIPT, argv, {
-      silent: true,
-      env: process.env
-    });
-
-    child.stdout.on('data', (data) => {
-      console.info(`WRITER: ${data.toString()}`);
-    });
-
-    child.stderr.on('data', (data) => {
-      bridgeRobotMessage(data.toString());
-
-      // This function causes the `close` event to be emitted
-      child.kill();
-
-    });
-
-    child.on('error', emitError);
-
-    child.on('close', (code) => {
-      terminateServer();
-
-      if (code === EXIT_CODES.CANCELLED) {
-        return emitter.emit('done', {
-          cancelled: true
-        });
-      }
-
-      // We shouldn't emit the `done` event manually here
-      // since the writer process will take care of it.
-      if (code === EXIT_CODES.SUCCESS || code === EXIT_CODES.VALIDATION_ERROR) {
-        return null;
-      }
-
-      return emitError(new Error(`Child process exited with error code: ${code}`));
-    });
-  });
-
-  ipc.server.start();
-
-  return emitter;
-};

lib/child-writer/renderer-utils.js

@@ -1,51 +0,0 @@
-/*
- * Copyright 2016 resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict';
-
-/**
- * This file is only meant to be loaded by the renderer process.
- */
-
-const path = require('path');
-const isRunningInAsar = require('electron-is-running-in-asar');
-const electron = require('electron');
-const CONSTANTS = require('./constants');
-
-/**
- * @summary Get application entry point
- * @function
- * @public
- *
- * @returns {String} entry point
- *
- * @example
- * const entryPoint = rendererUtils.getApplicationEntryPoint();
- */
-exports.getApplicationEntryPoint = () => {
-  if (isRunningInAsar()) {
-    return path.join(process.resourcesPath, 'app.asar');
-  }
-
-  const ENTRY_POINT_ARGV_INDEX = 1;
-  const relativeEntryPoint = electron.remote.process.argv[ENTRY_POINT_ARGV_INDEX];
-
-  // On GNU/Linux, `pkexec` resolves relative paths
-  // from `/root`, therefore we pass an absolute path,
-  // in order to be on the safe side.
-  return path.join(CONSTANTS.PROJECT_ROOT, relativeEntryPoint);
-
-};

lib/child-writer/utils.js

@@ -1,45 +0,0 @@
-/*
- * Copyright 2016 resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict';
-
-const _ = require('lodash');
-
-/**
- * @summary Split stringified object lines
- * @function
- * @public
- *
- * @description
- * This function takes special care to not consider new lines
- * inside the object properties.
- *
- * @param {String} lines - lines
- * @returns {String[]} split lines
- *
- * @example
- * const result = utils.splitObjectLines('{"foo":"bar"}\n{"hello":"Hello\nWorld"}');
- * console.log(result);
- *
- * > [ '{"foo":"bar"}', '{"hello":"Hello\nWorld"}' ]
- */
-exports.splitObjectLines = (lines) => {
-  return _.chain(lines)
-    .split(/((?:[^\n"']|"[^"]*"|'[^']*')+)/)
-    .map(_.trim)
-    .reject(_.isEmpty)
-    .value();
-};

lib/child-writer/writer-proxy.js

@@ -1,184 +0,0 @@
-/*
- * Copyright 2016 resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict';
-
-const Bluebird = require('bluebird');
-const childProcess = require('child_process');
-const ipc = require('node-ipc');
-const _ = require('lodash');
-const os = require('os');
-const path = require('path');
-const utils = require('./utils');
-const EXIT_CODES = require('../shared/exit-codes');
-const robot = require('../shared/robot');
-const permissions = require('../shared/permissions');
-const packageJSON = require('../../package.json');
-
-// This script is in charge of spawning the writer process and
-// ensuring it has the necessary privileges. It might look a bit
-// complex at first sight, but this is only because elevation
-// modules don't work in a spawn/fork fashion.
-//
-// This script spawns the writer process and redirects its `stdout`
-// and `stderr` to the parent process using IPC communication,
-// taking care of the writer elevation as needed.
-
-/**
- * @summary The Etcher executable file path
- * @constant
- * @private
- * @type {String}
- */
-const executable = _.first(process.argv);
-
-/**
- * @summary The first index that represents an actual option argument
- * @constant
- * @private
- * @type {Number}
- *
- * @description
- * The first arguments are usually the program executable itself, etc.
- */
-const OPTIONS_INDEX_START = 2;
-
-/**
- * @summary The list of Etcher argument options
- * @constant
- * @private
- * @type {String[]}
- */
-const etcherArguments = process.argv.slice(OPTIONS_INDEX_START);
-
-return permissions.isElevated().then((elevated) => {
-
-  if (!elevated) {
-    console.log('Attempting to elevate');
-
-    const commandArguments = _.attempt(() => {
-      if (os.platform() === 'linux' && process.env.APPIMAGE && process.env.APPDIR) {
-
-        // Translate the current arguments to point to the AppImage
-        // Relative paths are resolved from `/tmp/.mount_XXXXXX/usr`
-        const translatedArguments = _.chain(process.argv)
-          .tail()
-          .invokeMap('replace', path.join(process.env.APPDIR, 'usr/'), '')
-          .value();
-
-        return _.concat([ process.env.APPIMAGE ], translatedArguments);
-      }
-
-      return process.argv;
-    });
-
-    // For debugging purposes
-    console.log(`Running: ${commandArguments.join(' ')}`);
-
-    return permissions.elevateCommand(commandArguments, {
-      applicationName: packageJSON.displayName,
-      environment: {
-        ELECTRON_RUN_AS_NODE: 1,
-        IPC_SERVER_ID: process.env.IPC_SERVER_ID,
-        IPC_CLIENT_ID: process.env.IPC_CLIENT_ID,
-
-        // This environment variable prevents the AppImages
-        // desktop integration script from presenting the
-        // "installation" dialog.
-        SKIP: 1
-
-      }
-    }).then((results) => {
-      if (results.cancelled) {
-        process.exit(EXIT_CODES.CANCELLED);
-      }
-    });
-  }
-
-  console.log('Re-spawning with elevation');
-
-  return new Bluebird((resolve, reject) => {
-    ipc.config.id = process.env.IPC_CLIENT_ID;
-    ipc.config.silent = true;
-
-    // > If set to 0, the client will NOT try to reconnect.
-    // See https://github.com/RIAEvangelist/node-ipc/
-    //
-    // The purpose behind this change is for this process
-    // to emit a "disconnect" event as soon as the GUI
-    // process is closed, so we can kill the CLI as well.
-    ipc.config.stopRetrying = 0;
-
-    ipc.connectTo(process.env.IPC_SERVER_ID, () => {
-      ipc.of[process.env.IPC_SERVER_ID].on('error', reject);
-      ipc.of[process.env.IPC_SERVER_ID].on('connect', () => {
-
-        const child = childProcess.spawn(executable, etcherArguments, {
-          env: {
-
-            // The CLI might call operating system utilities (like `diskutil`),
-            // so we must ensure the `PATH` is inherited.
-            PATH: process.env.PATH,
-
-            ELECTRON_RUN_AS_NODE: 1,
-            ETCHER_CLI_ROBOT: 1,
-
-            // Enable extra logging from mountutils
-            // See https://github.com/resin-io-modules/mountutils
-            MOUNTUTILS_DEBUG: 1
-
-          }
-        });
-
-        ipc.of[process.env.IPC_SERVER_ID].on('disconnect', _.bind(child.kill, child));
-        child.on('error', reject);
-        child.on('close', resolve);
-
-        /**
-         * @summary Emit an object message to the IPC server
-         * @function
-         * @private
-         *
-         * @param {Buffer} data - json message data
-         *
-         * @example
-         * emitMessage(Buffer.from(JSON.stringify({
-         *   foo: 'bar'
-         * })));
-         */
-        const emitMessage = (data) => {
-
-          // Output from stdout/stderr coming from the CLI might be buffered,
-          // causing several progress lines to come up at once as single message.
-          // Trying to parse multiple JSON objects separated by new lines will
-          // of course make the parser confused, causing errors later on.
-          _.each(utils.splitObjectLines(data.toString()), (object) => {
-            ipc.of[process.env.IPC_SERVER_ID].emit('message', object);
-          });
-
-        };
-
-        child.stdout.on('data', emitMessage);
-        child.stderr.on('data', emitMessage);
-      });
-    });
-  }).then((exitCode) => {
-    process.exit(exitCode);
-  });
-}).catch((error) => {
-  robot.printError(error);
-  process.exit(EXIT_CODES.GENERAL_ERROR);
-});

lib/cli/README.md

@@ -1,46 +0,0 @@
-Etcher CLI
-==========
-
-The Etcher CLI is a command line interface to the Etcher writer backend, and
-currently the only module in the "Etcher" umbrella that makes use of this
-backend directly.
-
-This module also has the task of unmounting the drives before and after
-flashing.
-
-Notice the Etcher CLI is not worried about elevation, and assumes it has enough
-permissions to continue, throwing an error otherwise. Consult the
-[`lib/child-writer`][child-writer] module to understand how elevation works on
-Etcher.
-
-The robot option
-----------------
-
-Setting the `ETCHER_CLI_ROBOT` environment variable allows other applications
-to easily consume the output of the Etcher CLI in real-time. When using the
-`ETCHER_CLI_ROBOT` option, the `--yes` option is implicit, therefore you need
-to manually specify `--drive`.
-
-When `ETCHER_CLI_ROBOT` is used, the program will output JSON lines containing
-the progress state and other useful information. For example:
-
-```
-$ sudo ETCHER_CLI_ROBOT=1 etcher image.iso --drive /dev/disk2
-{"command":"progress","data":{"type":"write","percentage":1,"eta":130,"speed":1703936}}
-...
-{"command":"progress","data":{"type":"check","percentage":100,"eta":0,"speed":17180514}}
-{"command":"done","data":{"sourceChecksum":"27c39a5d"}}
-```
-
-See documentation about the robot mode at [`lib/shared/robot`][robot].
-
-Exit codes
-----------
-
-The Etcher CLI uses certain exit codes to signal the result of the operation.
-These are documented in [`lib/shared/exit-codes.js`][exit-codes] and are also
-printed on the Etcher CLI help page.
-
-[exit-codes]: https://github.com/resin-io/etcher/blob/master/lib/shared/exit-codes.js
-[robot]: https://github.com/resin-io/etcher/tree/master/lib/shared/robot
-[child-writer]: https://github.com/resin-io/etcher/tree/master/lib/child-writer

lib/cli/etcher.js

@@ -1,147 +0,0 @@
-/*
- * Copyright 2016 resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict';
-
-const _ = require('lodash');
-const Bluebird = require('bluebird');
-const visuals = require('resin-cli-visuals');
-const form = require('resin-cli-form');
-const drivelist = Bluebird.promisifyAll(require('drivelist'));
-const writer = require('./writer');
-const utils = require('./utils');
-const options = require('./options');
-const robot = require('../shared/robot');
-const messages = require('../shared/messages');
-const EXIT_CODES = require('../shared/exit-codes');
-const errors = require('../shared/errors');
-const permissions = require('../shared/permissions');
-
-const ARGV_IMAGE_PATH_INDEX = 0;
-const imagePath = options._[ARGV_IMAGE_PATH_INDEX];
-
-permissions.isElevated().then((elevated) => {
-  if (!elevated) {
-    throw errors.createUserError({
-      title: messages.error.elevationRequired(),
-      description: 'This tool requires special permissions to write to external drives'
-    });
-  }
-
-  return form.run([
-    {
-      message: 'Select drive',
-      type: 'drive',
-      name: 'drive'
-    },
-    {
-      message: 'This will erase the selected drive. Are you sure?',
-      type: 'confirm',
-      name: 'yes',
-      default: false
-    }
-  ], {
-    override: {
-      drive: options.drive,
-
-      // If `options.yes` is `false`, pass `null`,
-      // otherwise the question will not be asked because
-      // `false` is a defined value.
-      yes: robot.isEnabled(process.env) || options.yes || null
-
-    }
-  });
-}).then((answers) => {
-  if (!answers.yes) {
-    throw errors.createUserError({
-      title: 'Aborted',
-      description: 'We can\'t proceed without confirmation'
-    });
-  }
-
-  const progressBars = {
-    write: new visuals.Progress('Flashing'),
-    check: new visuals.Progress('Validating')
-  };
-
-  return drivelist.listAsync().then((drives) => {
-    const selectedDrive = _.find(drives, {
-      device: answers.drive
-    });
-
-    if (!selectedDrive) {
-      throw errors.createUserError({
-        title: 'The selected drive was not found',
-        description: `We can't find ${answers.drive} in your system. Did you unplug the drive?`
-      });
-    }
-
-    return writer.writeImage(imagePath, selectedDrive, {
-      unmountOnSuccess: options.unmount,
-      validateWriteOnSuccess: options.check
-    }, (state) => {
-
-      if (robot.isEnabled(process.env)) {
-        robot.printMessage('progress', {
-          type: state.type,
-          percentage: Math.floor(state.percentage),
-          eta: state.eta,
-          speed: Math.floor(state.speed)
-        });
-      } else {
-        progressBars[state.type].update(state);
-      }
-
-    });
-  });
-}).then((results) => {
-
-  return Bluebird.try(() => {
-    if (robot.isEnabled(process.env)) {
-      return robot.printMessage('done', {
-        sourceChecksum: results.sourceChecksum
-      });
-    }
-
-    console.log(messages.info.flashComplete());
-
-    if (results.sourceChecksum) {
-      console.log(`Checksum: ${results.sourceChecksum}`);
-    }
-
-    return Bluebird.resolve();
-  }).then(() => {
-    process.exit(EXIT_CODES.SUCCESS);
-  });
-
-}).catch((error) => {
-
-  return Bluebird.try(() => {
-    if (robot.isEnabled(process.env)) {
-      return robot.printError(error);
-    }
-
-    utils.printError(error);
-    return Bluebird.resolve();
-  }).then(() => {
-    if (error.code === 'EVALIDATION') {
-      process.exit(EXIT_CODES.VALIDATION_ERROR);
-    }
-
-    process.exit(EXIT_CODES.GENERAL_ERROR);
-  });
-
-});

lib/cli/options.js

@@ -1,171 +0,0 @@
-/*
- * Copyright 2016 resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict';
-
-const _ = require('lodash');
-const fs = require('fs');
-const yargs = require('yargs');
-const utils = require('./utils');
-const robot = require('../shared/robot');
-const EXIT_CODES = require('../shared/exit-codes');
-const errors = require('../shared/errors');
-const packageJSON = require('../../package.json');
-
-/**
- * @summary The minimum required number of CLI arguments
- * @constant
- * @private
- * @type {Number}
- */
-const MINIMUM_NUMBER_OF_ARGUMENTS = 1;
-
-/**
- * @summary The index of the image argument
- * @constant
- * @private
- * @type {Number}
- */
-const IMAGE_PATH_ARGV_INDEX = 0;
-
-/**
- * @summary The first index that represents an actual option argument
- * @constant
- * @private
- * @type {Number}
- *
- * @description
- * The first arguments are usually the program executable itself, etc.
- */
-const OPTIONS_INDEX_START = 2;
-
-/**
- * @summary Parsed CLI options and arguments
- * @type {Object}
- * @public
- */
-module.exports = yargs
-
-  // Don't wrap at all
-  .wrap(null)
-
-  .demand(MINIMUM_NUMBER_OF_ARGUMENTS, 'Missing image')
-
-  // Usage help
-  .usage('Usage: $0 [options] <image>')
-  .epilogue([
-    'Exit codes:',
-    _.map(EXIT_CODES, (value, key) => {
-      const reason = _.map(_.split(key, '_'), _.capitalize).join(' ');
-      return `  ${value} - ${reason}`;
-    }).join('\n'),
-    '',
-    'If you need help, don\'t hesitate in contacting us at:',
-    '',
-    '  GitHub: https://github.com/resin-io/etcher/issues/new',
-    '  Gitter: https://gitter.im/resin-io/etcher'
-  ].join('\n'))
-
-  // Examples
-  .example('$0 raspberry-pi.img')
-  .example('$0 --no-check raspberry-pi.img')
-  .example('$0 -d /dev/disk2 ubuntu.iso')
-  .example('$0 -d /dev/disk2 -y rpi.img')
-
-  // Help option
-  .help()
-
-  // Version option
-  .version(_.constant(packageJSON.version))
-
-  // Error reporting
-  .fail((message, error) => {
-    const errorObject = error || errors.createUserError({
-      title: message
-    });
-
-    if (robot.isEnabled(process.env)) {
-      robot.printError(errorObject);
-    } else {
-      yargs.showHelp();
-      utils.printError(errorObject);
-    }
-
-    process.exit(EXIT_CODES.GENERAL_ERROR);
-  })
-
-  // Assert that image exists
-  .check((argv) => {
-    const imagePath = argv._[IMAGE_PATH_ARGV_INDEX];
-
-    try {
-      fs.accessSync(imagePath);
-    } catch (error) {
-      throw errors.createUserError({
-        title: 'Unable to access file',
-        description: `The image ${imagePath} is not accessible`
-      });
-    }
-
-    return true;
-  })
-
-  .check((argv) => {
-    if (robot.isEnabled(process.env) && !argv.drive) {
-      throw errors.createUserError({
-        title: 'Missing drive',
-        description: 'You need to explicitly pass a drive when enabling robot mode'
-      });
-    }
-
-    return true;
-  })
-
-  .options({
-    help: {
-      describe: 'show help',
-      boolean: true,
-      alias: 'h'
-    },
-    version: {
-      describe: 'show version number',
-      boolean: true,
-      alias: 'v'
-    },
-    drive: {
-      describe: 'drive',
-      string: true,
-      alias: 'd'
-    },
-    check: {
-      describe: 'validate write',
-      boolean: true,
-      alias: 'c',
-      default: true
-    },
-    yes: {
-      describe: 'confirm non-interactively',
-      boolean: true,
-      alias: 'y'
-    },
-    unmount: {
-      describe: 'unmount on success',
-      boolean: true,
-      alias: 'u',
-      default: true
-    }
-  })
-  .parse(process.argv.slice(OPTIONS_INDEX_START));

lib/cli/utils.js

@@ -1,47 +0,0 @@
-/*
- * Copyright 2016 resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict';
-
-const chalk = require('chalk');
-const errors = require('../shared/errors');
-
-/**
- * @summary Print an error to stderr
- * @function
- * @public
- *
- * @param {Error} error - error
- *
- * @example
- * utils.printError(new Error('Oops!'));
- */
-exports.printError = (error) => {
-  const title = errors.getTitle(error);
-  const description = errors.getDescription(error, {
-    userFriendlyDescriptionsOnly: true
-  });
-
-  console.error(chalk.red(title));
-
-  if (description) {
-    console.error(`\n${chalk.red(description)}`);
-  }
-
-  if (process.env.ETCHER_CLI_DEBUG && error.stack) {
-    console.error(`\n${chalk.red(error.stack)}`);
-  }
-};

lib/cli/writer.js

@@ -1,129 +0,0 @@
-/*
- * Copyright 2016 resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict';
-
-const imageWrite = require('etcher-image-write');
-const Bluebird = require('bluebird');
-const fs = Bluebird.promisifyAll(require('fs'));
-const mountutils = Bluebird.promisifyAll(require('mountutils'));
-const os = require('os');
-const imageStream = require('../image-stream');
-const errors = require('../shared/errors');
-const constraints = require('../shared/drive-constraints');
-
-/**
- * @summary Timeout, in milliseconds, to wait before unmounting on success
- * @constant
- * @type {Number}
- */
-const UNMOUNT_ON_SUCCESS_TIMEOUT_MS = 2000;
-
-/**
- * @summary Write an image to a disk drive
- * @function
- * @public
- *
- * @description
- * See https://github.com/resin-io-modules/etcher-image-write for information
- * about the `state` object passed to `onProgress` callback.
- *
- * @param {String} imagePath - path to image
- * @param {Object} drive - drive
- * @param {Object} options - options
- * @param {Boolean} [options.unmountOnSuccess=false] - unmount on success
- * @param {Boolean} [options.validateWriteOnSuccess=false] - validate write on success
- * @param {Function} onProgress - on progress callback (state)
- *
- * @fulfil {Boolean} - whether the operation was successful
- * @returns {Promise}
- *
- * @example
- * writer.writeImage('path/to/image.img', {
- *   device: '/dev/disk2'
- * }, {
- *   unmountOnSuccess: true,
- *   validateWriteOnSuccess: true
- * }, (state) => {
- *   console.log(state.percentage);
- * }).then(() => {
- *   console.log('Done!');
- * });
- */
-exports.writeImage = (imagePath, drive, options, onProgress) => {
-  return Bluebird.try(() => {
-
-    // Unmounting a drive in Windows means we can't write to it anymore
-    if (os.platform() === 'win32') {
-      return Bluebird.resolve();
-    }
-
-    return mountutils.unmountDiskAsync(drive.device);
-  }).then(() => {
-    return fs.openAsync(drive.raw, 'rs+');
-  }).then((driveFileDescriptor) => {
-    return imageStream.getFromFilePath(imagePath).then((image) => {
-      if (!constraints.isDriveLargeEnough(drive, image)) {
-        throw errors.createUserError({
-          title: 'The image you selected is too big for this drive',
-          description: 'Please connect a bigger drive and try again'
-        });
-      }
-
-      return imageWrite.write({
-        fd: driveFileDescriptor,
-        device: drive.raw,
-        size: drive.size
-      }, {
-        stream: image.stream,
-        size: image.size.original
-      }, {
-        check: options.validateWriteOnSuccess,
-        transform: image.transform,
-        bmap: image.bmap,
-        bytesToZeroOutFromTheBeginning: image.bytesToZeroOutFromTheBeginning
-      });
-    }).then((writer) => {
-      return new Bluebird((resolve, reject) => {
-        writer.on('progress', onProgress);
-        writer.on('error', reject);
-        writer.on('done', resolve);
-      });
-    }).tap(() => {
-
-      // Make sure the device stream file descriptor is closed
-      // before returning control the the caller. Not closing
-      // the file descriptor (and waiting for it) results in
-      // `EBUSY` errors when attempting to unmount the drive
-      // right afterwards in some Windows 7 systems.
-      return fs.closeAsync(driveFileDescriptor).then(() => {
-
-        if (!options.unmountOnSuccess) {
-          return Bluebird.resolve();
-        }
-
-        // Closing a file descriptor on a drive containing mountable
-        // partitions causes macOS to mount the drive. If we try to
-        // unmount to quickly, then the drive might get re-mounted
-        // right afterwards.
-        return Bluebird.delay(UNMOUNT_ON_SUCCESS_TIMEOUT_MS)
-          .return(drive.device)
-          .then(mountutils.unmountDiskAsync);
-
-      });
-    });
-  });
-};

lib/gui/app.js

@@ -1,338 +0,0 @@
-/*
- * Copyright 2016 resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * @module Etcher
- */
-
-'use strict';
-
-/* eslint-disable no-var */
-
-var angular = require('angular');
-
-/* eslint-enable no-var */
-
-const electron = require('electron');
-const Bluebird = require('bluebird');
-const semver = require('semver');
-const EXIT_CODES = require('../shared/exit-codes');
-const messages = require('../shared/messages');
-const s3Packages = require('../shared/s3-packages');
-const release = require('../shared/release');
-const store = require('../shared/store');
-const packageJSON = require('../../package.json');
-const flashState = require('../shared/models/flash-state');
-const settings = require('./models/settings');
-const windowProgress = require('./os/window-progress');
-const analytics = require('./modules/analytics');
-const updateNotifier = require('./components/update-notifier');
-const availableDrives = require('../shared/models/available-drives');
-const selectionState = require('../shared/models/selection-state');
-const driveScanner = require('./modules/drive-scanner');
-const osDialog = require('./os/dialog');
-const exceptionReporter = require('./modules/exception-reporter');
-
-const app = angular.module('Etcher', [
-  require('angular-ui-router'),
-  require('angular-ui-bootstrap'),
-  require('angular-if-state'),
-
-  // Components
-  require('./components/svg-icon'),
-  require('./components/warning-modal/warning-modal'),
-  require('./components/safe-webview'),
-
-  // Pages
-  require('./pages/main/main'),
-  require('./pages/finish/finish'),
-  require('./pages/settings/settings'),
-
-  // OS
-  require('./os/open-external/open-external'),
-  require('./os/dropzone/dropzone'),
-
-  // Utils
-  require('./utils/manifest-bind/manifest-bind')
-]);
-
-app.run(() => {
-  console.log([
-    ' _____ _       _',
-    '|  ___| |     | |',
-    '| |__ | |_ ___| |__   ___ _ __',
-    '|  __|| __/ __| \'_ \\ / _ \\ \'__|',
-    '| |___| || (__| | | |  __/ |',
-    '\\____/ \\__\\___|_| |_|\\___|_|',
-    '',
-    'Interested in joining the Etcher team?',
-    'Drop us a line at join+etcher@resin.io',
-    '',
-    `Version = ${packageJSON.version}, Type = ${packageJSON.packageType}`
-  ].join('\n'));
-});
-
-app.run(() => {
-  const currentVersion = packageJSON.version;
-
-  analytics.logEvent('Application start', {
-    packageType: packageJSON.packageType,
-    version: currentVersion
-  });
-
-  settings.load();
-
-  const shouldCheckForUpdates = updateNotifier.shouldCheckForUpdates({
-    currentVersion,
-    lastSleptUpdateNotifier: settings.get('lastSleptUpdateNotifier'),
-    lastSleptUpdateNotifierVersion: settings.get('lastSleptUpdateNotifierVersion')
-  });
-
-  const currentReleaseType = release.getReleaseType(currentVersion);
-  const updatesEnabled = settings.get('updatesEnabled');
-
-  if (!shouldCheckForUpdates || !updatesEnabled) {
-    analytics.logEvent('Not checking for updates', {
-      shouldCheckForUpdates,
-      updatesEnabled,
-      releaseType: currentReleaseType
-    });
-    return;
-  }
-
-  const updateSemverRange = packageJSON.updates.semverRange;
-  const includeUnstableChannel = settings.get('includeUnstableUpdateChannel');
-
-  analytics.logEvent('Checking for updates', {
-    currentVersion,
-    releaseType: currentReleaseType,
-    updateSemverRange,
-    includeUnstableChannel
-  });
-
-  s3Packages.getLatestVersion(currentReleaseType, {
-    range: updateSemverRange,
-    includeUnstableChannel
-  }).then((latestVersion) => {
-    if (semver.gte(currentVersion, latestVersion || '0.0.0')) {
-      analytics.logEvent('Update notification skipped', {
-        reason: 'Latest version'
-      });
-      return Bluebird.resolve();
-    }
-
-    // In case the internet connection is not good and checking the
-    // latest published version takes too long, only show notify
-    // the user about the new version if he didn't start the flash
-    // process (e.g: selected an image), otherwise such interruption
-    // might be annoying.
-    if (selectionState.hasImage()) {
-      analytics.logEvent('Update notification skipped', {
-        reason: 'Image selected'
-      });
-      return Bluebird.resolve();
-    }
-
-    analytics.logEvent('Notifying update', {
-      latestVersion
-    });
-
-    return updateNotifier.notify(latestVersion, {
-      allowSleepUpdateCheck: currentReleaseType === release.RELEASE_TYPE.PRODUCTION
-    });
-  }).catch(exceptionReporter.report);
-});
-
-app.run(() => {
-  store.subscribe(() => {
-    const currentFlashState = flashState.getFlashState();
-
-    // There is usually a short time period between the `isFlashing()`
-    // property being set, and the flashing actually starting, which
-    // might cause some non-sense flashing state logs including
-    // `undefined` values.
-    //
-    // We use the presence of `.eta` to determine that the actual
-    // writing started.
-    if (!flashState.isFlashing() || !currentFlashState.eta) {
-      return;
-    }
-
-    analytics.logDebug([
-      `Progress (${currentFlashState.type}):`,
-      `${currentFlashState.percentage}% at ${currentFlashState.speed} MB/s`,
-      `(eta ${currentFlashState.eta}s)`
-    ].join(' '));
-
-    windowProgress.set(currentFlashState.percentage);
-  });
-});
-
-app.run(($timeout) => {
-  driveScanner.on('drives', (drives) => {
-
-    // Safely trigger a digest cycle.
-    // In some cases, AngularJS doesn't acknowledge that the
-    // available drives list has changed, and incorrectly
-    // keeps asking the user to "Connect a drive".
-    $timeout(() => {
-      availableDrives.setDrives(drives);
-    });
-  });
-
-  driveScanner.on('error', (error) => {
-
-    // Stop the drive scanning loop in case of errors,
-    // otherwise we risk presenting the same error over
-    // and over again to the user, while also heavily
-    // spamming our error reporting service.
-    driveScanner.stop();
-
-    return exceptionReporter.report(error);
-  });
-
-  driveScanner.start();
-});
-
-app.run(($window) => {
-  let popupExists = false;
-
-  $window.addEventListener('beforeunload', (event) => {
-    if (!flashState.isFlashing() || popupExists) {
-      analytics.logEvent('Close application', {
-        isFlashing: flashState.isFlashing()
-      });
-      return;
-    }
-
-    // Don't close window while flashing
-    event.returnValue = false;
-
-    // Don't open any more popups
-    popupExists = true;
-
-    analytics.logEvent('Close attempt while flashing');
-
-    osDialog.showWarning({
-      confirmationLabel: 'Yes, quit',
-      rejectionLabel: 'Cancel',
-      title: 'Are you sure you want to close Etcher?',
-      description: messages.warning.exitWhileFlashing()
-    }).then((confirmed) => {
-      if (confirmed) {
-        analytics.logEvent('Close confirmed while flashing', {
-          uuid: flashState.getFlashUuid()
-        });
-
-        // This circumvents the 'beforeunload' event unlike
-        // electron.remote.app.quit() which does not.
-        electron.remote.process.exit(EXIT_CODES.SUCCESS);
-
-      }
-
-      analytics.logEvent('Close rejected while flashing');
-      popupExists = false;
-    }).catch(exceptionReporter.report);
-  });
-});
-
-app.run(($rootScope) => {
-  $rootScope.$on('$stateChangeSuccess', (event, toState, toParams, fromState) => {
-
-    // Ignore first navigation
-    if (!fromState.name) {
-      return;
-    }
-
-    analytics.logEvent('Navigate', {
-      to: toState.name,
-      from: fromState.name
-    });
-  });
-});
-
-app.config(($urlRouterProvider) => {
-  $urlRouterProvider.otherwise('/main');
-});
-
-app.config(($provide) => {
-  $provide.decorator('$exceptionHandler', ($delegate) => {
-    return (exception, cause) => {
-      exceptionReporter.report(exception);
-      $delegate(exception, cause);
-    };
-  });
-});
-
-app.controller('HeaderController', function(OSOpenExternalService) {
-
-  /**
-   * @summary Open help page
-   * @function
-   * @public
-   *
-   * @description
-   * This application will open either the image's support url, declared
-   * in the archive `manifest.json`, or the default Etcher help page.
-   *
-   * @example
-   * HeaderController.openHelpPage();
-   */
-  this.openHelpPage = () => {
-    const DEFAULT_SUPPORT_URL = 'https://github.com/resin-io/etcher/blob/master/SUPPORT.md';
-    const supportUrl = selectionState.getImageSupportUrl() || DEFAULT_SUPPORT_URL;
-    OSOpenExternalService.open(supportUrl);
-  };
-
-});
-
-app.controller('StateController', function($rootScope, $scope) {
-  const unregisterStateChange = $rootScope.$on('$stateChangeSuccess', (event, toState, toParams, fromState) => {
-    this.previousName = fromState.name;
-    this.currentName = toState.name;
-  });
-
-  $scope.$on('$destroy', unregisterStateChange);
-
-  /**
-   * @summary Get the previous state name
-   * @function
-   * @public
-   *
-   * @returns {String} previous state name
-   *
-   * @example
-   * if (StateController.previousName === 'main') {
-   *   console.log('We left the main screen!');
-   * }
-   */
-  this.previousName = null;
-
-  /**
-   * @summary Get the current state name
-   * @function
-   * @public
-   *
-   * @returns {String} current state name
-   *
-   * @example
-   * if (StateController.currentName === 'main') {
-   *   console.log('We are on the main screen!');
-   * }
-   */
-  this.currentName = null;
-
-});

lib/gui/app/app.ts

@@ -0,0 +1,363 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as electron from 'electron';
+import * as sdk from 'etcher-sdk';
+import * as _ from 'lodash';
+import outdent from 'outdent';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { v4 as uuidV4 } from 'uuid';
+
+import * as packageJSON from '../../../package.json';
+import { DrivelistDrive, isSourceDrive } from '../../shared/drive-constraints';
+import * as EXIT_CODES from '../../shared/exit-codes';
+import * as messages from '../../shared/messages';
+import * as availableDrives from './models/available-drives';
+import * as flashState from './models/flash-state';
+import { deselectImage, getImage } from './models/selection-state';
+import * as settings from './models/settings';
+import { Actions, observe, store } from './models/store';
+import * as analytics from './modules/analytics';
+import { scanner as driveScanner } from './modules/drive-scanner';
+import * as exceptionReporter from './modules/exception-reporter';
+import * as osDialog from './os/dialog';
+import * as windowProgress from './os/window-progress';
+import MainPage from './pages/main/MainPage';
+import './css/main.css';
+
+window.addEventListener(
+	'unhandledrejection',
+	(event: PromiseRejectionEvent | any) => {
+		// Promise: event.reason
+		// Anything else: event
+		const error = event.reason || event;
+		analytics.logException(error);
+		event.preventDefault();
+	},
+);
+
+// Set application session UUID
+store.dispatch({
+	type: Actions.SET_APPLICATION_SESSION_UUID,
+	data: uuidV4(),
+});
+
+// Set first flashing workflow UUID
+store.dispatch({
+	type: Actions.SET_FLASHING_WORKFLOW_UUID,
+	data: uuidV4(),
+});
+
+const applicationSessionUuid = store.getState().toJS().applicationSessionUuid;
+const flashingWorkflowUuid = store.getState().toJS().flashingWorkflowUuid;
+
+console.log(outdent`
+	${outdent}
+	 _____ _       _
+	|  ___| |     | |
+	| |__ | |_ ___| |__   ___ _ __
+	|  __|| __/ __| '_ \\ / _ \\ '__|
+	| |___| || (__| | | |  __/ |
+	\\____/ \\__\\___|_| |_|\\___|_|
+
+	Interested in joining the Etcher team?
+	Drop us a line at join+etcher@balena.io
+
+	Version = ${packageJSON.version}, Type = ${packageJSON.packageType}
+`);
+
+const currentVersion = packageJSON.version;
+
+analytics.logEvent('Application start', {
+	packageType: packageJSON.packageType,
+	version: currentVersion,
+});
+
+const debouncedLog = _.debounce(console.log, 1000, { maxWait: 1000 });
+
+function pluralize(word: string, quantity: number) {
+	return `${quantity} ${word}${quantity === 1 ? '' : 's'}`;
+}
+
+observe(() => {
+	if (!flashState.isFlashing()) {
+		return;
+	}
+	const currentFlashState = flashState.getFlashState();
+	windowProgress.set(currentFlashState);
+
+	let eta = '';
+	if (currentFlashState.eta !== undefined) {
+		eta = `eta in ${currentFlashState.eta.toFixed(0)}s`;
+	}
+	let active = '';
+	if (currentFlashState.type !== 'decompressing') {
+		active = pluralize('device', currentFlashState.active);
+	}
+	// NOTE: There is usually a short time period between the `isFlashing()`
+	// property being set, and the flashing actually starting, which
+	// might cause some non-sense flashing state logs including
+	// `undefined` values.
+	debouncedLog(outdent({ newline: ' ' })`
+		${_.capitalize(currentFlashState.type)}
+		${active},
+		${currentFlashState.percentage}%
+		at
+		${(currentFlashState.speed || 0).toFixed(2)}
+		MB/s
+		(total ${(currentFlashState.speed * currentFlashState.active).toFixed(2)} MB/s)
+		${eta}
+		with
+		${pluralize('failed device', currentFlashState.failed)}
+	`);
+});
+
+/**
+ * @summary The radix used by USB ID numbers
+ */
+const USB_ID_RADIX = 16;
+
+/**
+ * @summary The expected length of a USB ID number
+ */
+const USB_ID_LENGTH = 4;
+
+/**
+ * @summary Convert a USB id (e.g. product/vendor) to a string
+ *
+ * @example
+ * console.log(usbIdToString(2652))
+ * > '0x0a5c'
+ */
+function usbIdToString(id: number): string {
+	return `0x${_.padStart(id.toString(USB_ID_RADIX), USB_ID_LENGTH, '0')}`;
+}
+
+/**
+ * @summary Product ID of BCM2708
+ */
+const USB_PRODUCT_ID_BCM2708_BOOT = 0x2763;
+
+/**
+ * @summary Product ID of BCM2710
+ */
+const USB_PRODUCT_ID_BCM2710_BOOT = 0x2764;
+
+/**
+ * @summary Compute module descriptions
+ */
+const COMPUTE_MODULE_DESCRIPTIONS: _.Dictionary<string> = {
+	[USB_PRODUCT_ID_BCM2708_BOOT]: 'Compute Module 1',
+	[USB_PRODUCT_ID_BCM2710_BOOT]: 'Compute Module 3',
+};
+
+async function driveIsAllowed(drive: {
+	devicePath: string;
+	device: string;
+	raw: string;
+}) {
+	const driveBlacklist = (await settings.get('driveBlacklist')) || [];
+	return !(
+		driveBlacklist.includes(drive.devicePath) ||
+		driveBlacklist.includes(drive.device) ||
+		driveBlacklist.includes(drive.raw)
+	);
+}
+
+type Drive =
+	| sdk.sourceDestination.BlockDevice
+	| sdk.sourceDestination.UsbbootDrive
+	| sdk.sourceDestination.DriverlessDevice;
+
+function prepareDrive(drive: Drive) {
+	if (drive instanceof sdk.sourceDestination.BlockDevice) {
+		// @ts-ignore (BlockDevice.drive is private)
+		return drive.drive;
+	} else if (drive instanceof sdk.sourceDestination.UsbbootDrive) {
+		// This is a workaround etcher expecting a device string and a size
+		// @ts-ignore
+		drive.device = drive.usbDevice.portId;
+		drive.size = null;
+		// @ts-ignore
+		drive.progress = 0;
+		drive.disabled = true;
+		drive.on('progress', (progress) => {
+			updateDriveProgress(drive, progress);
+		});
+		return drive;
+	} else if (drive instanceof sdk.sourceDestination.DriverlessDevice) {
+		const description =
+			COMPUTE_MODULE_DESCRIPTIONS[
+				drive.deviceDescriptor.idProduct.toString()
+			] || 'Compute Module';
+		return {
+			device: `${usbIdToString(
+				drive.deviceDescriptor.idVendor,
+			)}:${usbIdToString(drive.deviceDescriptor.idProduct)}`,
+			displayName: 'Missing drivers',
+			description,
+			mountpoints: [],
+			isReadOnly: false,
+			isSystem: false,
+			disabled: true,
+			icon: 'warning',
+			size: null,
+			link: 'https://www.raspberrypi.com/documentation/computers/compute-module.html#flashing-the-compute-module-emmc',
+			linkCTA: 'Install',
+			linkTitle: 'Install missing drivers',
+			linkMessage: outdent`
+				Would you like to download the necessary drivers from the Raspberry Pi Foundation?
+				This will open your browser.
+
+
+				Once opened, download and run the installer from the "Windows Installer" section to install the drivers
+			`,
+		};
+	}
+}
+
+function setDrives(drives: _.Dictionary<DrivelistDrive>) {
+	availableDrives.setDrives(_.values(drives));
+}
+
+function getDrives() {
+	return _.keyBy(availableDrives.getDrives(), 'device');
+}
+
+async function addDrive(drive: Drive) {
+	const preparedDrive = prepareDrive(drive);
+	if (!(await driveIsAllowed(preparedDrive))) {
+		return;
+	}
+	const drives = getDrives();
+	drives[preparedDrive.device] = preparedDrive;
+	setDrives(drives);
+}
+
+function removeDrive(drive: Drive) {
+	if (
+		drive instanceof sdk.sourceDestination.BlockDevice &&
+		// @ts-ignore BlockDevice.drive is private
+		isSourceDrive(drive.drive, getImage())
+	) {
+		// Deselect the image if it was on the drive that was removed.
+		// This will also deselect the image if the drive mountpoints change.
+		deselectImage();
+	}
+	const preparedDrive = prepareDrive(drive);
+	const drives = getDrives();
+	delete drives[preparedDrive.device];
+	setDrives(drives);
+}
+
+function updateDriveProgress(
+	drive: sdk.sourceDestination.UsbbootDrive,
+	progress: number,
+) {
+	const drives = getDrives();
+	// @ts-ignore
+	const driveInMap = drives[drive.device];
+	if (driveInMap) {
+		// @ts-ignore
+		drives[drive.device] = { ...driveInMap, progress };
+		setDrives(drives);
+	}
+}
+
+driveScanner.on('attach', addDrive);
+driveScanner.on('detach', removeDrive);
+
+driveScanner.on('error', (error) => {
+	// Stop the drive scanning loop in case of errors,
+	// otherwise we risk presenting the same error over
+	// and over again to the user, while also heavily
+	// spamming our error reporting service.
+	driveScanner.stop();
+
+	return exceptionReporter.report(error);
+});
+
+driveScanner.start();
+
+let popupExists = false;
+
+window.addEventListener('beforeunload', async (event) => {
+	if (!flashState.isFlashing() || popupExists) {
+		analytics.logEvent('Close application', {
+			isFlashing: flashState.isFlashing(),
+		});
+		return;
+	}
+
+	// Don't close window while flashing
+	event.returnValue = false;
+
+	// Don't open any more popups
+	popupExists = true;
+
+	analytics.logEvent('Close attempt while flashing');
+
+	try {
+		const confirmed = await osDialog.showWarning({
+			confirmationLabel: 'Yes, quit',
+			rejectionLabel: 'Cancel',
+			title: 'Are you sure you want to close Etcher?',
+			description: messages.warning.exitWhileFlashing(),
+		});
+		if (confirmed) {
+			analytics.logEvent('Close confirmed while flashing', {
+				flashInstanceUuid: flashState.getFlashUuid(),
+			});
+
+			// This circumvents the 'beforeunload' event unlike
+			// electron.remote.app.quit() which does not.
+			electron.remote.process.exit(EXIT_CODES.SUCCESS);
+		}
+
+		analytics.logEvent('Close rejected while flashing', {
+			applicationSessionUuid,
+			flashingWorkflowUuid,
+		});
+		popupExists = false;
+	} catch (error: any) {
+		exceptionReporter.report(error);
+	}
+});
+
+export async function main() {
+	try {
+		const { init: ledsInit } = require('./models/leds');
+		await ledsInit();
+	} catch (error: any) {
+		exceptionReporter.report(error);
+	}
+
+	ReactDOM.render(
+		React.createElement(MainPage),
+		document.getElementById('main'),
+		// callback to set the correct zoomFactor for webviews as well
+		async () => {
+			const fullscreen = await settings.get('fullscreen');
+			const width = fullscreen ? window.screen.width : window.outerWidth;
+			try {
+				electron.webFrame.setZoomFactor(width / settings.DEFAULT_WIDTH);
+			} catch (err) {
+				// noop
+			}
+		},
+	);
+}

lib/gui/app/components/drive-selector/drive-selector.tsx

@@ -0,0 +1,556 @@
+/*
+ * Copyright 2019 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
+import ChevronDownSvg from '@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg';
+import * as sourceDestination from 'etcher-sdk/build/source-destination/';
+import * as React from 'react';
+import { Flex, ModalProps, Txt, Badge, Link, TableColumn } from 'rendition';
+import styled from 'styled-components';
+
+import {
+	getDriveImageCompatibilityStatuses,
+	isDriveValid,
+	DriveStatus,
+	DrivelistDrive,
+	isDriveSizeLarge,
+} from '../../../../shared/drive-constraints';
+import { compatibility, warning } from '../../../../shared/messages';
+import * as prettyBytes from 'pretty-bytes';
+import { getDrives, hasAvailableDrives } from '../../models/available-drives';
+import { getImage, isDriveSelected } from '../../models/selection-state';
+import { store } from '../../models/store';
+import { logEvent, logException } from '../../modules/analytics';
+import { open as openExternal } from '../../os/open-external/services/open-external';
+import {
+	Alert,
+	GenericTableProps,
+	Modal,
+	Table,
+} from '../../styled-components';
+
+import { SourceMetadata } from '../source-selector/source-selector';
+import { middleEllipsis } from '../../utils/middle-ellipsis';
+
+interface UsbbootDrive extends sourceDestination.UsbbootDrive {
+	progress: number;
+}
+
+interface DriverlessDrive {
+	displayName: string; // added in app.ts
+	description: string;
+	link: string;
+	linkTitle: string;
+	linkMessage: string;
+	linkCTA: string;
+}
+
+type Drive = DrivelistDrive | DriverlessDrive | UsbbootDrive;
+
+function isUsbbootDrive(drive: Drive): drive is UsbbootDrive {
+	return (drive as UsbbootDrive).progress !== undefined;
+}
+
+function isDriverlessDrive(drive: Drive): drive is DriverlessDrive {
+	return (drive as DriverlessDrive).link !== undefined;
+}
+
+function isDrivelistDrive(drive: Drive): drive is DrivelistDrive {
+	return typeof (drive as DrivelistDrive).size === 'number';
+}
+
+const DrivesTable = styled((props: GenericTableProps<Drive>) => (
+	<Table<Drive> {...props} />
+))`
+	[data-display='table-head'],
+	[data-display='table-body'] {
+		> [data-display='table-row'] > [data-display='table-cell'] {
+			&:nth-child(2) {
+				width: 32%;
+			}
+
+			&:nth-child(3) {
+				width: 15%;
+			}
+
+			&:nth-child(4) {
+				width: 15%;
+			}
+
+			&:nth-child(5) {
+				width: 32%;
+			}
+		}
+	}
+`;
+
+function badgeShadeFromStatus(status: string) {
+	switch (status) {
+		case compatibility.containsImage():
+			return 16;
+		case compatibility.system():
+		case compatibility.tooSmall():
+			return 5;
+		default:
+			return 14;
+	}
+}
+
+const InitProgress = styled(
+	({
+		value,
+		...props
+	}: {
+		value: number;
+		props?: React.ProgressHTMLAttributes<Element>;
+	}) => {
+		return <progress max="100" value={value} {...props} />;
+	},
+)`
+	/* Reset the default appearance */
+	appearance: none;
+
+	::-webkit-progress-bar {
+		width: 130px;
+		height: 4px;
+		background-color: #dde1f0;
+		border-radius: 14px;
+	}
+
+	::-webkit-progress-value {
+		background-color: #1496e1;
+		border-radius: 14px;
+	}
+`;
+
+export interface DriveSelectorProps
+	extends Omit<ModalProps, 'done' | 'cancel' | 'onSelect'> {
+	write: boolean;
+	multipleSelection: boolean;
+	showWarnings?: boolean;
+	cancel: (drives: DrivelistDrive[]) => void;
+	done: (drives: DrivelistDrive[]) => void;
+	titleLabel: string;
+	emptyListLabel: string;
+	emptyListIcon: JSX.Element;
+	selectedList?: DrivelistDrive[];
+	updateSelectedList?: () => DrivelistDrive[];
+	onSelect?: (drive: DrivelistDrive) => void;
+}
+
+interface DriveSelectorState {
+	drives: Drive[];
+	image?: SourceMetadata;
+	missingDriversModal: { drive?: DriverlessDrive };
+	selectedList: DrivelistDrive[];
+	showSystemDrives: boolean;
+}
+
+function isSystemDrive(drive: Drive) {
+	return isDrivelistDrive(drive) && drive.isSystem;
+}
+
+export class DriveSelector extends React.Component<
+	DriveSelectorProps,
+	DriveSelectorState
+> {
+	private unsubscribe: (() => void) | undefined;
+	tableColumns: Array<TableColumn<Drive>>;
+	originalList: DrivelistDrive[];
+
+	constructor(props: DriveSelectorProps) {
+		super(props);
+
+		const defaultMissingDriversModalState: { drive?: DriverlessDrive } = {};
+		const selectedList = this.props.selectedList || [];
+		this.originalList = [...(this.props.selectedList || [])];
+
+		this.state = {
+			drives: getDrives(),
+			image: getImage(),
+			missingDriversModal: defaultMissingDriversModalState,
+			selectedList,
+			showSystemDrives: false,
+		};
+
+		this.tableColumns = [
+			{
+				field: 'description',
+				label: 'Name',
+				render: (description: string, drive: Drive) => {
+					if (isDrivelistDrive(drive)) {
+						const isLargeDrive = isDriveSizeLarge(drive);
+						const hasWarnings =
+							this.props.showWarnings && (isLargeDrive || drive.isSystem);
+						return (
+							<Flex alignItems="center">
+								{hasWarnings && (
+									<ExclamationTriangleSvg
+										height="1em"
+										fill={drive.isSystem ? '#fca321' : '#8f9297'}
+									/>
+								)}
+								<Txt ml={(hasWarnings && 8) || 0}>
+									{middleEllipsis(description, 32)}
+								</Txt>
+							</Flex>
+						);
+					}
+					return <Txt>{description}</Txt>;
+				},
+			},
+			{
+				field: 'description',
+				key: 'size',
+				label: 'Size',
+				render: (_description: string, drive: Drive) => {
+					if (isDrivelistDrive(drive) && drive.size !== null) {
+						return prettyBytes(drive.size);
+					}
+				},
+			},
+			{
+				field: 'description',
+				key: 'link',
+				label: 'Location',
+				render: (_description: string, drive: Drive) => {
+					return (
+						<Txt>
+							{drive.displayName}
+							{isDriverlessDrive(drive) && (
+								<>
+									{' '}
+									-{' '}
+									<b>
+										<a onClick={() => this.installMissingDrivers(drive)}>
+											{drive.linkCTA}
+										</a>
+									</b>
+								</>
+							)}
+						</Txt>
+					);
+				},
+			},
+			{
+				field: 'description',
+				key: 'extra',
+				// We use an empty React fragment otherwise it uses the field name as label
+				label: <></>,
+				render: (_description: string, drive: Drive) => {
+					if (isUsbbootDrive(drive)) {
+						return this.renderProgress(drive.progress);
+					} else if (isDrivelistDrive(drive)) {
+						return this.renderStatuses(drive);
+					}
+				},
+			},
+		];
+	}
+
+	private driveShouldBeDisabled(drive: Drive, image?: SourceMetadata) {
+		return (
+			isUsbbootDrive(drive) ||
+			isDriverlessDrive(drive) ||
+			!isDriveValid(drive, image, this.props.write) ||
+			(this.props.write && drive.isReadOnly)
+		);
+	}
+
+	private getDisplayedDrives(drives: Drive[]): Drive[] {
+		return drives.filter((drive) => {
+			return (
+				isUsbbootDrive(drive) ||
+				isDriverlessDrive(drive) ||
+				isDriveSelected(drive.device) ||
+				this.state.showSystemDrives ||
+				!drive.isSystem
+			);
+		});
+	}
+
+	private getDisabledDrives(drives: Drive[], image?: SourceMetadata): string[] {
+		return drives
+			.filter((drive) => this.driveShouldBeDisabled(drive, image))
+			.map((drive) => drive.displayName);
+	}
+
+	private renderProgress(progress: number) {
+		return (
+			<Flex flexDirection="column">
+				<Txt fontSize={12}>Initializing device</Txt>
+				<InitProgress value={progress} />
+			</Flex>
+		);
+	}
+
+	private warningFromStatus(
+		status: string,
+		drive: { device: string; size: number },
+	) {
+		switch (status) {
+			case compatibility.containsImage():
+				return warning.sourceDrive();
+			case compatibility.largeDrive():
+				return warning.largeDriveSize();
+			case compatibility.system():
+				return warning.systemDrive();
+			case compatibility.tooSmall():
+				const size =
+					this.state.image?.recommendedDriveSize || this.state.image?.size || 0;
+				return warning.tooSmall({ size }, drive);
+		}
+	}
+
+	private renderStatuses(drive: DrivelistDrive) {
+		const statuses: DriveStatus[] = getDriveImageCompatibilityStatuses(
+			drive,
+			this.state.image,
+			this.props.write,
+		).slice(0, 2);
+		return (
+			// the column render fn expects a single Element
+			<>
+				{statuses.map((status) => {
+					const badgeShade = badgeShadeFromStatus(status.message);
+					const warningMessage = this.warningFromStatus(status.message, {
+						device: drive.device,
+						size: drive.size || 0,
+					});
+					return (
+						<Badge
+							key={status.message}
+							shade={badgeShade}
+							mr="8px"
+							tooltip={this.props.showWarnings ? warningMessage : ''}
+						>
+							{status.message}
+						</Badge>
+					);
+				})}
+			</>
+		);
+	}
+
+	private installMissingDrivers(drive: DriverlessDrive) {
+		if (drive.link) {
+			logEvent('Open driver link modal', {
+				url: drive.link,
+			});
+			this.setState({ missingDriversModal: { drive } });
+		}
+	}
+
+	componentDidMount() {
+		this.unsubscribe = store.subscribe(() => {
+			const drives = getDrives();
+			const image = getImage();
+			this.setState({
+				drives,
+				image,
+				selectedList:
+					(this.props.updateSelectedList && this.props.updateSelectedList()) ||
+					[],
+			});
+		});
+	}
+
+	componentWillUnmount() {
+		this.unsubscribe?.();
+	}
+
+	render() {
+		const { cancel, done, ...props } = this.props;
+		const { selectedList, drives, image, missingDriversModal } = this.state;
+
+		const displayedDrives = this.getDisplayedDrives(drives);
+		const disabledDrives = this.getDisabledDrives(drives, image);
+		const numberOfSystemDrives = drives.filter(isSystemDrive).length;
+		const numberOfDisplayedSystemDrives =
+			displayedDrives.filter(isSystemDrive).length;
+		const numberOfHiddenSystemDrives =
+			numberOfSystemDrives - numberOfDisplayedSystemDrives;
+		const hasSystemDrives = selectedList.filter(isSystemDrive).length;
+		const showWarnings = this.props.showWarnings && hasSystemDrives;
+
+		return (
+			<Modal
+				titleElement={
+					<Flex alignItems="baseline" mb={18}>
+						<Txt fontSize={24} align="left">
+							{this.props.titleLabel}
+						</Txt>
+						<Txt
+							fontSize={11}
+							ml={12}
+							color="#5b82a7"
+							style={{ fontWeight: 600 }}
+						>
+							{drives.length} found
+						</Txt>
+					</Flex>
+				}
+				titleDetails={<Txt fontSize={11}>{getDrives().length} found</Txt>}
+				cancel={() => cancel(this.originalList)}
+				done={() => done(selectedList)}
+				action={`Select (${selectedList.length})`}
+				primaryButtonProps={{
+					primary: !showWarnings,
+					warning: showWarnings,
+					disabled: !hasAvailableDrives(),
+				}}
+				{...props}
+			>
+				{!hasAvailableDrives() ? (
+					<Flex
+						flexDirection="column"
+						justifyContent="center"
+						alignItems="center"
+						width="100%"
+					>
+						{this.props.emptyListIcon}
+						<b>{this.props.emptyListLabel}</b>
+					</Flex>
+				) : (
+					<>
+						<DrivesTable
+							refFn={(t) => {
+								if (t !== null) {
+									t.setRowSelection(selectedList);
+								}
+							}}
+							checkedRowsNumber={selectedList.length}
+							multipleSelection={this.props.multipleSelection}
+							columns={this.tableColumns}
+							data={displayedDrives}
+							disabledRows={disabledDrives}
+							getRowClass={(row: Drive) =>
+								isDrivelistDrive(row) && row.isSystem ? ['system'] : []
+							}
+							rowKey="displayName"
+							onCheck={(rows: Drive[]) => {
+								let newSelection = rows.filter(isDrivelistDrive);
+								if (this.props.multipleSelection) {
+									if (rows.length === 0) {
+										newSelection = [];
+									}
+									const deselecting = selectedList.filter(
+										(selected) =>
+											newSelection.filter(
+												(row) => row.device === selected.device,
+											).length === 0,
+									);
+									const selecting = newSelection.filter(
+										(row) =>
+											selectedList.filter(
+												(selected) => row.device === selected.device,
+											).length === 0,
+									);
+									deselecting.concat(selecting).forEach((row) => {
+										if (this.props.onSelect) {
+											this.props.onSelect(row);
+										}
+									});
+									this.setState({
+										selectedList: newSelection,
+									});
+									return;
+								}
+								if (this.props.onSelect) {
+									this.props.onSelect(newSelection[newSelection.length - 1]);
+								}
+								this.setState({
+									selectedList: newSelection.slice(newSelection.length - 1),
+								});
+							}}
+							onRowClick={(row: Drive) => {
+								if (
+									!isDrivelistDrive(row) ||
+									this.driveShouldBeDisabled(row, image)
+								) {
+									return;
+								}
+								if (this.props.onSelect) {
+									this.props.onSelect(row);
+								}
+								const index = selectedList.findIndex(
+									(d) => d.device === row.device,
+								);
+								const newList = this.props.multipleSelection
+									? [...selectedList]
+									: [];
+								if (index === -1) {
+									newList.push(row);
+								} else {
+									// Deselect if selected
+									newList.splice(index, 1);
+								}
+								this.setState({
+									selectedList: newList,
+								});
+							}}
+						/>
+						{numberOfHiddenSystemDrives > 0 && (
+							<Link
+								mt={15}
+								mb={15}
+								fontSize="14px"
+								onClick={() => this.setState({ showSystemDrives: true })}
+							>
+								<Flex alignItems="center">
+									<ChevronDownSvg height="1em" fill="currentColor" />
+									<Txt ml={8}>Show {numberOfHiddenSystemDrives} hidden</Txt>
+								</Flex>
+							</Link>
+						)}
+					</>
+				)}
+				{this.props.showWarnings && hasSystemDrives ? (
+					<Alert className="system-drive-alert" style={{ width: '67%' }}>
+						Selecting your system drive is dangerous and will erase your drive!
+					</Alert>
+				) : null}
+
+				{missingDriversModal.drive !== undefined && (
+					<Modal
+						width={400}
+						title={missingDriversModal.drive.linkTitle}
+						cancel={() => this.setState({ missingDriversModal: {} })}
+						done={() => {
+							try {
+								if (missingDriversModal.drive !== undefined) {
+									openExternal(missingDriversModal.drive.link);
+								}
+							} catch (error: any) {
+								logException(error);
+							} finally {
+								this.setState({ missingDriversModal: {} });
+							}
+						}}
+						action="Yes, continue"
+						cancelButtonProps={{
+							children: 'Cancel',
+						}}
+						children={
+							missingDriversModal.drive.linkMessage ||
+							`Etcher will open ${missingDriversModal.drive.link} in your browser`
+						}
+					/>
+				)}
+			</Modal>
+		);
+	}
+}

lib/gui/app/components/drive-status-warning-modal/drive-status-warning-modal.tsx

@@ -0,0 +1,82 @@
+import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Badge, Flex, Txt, ModalProps } from 'rendition';
+import { Modal, ScrollableFlex } from '../../styled-components';
+import { middleEllipsis } from '../../utils/middle-ellipsis';
+
+import * as prettyBytes from 'pretty-bytes';
+import { DriveWithWarnings } from '../../pages/main/Flash';
+
+const DriveStatusWarningModal = ({
+	done,
+	cancel,
+	isSystem,
+	drivesWithWarnings,
+}: ModalProps & {
+	isSystem: boolean;
+	drivesWithWarnings: DriveWithWarnings[];
+}) => {
+	let warningSubtitle = 'You are about to erase an unusually large drive';
+	let warningCta = 'Are you sure the selected drive is not a storage drive?';
+
+	if (isSystem) {
+		warningSubtitle = "You are about to erase your computer's drives";
+		warningCta = 'Are you sure you want to flash your system drive?';
+	}
+	return (
+		<Modal
+			footerShadow={false}
+			reverseFooterButtons={true}
+			done={done}
+			cancel={cancel}
+			cancelButtonProps={{
+				primary: false,
+				warning: true,
+				children: 'Change target',
+			}}
+			action={"Yes, I'm sure"}
+			primaryButtonProps={{
+				primary: false,
+				outline: true,
+			}}
+		>
+			<Flex
+				flexDirection="column"
+				alignItems="center"
+				justifyContent="center"
+				width="100%"
+			>
+				<Flex flexDirection="column">
+					<ExclamationTriangleSvg height="2em" fill="#fca321" />
+					<Txt fontSize="24px" color="#fca321">
+						WARNING!
+					</Txt>
+				</Flex>
+				<Txt fontSize="24px">{warningSubtitle}</Txt>
+				<ScrollableFlex
+					flexDirection="column"
+					backgroundColor="#fff5e6"
+					m="2em 0"
+					p="1em 2em"
+					width="420px"
+					maxHeight="100px"
+				>
+					{drivesWithWarnings.map((drive, i, array) => (
+						<>
+							<Flex justifyContent="space-between" alignItems="baseline">
+								<strong>{middleEllipsis(drive.description, 28)}</strong>{' '}
+								{drive.size && prettyBytes(drive.size) + ' '}
+								<Badge shade={5}>{drive.statuses[0].message}</Badge>
+							</Flex>
+							{i !== array.length - 1 ? <hr style={{ width: '100%' }} /> : null}
+						</>
+					))}
+				</ScrollableFlex>
+				<Txt style={{ fontWeight: 600 }}>{warningCta}</Txt>
+			</Flex>
+		</Modal>
+	);
+};
+
+export default DriveStatusWarningModal;

lib/gui/app/components/finish/finish.tsx

@@ -0,0 +1,124 @@
+/*
+ * Copyright 2019 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import { Flex } from 'rendition';
+import { v4 as uuidV4 } from 'uuid';
+
+import * as flashState from '../../models/flash-state';
+import * as selectionState from '../../models/selection-state';
+import * as settings from '../../models/settings';
+import { Actions, store } from '../../models/store';
+import * as analytics from '../../modules/analytics';
+import { FlashAnother } from '../flash-another/flash-another';
+import { FlashResults, FlashError } from '../flash-results/flash-results';
+import { SafeWebview } from '../safe-webview/safe-webview';
+
+function restart(goToMain: () => void) {
+	selectionState.deselectAllDrives();
+	analytics.logEvent('Restart');
+
+	// Reset the flashing workflow uuid
+	store.dispatch({
+		type: Actions.SET_FLASHING_WORKFLOW_UUID,
+		data: uuidV4(),
+	});
+
+	goToMain();
+}
+
+async function getSuccessBannerURL() {
+	return (
+		(await settings.get('successBannerURL')) ??
+		'https://www.balena.io/etcher/success-banner?borderTop=false&darkBackground=true'
+	);
+}
+
+function FinishPage({ goToMain }: { goToMain: () => void }) {
+	const [webviewShowing, setWebviewShowing] = React.useState(false);
+	const [successBannerURL, setSuccessBannerURL] = React.useState('');
+	(async () => {
+		setSuccessBannerURL(await getSuccessBannerURL());
+	})();
+	const flashResults = flashState.getFlashResults();
+	const errors: FlashError[] = (
+		store.getState().toJS().failedDeviceErrors || []
+	).map(([, error]: [string, FlashError]) => ({
+		...error,
+	}));
+	const { averageSpeed, blockmappedSize, bytesWritten, failed, size } =
+		flashState.getFlashState();
+	const {
+		skip,
+		results = {
+			bytesWritten,
+			sourceMetadata: {
+				size,
+				blockmappedSize,
+			},
+			averageFlashingSpeed: averageSpeed,
+			devices: { failed, successful: 0 },
+		},
+	} = flashResults;
+	return (
+		<Flex height="100%" justifyContent="space-between">
+			<Flex
+				width={webviewShowing ? '36.2vw' : '100vw'}
+				height="100vh"
+				alignItems="center"
+				justifyContent="center"
+				flexDirection="column"
+				style={{
+					position: 'absolute',
+					top: 0,
+					zIndex: 1,
+					boxShadow: '0 2px 15px 0 rgba(0, 0, 0, 0.2)',
+				}}
+			>
+				<FlashResults
+					image={selectionState.getImage()?.name}
+					results={results}
+					skip={skip}
+					errors={errors}
+					mb="32px"
+					goToMain={goToMain}
+				/>
+
+				<FlashAnother
+					onClick={() => {
+						restart(goToMain);
+					}}
+				/>
+			</Flex>
+			{successBannerURL.length && (
+				<SafeWebview
+					src={successBannerURL}
+					onWebviewShow={setWebviewShowing}
+					style={{
+						display: webviewShowing ? 'flex' : 'none',
+						position: 'absolute',
+						right: 0,
+						bottom: 0,
+						width: '63.8vw',
+						height: '100vh',
+					}}
+				/>
+			)}
+		</Flex>
+	);
+}
+
+export default FinishPage;

lib/gui/app/components/flash-another/flash-another.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2016 resin.io
+ * Copyright 2019 balena.io
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,14 +14,18 @@
  * limitations under the License.
  */
 
-.page-settings .checkbox input[type="checkbox"] + * {
-  color: $palette-theme-dark-foreground;
+import * as React from 'react';
+
+import { BaseButton } from '../../styled-components';
+
+export interface FlashAnotherProps {
+	onClick: () => void;
 }
 
-.page-settings .checkbox input[type="checkbox"]:not(:checked) + * {
-  color: $palette-theme-dark-soft-foreground;
-}
-
-.page-settings .title {
-  color: $palette-theme-dark-foreground;
-}
+export const FlashAnother = (props: FlashAnotherProps) => {
+	return (
+		<BaseButton primary onClick={props.onClick}>
+			Flash another
+		</BaseButton>
+	);
+};

lib/gui/app/components/flash-results/flash-results.tsx

@@ -0,0 +1,243 @@
+/*
+ * Copyright 2019 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import CircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle.svg';
+import CheckCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/check-circle.svg';
+import TimesCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/times-circle.svg';
+import outdent from 'outdent';
+import * as React from 'react';
+import { Flex, FlexProps, Link, TableColumn, Txt } from 'rendition';
+import styled from 'styled-components';
+
+import { progress } from '../../../../shared/messages';
+import { bytesToMegabytes } from '../../../../shared/units';
+
+import FlashSvg from '../../../assets/flash.svg';
+import { getDrives } from '../../models/available-drives';
+import { resetState } from '../../models/flash-state';
+import * as selection from '../../models/selection-state';
+import { middleEllipsis } from '../../utils/middle-ellipsis';
+import { Modal, Table } from '../../styled-components';
+
+const ErrorsTable = styled((props) => <Table<FlashError> {...props} />)`
+	&&& [data-display='table-head'],
+	&&& [data-display='table-body'] {
+		> [data-display='table-row'] {
+			> [data-display='table-cell'] {
+				&:first-child {
+					width: 30%;
+				}
+
+				&:nth-child(2) {
+					width: 20%;
+				}
+
+				&:last-child {
+					width: 50%;
+				}
+			}
+		}
+	}
+`;
+const DoneIcon = (props: {
+	skipped: boolean;
+	color: string;
+	allFailed: boolean;
+}) => {
+	const svgProps = {
+		width: '28px',
+		fill: props.color,
+		style: {
+			marginTop: '-25px',
+			marginLeft: '13px',
+			zIndex: 1,
+		},
+	};
+	return props.allFailed && !props.skipped ? (
+		<TimesCircleSvg {...svgProps} />
+	) : (
+		<CheckCircleSvg {...svgProps} />
+	);
+};
+
+export interface FlashError extends Error {
+	description: string;
+	device: string;
+	code: string;
+}
+
+function formattedErrors(errors: FlashError[]) {
+	return errors
+		.map((error) => `${error.device}: ${error.message || error.code}`)
+		.join('\n');
+}
+
+const columns: Array<TableColumn<FlashError>> = [
+	{
+		field: 'description',
+		label: 'Target',
+	},
+	{
+		field: 'device',
+		label: 'Location',
+	},
+	{
+		field: 'message',
+		label: 'Error',
+		render: (message: string, { code }: FlashError) => {
+			return message ?? code;
+		},
+	},
+];
+
+function getEffectiveSpeed(results: {
+	sourceMetadata: {
+		size: number;
+		blockmappedSize?: number;
+	};
+	averageFlashingSpeed: number;
+}) {
+	const flashedSize =
+		results.sourceMetadata.blockmappedSize ?? results.sourceMetadata.size;
+	const timeSpent = flashedSize / results.averageFlashingSpeed;
+	return results.sourceMetadata.size / timeSpent;
+}
+
+export function FlashResults({
+	goToMain,
+	image = '',
+	errors,
+	results,
+	skip,
+	...props
+}: {
+	goToMain: () => void;
+	image?: string;
+	errors: FlashError[];
+	skip: boolean;
+	results: {
+		sourceMetadata: {
+			size: number;
+			blockmappedSize?: number;
+		};
+		averageFlashingSpeed: number;
+		devices: { failed: number; successful: number };
+	};
+} & FlexProps) {
+	const [showErrorsInfo, setShowErrorsInfo] = React.useState(false);
+	const allFailed = !skip && results.devices.successful === 0;
+	const someFailed = results.devices.failed !== 0 || errors.length !== 0;
+	const effectiveSpeed = bytesToMegabytes(getEffectiveSpeed(results)).toFixed(
+		1,
+	);
+	return (
+		<Flex flexDirection="column" {...props}>
+			<Flex alignItems="center" flexDirection="column">
+				<Flex
+					alignItems="center"
+					mt="50px"
+					mb="32px"
+					color="#7e8085"
+					flexDirection="column"
+				>
+					<FlashSvg width="40px" height="40px" className="disabled" />
+					<DoneIcon
+						skipped={skip}
+						allFailed={allFailed}
+						color={allFailed || someFailed ? '#c6c8c9' : '#1ac135'}
+					/>
+					<Txt>{middleEllipsis(image, 24)}</Txt>
+				</Flex>
+				<Txt fontSize={24} color="#fff" mb="17px">
+					Flash {allFailed ? 'Failed' : 'Complete'}!
+				</Txt>
+				{skip ? <Txt color="#7e8085">Validation has been skipped</Txt> : null}
+			</Flex>
+			<Flex flexDirection="column" color="#7e8085">
+				{results.devices.successful !== 0 ? (
+					<Flex alignItems="center">
+						<CircleSvg width="14px" fill="#1ac135" />
+						<Txt ml="10px" color="#fff">
+							{results.devices.successful}
+						</Txt>
+						<Txt ml="10px">
+							{progress.successful(results.devices.successful)}
+						</Txt>
+					</Flex>
+				) : null}
+				{errors.length !== 0 ? (
+					<Flex alignItems="center">
+						<CircleSvg width="14px" fill="#ff4444" />
+						<Txt ml="10px" color="#fff">
+							{errors.length}
+						</Txt>
+						<Txt ml="10px" tooltip={formattedErrors(errors)}>
+							{progress.failed(errors.length)}
+						</Txt>
+						<Link ml="10px" onClick={() => setShowErrorsInfo(true)}>
+							more info
+						</Link>
+					</Flex>
+				) : null}
+				{!allFailed && (
+					<Txt
+						fontSize="10px"
+						style={{
+							fontWeight: 500,
+							textAlign: 'center',
+						}}
+						tooltip={outdent({ newline: ' ' })`
+							The speed is calculated by dividing the image size by the flashing time.
+							Disk images with ext partitions flash faster as we are able to skip unused parts.
+						`}
+					>
+						Effective speed: {effectiveSpeed} MB/s
+					</Txt>
+				)}
+			</Flex>
+
+			{showErrorsInfo && (
+				<Modal
+					titleElement={
+						<Flex alignItems="baseline" mb={18}>
+							<Txt fontSize={24} align="left">
+								Failed targets
+							</Txt>
+						</Flex>
+					}
+					action="Retry failed targets"
+					cancel={() => setShowErrorsInfo(false)}
+					done={() => {
+						setShowErrorsInfo(false);
+						resetState();
+						getDrives()
+							.map((drive) => {
+								selection.deselectDrive(drive.device);
+								return drive.device;
+							})
+							.filter((driveDevice) =>
+								errors.some((error) => error.device === driveDevice),
+							)
+							.forEach((driveDevice) => selection.selectDrive(driveDevice));
+						goToMain();
+					}}
+				>
+					<ErrorsTable columns={columns} data={errors} />
+				</Modal>
+			)}
+		</Flex>
+	);
+}

lib/gui/app/components/progress-button/progress-button.tsx

@@ -0,0 +1,133 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import { Flex, Button, ProgressBar, Txt } from 'rendition';
+import { default as styled } from 'styled-components';
+
+import { fromFlashState } from '../../modules/progress-status';
+import { StepButton } from '../../styled-components';
+
+const FlashProgressBar = styled(ProgressBar)`
+	> div {
+		width: 100%;
+		height: 12px;
+		color: white !important;
+		text-shadow: none !important;
+		transition-duration: 0s;
+		> div {
+			transition-duration: 0s;
+		}
+	}
+
+	width: 100%;
+	height: 12px;
+	margin-bottom: 6px;
+	border-radius: 14px;
+	font-size: 16px;
+	line-height: 48px;
+
+	background: #2f3033;
+`;
+
+interface ProgressButtonProps {
+	type: 'decompressing' | 'flashing' | 'verifying';
+	active: boolean;
+	percentage: number;
+	position: number;
+	disabled: boolean;
+	cancel: (type: string) => void;
+	callback: () => void;
+	warning?: boolean;
+}
+
+const colors = {
+	decompressing: '#00aeef',
+	flashing: '#da60ff',
+	verifying: '#1ac135',
+} as const;
+
+const CancelButton = styled(({ type, onClick, ...props }) => {
+	const status = type === 'verifying' ? 'Skip' : 'Cancel';
+	return (
+		<Button plain onClick={() => onClick(status)} {...props}>
+			{status}
+		</Button>
+	);
+})`
+	font-weight: 600;
+	&&& {
+		width: auto;
+		height: auto;
+		font-size: 14px;
+	}
+`;
+
+export class ProgressButton extends React.PureComponent<ProgressButtonProps> {
+	public render() {
+		const percentage = this.props.percentage;
+		const warning = this.props.warning;
+		const { status, position } = fromFlashState({
+			type: this.props.type,
+			percentage,
+			position: this.props.position,
+		});
+		const type = this.props.type || 'default';
+		if (this.props.active) {
+			return (
+				<>
+					<Flex
+						alignItems="baseline"
+						justifyContent="space-between"
+						width="100%"
+						style={{
+							marginTop: 42,
+							marginBottom: '6px',
+							fontSize: 16,
+							fontWeight: 600,
+						}}
+					>
+						<Flex>
+							<Txt color="#fff">{status}&nbsp;</Txt>
+							<Txt color={colors[type]}>{position}</Txt>
+						</Flex>
+						{type && (
+							<CancelButton
+								type={type}
+								onClick={this.props.cancel}
+								color="#00aeef"
+							/>
+						)}
+					</Flex>
+					<FlashProgressBar background={colors[type]} value={percentage} />
+				</>
+			);
+		}
+		return (
+			<StepButton
+				primary={!warning}
+				warning={warning}
+				onClick={this.props.callback}
+				disabled={this.props.disabled}
+				style={{
+					marginTop: 30,
+				}}
+			>
+				Flash!
+			</StepButton>
+		);
+	}
+}

lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import { Flex, Txt } from 'rendition';
+
+import DriveSvg from '../../../assets/drive.svg';
+import ImageSvg from '../../../assets/image.svg';
+import { SVGIcon } from '../svg-icon/svg-icon';
+import { middleEllipsis } from '../../utils/middle-ellipsis';
+
+interface ReducedFlashingInfosProps {
+	imageLogo?: string;
+	imageName?: string;
+	imageSize: string;
+	driveTitle: string;
+	driveLabel: string;
+	style?: React.CSSProperties;
+}
+
+export class ReducedFlashingInfos extends React.Component<ReducedFlashingInfosProps> {
+	constructor(props: ReducedFlashingInfosProps) {
+		super(props);
+		this.state = {};
+	}
+
+	public render() {
+		const { imageName = '' } = this.props;
+		return (
+			<Flex
+				flexDirection="column"
+				style={this.props.style ? this.props.style : undefined}
+			>
+				<Flex mb={16}>
+					<SVGIcon
+						disabled
+						width="21px"
+						height="21px"
+						contents={this.props.imageLogo}
+						fallback={ImageSvg}
+						style={{ marginRight: '9px' }}
+					/>
+					<Txt
+						style={{ marginRight: '9px' }}
+						tooltip={{ text: imageName, placement: 'right' }}
+					>
+						{middleEllipsis(imageName, 16)}
+					</Txt>
+					<Txt color="#7e8085">{this.props.imageSize}</Txt>
+				</Flex>
+
+				<Flex>
+					<DriveSvg width="21px" height="21px" style={{ marginRight: '9px' }} />
+					<Txt tooltip={{ text: this.props.driveLabel, placement: 'right' }}>
+						{middleEllipsis(this.props.driveTitle, 16)}
+					</Txt>
+				</Flex>
+			</Flex>
+		);
+	}
+}

lib/gui/app/components/safe-webview/safe-webview.tsx

@@ -0,0 +1,208 @@
+/*
+ * Copyright 2017 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as electron from 'electron';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import * as packageJSON from '../../../../../package.json';
+import * as settings from '../../models/settings';
+import * as analytics from '../../modules/analytics';
+
+/**
+ * @summary Electron session identifier
+ */
+const ELECTRON_SESSION = 'persist:success-banner';
+
+/**
+ * @summary Etcher version search-parameter key
+ */
+const ETCHER_VERSION_PARAM = 'etcher-version';
+
+/**
+ * @summary API version search-parameter key
+ */
+const API_VERSION_PARAM = 'api-version';
+
+/**
+ * @summary Opt-out analytics search-parameter key
+ */
+const OPT_OUT_ANALYTICS_PARAM = 'optOutAnalytics';
+
+/**
+ * @summary Webview API version
+ *
+ * @description
+ * Changing this number represents a departure from an older API and as such
+ * should only be changed when truly necessary as it introduces breaking changes.
+ * This version number is exposed to the banner such that it can determine what
+ * features are safe to utilize.
+ *
+ * See `git blame -L n` where n is the line below for the history of version changes.
+ */
+const API_VERSION = '2';
+
+interface SafeWebviewProps {
+	// The website source URL
+	src: string;
+	// Webview lifecycle event
+	onWebviewShow?: (isWebviewShowing: boolean) => void;
+	style?: React.CSSProperties;
+}
+
+interface SafeWebviewState {
+	shouldShow: boolean;
+}
+
+/**
+ * @summary Webviews that hide/show depending on the HTTP status returned
+ */
+export class SafeWebview extends React.PureComponent<
+	SafeWebviewProps,
+	SafeWebviewState
+> {
+	private entryHref: string;
+	private session: electron.Session;
+	private webviewRef: React.RefObject<electron.WebviewTag>;
+
+	constructor(props: SafeWebviewProps) {
+		super(props);
+		this.webviewRef = React.createRef();
+		this.state = {
+			shouldShow: true,
+		};
+		const url = new window.URL(this.props.src);
+		// We set the version GET parameters here.
+		url.searchParams.set(ETCHER_VERSION_PARAM, packageJSON.version);
+		url.searchParams.set(API_VERSION_PARAM, API_VERSION);
+		url.searchParams.set(
+			OPT_OUT_ANALYTICS_PARAM,
+			(!settings.getSync('errorReporting')).toString(),
+		);
+		this.entryHref = url.href;
+		// Events steal 'this'
+		this.didFailLoad = _.bind(this.didFailLoad, this);
+		this.didGetResponseDetails = _.bind(this.didGetResponseDetails, this);
+		// Make a persistent electron session for the webview
+		this.session = electron.remote.session.fromPartition(ELECTRON_SESSION, {
+			// Disable the cache for the session such that new content shows up when refreshing
+			cache: false,
+		});
+	}
+
+	private static logWebViewMessage(event: electron.ConsoleMessageEvent) {
+		console.log('Message from SafeWebview:', event.message);
+	}
+
+	public render() {
+		const {
+			style = {
+				flex: this.state.shouldShow ? undefined : '0 1',
+				width: this.state.shouldShow ? undefined : '0',
+				height: this.state.shouldShow ? undefined : '0',
+			},
+		} = this.props;
+		return (
+			<webview
+				ref={this.webviewRef}
+				partition={ELECTRON_SESSION}
+				style={style}
+			/>
+		);
+	}
+
+	// Add the Webview events
+	public componentDidMount() {
+		// Events React is unaware of have to be handled manually
+		if (this.webviewRef.current !== null) {
+			this.webviewRef.current.addEventListener(
+				'did-fail-load',
+				this.didFailLoad,
+			);
+			this.webviewRef.current.addEventListener(
+				'new-window',
+				SafeWebview.newWindow,
+			);
+			this.webviewRef.current.addEventListener(
+				'console-message',
+				SafeWebview.logWebViewMessage,
+			);
+			this.session.webRequest.onCompleted(this.didGetResponseDetails);
+			// It's important that this comes after the partition setting, otherwise it will
+			// use another session and we can't change it without destroying the element again
+			this.webviewRef.current.src = this.entryHref;
+		}
+	}
+
+	// Remove the Webview events
+	public componentWillUnmount() {
+		// Events that React is unaware of have to be handled manually
+		if (this.webviewRef.current !== null) {
+			this.webviewRef.current.removeEventListener(
+				'did-fail-load',
+				this.didFailLoad,
+			);
+			this.webviewRef.current.removeEventListener(
+				'new-window',
+				SafeWebview.newWindow,
+			);
+			this.webviewRef.current.removeEventListener(
+				'console-message',
+				SafeWebview.logWebViewMessage,
+			);
+		}
+		this.session.webRequest.onCompleted(null);
+	}
+
+	// Set the element state to hidden
+	public didFailLoad() {
+		this.setState({
+			shouldShow: false,
+		});
+		if (this.props.onWebviewShow) {
+			this.props.onWebviewShow(false);
+		}
+	}
+
+	// Set the element state depending on the HTTP response code
+	public didGetResponseDetails(event: electron.OnCompletedListenerDetails) {
+		// This seems to pick up all requests related to the webview,
+		// only care about this event if it's a request for the main frame
+		if (event.resourceType === 'mainFrame') {
+			const HTTP_OK = 200;
+			analytics.logEvent('SafeWebview loaded', { event });
+			this.setState({
+				shouldShow: event.statusCode === HTTP_OK,
+			});
+			if (this.props.onWebviewShow) {
+				this.props.onWebviewShow(event.statusCode === HTTP_OK);
+			}
+		}
+	}
+
+	// Open link in browser if it's opened as a 'foreground-tab'
+	public static async newWindow(event: electron.NewWindowEvent) {
+		const url = new window.URL(event.url);
+		if (
+			(url.protocol === 'http:' || url.protocol === 'https:') &&
+			event.disposition === 'foreground-tab' &&
+			// Don't open links if they're disabled by the env var
+			!(await settings.get('disableExternalLinks'))
+		) {
+			electron.shell.openExternal(url.href);
+		}
+	}
+}

lib/gui/app/components/settings/settings.tsx

@@ -0,0 +1,145 @@
+/*
+ * Copyright 2019 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import GithubSvg from '@fortawesome/fontawesome-free/svgs/brands/github.svg';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Box, Checkbox, Flex, TextWithCopy, Txt } from 'rendition';
+
+import { version, packageType } from '../../../../../package.json';
+import * as settings from '../../models/settings';
+import * as analytics from '../../modules/analytics';
+import { open as openExternal } from '../../os/open-external/services/open-external';
+import { Modal } from '../../styled-components';
+
+interface Setting {
+	name: string;
+	label: string | JSX.Element;
+}
+
+async function getSettingsList(): Promise<Setting[]> {
+	const list: Setting[] = [
+		{
+			name: 'errorReporting',
+			label: 'Anonymously report errors and usage statistics to balena.io',
+		},
+	];
+	if (['appimage', 'nsis', 'dmg'].includes(packageType)) {
+		list.push({
+			name: 'updatesEnabled',
+			label: 'Auto-updates enabled',
+		});
+	}
+	return list;
+}
+
+interface SettingsModalProps {
+	toggleModal: (value: boolean) => void;
+}
+
+const UUID = process.env.BALENA_DEVICE_UUID;
+
+const InfoBox = (props: any) => (
+	<Box fontSize={14}>
+		<Txt>{props.label}</Txt>
+		<TextWithCopy code text={props.value} copy={props.value} />
+	</Box>
+);
+export function SettingsModal({ toggleModal }: SettingsModalProps) {
+	const [settingsList, setCurrentSettingsList] = React.useState<Setting[]>([]);
+	React.useEffect(() => {
+		(async () => {
+			if (settingsList.length === 0) {
+				setCurrentSettingsList(await getSettingsList());
+			}
+		})();
+	});
+	const [currentSettings, setCurrentSettings] = React.useState<
+		_.Dictionary<boolean>
+	>({});
+	React.useEffect(() => {
+		(async () => {
+			if (_.isEmpty(currentSettings)) {
+				setCurrentSettings(await settings.getAll());
+			}
+		})();
+	});
+
+	const toggleSetting = async (setting: string) => {
+		const value = currentSettings[setting];
+		analytics.logEvent('Toggle setting', { setting, value });
+		await settings.set(setting, !value);
+		setCurrentSettings({
+			...currentSettings,
+			[setting]: !value,
+		});
+	};
+
+	return (
+		<Modal
+			titleElement={
+				<Txt fontSize={24} mb={24}>
+					Settings
+				</Txt>
+			}
+			done={() => toggleModal(false)}
+		>
+			<Flex flexDirection="column">
+				{settingsList.map((setting: Setting, i: number) => {
+					return (
+						<Flex key={setting.name} mb={14}>
+							<Checkbox
+								toggle
+								tabIndex={6 + i}
+								label={setting.label}
+								checked={currentSettings[setting.name]}
+								onChange={() => toggleSetting(setting.name)}
+							/>
+						</Flex>
+					);
+				})}
+				{UUID !== undefined && (
+					<Flex flexDirection="column">
+						<Txt fontSize={24}>System Information</Txt>
+						<InfoBox label="UUID" value={UUID.substr(0, 7)} />
+					</Flex>
+				)}
+				<Flex
+					mt={18}
+					alignItems="center"
+					color="#00aeef"
+					style={{
+						width: 'fit-content',
+						cursor: 'pointer',
+						fontSize: 14,
+					}}
+					onClick={() =>
+						openExternal(
+							'https://github.com/balena-io/etcher/blob/master/CHANGELOG.md',
+						)
+					}
+				>
+					<GithubSvg
+						height="1em"
+						fill="currentColor"
+						style={{ marginRight: 8 }}
+					/>
+					<Txt style={{ borderBottom: '1px solid #00aeef' }}>{version}</Txt>
+				</Flex>
+			</Flex>
+		</Modal>
+	);
+}

lib/gui/app/components/source-selector/source-selector.tsx

@@ -0,0 +1,878 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import CopySvg from '@fortawesome/fontawesome-free/svgs/solid/copy.svg';
+import FileSvg from '@fortawesome/fontawesome-free/svgs/solid/file.svg';
+import LinkSvg from '@fortawesome/fontawesome-free/svgs/solid/link.svg';
+import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
+import ChevronDownSvg from '@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg';
+import ChevronRightSvg from '@fortawesome/fontawesome-free/svgs/solid/chevron-right.svg';
+import { sourceDestination } from 'etcher-sdk';
+import { ipcRenderer, IpcRendererEvent } from 'electron';
+import * as _ from 'lodash';
+import { GPTPartition, MBRPartition } from 'partitioninfo';
+import * as path from 'path';
+import * as prettyBytes from 'pretty-bytes';
+import * as React from 'react';
+import {
+	Flex,
+	ButtonProps,
+	Modal as SmallModal,
+	Txt,
+	Card as BaseCard,
+	Input,
+	Spinner,
+	Link,
+} from 'rendition';
+import styled from 'styled-components';
+
+import * as errors from '../../../../shared/errors';
+import * as messages from '../../../../shared/messages';
+import * as supportedFormats from '../../../../shared/supported-formats';
+import * as selectionState from '../../models/selection-state';
+import { observe } from '../../models/store';
+import * as analytics from '../../modules/analytics';
+import * as exceptionReporter from '../../modules/exception-reporter';
+import * as osDialog from '../../os/dialog';
+import { replaceWindowsNetworkDriveLetter } from '../../os/windows-network-drives';
+import {
+	ChangeButton,
+	DetailsText,
+	Modal,
+	StepButton,
+	StepNameButton,
+	ScrollableFlex,
+} from '../../styled-components';
+import { colors } from '../../theme';
+import { middleEllipsis } from '../../utils/middle-ellipsis';
+import { SVGIcon } from '../svg-icon/svg-icon';
+
+import ImageSvg from '../../../assets/image.svg';
+import SrcSvg from '../../../assets/src.svg';
+import { DriveSelector } from '../drive-selector/drive-selector';
+import { DrivelistDrive } from '../../../../shared/drive-constraints';
+import axios, { AxiosRequestConfig } from 'axios';
+import { isJson } from '../../../../shared/utils';
+
+const recentUrlImagesKey = 'recentUrlImages';
+
+function normalizeRecentUrlImages(urls: any[]): URL[] {
+	if (!Array.isArray(urls)) {
+		urls = [];
+	}
+	urls = urls
+		.map((url) => {
+			try {
+				return new URL(url);
+			} catch (error: any) {
+				// Invalid URL, skip
+			}
+		})
+		.filter((url) => url !== undefined);
+	urls = _.uniqBy(urls, (url) => url.href);
+	return urls.slice(urls.length - 5);
+}
+
+function getRecentUrlImages(): URL[] {
+	let urls = [];
+	try {
+		urls = JSON.parse(localStorage.getItem(recentUrlImagesKey) || '[]');
+	} catch {
+		// noop
+	}
+	return normalizeRecentUrlImages(urls);
+}
+
+function setRecentUrlImages(urls: URL[]) {
+	const normalized = normalizeRecentUrlImages(urls.map((url: URL) => url.href));
+	localStorage.setItem(recentUrlImagesKey, JSON.stringify(normalized));
+}
+
+const isURL = (imagePath: string) =>
+	imagePath.startsWith('https://') || imagePath.startsWith('http://');
+
+const Card = styled(BaseCard)`
+	hr {
+		margin: 5px 0;
+	}
+`;
+
+// TODO move these styles to rendition
+const ModalText = styled.p`
+	a {
+		color: rgb(0, 174, 239);
+
+		&:hover {
+			color: rgb(0, 139, 191);
+		}
+	}
+`;
+
+function getState() {
+	const image = selectionState.getImage();
+	return {
+		hasImage: selectionState.hasImage(),
+		imageName: image?.name,
+		imageSize: image?.size,
+	};
+}
+
+function isString(value: any): value is string {
+	return typeof value === 'string';
+}
+
+const URLSelector = ({
+	done,
+	cancel,
+}: {
+	done: (imageURL: string, auth?: Authentication) => void;
+	cancel: () => void;
+}) => {
+	const [imageURL, setImageURL] = React.useState('');
+	const [recentImages, setRecentImages] = React.useState<URL[]>([]);
+	const [loading, setLoading] = React.useState(false);
+	const [showBasicAuth, setShowBasicAuth] = React.useState(false);
+	const [username, setUsername] = React.useState('');
+	const [password, setPassword] = React.useState('');
+	React.useEffect(() => {
+		const fetchRecentUrlImages = async () => {
+			const recentUrlImages: URL[] = await getRecentUrlImages();
+			setRecentImages(recentUrlImages);
+		};
+		fetchRecentUrlImages();
+	}, []);
+	return (
+		<Modal
+			cancel={cancel}
+			primaryButtonProps={{
+				disabled: loading || !imageURL,
+			}}
+			action={loading ? <Spinner /> : 'OK'}
+			done={async () => {
+				setLoading(true);
+				const urlStrings = recentImages.map((url: URL) => url.href);
+				const normalizedRecentUrls = normalizeRecentUrlImages([
+					...urlStrings,
+					imageURL,
+				]);
+				setRecentUrlImages(normalizedRecentUrls);
+				const auth = username ? { username, password } : undefined;
+				await done(imageURL, auth);
+			}}
+		>
+			<Flex flexDirection="column">
+				<Flex mb={15} style={{ width: '100%' }} flexDirection="column">
+					<Txt mb="10px" fontSize="24px">
+						Use Image URL
+					</Txt>
+					<Input
+						value={imageURL}
+						placeholder="Enter a valid URL"
+						type="text"
+						onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
+							setImageURL(evt.target.value)
+						}
+					/>
+					<Link
+						mt={15}
+						mb={15}
+						fontSize="14px"
+						onClick={() => {
+							if (showBasicAuth) {
+								setUsername('');
+								setPassword('');
+							}
+							setShowBasicAuth(!showBasicAuth);
+						}}
+					>
+						<Flex alignItems="center">
+							{showBasicAuth && (
+								<ChevronDownSvg height="1em" fill="currentColor" />
+							)}
+							{!showBasicAuth && (
+								<ChevronRightSvg height="1em" fill="currentColor" />
+							)}
+							<Txt ml={8}>Authentication</Txt>
+						</Flex>
+					</Link>
+					{showBasicAuth && (
+						<React.Fragment>
+							<Input
+								mb={15}
+								value={username}
+								placeholder="Enter username"
+								type="text"
+								onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
+									setUsername(evt.target.value)
+								}
+							/>
+							<Input
+								value={password}
+								placeholder="Enter password"
+								type="password"
+								onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
+									setPassword(evt.target.value)
+								}
+							/>
+						</React.Fragment>
+					)}
+				</Flex>
+				{recentImages.length > 0 && (
+					<Flex flexDirection="column" height="78.6%">
+						<Txt fontSize={18}>Recent</Txt>
+						<ScrollableFlex flexDirection="column">
+							<Card
+								p="10px 15px"
+								rows={recentImages
+									.map((recent) => (
+										<Txt
+											key={recent.href}
+											onClick={() => {
+												setImageURL(recent.href);
+											}}
+											style={{
+												overflowWrap: 'break-word',
+											}}
+										>
+											{recent.pathname.split('/').pop()} - {recent.href}
+										</Txt>
+									))
+									.reverse()}
+							/>
+						</ScrollableFlex>
+					</Flex>
+				)}
+			</Flex>
+		</Modal>
+	);
+};
+
+interface Flow {
+	icon?: JSX.Element;
+	onClick: (evt: React.MouseEvent) => void;
+	label: string;
+}
+
+const FlowSelector = styled(
+	({ flow, ...props }: { flow: Flow } & ButtonProps) => (
+		<StepButton
+			plain={!props.primary}
+			primary={props.primary}
+			onClick={(evt: React.MouseEvent<Element, MouseEvent>) =>
+				flow.onClick(evt)
+			}
+			icon={flow.icon}
+			{...props}
+		>
+			{flow.label}
+		</StepButton>
+	),
+)`
+	border-radius: 24px;
+	color: rgba(255, 255, 255, 0.7);
+
+	:enabled:focus,
+	:enabled:focus svg {
+		color: ${colors.primary.foreground} !important;
+	}
+
+	:enabled:hover {
+		background-color: ${colors.primary.background};
+		color: ${colors.primary.foreground};
+		font-weight: 600;
+
+		svg {
+			color: ${colors.primary.foreground}!important;
+		}
+	}
+`;
+
+export type Source =
+	| typeof sourceDestination.File
+	| typeof sourceDestination.BlockDevice
+	| typeof sourceDestination.Http;
+
+export interface SourceMetadata extends sourceDestination.Metadata {
+	hasMBR?: boolean;
+	partitions?: MBRPartition[] | GPTPartition[];
+	path: string;
+	displayName: string;
+	description: string;
+	SourceType: Source;
+	drive?: DrivelistDrive;
+	extension?: string;
+	archiveExtension?: string;
+	auth?: Authentication;
+}
+
+interface SourceSelectorProps {
+	flashing: boolean;
+}
+
+interface SourceSelectorState {
+	hasImage: boolean;
+	imageName?: string;
+	imageSize?: number;
+	warning: { message: string; title: string | null } | null;
+	showImageDetails: boolean;
+	showURLSelector: boolean;
+	showDriveSelector: boolean;
+	defaultFlowActive: boolean;
+	imageSelectorOpen: boolean;
+	imageLoading: boolean;
+}
+
+interface Authentication {
+	username: string;
+	password: string;
+}
+
+export class SourceSelector extends React.Component<
+	SourceSelectorProps,
+	SourceSelectorState
+> {
+	private unsubscribe: (() => void) | undefined;
+
+	constructor(props: SourceSelectorProps) {
+		super(props);
+		this.state = {
+			...getState(),
+			warning: null,
+			showImageDetails: false,
+			showURLSelector: false,
+			showDriveSelector: false,
+			defaultFlowActive: true,
+			imageSelectorOpen: false,
+			imageLoading: false,
+		};
+
+		// Bind `this` since it's used in an event's callback
+		this.onSelectImage = this.onSelectImage.bind(this);
+	}
+
+	public componentDidMount() {
+		this.unsubscribe = observe(() => {
+			this.setState(getState());
+		});
+		ipcRenderer.on('select-image', this.onSelectImage);
+		ipcRenderer.send('source-selector-ready');
+	}
+
+	public componentWillUnmount() {
+		this.unsubscribe?.();
+		ipcRenderer.removeListener('select-image', this.onSelectImage);
+	}
+
+	private async onSelectImage(_event: IpcRendererEvent, imagePath: string) {
+		this.setState({ imageLoading: true });
+		await this.selectSource(
+			imagePath,
+			isURL(this.normalizeImagePath(imagePath))
+				? sourceDestination.Http
+				: sourceDestination.File,
+		).promise;
+		this.setState({ imageLoading: false });
+	}
+
+	private async createSource(
+		selected: string,
+		SourceType: Source,
+		auth?: Authentication,
+	) {
+		try {
+			selected = await replaceWindowsNetworkDriveLetter(selected);
+		} catch (error: any) {
+			analytics.logException(error);
+		}
+
+		if (isJson(decodeURIComponent(selected))) {
+			const config: AxiosRequestConfig = JSON.parse(
+				decodeURIComponent(selected),
+			);
+			return new sourceDestination.Http({
+				url: config.url!,
+				axiosInstance: axios.create(_.omit(config, ['url'])),
+			});
+		}
+
+		if (SourceType === sourceDestination.File) {
+			return new sourceDestination.File({
+				path: selected,
+			});
+		}
+
+		return new sourceDestination.Http({ url: selected, auth });
+	}
+
+	public normalizeImagePath(imgPath: string) {
+		const decodedPath = decodeURIComponent(imgPath);
+		if (isJson(decodedPath)) {
+			return JSON.parse(decodedPath).url ?? decodedPath;
+		}
+		return decodedPath;
+	}
+
+	private reselectSource() {
+		analytics.logEvent('Reselect image', {
+			previousImage: selectionState.getImage(),
+		});
+
+		selectionState.deselectImage();
+	}
+
+	private selectSource(
+		selected: string | DrivelistDrive,
+		SourceType: Source,
+		auth?: Authentication,
+	): { promise: Promise<void>; cancel: () => void } {
+		let cancelled = false;
+		return {
+			cancel: () => {
+				cancelled = true;
+			},
+			promise: (async () => {
+				const sourcePath = isString(selected) ? selected : selected.device;
+				let source;
+				let metadata: SourceMetadata | undefined;
+				if (isString(selected)) {
+					if (
+						SourceType === sourceDestination.Http &&
+						!isURL(this.normalizeImagePath(selected))
+					) {
+						this.handleError(
+							'Unsupported protocol',
+							selected,
+							messages.error.unsupportedProtocol(),
+						);
+						return;
+					}
+
+					if (supportedFormats.looksLikeWindowsImage(selected)) {
+						analytics.logEvent('Possibly Windows image', { image: selected });
+						this.setState({
+							warning: {
+								message: messages.warning.looksLikeWindowsImage(),
+								title: 'Possible Windows image detected',
+							},
+						});
+					}
+					source = await this.createSource(selected, SourceType, auth);
+
+					if (cancelled) {
+						return;
+					}
+
+					try {
+						const innerSource = await source.getInnerSource();
+						if (cancelled) {
+							return;
+						}
+						metadata = await this.getMetadata(innerSource, selected);
+						if (cancelled) {
+							return;
+						}
+						metadata.SourceType = SourceType;
+
+						if (!metadata.hasMBR && this.state.warning === null) {
+							analytics.logEvent('Missing partition table', { metadata });
+							this.setState({
+								warning: {
+									message: messages.warning.missingPartitionTable(),
+									title: 'Missing partition table',
+								},
+							});
+						}
+					} catch (error: any) {
+						this.handleError(
+							'Error opening source',
+							sourcePath,
+							messages.error.openSource(sourcePath, error.message),
+							error,
+						);
+					} finally {
+						try {
+							await source.close();
+						} catch (error: any) {
+							// Noop
+						}
+					}
+				} else {
+					if (selected.partitionTableType === null) {
+						analytics.logEvent('Missing partition table', { selected });
+						this.setState({
+							warning: {
+								message: messages.warning.driveMissingPartitionTable(),
+								title: 'Missing partition table',
+							},
+						});
+					}
+					metadata = {
+						path: selected.device,
+						displayName: selected.displayName,
+						description: selected.displayName,
+						size: selected.size as SourceMetadata['size'],
+						SourceType: sourceDestination.BlockDevice,
+						drive: selected,
+					};
+				}
+
+				if (metadata !== undefined) {
+					metadata.auth = auth;
+					selectionState.selectSource(metadata);
+					analytics.logEvent('Select image', {
+						// An easy way so we can quickly identify if we're making use of
+						// certain features without printing pages of text to DevTools.
+						image: {
+							...metadata,
+							logo: Boolean(metadata.logo),
+							blockMap: Boolean(metadata.blockMap),
+						},
+					});
+				}
+			})(),
+		};
+	}
+
+	private handleError(
+		title: string,
+		sourcePath: string,
+		description: string,
+		error?: Error,
+	) {
+		const imageError = errors.createUserError({
+			title,
+			description,
+		});
+		osDialog.showError(imageError);
+		if (error) {
+			analytics.logException(error);
+			return;
+		}
+		analytics.logEvent(title, { path: sourcePath });
+	}
+
+	private async getMetadata(
+		source: sourceDestination.SourceDestination,
+		selected: string | DrivelistDrive,
+	) {
+		const metadata = (await source.getMetadata()) as SourceMetadata;
+		const partitionTable = await source.getPartitionTable();
+		if (partitionTable) {
+			metadata.hasMBR = true;
+			metadata.partitions = partitionTable.partitions;
+		} else {
+			metadata.hasMBR = false;
+		}
+		if (isString(selected)) {
+			metadata.extension = path.extname(selected).slice(1);
+			metadata.path = selected;
+		}
+		return metadata;
+	}
+
+	private async openImageSelector() {
+		analytics.logEvent('Open image selector');
+		this.setState({ imageSelectorOpen: true });
+
+		try {
+			const imagePath = await osDialog.selectImage();
+			// Avoid analytics and selection state changes
+			// if no file was resolved from the dialog.
+			if (!imagePath) {
+				analytics.logEvent('Image selector closed');
+				return;
+			}
+			await this.selectSource(imagePath, sourceDestination.File).promise;
+		} catch (error: any) {
+			exceptionReporter.report(error);
+		} finally {
+			this.setState({ imageSelectorOpen: false });
+		}
+	}
+
+	private async onDrop(event: React.DragEvent<HTMLDivElement>) {
+		const [file] = event.dataTransfer.files;
+		if (file) {
+			await this.selectSource(file.path, sourceDestination.File).promise;
+		}
+	}
+
+	private openURLSelector() {
+		analytics.logEvent('Open image URL selector');
+
+		this.setState({
+			showURLSelector: true,
+		});
+	}
+
+	private openDriveSelector() {
+		analytics.logEvent('Open drive selector');
+
+		this.setState({
+			showDriveSelector: true,
+		});
+	}
+
+	private onDragOver(event: React.DragEvent<HTMLDivElement>) {
+		// Needed to get onDrop events on div elements
+		event.preventDefault();
+	}
+
+	private onDragEnter(event: React.DragEvent<HTMLDivElement>) {
+		// Needed to get onDrop events on div elements
+		event.preventDefault();
+	}
+
+	private showSelectedImageDetails() {
+		analytics.logEvent('Show selected image tooltip', {
+			imagePath: selectionState.getImage()?.path,
+		});
+
+		this.setState({
+			showImageDetails: true,
+		});
+	}
+
+	private setDefaultFlowActive(defaultFlowActive: boolean) {
+		this.setState({ defaultFlowActive });
+	}
+
+	private closeModal() {
+		this.setState({
+			showDriveSelector: false,
+		});
+	}
+
+	// TODO add a visual change when dragging a file over the selector
+	public render() {
+		const { flashing } = this.props;
+		const {
+			showImageDetails,
+			showURLSelector,
+			showDriveSelector,
+			imageLoading,
+		} = this.state;
+		const selectionImage = selectionState.getImage();
+		let image: SourceMetadata | DrivelistDrive =
+			selectionImage !== undefined ? selectionImage : ({} as SourceMetadata);
+
+		image = image.drive ?? image;
+
+		let cancelURLSelection = () => {
+			// noop
+		};
+		image.name = image.description || image.name;
+		const imagePath = image.path || image.displayName || '';
+		const imageBasename = path.basename(imagePath);
+		const imageName = image.name || '';
+		const imageSize = image.size;
+		const imageLogo = image.logo || '';
+
+		return (
+			<>
+				<Flex
+					flexDirection="column"
+					alignItems="center"
+					onDrop={(evt: React.DragEvent<HTMLDivElement>) => this.onDrop(evt)}
+					onDragEnter={(evt: React.DragEvent<HTMLDivElement>) =>
+						this.onDragEnter(evt)
+					}
+					onDragOver={(evt: React.DragEvent<HTMLDivElement>) =>
+						this.onDragOver(evt)
+					}
+				>
+					<SVGIcon
+						contents={imageLogo}
+						fallback={ImageSvg}
+						style={{
+							marginBottom: 30,
+						}}
+					/>
+
+					{selectionImage !== undefined || imageLoading ? (
+						<>
+							<StepNameButton
+								plain
+								onClick={() => this.showSelectedImageDetails()}
+								tooltip={imageName || imageBasename}
+							>
+								<Spinner show={imageLoading}>
+									{middleEllipsis(imageName || imageBasename, 20)}
+								</Spinner>
+							</StepNameButton>
+							{!flashing && !imageLoading && (
+								<ChangeButton
+									plain
+									mb={14}
+									onClick={() => this.reselectSource()}
+								>
+									Remove
+								</ChangeButton>
+							)}
+							{!_.isNil(imageSize) && !imageLoading && (
+								<DetailsText>{prettyBytes(imageSize)}</DetailsText>
+							)}
+						</>
+					) : (
+						<>
+							<FlowSelector
+								disabled={this.state.imageSelectorOpen}
+								primary={this.state.defaultFlowActive}
+								key="Flash from file"
+								flow={{
+									onClick: () => this.openImageSelector(),
+									label: 'Flash from file',
+									icon: <FileSvg height="1em" fill="currentColor" />,
+								}}
+								onMouseEnter={() => this.setDefaultFlowActive(false)}
+								onMouseLeave={() => this.setDefaultFlowActive(true)}
+							/>
+							<FlowSelector
+								key="Flash from URL"
+								flow={{
+									onClick: () => this.openURLSelector(),
+									label: 'Flash from URL',
+									icon: <LinkSvg height="1em" fill="currentColor" />,
+								}}
+								onMouseEnter={() => this.setDefaultFlowActive(false)}
+								onMouseLeave={() => this.setDefaultFlowActive(true)}
+							/>
+							<FlowSelector
+								key="Clone drive"
+								flow={{
+									onClick: () => this.openDriveSelector(),
+									label: 'Clone drive',
+									icon: <CopySvg height="1em" fill="currentColor" />,
+								}}
+								onMouseEnter={() => this.setDefaultFlowActive(false)}
+								onMouseLeave={() => this.setDefaultFlowActive(true)}
+							/>
+						</>
+					)}
+				</Flex>
+
+				{this.state.warning != null && (
+					<SmallModal
+						style={{
+							boxShadow: '0 3px 7px rgba(0, 0, 0, 0.3)',
+						}}
+						titleElement={
+							<span>
+								<ExclamationTriangleSvg fill="#fca321" height="1em" />{' '}
+								<span>{this.state.warning.title}</span>
+							</span>
+						}
+						action="Continue"
+						cancel={() => {
+							this.setState({ warning: null });
+							this.reselectSource();
+						}}
+						done={() => {
+							this.setState({ warning: null });
+						}}
+						primaryButtonProps={{ warning: true, primary: false }}
+					>
+						<ModalText
+							dangerouslySetInnerHTML={{ __html: this.state.warning.message }}
+						/>
+					</SmallModal>
+				)}
+
+				{showImageDetails && (
+					<SmallModal
+						title="Image"
+						done={() => {
+							this.setState({ showImageDetails: false });
+						}}
+					>
+						<Txt.p>
+							<Txt.span bold>Name: </Txt.span>
+							<Txt.span>{imageName || imageBasename}</Txt.span>
+						</Txt.p>
+						<Txt.p>
+							<Txt.span bold>Path: </Txt.span>
+							<Txt.span>{imagePath}</Txt.span>
+						</Txt.p>
+					</SmallModal>
+				)}
+
+				{showURLSelector && (
+					<URLSelector
+						cancel={() => {
+							cancelURLSelection();
+							this.setState({
+								showURLSelector: false,
+							});
+						}}
+						done={async (imageURL: string, auth?: Authentication) => {
+							// Avoid analytics and selection state changes
+							// if no file was resolved from the dialog.
+							if (!imageURL) {
+								analytics.logEvent('URL selector closed');
+							} else {
+								let promise;
+								({ promise, cancel: cancelURLSelection } = this.selectSource(
+									imageURL,
+									sourceDestination.Http,
+									auth,
+								));
+								await promise;
+							}
+							this.setState({
+								showURLSelector: false,
+							});
+						}}
+					/>
+				)}
+
+				{showDriveSelector && (
+					<DriveSelector
+						write={false}
+						multipleSelection={false}
+						titleLabel="Select source"
+						emptyListLabel="Plug a source drive"
+						emptyListIcon={<SrcSvg width="40px" />}
+						cancel={(originalList) => {
+							if (originalList.length) {
+								const originalSource = originalList[0];
+								if (selectionImage?.drive?.device !== originalSource.device) {
+									this.selectSource(
+										originalSource,
+										sourceDestination.BlockDevice,
+									);
+								}
+							} else {
+								selectionState.deselectImage();
+							}
+							this.closeModal();
+						}}
+						done={() => this.closeModal()}
+						onSelect={(drive) => {
+							if (drive) {
+								if (
+									selectionState.getImage()?.drive?.device === drive?.device
+								) {
+									return selectionState.deselectImage();
+								}
+								this.selectSource(drive, sourceDestination.BlockDevice);
+							}
+						}}
+					/>
+				)}
+			</>
+		);
+	}
+}

lib/gui/app/components/svg-icon/svg-icon.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2018 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+
+const domParser = new window.DOMParser();
+
+const DEFAULT_SIZE = '40px';
+
+/**
+ * @summary Try to parse SVG contents and return it data encoded
+ *
+ */
+function tryParseSVGContents(contents?: string): string | undefined {
+	if (contents === undefined) {
+		return;
+	}
+	const doc = domParser.parseFromString(contents, 'image/svg+xml');
+	const parserError = doc.querySelector('parsererror');
+	const svg = doc.querySelector('svg');
+	if (!parserError && svg) {
+		return `data:image/svg+xml,${encodeURIComponent(svg.outerHTML)}`;
+	}
+}
+
+interface SVGIconProps {
+	// Optional string representing the SVG contents to be tried
+	contents?: string;
+	// Fallback SVG element to show if `contents` is invalid/undefined
+	fallback: React.FunctionComponent<React.SVGProps<HTMLOrSVGElement>>;
+	// SVG image width unit
+	width?: string;
+	// SVG image height unit
+	height?: string;
+	// Should the element visually appear grayed out and disabled?
+	disabled?: boolean;
+	style?: React.CSSProperties;
+}
+
+/**
+ * @summary SVG element that takes file contents
+ */
+export class SVGIcon extends React.PureComponent<SVGIconProps> {
+	public render() {
+		const svgData = tryParseSVGContents(this.props.contents);
+		const { width, height, style = {} } = this.props;
+		style.width = width || DEFAULT_SIZE;
+		style.height = height || DEFAULT_SIZE;
+		if (svgData !== undefined) {
+			return (
+				<img
+					className={this.props.disabled ? 'disabled' : ''}
+					style={style}
+					src={svgData}
+				/>
+			);
+		}
+		const { fallback: FallbackSVG } = this.props;
+		return <FallbackSVG style={style} />;
+	}
+}

lib/gui/app/components/target-selector/target-selector-button.tsx

@@ -0,0 +1,157 @@
+/*
+ * Copyright 2019 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
+import * as React from 'react';
+import { Flex, FlexProps, Txt } from 'rendition';
+
+import {
+	getDriveImageCompatibilityStatuses,
+	DriveStatus,
+} from '../../../../shared/drive-constraints';
+import { compatibility, warning } from '../../../../shared/messages';
+import * as prettyBytes from 'pretty-bytes';
+import { getImage, getSelectedDrives } from '../../models/selection-state';
+import {
+	ChangeButton,
+	DetailsText,
+	StepButton,
+	StepNameButton,
+} from '../../styled-components';
+import { middleEllipsis } from '../../utils/middle-ellipsis';
+
+interface TargetSelectorProps {
+	targets: any[];
+	disabled: boolean;
+	openDriveSelector: () => void;
+	reselectDrive: () => void;
+	flashing: boolean;
+	show: boolean;
+	tooltip: string;
+}
+
+function getDriveWarning(status: DriveStatus) {
+	switch (status.message) {
+		case compatibility.containsImage():
+			return warning.sourceDrive();
+		case compatibility.largeDrive():
+			return warning.largeDriveSize();
+		case compatibility.system():
+			return warning.systemDrive();
+		default:
+			return '';
+	}
+}
+
+const DriveCompatibilityWarning = ({
+	warnings,
+	...props
+}: {
+	warnings: string[];
+} & FlexProps) => {
+	const systemDrive = warnings.find(
+		(message) => message === warning.systemDrive(),
+	);
+	return (
+		<Flex tooltip={warnings.join(', ')} {...props}>
+			<ExclamationTriangleSvg
+				fill={systemDrive ? '#fca321' : '#8f9297'}
+				height="1em"
+			/>
+		</Flex>
+	);
+};
+
+export function TargetSelectorButton(props: TargetSelectorProps) {
+	const targets = getSelectedDrives();
+
+	if (targets.length === 1) {
+		const target = targets[0];
+		const warnings = getDriveImageCompatibilityStatuses(
+			target,
+			getImage(),
+			true,
+		).map(getDriveWarning);
+		return (
+			<>
+				<StepNameButton plain tooltip={props.tooltip}>
+					{warnings.length > 0 && (
+						<DriveCompatibilityWarning warnings={warnings} mr={2} />
+					)}
+					{middleEllipsis(target.description, 20)}
+				</StepNameButton>
+				{!props.flashing && (
+					<ChangeButton plain mb={14} onClick={props.reselectDrive}>
+						Change
+					</ChangeButton>
+				)}
+				{target.size != null && (
+					<DetailsText>{prettyBytes(target.size)}</DetailsText>
+				)}
+			</>
+		);
+	}
+
+	if (targets.length > 1) {
+		const targetsTemplate = [];
+		for (const target of targets) {
+			const warnings = getDriveImageCompatibilityStatuses(
+				target,
+				getImage(),
+				true,
+			).map(getDriveWarning);
+			targetsTemplate.push(
+				<DetailsText
+					key={target.device}
+					tooltip={`${target.description} ${target.displayName} ${
+						target.size != null ? prettyBytes(target.size) : ''
+					}`}
+					px={21}
+				>
+					{warnings.length > 0 ? (
+						<DriveCompatibilityWarning warnings={warnings} mr={2} />
+					) : null}
+					<Txt mr={2}>{middleEllipsis(target.description, 14)}</Txt>
+					{target.size != null && <Txt>{prettyBytes(target.size)}</Txt>}
+				</DetailsText>,
+			);
+		}
+		return (
+			<>
+				<StepNameButton plain tooltip={props.tooltip}>
+					{targets.length} Targets
+				</StepNameButton>
+				{!props.flashing && (
+					<ChangeButton plain onClick={props.reselectDrive} mb={14}>
+						Change
+					</ChangeButton>
+				)}
+				{targetsTemplate}
+			</>
+		);
+	}
+
+	return (
+		<StepButton
+			primary
+			tabIndex={targets.length > 0 ? -1 : 2}
+			disabled={props.disabled}
+			onClick={props.openDriveSelector}
+		>
+			Select target
+		</StepButton>
+	);
+}

lib/gui/app/components/target-selector/target-selector.tsx

@@ -0,0 +1,193 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import { Flex, Txt } from 'rendition';
+
+import {
+	DriveSelector,
+	DriveSelectorProps,
+} from '../drive-selector/drive-selector';
+import {
+	isDriveSelected,
+	getImage,
+	getSelectedDrives,
+	deselectDrive,
+	selectDrive,
+	deselectAllDrives,
+} from '../../models/selection-state';
+import { observe } from '../../models/store';
+import * as analytics from '../../modules/analytics';
+import { TargetSelectorButton } from './target-selector-button';
+
+import TgtSvg from '../../../assets/tgt.svg';
+import DriveSvg from '../../../assets/drive.svg';
+import { warning } from '../../../../shared/messages';
+import { DrivelistDrive } from '../../../../shared/drive-constraints';
+
+export const getDriveListLabel = () => {
+	return getSelectedDrives()
+		.map((drive: any) => {
+			return `${drive.description} (${drive.displayName})`;
+		})
+		.join('\n');
+};
+
+const getDriveSelectionStateSlice = () => ({
+	driveListLabel: getDriveListLabel(),
+	targets: getSelectedDrives(),
+	image: getImage(),
+});
+
+export const TargetSelectorModal = (
+	props: Omit<
+		DriveSelectorProps,
+		'titleLabel' | 'emptyListLabel' | 'multipleSelection' | 'emptyListIcon'
+	>,
+) => (
+	<DriveSelector
+		multipleSelection={true}
+		titleLabel="Select target"
+		emptyListLabel="Plug a target drive"
+		emptyListIcon={<TgtSvg width="40px" />}
+		showWarnings={true}
+		selectedList={getSelectedDrives()}
+		updateSelectedList={getSelectedDrives}
+		{...props}
+	/>
+);
+
+export const selectAllTargets = (modalTargets: DrivelistDrive[]) => {
+	const selectedDrivesFromState = getSelectedDrives();
+	const deselected = selectedDrivesFromState.filter(
+		(drive) =>
+			!modalTargets.find((modalTarget) => modalTarget.device === drive.device),
+	);
+	// deselect drives
+	deselected.forEach((drive) => {
+		analytics.logEvent('Toggle drive', {
+			drive,
+			previouslySelected: true,
+		});
+		deselectDrive(drive.device);
+	});
+	// select drives
+	modalTargets.forEach((drive) => {
+		// Don't send events for drives that were already selected
+		if (!isDriveSelected(drive.device)) {
+			analytics.logEvent('Toggle drive', {
+				drive,
+				previouslySelected: false,
+			});
+		}
+		selectDrive(drive.device);
+	});
+};
+
+interface TargetSelectorProps {
+	disabled: boolean;
+	hasDrive: boolean;
+	flashing: boolean;
+}
+
+export const TargetSelector = ({
+	disabled,
+	hasDrive,
+	flashing,
+}: TargetSelectorProps) => {
+	// TODO: inject these from redux-connector
+	const [{ driveListLabel, targets }, setStateSlice] = React.useState(
+		getDriveSelectionStateSlice(),
+	);
+	const [showTargetSelectorModal, setShowTargetSelectorModal] =
+		React.useState(false);
+
+	React.useEffect(() => {
+		return observe(() => {
+			setStateSlice(getDriveSelectionStateSlice());
+		});
+	}, []);
+
+	const hasSystemDrives = targets.some((target) => target.isSystem);
+	return (
+		<Flex flexDirection="column" alignItems="center">
+			<DriveSvg
+				className={disabled ? 'disabled' : ''}
+				width="40px"
+				style={{
+					marginBottom: 30,
+				}}
+			/>
+
+			<TargetSelectorButton
+				disabled={disabled}
+				show={!hasDrive}
+				tooltip={driveListLabel}
+				openDriveSelector={() => {
+					setShowTargetSelectorModal(true);
+				}}
+				reselectDrive={() => {
+					analytics.logEvent('Reselect drive');
+					setShowTargetSelectorModal(true);
+				}}
+				flashing={flashing}
+				targets={targets}
+			/>
+
+			{hasSystemDrives ? (
+				<Txt
+					color="#fca321"
+					style={{
+						position: 'absolute',
+						bottom: '25px',
+					}}
+				>
+					Warning: {warning.systemDrive()}
+				</Txt>
+			) : null}
+
+			{showTargetSelectorModal && (
+				<TargetSelectorModal
+					write={true}
+					cancel={(originalList) => {
+						if (originalList.length) {
+							selectAllTargets(originalList);
+						} else {
+							deselectAllDrives();
+						}
+						setShowTargetSelectorModal(false);
+					}}
+					done={(modalTargets) => {
+						if (modalTargets.length === 0) {
+							deselectAllDrives();
+						}
+						setShowTargetSelectorModal(false);
+					}}
+					onSelect={(drive) => {
+						if (
+							getSelectedDrives().find(
+								(selectedDrive) => selectedDrive.device === drive.device,
+							)
+						) {
+							return deselectDrive(drive.device);
+						}
+						selectDrive(drive.device);
+					}}
+				/>
+			)}
+		</Flex>
+	);
+};

lib/gui/app/css/main.css

@@ -1,5 +1,5 @@
 /*
- * Copyright 2016 resin.io
+ * Copyright 2016 balena.io
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,46 +14,53 @@
  * limitations under the License.
  */
 
-/* Prevent text selection */
-body {
-  -webkit-user-select: none;
+@font-face {
+  font-family: "SourceSansPro";
+  src: url("./fonts/SourceSansPro-Regular.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
 }
 
-
-/* Allow window to be dragged from anywhere */
-* {
-  -webkit-app-region: drag;
+@font-face {
+  font-family: "SourceSansPro";
+  src: url("./fonts/SourceSansPro-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
 }
 
-button,
-a,
-input {
-  -webkit-app-region: no-drag;
-}
-
-/* Prevent WebView bounce effect in OS X */
 html,
 body {
+  margin: 0;
+  overflow: hidden;
+
+  /* Prevent white flash when running application */
+  background-color: #4d5057;
+
+  /* Prevent WebView bounce effect in OS X */
   height: 100%;
   width: 100%;
 }
 
-html {
-  overflow: hidden;
-}
-
+/* Prevent text selection */
 body {
-  overflow: hidden;
+  -webkit-user-select: none;
   -webkit-overflow-scrolling: touch;
 }
 
 /* Prevent blue outline */
+a:focus,
 input:focus,
-button:focus {
+button:focus,
+[tabindex]:focus,
+input[type="checkbox"] + div {
   outline: none !important;
+  box-shadow: none !important;
 }
 
-/* Titles don't have margins on desktop apps */
-h1, h2, h3, h4, h5, h6 {
-  margin: 0;
+.disabled {
+  opacity: 0.4;
+}
+
+#rendition-tooltip-root > div {
+  font-family: "SourceSansPro", sans-serif;
 }

lib/gui/app/index.dev.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>balenaEtcher</title>
+    <link rel="stylesheet" type="text/css" href="index.css">
+  </head>
+  <body>
+    <main id="main"></main>
+    <script src="http://localhost:3030/gui.js"></script>
+  </body>
+</html>

lib/gui/app/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>balenaEtcher</title>
+    <link rel="stylesheet" type="text/css" href="index.css">
+  </head>
+  <body>
+    <main id="main"></main>
+    <script src="gui.js"></script>
+  </body>
+</html>

lib/gui/app/models/available-drives.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright 2016 resin.io
+ * Copyright 2016 balena.io
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,18 +14,20 @@
  * limitations under the License.
  */
 
-'use strict';
+import { DrivelistDrive } from '../../../shared/drive-constraints';
+import { Actions, store } from './store';
 
-/**
- * @module Etcher.Components.Modal
- */
+export function hasAvailableDrives() {
+	return getDrives().length > 0;
+}
 
-const angular = require('angular');
-const MODULE_NAME = 'Etcher.Components.Modal';
-const Modal = angular.module(MODULE_NAME, [
-  require('angular-ui-bootstrap')
-]);
+export function setDrives(drives: any[]) {
+	store.dispatch({
+		type: Actions.SET_AVAILABLE_TARGETS,
+		data: drives,
+	});
+}
 
-Modal.service('ModalService', require('./services/modal'));
-
-module.exports = MODULE_NAME;
+export function getDrives(): DrivelistDrive[] {
+	return store.getState().toJS().availableDrives;
+}

lib/gui/app/models/flash-state.ts

@@ -0,0 +1,162 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as electron from 'electron';
+import * as sdk from 'etcher-sdk';
+import * as _ from 'lodash';
+import { DrivelistDrive } from '../../../shared/drive-constraints';
+
+import { bytesToMegabytes } from '../../../shared/units';
+import { Actions, store } from './store';
+
+/**
+ * @summary Reset flash state
+ */
+export function resetState() {
+	store.dispatch({
+		type: Actions.RESET_FLASH_STATE,
+		data: {},
+	});
+}
+
+/**
+ * @summary Check if currently flashing
+ */
+export function isFlashing(): boolean {
+	return store.getState().toJS().isFlashing;
+}
+
+/**
+ * @summary Set the flashing flag
+ *
+ * @description
+ * The flag is used to signify that we're going to
+ * start a flash process.
+ */
+export function setFlashingFlag() {
+	// see https://github.com/balenablocks/balena-electron-env/blob/4fce9c461f294d4a768db8f247eea6f75d7b08b0/README.md#remote-methods
+	electron.ipcRenderer.send('disable-screensaver');
+	store.dispatch({
+		type: Actions.SET_FLASHING_FLAG,
+		data: {},
+	});
+}
+
+/**
+ * @summary Unset the flashing flag
+ *
+ * @description
+ * The flag is used to signify that the write process ended.
+ */
+export function unsetFlashingFlag(results: {
+	cancelled?: boolean;
+	sourceChecksum?: string;
+	errorCode?: string | number;
+}) {
+	store.dispatch({
+		type: Actions.UNSET_FLASHING_FLAG,
+		data: results,
+	});
+	// see https://github.com/balenablocks/balena-electron-env/blob/4fce9c461f294d4a768db8f247eea6f75d7b08b0/README.md#remote-methods
+	electron.ipcRenderer.send('enable-screensaver');
+}
+
+export function setDevicePaths(devicePaths: string[]) {
+	store.dispatch({
+		type: Actions.SET_DEVICE_PATHS,
+		data: devicePaths,
+	});
+}
+
+export function addFailedDeviceError({
+	device,
+	error,
+}: {
+	device: DrivelistDrive;
+	error: Error;
+}) {
+	const failedDeviceErrorsMap = new Map(
+		store.getState().toJS().failedDeviceErrors,
+	);
+	if (failedDeviceErrorsMap.has(device.device)) {
+		// Only store the first error
+		return;
+	}
+	failedDeviceErrorsMap.set(device.device, {
+		description: device.description,
+		device: device.device,
+		devicePath: device.devicePath,
+		...error,
+	});
+	store.dispatch({
+		type: Actions.SET_FAILED_DEVICE_ERRORS,
+		data: Array.from(failedDeviceErrorsMap),
+	});
+}
+
+/**
+ * @summary Set the flashing state
+ */
+export function setProgressState(
+	state: sdk.multiWrite.MultiDestinationProgress,
+) {
+	// Preserve only one decimal place
+	const PRECISION = 1;
+	const data = {
+		...state,
+		percentage:
+			state.percentage !== undefined && _.isFinite(state.percentage)
+				? Math.floor(state.percentage)
+				: undefined,
+
+		speed: _.attempt(() => {
+			if (_.isFinite(state.speed)) {
+				return _.round(bytesToMegabytes(state.speed), PRECISION);
+			}
+
+			return null;
+		}),
+	};
+
+	store.dispatch({
+		type: Actions.SET_FLASH_STATE,
+		data,
+	});
+}
+
+export function getFlashResults() {
+	return store.getState().toJS().flashResults;
+}
+
+export function getFlashState() {
+	return store.getState().get('flashState').toJS();
+}
+
+export function wasLastFlashCancelled() {
+	return _.get(getFlashResults(), ['cancelled'], false);
+}
+
+export function getLastFlashSourceChecksum(): string {
+	return getFlashResults().sourceChecksum;
+}
+
+export function getLastFlashErrorCode() {
+	return getFlashResults().errorCode;
+}
+
+export function getFlashUuid() {
+	return store.getState().toJS().flashUuid;
+}

lib/gui/app/models/leds.ts

@@ -0,0 +1,260 @@
+/*
+ * Copyright 2020 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as _ from 'lodash';
+import { Animator, AnimationFunction, Color, RGBLed } from 'sys-class-rgb-led';
+
+import {
+	DrivelistDrive,
+	isSourceDrive,
+} from '../../../shared/drive-constraints';
+import { getDrives } from './available-drives';
+import { getSelectedDrives } from './selection-state';
+import * as settings from './settings';
+import { observe, store } from './store';
+
+const leds: Map<string, RGBLed> = new Map();
+const animator = new Animator([], 10);
+
+function createAnimationFunction(
+	intensityFunction: (t: number) => number,
+	color: Color,
+): AnimationFunction {
+	return (t: number): Color => {
+		const intensity = intensityFunction(t);
+		return color.map((v: number) => v * intensity) as Color;
+	};
+}
+
+function blink(t: number) {
+	return Math.floor(t) % 2;
+}
+
+function one(_t: number) {
+	return 1;
+}
+
+type LEDColors = {
+	green: Color;
+	purple: Color;
+	red: Color;
+	blue: Color;
+	white: Color;
+	black: Color;
+};
+
+type LEDAnimationFunctions = {
+	blinkGreen: AnimationFunction;
+	blinkPurple: AnimationFunction;
+	staticRed: AnimationFunction;
+	staticGreen: AnimationFunction;
+	staticBlue: AnimationFunction;
+	staticWhite: AnimationFunction;
+	staticBlack: AnimationFunction;
+};
+
+let ledColors: LEDColors;
+let ledAnimationFunctions: LEDAnimationFunctions;
+
+interface LedsState {
+	step: 'main' | 'flashing' | 'verifying' | 'finish';
+	sourceDrive: string | undefined;
+	availableDrives: string[];
+	selectedDrives: string[];
+	failedDrives: string[];
+}
+
+function setLeds(animation: AnimationFunction, drivesPaths: Set<string>) {
+	const rgbLeds: RGBLed[] = [];
+	for (const path of drivesPaths) {
+		const led = leds.get(path);
+		if (led) {
+			rgbLeds.push(led);
+		}
+	}
+	return { animation, rgbLeds };
+}
+
+// Source slot (1st slot): behaves as a target unless it is chosen as source
+//  No drive: black
+//  Drive plugged: blue - on
+//
+// Other slots (2 - 16):
+//
+// +----------------+---------------+-----------------------------+----------------------------+---------------------------------+
+// |                | main screen   | flashing                    | validating                 | results screen                  |
+// +----------------+---------------+-----------------------------+----------------------------+---------------------------------+
+// | no drive       | black         | black                       | black                      | black                           |
+// +----------------+---------------+-----------------------------+----------------------------+---------------------------------+
+// | drive plugged  | black         | black                       | black                      | black                           |
+// +----------------+---------------+-----------------------------+----------------------------+---------------------------------+
+// | drive selected | white         | blink purple, red if failed | blink green, red if failed | green if success, red if failed |
+// +----------------+---------------+-----------------------------+----------------------------+---------------------------------+
+export function updateLeds({
+	step,
+	sourceDrive,
+	availableDrives,
+	selectedDrives,
+	failedDrives,
+}: LedsState) {
+	const unplugged = new Set(leds.keys());
+	const plugged = new Set(availableDrives);
+	const selectedOk = new Set(selectedDrives);
+	const selectedFailed = new Set(failedDrives);
+
+	// Remove selected devices from plugged set
+	for (const d of selectedOk) {
+		plugged.delete(d);
+		unplugged.delete(d);
+	}
+
+	// Remove plugged devices from unplugged set
+	for (const d of plugged) {
+		unplugged.delete(d);
+	}
+
+	// Remove failed devices from selected set
+	for (const d of selectedFailed) {
+		selectedOk.delete(d);
+	}
+
+	const mapping: Array<{
+		animation: AnimationFunction;
+		rgbLeds: RGBLed[];
+	}> = [];
+	// Handle source slot
+	if (sourceDrive !== undefined) {
+		if (plugged.has(sourceDrive)) {
+			plugged.delete(sourceDrive);
+			mapping.push(
+				setLeds(ledAnimationFunctions.staticBlue, new Set([sourceDrive])),
+			);
+		}
+	}
+	if (step === 'main') {
+		mapping.push(
+			setLeds(
+				ledAnimationFunctions.staticBlack,
+				new Set([...unplugged, ...plugged]),
+			),
+			setLeds(
+				ledAnimationFunctions.staticWhite,
+				new Set([...selectedOk, ...selectedFailed]),
+			),
+		);
+	} else if (step === 'flashing') {
+		mapping.push(
+			setLeds(
+				ledAnimationFunctions.staticBlack,
+				new Set([...unplugged, ...plugged]),
+			),
+			setLeds(ledAnimationFunctions.blinkPurple, selectedOk),
+			setLeds(ledAnimationFunctions.staticRed, selectedFailed),
+		);
+	} else if (step === 'verifying') {
+		mapping.push(
+			setLeds(
+				ledAnimationFunctions.staticBlack,
+				new Set([...unplugged, ...plugged]),
+			),
+			setLeds(ledAnimationFunctions.blinkGreen, selectedOk),
+			setLeds(ledAnimationFunctions.staticRed, selectedFailed),
+		);
+	} else if (step === 'finish') {
+		mapping.push(
+			setLeds(
+				ledAnimationFunctions.staticBlack,
+				new Set([...unplugged, ...plugged]),
+			),
+			setLeds(ledAnimationFunctions.staticGreen, selectedOk),
+			setLeds(ledAnimationFunctions.staticRed, selectedFailed),
+		);
+	}
+	animator.mapping = mapping;
+}
+
+let ledsState: LedsState | undefined;
+
+function stateObserver() {
+	const s = store.getState().toJS();
+	let step: 'main' | 'flashing' | 'verifying' | 'finish';
+	if (s.isFlashing) {
+		step = s.flashState.type;
+	} else {
+		step = s.lastAverageFlashingSpeed == null ? 'main' : 'finish';
+	}
+	const availableDrives = getDrives().filter(
+		(d: DrivelistDrive) => d.devicePath,
+	);
+	const sourceDrivePath = availableDrives.filter((d: DrivelistDrive) =>
+		isSourceDrive(d, s.selection.image),
+	)[0]?.devicePath;
+	const availableDrivesPaths = availableDrives.map(
+		(d: DrivelistDrive) => d.devicePath,
+	);
+	let selectedDrivesPaths: string[];
+	if (step === 'main') {
+		selectedDrivesPaths = getSelectedDrives()
+			.filter((drive) => drive.devicePath !== null)
+			.map((drive) => drive.devicePath) as string[];
+	} else {
+		selectedDrivesPaths = s.devicePaths;
+	}
+	const failedDevicePaths = s.failedDeviceErrors.map(
+		([, { devicePath }]: [string, { devicePath: string }]) => devicePath,
+	);
+	const newLedsState = {
+		step,
+		sourceDrive: sourceDrivePath,
+		availableDrives: availableDrivesPaths,
+		selectedDrives: selectedDrivesPaths,
+		failedDrives: failedDevicePaths,
+	} as LedsState;
+	if (!_.isEqual(newLedsState, ledsState)) {
+		updateLeds(newLedsState);
+		ledsState = newLedsState;
+	}
+}
+
+export async function init(): Promise<void> {
+	// ledsMapping is something like:
+	// {
+	// 	'platform-xhci-hcd.0.auto-usb-0:1.1.1:1.0-scsi-0:0:0:0': [
+	// 		'led1_r',
+	// 		'led1_g',
+	// 		'led1_b',
+	// 	],
+	// 	...
+	// }
+	const ledsMapping: _.Dictionary<[string, string, string]> =
+		(await settings.get('ledsMapping')) || {};
+	if (!_.isEmpty(ledsMapping)) {
+		for (const [drivePath, ledsNames] of Object.entries(ledsMapping)) {
+			leds.set('/dev/disk/by-path/' + drivePath, new RGBLed(ledsNames));
+		}
+		ledColors = (await settings.get('ledColors')) || {};
+		ledAnimationFunctions = {
+			blinkGreen: createAnimationFunction(blink, ledColors['green']),
+			blinkPurple: createAnimationFunction(blink, ledColors['purple']),
+			staticRed: createAnimationFunction(one, ledColors['red']),
+			staticGreen: createAnimationFunction(one, ledColors['green']),
+			staticBlue: createAnimationFunction(one, ledColors['blue']),
+			staticWhite: createAnimationFunction(one, ledColors['white']),
+			staticBlack: createAnimationFunction(one, ledColors['black']),
+		};
+		observe(_.debounce(stateObserver, 1000, { maxWait: 1000 }));
+	}
+}

lib/gui/app/models/selection-state.ts

@@ -0,0 +1,128 @@
+import { DrivelistDrive } from '../../../shared/drive-constraints';
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SourceMetadata } from '../components/source-selector/source-selector';
+
+import * as availableDrives from './available-drives';
+import { Actions, store } from './store';
+
+/**
+ * @summary Select a drive by its device path
+ */
+export function selectDrive(driveDevice: string) {
+	store.dispatch({
+		type: Actions.SELECT_TARGET,
+		data: driveDevice,
+	});
+}
+
+/**
+ * @summary Toggle drive selection
+ */
+export function toggleDrive(driveDevice: string) {
+	if (isDriveSelected(driveDevice)) {
+		deselectDrive(driveDevice);
+	} else {
+		selectDrive(driveDevice);
+	}
+}
+
+export function selectSource(source: SourceMetadata) {
+	store.dispatch({
+		type: Actions.SELECT_SOURCE,
+		data: source,
+	});
+}
+
+/**
+ * @summary Get all selected drives' devices
+ */
+export function getSelectedDevices(): string[] {
+	return store.getState().getIn(['selection', 'devices']).toJS();
+}
+
+/**
+ * @summary Get all selected drive objects
+ */
+export function getSelectedDrives(): DrivelistDrive[] {
+	const selectedDevices = getSelectedDevices();
+	return availableDrives
+		.getDrives()
+		.filter((drive) => selectedDevices.includes(drive.device));
+}
+
+/**
+ * @summary Get the selected image
+ */
+export function getImage(): SourceMetadata | undefined {
+	return store.getState().toJS().selection.image;
+}
+
+/**
+ * @summary Check if there is a selected drive
+ */
+export function hasDrive(): boolean {
+	return Boolean(getSelectedDevices().length);
+}
+
+/**
+ * @summary Check if there is a selected image
+ */
+export function hasImage(): boolean {
+	return getImage() !== undefined;
+}
+
+/**
+ * @summary Remove drive from selection
+ */
+export function deselectDrive(driveDevice: string) {
+	store.dispatch({
+		type: Actions.DESELECT_TARGET,
+		data: driveDevice,
+	});
+}
+
+export function deselectImage() {
+	store.dispatch({
+		type: Actions.DESELECT_SOURCE,
+		data: {},
+	});
+}
+
+export function deselectAllDrives() {
+	getSelectedDevices().forEach(deselectDrive);
+}
+
+/**
+ * @summary Clear selections
+ */
+export function clear() {
+	deselectImage();
+	deselectAllDrives();
+}
+
+/**
+ * @summary Check whether a given device is selected.
+ */
+export function isDriveSelected(driveDevice: string) {
+	if (!driveDevice) {
+		return false;
+	}
+
+	const selectedDriveDevices = getSelectedDevices();
+	return selectedDriveDevices.includes(driveDevice);
+}

lib/gui/app/models/settings.ts

@@ -0,0 +1,127 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as _debug from 'debug';
+import * as electron from 'electron';
+import * as _ from 'lodash';
+import { promises as fs } from 'fs';
+import { join } from 'path';
+
+import * as packageJSON from '../../../../package.json';
+
+const debug = _debug('etcher:models:settings');
+
+const JSON_INDENT = 2;
+
+export const DEFAULT_WIDTH = 800;
+export const DEFAULT_HEIGHT = 480;
+
+/**
+ * @summary Userdata directory path
+ * @description
+ * Defaults to the following:
+ * - `%APPDATA%/etcher` on Windows
+ * - `$XDG_CONFIG_HOME/etcher` or `~/.config/etcher` on Linux
+ * - `~/Library/Application Support/etcher` on macOS
+ * See https://electronjs.org/docs/api/app#appgetpathname
+ *
+ * NOTE: We use the remote property when this module
+ * is loaded in the Electron's renderer process
+ */
+const app = electron.app || electron.remote.app;
+
+const USER_DATA_DIR = app.getPath('userData');
+
+const CONFIG_PATH = join(USER_DATA_DIR, 'config.json');
+
+async function readConfigFile(filename: string): Promise<_.Dictionary<any>> {
+	let contents = '{}';
+	try {
+		contents = await fs.readFile(filename, { encoding: 'utf8' });
+	} catch (error: any) {
+		// noop
+	}
+	try {
+		return JSON.parse(contents);
+	} catch (parseError) {
+		console.error(parseError);
+		return {};
+	}
+}
+
+// exported for tests
+export async function readAll() {
+	return await readConfigFile(CONFIG_PATH);
+}
+
+// exported for tests
+export async function writeConfigFile(
+	filename: string,
+	data: _.Dictionary<any>,
+): Promise<void> {
+	await fs.writeFile(filename, JSON.stringify(data, null, JSON_INDENT));
+}
+
+const DEFAULT_SETTINGS: _.Dictionary<any> = {
+	errorReporting: true,
+	updatesEnabled: ['appimage', 'nsis', 'dmg'].includes(packageJSON.packageType),
+	desktopNotifications: true,
+	autoBlockmapping: true,
+	decompressFirst: true,
+};
+
+const settings = _.cloneDeep(DEFAULT_SETTINGS);
+
+async function load(): Promise<void> {
+	debug('load');
+	const loadedSettings = await readAll();
+	_.assign(settings, loadedSettings);
+}
+
+const loaded = load();
+
+export async function set(
+	key: string,
+	value: any,
+	writeConfigFileFn = writeConfigFile,
+): Promise<void> {
+	debug('set', key, value);
+	await loaded;
+	const previousValue = settings[key];
+	settings[key] = value;
+	try {
+		await writeConfigFileFn(CONFIG_PATH, settings);
+	} catch (error: any) {
+		// Revert to previous value if persisting settings failed
+		settings[key] = previousValue;
+		throw error;
+	}
+}
+
+export async function get(key: string): Promise<any> {
+	await loaded;
+	return getSync(key);
+}
+
+export function getSync(key: string): any {
+	return _.cloneDeep(settings[key]);
+}
+
+export async function getAll() {
+	debug('getAll');
+	await loaded;
+	return _.cloneDeep(settings);
+}

lib/gui/app/models/store.ts

@@ -0,0 +1,554 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as Immutable from 'immutable';
+import * as _ from 'lodash';
+import { basename } from 'path';
+import * as redux from 'redux';
+import { v4 as uuidV4 } from 'uuid';
+
+import * as constraints from '../../../shared/drive-constraints';
+import * as errors from '../../../shared/errors';
+import * as utils from '../../../shared/utils';
+import * as settings from './settings';
+
+/**
+ * @summary Verify and throw if any state fields are nil
+ */
+function verifyNoNilFields(
+	object: _.Dictionary<any>,
+	fields: string[],
+	name: string,
+) {
+	const nilFields = _.filter(fields, (field) => {
+		return _.isNil(_.get(object, field));
+	});
+	if (nilFields.length) {
+		throw new Error(`Missing ${name} fields: ${nilFields.join(', ')}`);
+	}
+}
+
+/**
+ * @summary FLASH_STATE fields that can't be nil
+ */
+const flashStateNoNilFields = ['speed'];
+
+/**
+ * @summary SELECT_IMAGE fields that can't be nil
+ */
+const selectImageNoNilFields = ['path', 'extension'];
+
+/**
+ * @summary Application default state
+ */
+export const DEFAULT_STATE = Immutable.fromJS({
+	applicationSessionUuid: '',
+	flashingWorkflowUuid: '',
+	availableDrives: [],
+	selection: {
+		devices: Immutable.OrderedSet(),
+	},
+	isFlashing: false,
+	devicePaths: [],
+	failedDeviceErrors: [],
+	flashResults: {},
+	flashState: {
+		active: 0,
+		failed: 0,
+		percentage: 0,
+		speed: null,
+		averageSpeed: null,
+	},
+	lastAverageFlashingSpeed: null,
+});
+
+/**
+ * @summary Application supported action messages
+ */
+export enum Actions {
+	SET_DEVICE_PATHS,
+	SET_FAILED_DEVICE_ERRORS,
+	SET_AVAILABLE_TARGETS,
+	SET_FLASH_STATE,
+	RESET_FLASH_STATE,
+	SET_FLASHING_FLAG,
+	UNSET_FLASHING_FLAG,
+	SELECT_TARGET,
+	SELECT_SOURCE,
+	DESELECT_TARGET,
+	DESELECT_SOURCE,
+	SET_APPLICATION_SESSION_UUID,
+	SET_FLASHING_WORKFLOW_UUID,
+}
+
+interface Action {
+	type: Actions;
+	data: any;
+}
+
+/**
+ * @summary Get available drives from the state
+ *
+ * @param {Object} state - state object
+ * @returns {Object} new state
+ */
+function getAvailableDrives(state: typeof DEFAULT_STATE) {
+	return state.get('availableDrives').toJS();
+}
+
+/**
+ * @summary The redux store reducer
+ */
+function storeReducer(
+	state = DEFAULT_STATE,
+	action: Action,
+): typeof DEFAULT_STATE {
+	switch (action.type) {
+		case Actions.SET_AVAILABLE_TARGETS: {
+			// Type: action.data : Array<DriveObject>
+
+			if (!action.data) {
+				throw errors.createError({
+					title: 'Missing drives',
+				});
+			}
+
+			let drives = action.data;
+
+			if (!_.isArray(drives) || !_.every(drives, _.isObject)) {
+				throw errors.createError({
+					title: `Invalid drives: ${drives}`,
+				});
+			}
+
+			// Drives order is a list of devicePaths
+			const drivesOrder = settings.getSync('drivesOrder') ?? [];
+
+			drives = _.sortBy(drives, [
+				// System drives last
+				(d) => !!d.isSystem,
+				// Devices with no devicePath first (usbboot)
+				(d) => !!d.devicePath,
+				// Sort as defined in the drivesOrder setting if there is one (only for Linux with udev)
+				(d) => drivesOrder.indexOf(basename(d.devicePath || '')),
+				// Then sort by devicePath (only available on Linux with udev) or device
+				(d) => d.devicePath || d.device,
+			]);
+
+			const newState = state.set('availableDrives', Immutable.fromJS(drives));
+			const selectedDevices = newState.getIn(['selection', 'devices']).toJS();
+
+			// Remove selected drives that are stale, i.e. missing from availableDrives
+			const nonStaleNewState = _.reduce(
+				selectedDevices,
+				(accState, device) => {
+					// Check whether the drive still exists in availableDrives
+					if (
+						device &&
+						!_.find(drives, {
+							device,
+						})
+					) {
+						// Deselect this drive gone from availableDrives
+						return storeReducer(accState, {
+							type: Actions.DESELECT_TARGET,
+							data: device,
+						});
+					}
+
+					return accState;
+				},
+				newState,
+			);
+
+			const shouldAutoselectAll = Boolean(
+				settings.getSync('autoSelectAllDrives'),
+			);
+			const AUTOSELECT_DRIVE_COUNT = 1;
+			const nonStaleSelectedDevices = nonStaleNewState
+				.getIn(['selection', 'devices'])
+				.toJS();
+			const hasSelectedDevices =
+				nonStaleSelectedDevices.length >= AUTOSELECT_DRIVE_COUNT;
+			const shouldAutoselectOne =
+				drives.length === AUTOSELECT_DRIVE_COUNT && !hasSelectedDevices;
+
+			if (shouldAutoselectOne || shouldAutoselectAll) {
+				// Even if there's no image selected, we need to call several
+				// drive/image related checks, and `{}` works fine with them
+				const image = state
+					.getIn(['selection', 'image'], Immutable.fromJS({}))
+					.toJS();
+
+				return _.reduce(
+					drives,
+					(accState, drive) => {
+						if (
+							constraints.isDriveValid(drive, image) &&
+							!drive.isReadOnly &&
+							constraints.isDriveSizeRecommended(drive, image) &&
+							// We don't want to auto-select large drives execpt is autoSelectAllDrives is true
+							(!constraints.isDriveSizeLarge(drive) || shouldAutoselectAll) &&
+							// We don't want to auto-select system drives
+							!constraints.isSystemDrive(drive)
+						) {
+							// Auto-select this drive
+							return storeReducer(accState, {
+								type: Actions.SELECT_TARGET,
+								data: drive.device,
+							});
+						}
+
+						// Deselect this drive in case it still is selected
+						return storeReducer(accState, {
+							type: Actions.DESELECT_TARGET,
+							data: drive.device,
+						});
+					},
+					nonStaleNewState,
+				);
+			}
+
+			return nonStaleNewState;
+		}
+
+		case Actions.SET_FLASH_STATE: {
+			// Type: action.data : FlashStateObject
+
+			if (!state.get('isFlashing')) {
+				throw errors.createError({
+					title: "Can't set the flashing state when not flashing",
+				});
+			}
+
+			verifyNoNilFields(action.data, flashStateNoNilFields, 'flash');
+
+			if (!_.every(_.pick(action.data, ['active', 'failed']), _.isFinite)) {
+				throw errors.createError({
+					title: 'State quantity field(s) not finite number',
+				});
+			}
+
+			if (
+				!_.isUndefined(action.data.percentage) &&
+				!utils.isValidPercentage(action.data.percentage)
+			) {
+				throw errors.createError({
+					title: `Invalid state percentage: ${action.data.percentage}`,
+				});
+			}
+
+			if (!_.isUndefined(action.data.eta) && !_.isNumber(action.data.eta)) {
+				throw errors.createError({
+					title: `Invalid state eta: ${action.data.eta}`,
+				});
+			}
+
+			let ret = state.set('flashState', Immutable.fromJS(action.data));
+			if (action.data.type === 'flashing') {
+				ret = ret.set('lastAverageFlashingSpeed', action.data.averageSpeed);
+			}
+			return ret;
+		}
+
+		case Actions.RESET_FLASH_STATE: {
+			return state
+				.set('isFlashing', false)
+				.set('flashState', DEFAULT_STATE.get('flashState'))
+				.set('flashResults', DEFAULT_STATE.get('flashResults'))
+				.set('devicePaths', DEFAULT_STATE.get('devicePaths'))
+				.set('failedDeviceErrors', DEFAULT_STATE.get('failedDeviceErrors'))
+				.set(
+					'lastAverageFlashingSpeed',
+					DEFAULT_STATE.get('lastAverageFlashingSpeed'),
+				)
+				.delete('flashUuid');
+		}
+
+		case Actions.SET_FLASHING_FLAG: {
+			return state
+				.set('isFlashing', true)
+				.set('flashUuid', uuidV4())
+				.set('flashResults', DEFAULT_STATE.get('flashResults'));
+		}
+
+		case Actions.UNSET_FLASHING_FLAG: {
+			// Type: action.data : FlashResultsObject
+
+			if (!action.data) {
+				throw errors.createError({
+					title: 'Missing results',
+				});
+			}
+
+			_.defaults(action.data, {
+				cancelled: false,
+				skip: false,
+			});
+
+			if (!_.isBoolean(action.data.cancelled)) {
+				throw errors.createError({
+					title: `Invalid results cancelled: ${action.data.cancelled}`,
+				});
+			}
+
+			if (action.data.cancelled && action.data.sourceChecksum) {
+				throw errors.createError({
+					title:
+						"The sourceChecksum value can't exist if the flashing was cancelled",
+				});
+			}
+
+			if (
+				action.data.sourceChecksum &&
+				!_.isString(action.data.sourceChecksum)
+			) {
+				throw errors.createError({
+					title: `Invalid results sourceChecksum: ${action.data.sourceChecksum}`,
+				});
+			}
+
+			if (
+				action.data.errorCode &&
+				!_.isString(action.data.errorCode) &&
+				!_.isNumber(action.data.errorCode)
+			) {
+				throw errors.createError({
+					title: `Invalid results errorCode: ${action.data.errorCode}`,
+				});
+			}
+
+			if (action.data.results) {
+				action.data.results.averageFlashingSpeed = state.get(
+					'lastAverageFlashingSpeed',
+				);
+			}
+
+			if (action.data.skip) {
+				return state
+					.set('isFlashing', false)
+					.set('flashResults', Immutable.fromJS(action.data));
+			}
+
+			return state
+				.set('isFlashing', false)
+				.set('flashResults', Immutable.fromJS(action.data))
+				.set('flashState', DEFAULT_STATE.get('flashState'));
+		}
+
+		case Actions.SELECT_TARGET: {
+			// Type: action.data : String
+
+			const device = action.data;
+
+			if (!device) {
+				throw errors.createError({
+					title: 'Missing drive',
+				});
+			}
+
+			if (!_.isString(device)) {
+				throw errors.createError({
+					title: `Invalid drive: ${device}`,
+				});
+			}
+
+			const selectedDrive = _.find(getAvailableDrives(state), { device });
+
+			if (!selectedDrive) {
+				throw errors.createError({
+					title: `The drive is not available: ${device}`,
+				});
+			}
+
+			if (selectedDrive.isReadOnly) {
+				throw errors.createError({
+					title: 'The drive is write-protected',
+				});
+			}
+
+			const image = state.getIn(['selection', 'image']);
+			if (
+				image &&
+				!constraints.isDriveLargeEnough(selectedDrive, image.toJS())
+			) {
+				throw errors.createError({
+					title: 'The drive is not large enough',
+				});
+			}
+
+			const selectedDevices = state.getIn(['selection', 'devices']);
+
+			return state.setIn(['selection', 'devices'], selectedDevices.add(device));
+		}
+
+		// TODO(jhermsmeier): Consolidate these assertions
+		// with image-stream / supported-formats, and have *one*
+		// place where all the image extension / format handling
+		// takes place, to avoid having to check 2+ locations with different logic
+		case Actions.SELECT_SOURCE: {
+			// Type: action.data : ImageObject
+
+			if (!action.data.drive) {
+				verifyNoNilFields(action.data, selectImageNoNilFields, 'image');
+			}
+
+			if (!_.isString(action.data.path)) {
+				throw errors.createError({
+					title: `Invalid image path: ${action.data.path}`,
+				});
+			}
+
+			const MINIMUM_IMAGE_SIZE = 0;
+
+			if (action.data.size !== undefined) {
+				if (
+					action.data.size < MINIMUM_IMAGE_SIZE ||
+					!_.isInteger(action.data.size)
+				) {
+					throw errors.createError({
+						title: `Invalid image size: ${action.data.size}`,
+					});
+				}
+			}
+
+			if (!_.isUndefined(action.data.compressedSize)) {
+				if (
+					action.data.compressedSize < MINIMUM_IMAGE_SIZE ||
+					!_.isInteger(action.data.compressedSize)
+				) {
+					throw errors.createError({
+						title: `Invalid image compressed size: ${action.data.compressedSize}`,
+					});
+				}
+			}
+
+			if (action.data.url && !_.isString(action.data.url)) {
+				throw errors.createError({
+					title: `Invalid image url: ${action.data.url}`,
+				});
+			}
+
+			if (action.data.name && !_.isString(action.data.name)) {
+				throw errors.createError({
+					title: `Invalid image name: ${action.data.name}`,
+				});
+			}
+
+			if (action.data.logo && !_.isString(action.data.logo)) {
+				throw errors.createError({
+					title: `Invalid image logo: ${action.data.logo}`,
+				});
+			}
+
+			const selectedDevices = state.getIn(['selection', 'devices']);
+
+			// Remove image-incompatible drives from selection with `constraints.isDriveValid`
+			return _.reduce(
+				selectedDevices.toJS(),
+				(accState, device) => {
+					const drive = _.find(getAvailableDrives(state), { device });
+					if (
+						!constraints.isDriveValid(drive, action.data) ||
+						!constraints.isDriveSizeRecommended(drive, action.data)
+					) {
+						return storeReducer(accState, {
+							type: Actions.DESELECT_TARGET,
+							data: device,
+						});
+					}
+
+					return accState;
+				},
+				state,
+			).setIn(['selection', 'image'], Immutable.fromJS(action.data));
+		}
+
+		case Actions.DESELECT_TARGET: {
+			// Type: action.data : String
+
+			if (!action.data) {
+				throw errors.createError({
+					title: 'Missing drive',
+				});
+			}
+
+			if (!_.isString(action.data)) {
+				throw errors.createError({
+					title: `Invalid drive: ${action.data}`,
+				});
+			}
+
+			const selectedDevices = state.getIn(['selection', 'devices']);
+
+			// Remove drive from set in state
+			return state.setIn(
+				['selection', 'devices'],
+				selectedDevices.delete(action.data),
+			);
+		}
+
+		case Actions.DESELECT_SOURCE: {
+			return state.deleteIn(['selection', 'image']);
+		}
+
+		case Actions.SET_APPLICATION_SESSION_UUID: {
+			return state.set('applicationSessionUuid', action.data);
+		}
+
+		case Actions.SET_FLASHING_WORKFLOW_UUID: {
+			return state.set('flashingWorkflowUuid', action.data);
+		}
+
+		case Actions.SET_DEVICE_PATHS: {
+			return state.set('devicePaths', action.data);
+		}
+
+		case Actions.SET_FAILED_DEVICE_ERRORS: {
+			return state.set('failedDeviceErrors', action.data);
+		}
+
+		default: {
+			return state;
+		}
+	}
+}
+
+export const store = redux.createStore(storeReducer, DEFAULT_STATE);
+
+/**
+ * @summary Observe the store for changes
+ * @param {Function} onChange - change handler
+ * @returns {Function} unsubscribe
+ */
+export function observe(onChange: (state: typeof DEFAULT_STATE) => void) {
+	let currentState: typeof DEFAULT_STATE | null = null;
+
+	/**
+	 * @summary Internal change detection handler
+	 */
+	const changeHandler = () => {
+		const nextState = store.getState();
+		if (!_.isEqual(nextState, currentState)) {
+			currentState = nextState;
+			onChange(currentState);
+		}
+	};
+
+	changeHandler();
+
+	return store.subscribe(changeHandler);
+}

lib/gui/app/modules/analytics.ts

@@ -0,0 +1,122 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as _ from 'lodash';
+import * as resinCorvus from 'resin-corvus/browser';
+
+import * as packageJSON from '../../../../package.json';
+import { getConfig } from '../../../shared/utils';
+import * as settings from '../models/settings';
+import { store } from '../models/store';
+
+const DEFAULT_PROBABILITY = 0.1;
+
+async function installCorvus(): Promise<void> {
+	const sentryToken =
+		(await settings.get('analyticsSentryToken')) ||
+		_.get(packageJSON, ['analytics', 'sentry', 'token']);
+	const mixpanelToken =
+		(await settings.get('analyticsMixpanelToken')) ||
+		_.get(packageJSON, ['analytics', 'mixpanel', 'token']);
+	resinCorvus.install({
+		services: {
+			sentry: sentryToken,
+			mixpanel: mixpanelToken,
+		},
+		options: {
+			release: packageJSON.version,
+			shouldReport: () => {
+				return settings.getSync('errorReporting');
+			},
+			mixpanelDeferred: true,
+		},
+	});
+}
+
+let mixpanelSample = DEFAULT_PROBABILITY;
+
+/**
+ * @summary Init analytics configurations
+ */
+async function initConfig() {
+	await installCorvus();
+	let validatedConfig = null;
+	try {
+		const configUrl = await settings.get('configUrl');
+		const config = await getConfig(configUrl);
+		const mixpanel = _.get(config, ['analytics', 'mixpanel'], {});
+		mixpanelSample = mixpanel.probability || DEFAULT_PROBABILITY;
+		if (isClientEligible(mixpanelSample)) {
+			validatedConfig = validateMixpanelConfig(mixpanel);
+		}
+	} catch (err) {
+		resinCorvus.logException(err);
+	}
+	resinCorvus.setConfigs({
+		mixpanel: validatedConfig,
+	});
+}
+
+initConfig();
+
+/**
+ * @summary Check that the client is eligible for analytics
+ */
+function isClientEligible(probability: number) {
+	return Math.random() < probability;
+}
+
+/**
+ * @summary Check that config has at least HTTP_PROTOCOL and api_host
+ */
+function validateMixpanelConfig(config: {
+	api_host?: string;
+	HTTP_PROTOCOL?: string;
+}) {
+	const mixpanelConfig = {
+		api_host: 'https://api.mixpanel.com',
+	};
+	if (config.HTTP_PROTOCOL !== undefined && config.api_host !== undefined) {
+		mixpanelConfig.api_host = `${config.HTTP_PROTOCOL}://${config.api_host}`;
+	}
+	return mixpanelConfig;
+}
+
+/**
+ * @summary Log an event
+ *
+ * @description
+ * This function sends the debug message to product analytics services.
+ */
+export function logEvent(message: string, data: _.Dictionary<any> = {}) {
+	const { applicationSessionUuid, flashingWorkflowUuid } = store
+		.getState()
+		.toJS();
+	resinCorvus.logEvent(message, {
+		...data,
+		sample: mixpanelSample,
+		applicationSessionUuid,
+		flashingWorkflowUuid,
+	});
+}
+
+/**
+ * @summary Log an exception
+ *
+ * @description
+ * This function logs an exception to error reporting services.
+ */
+export const logException = resinCorvus.logException;

lib/gui/app/modules/drive-scanner.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as sdk from 'etcher-sdk';
+import {
+	Adapter,
+	BlockDeviceAdapter,
+	UsbbootDeviceAdapter,
+} from 'etcher-sdk/build/scanner/adapters';
+import { geteuid, platform } from 'process';
+
+const adapters: Adapter[] = [
+	new BlockDeviceAdapter({
+		includeSystemDrives: () => true,
+	}),
+];
+
+// Can't use permissions.isElevated() here as it returns a promise and we need to set
+// module.exports = scanner right now.
+if (platform !== 'linux' || geteuid() === 0) {
+	adapters.push(new UsbbootDeviceAdapter());
+}
+
+if (platform === 'win32') {
+	const {
+		DriverlessDeviceAdapter: driverless,
+		// tslint:disable-next-line:no-var-requires
+	} = require('etcher-sdk/build/scanner/adapters/driverless');
+	adapters.push(new driverless());
+}
+
+export const scanner = new sdk.scanner.Scanner(adapters);

lib/gui/app/modules/exception-reporter.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright 2016 resin.io
+ * Copyright 2016 balena.io
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,15 +14,16 @@
  * limitations under the License.
  */
 
-'use strict';
+import { logException } from '../modules/analytics';
+import { showError } from '../os/dialog';
 
 /**
- * @module Etcher.OS.Dropzone
+ * @summary Report an exception
  */
-
-const angular = require('angular');
-const MODULE_NAME = 'Etcher.OS.Dropzone';
-const OSDropzone = angular.module(MODULE_NAME, []);
-OSDropzone.directive('osDropzone', require('./directives/dropzone'));
-
-module.exports = MODULE_NAME;
+export function report(exception?: Error) {
+	if (exception === undefined) {
+		return;
+	}
+	showError(exception);
+	logException(exception);
+}

lib/gui/app/modules/image-writer.ts

@@ -0,0 +1,355 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Drive as DrivelistDrive } from 'drivelist';
+import * as sdk from 'etcher-sdk';
+import { Dictionary } from 'lodash';
+import * as ipc from 'node-ipc';
+import * as os from 'os';
+import * as path from 'path';
+
+import * as packageJSON from '../../../../package.json';
+import * as errors from '../../../shared/errors';
+import * as permissions from '../../../shared/permissions';
+import { getAppPath } from '../../../shared/utils';
+import { SourceMetadata } from '../components/source-selector/source-selector';
+import * as flashState from '../models/flash-state';
+import * as selectionState from '../models/selection-state';
+import * as settings from '../models/settings';
+import * as analytics from '../modules/analytics';
+import * as windowProgress from '../os/window-progress';
+
+const THREADS_PER_CPU = 16;
+
+// There might be multiple Etcher instances running at
+// the same time, therefore we must ensure each IPC
+// server/client has a different name.
+const IPC_SERVER_ID = `etcher-server-${process.pid}`;
+const IPC_CLIENT_ID = `etcher-client-${process.pid}`;
+
+ipc.config.id = IPC_SERVER_ID;
+ipc.config.socketRoot = path.join(
+	process.env.XDG_RUNTIME_DIR || os.tmpdir(),
+	path.sep,
+);
+
+// NOTE: Ensure this isn't disabled, as it will cause
+// the stdout maxBuffer size to be exceeded when flashing
+ipc.config.silent = true;
+
+/**
+ * @summary Handle a flash error and log it to analytics
+ */
+function handleErrorLogging(
+	error: Error & { code: string },
+	analyticsData: any,
+) {
+	const eventData = {
+		...analyticsData,
+		flashInstanceUuid: flashState.getFlashUuid(),
+	};
+
+	if (error.code === 'EVALIDATION') {
+		analytics.logEvent('Validation error', eventData);
+	} else if (error.code === 'EUNPLUGGED') {
+		analytics.logEvent('Drive unplugged', eventData);
+	} else if (error.code === 'EIO') {
+		analytics.logEvent('Input/output error', eventData);
+	} else if (error.code === 'ENOSPC') {
+		analytics.logEvent('Out of space', eventData);
+	} else if (error.code === 'ECHILDDIED') {
+		analytics.logEvent('Child died unexpectedly', eventData);
+	} else {
+		analytics.logEvent('Flash error', {
+			...eventData,
+			error: errors.toJSON(error),
+		});
+	}
+}
+
+function terminateServer() {
+	// Turns out we need to destroy all sockets for
+	// the server to actually close. Otherwise, it
+	// just stops receiving any further connections,
+	// but remains open if there are active ones.
+	// @ts-ignore (no Server.sockets in @types/node-ipc)
+	for (const socket of ipc.server.sockets) {
+		socket.destroy();
+	}
+	ipc.server.stop();
+}
+
+function writerArgv(): string[] {
+	let entryPoint = path.join(getAppPath(), 'generated', 'child-writer.js');
+	// AppImages run over FUSE, so the files inside the mount point
+	// can only be accessed by the user that mounted the AppImage.
+	// This means we can't re-spawn Etcher as root from the same
+	// mount-point, and as a workaround, we re-mount the original
+	// AppImage as root.
+	if (os.platform() === 'linux' && process.env.APPIMAGE && process.env.APPDIR) {
+		entryPoint = entryPoint.replace(process.env.APPDIR, '');
+		return [
+			process.env.APPIMAGE,
+			'-e',
+			`require(\`\${process.env.APPDIR}${entryPoint}\`)`,
+		];
+	} else {
+		return [process.argv[0], entryPoint];
+	}
+}
+
+function writerEnv() {
+	return {
+		IPC_SERVER_ID,
+		IPC_CLIENT_ID,
+		IPC_SOCKET_ROOT: ipc.config.socketRoot,
+		ELECTRON_RUN_AS_NODE: '1',
+		UV_THREADPOOL_SIZE: (os.cpus().length * THREADS_PER_CPU).toString(),
+		// This environment variable prevents the AppImages
+		// desktop integration script from presenting the
+		// "installation" dialog
+		SKIP: '1',
+		...(process.platform === 'win32' ? {} : process.env),
+	};
+}
+
+interface FlashResults {
+	skip?: boolean;
+	cancelled?: boolean;
+	results?: {
+		bytesWritten: number;
+		devices: {
+			failed: number;
+			successful: number;
+		};
+		errors: Error[];
+	};
+}
+
+async function performWrite(
+	image: SourceMetadata,
+	drives: DrivelistDrive[],
+	onProgress: sdk.multiWrite.OnProgressFunction,
+): Promise<{ cancelled?: boolean }> {
+	let cancelled = false;
+	let skip = false;
+	ipc.serve();
+	const { autoBlockmapping, decompressFirst } = await settings.getAll();
+	return await new Promise((resolve, reject) => {
+		ipc.server.on('error', (error) => {
+			terminateServer();
+			const errorObject = errors.fromJSON(error);
+			reject(errorObject);
+		});
+
+		ipc.server.on('log', (message) => {
+			console.log(message);
+		});
+
+		const flashResults: FlashResults = {};
+		const analyticsData = {
+			image,
+			drives,
+			driveCount: drives.length,
+			uuid: flashState.getFlashUuid(),
+			flashInstanceUuid: flashState.getFlashUuid(),
+		};
+
+		ipc.server.on('fail', ({ device, error }) => {
+			if (device.devicePath) {
+				flashState.addFailedDeviceError({ device, error });
+			}
+			handleErrorLogging(error, analyticsData);
+		});
+
+		ipc.server.on('done', (event) => {
+			event.results.errors = event.results.errors.map(
+				(data: Dictionary<any> & { message: string }) => {
+					return errors.fromJSON(data);
+				},
+			);
+			flashResults.results = event.results;
+		});
+
+		ipc.server.on('abort', () => {
+			terminateServer();
+			cancelled = true;
+		});
+
+		ipc.server.on('skip', () => {
+			terminateServer();
+			skip = true;
+		});
+
+		ipc.server.on('state', onProgress);
+
+		ipc.server.on('ready', (_data, socket) => {
+			ipc.server.emit(socket, 'write', {
+				image,
+				destinations: drives,
+				SourceType: image.SourceType.name,
+				autoBlockmapping,
+				decompressFirst,
+			});
+		});
+
+		const argv = writerArgv();
+
+		ipc.server.on('start', async () => {
+			console.log(`Elevating command: ${argv.join(' ')}`);
+			const env = writerEnv();
+			try {
+				const results = await permissions.elevateCommand(argv, {
+					applicationName: packageJSON.displayName,
+					environment: env,
+				});
+				flashResults.cancelled = cancelled || results.cancelled;
+				flashResults.skip = skip;
+			} catch (error: any) {
+				// This happens when the child is killed using SIGKILL
+				const SIGKILL_EXIT_CODE = 137;
+				if (error.code === SIGKILL_EXIT_CODE) {
+					error.code = 'ECHILDDIED';
+				}
+				reject(error);
+			} finally {
+				console.log('Terminating IPC server');
+				terminateServer();
+			}
+			console.log('Flash results', flashResults);
+
+			// The flash wasn't cancelled and we didn't get a 'done' event
+			if (
+				!flashResults.cancelled &&
+				!flashResults.skip &&
+				flashResults.results === undefined
+			) {
+				reject(
+					errors.createUserError({
+						title: 'The writer process ended unexpectedly',
+						description:
+							'Please try again, and contact the Etcher team if the problem persists',
+					}),
+				);
+				return;
+			}
+			resolve(flashResults);
+		});
+
+		// Clear the update lock timer to prevent longer
+		// flashing timing it out, and releasing the lock
+		ipc.server.start();
+	});
+}
+
+/**
+ * @summary Flash an image to drives
+ */
+export async function flash(
+	image: SourceMetadata,
+	drives: DrivelistDrive[],
+	// This function is a parameter so it can be mocked in tests
+	write = performWrite,
+): Promise<void> {
+	if (flashState.isFlashing()) {
+		throw new Error('There is already a flash in progress');
+	}
+
+	await flashState.setFlashingFlag();
+	flashState.setDevicePaths(
+		drives.map((d) => d.devicePath).filter((p) => p != null) as string[],
+	);
+
+	const analyticsData = {
+		image,
+		drives,
+		driveCount: drives.length,
+		uuid: flashState.getFlashUuid(),
+		status: 'started',
+		flashInstanceUuid: flashState.getFlashUuid(),
+	};
+
+	analytics.logEvent('Flash', analyticsData);
+
+	try {
+		const result = await write(image, drives, flashState.setProgressState);
+		await flashState.unsetFlashingFlag(result);
+	} catch (error: any) {
+		await flashState.unsetFlashingFlag({
+			cancelled: false,
+			errorCode: error.code,
+		});
+		windowProgress.clear();
+		const { results = {} } = flashState.getFlashResults();
+		const eventData = {
+			...analyticsData,
+			errors: results.errors,
+			devices: results.devices,
+			status: 'failed',
+			error,
+		};
+		analytics.logEvent('Write failed', eventData);
+		throw error;
+	}
+	windowProgress.clear();
+	if (flashState.wasLastFlashCancelled()) {
+		const eventData = {
+			...analyticsData,
+			status: 'cancel',
+		};
+		analytics.logEvent('Elevation cancelled', eventData);
+	} else {
+		const { results = {} } = flashState.getFlashResults();
+		const eventData = {
+			...analyticsData,
+			errors: results.errors,
+			devices: results.devices,
+			status: 'finished',
+			bytesWritten: results.bytesWritten,
+			sourceMetadata: results.sourceMetadata,
+		};
+		analytics.logEvent('Done', eventData);
+	}
+}
+
+/**
+ * @summary Cancel write operation
+ */
+export async function cancel(type: string) {
+	const status = type.toLowerCase();
+	const drives = selectionState.getSelectedDevices();
+	const analyticsData = {
+		image: selectionState.getImage()?.path,
+		drives,
+		driveCount: drives.length,
+		uuid: flashState.getFlashUuid(),
+		flashInstanceUuid: flashState.getFlashUuid(),
+		status,
+	};
+	analytics.logEvent('Cancel', analyticsData);
+
+	// Re-enable lock release on inactivity
+
+	try {
+		// @ts-ignore (no Server.sockets in @types/node-ipc)
+		const [socket] = ipc.server.sockets;
+		if (socket !== undefined) {
+			ipc.server.emit(socket, status);
+		}
+	} catch (error: any) {
+		analytics.logException(error);
+	}
+}

lib/gui/app/modules/progress-status.ts

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2017 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License")
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as prettyBytes from 'pretty-bytes';
+
+export interface FlashState {
+	active: number;
+	failed: number;
+	percentage?: number;
+	speed: number;
+	position: number;
+	type?: 'decompressing' | 'flashing' | 'verifying';
+}
+
+export function fromFlashState({
+	type,
+	percentage,
+	position,
+}: Pick<FlashState, 'type' | 'percentage' | 'position'>): {
+	status: string;
+	position?: string;
+} {
+	if (type === undefined) {
+		return { status: 'Starting...' };
+	} else if (type === 'decompressing') {
+		if (percentage == null) {
+			return { status: 'Decompressing...' };
+		} else {
+			return { position: `${percentage}%`, status: 'Decompressing...' };
+		}
+	} else if (type === 'flashing') {
+		if (percentage != null) {
+			if (percentage < 100) {
+				return { position: `${percentage}%`, status: 'Flashing...' };
+			} else {
+				return { status: 'Finishing...' };
+			}
+		} else {
+			return {
+				status: 'Flashing...',
+				position: `${position ? prettyBytes(position) : ''}`,
+			};
+		}
+	} else if (type === 'verifying') {
+		if (percentage == null) {
+			return { status: 'Validating...' };
+		} else if (percentage < 100) {
+			return { position: `${percentage}%`, status: 'Validating...' };
+		} else {
+			return { status: 'Finishing...' };
+		}
+	}
+	return { status: 'Failed' };
+}
+
+export function titleFromFlashState(
+	state: Pick<FlashState, 'type' | 'percentage' | 'position'>,
+): string {
+	const { status, position } = fromFlashState(state);
+	if (position !== undefined) {
+		return `${position} ${status}`;
+	}
+	return status;
+}