New wifi settings

lib/gui/app/app.js

@@ -84,6 +84,7 @@ const app = angular.module('Etcher', [
   require('./components/warning-modal/warning-modal'),
   require('./components/safe-webview'),
   require('./components/file-selector'),
+  require('./components/wifi/wifi'),
 
   // Pages
   require('./pages/main/main'),
@@ -362,7 +363,7 @@ app.config(($locationProvider) => {
   })
 })
 
-app.controller('HeaderController', function (OSOpenExternalService) {
+app.controller('HeaderController', function (OSOpenExternalService, WifiService) {
   /**
    * @summary Open help page
    * @function
@@ -381,6 +382,18 @@ app.controller('HeaderController', function (OSOpenExternalService) {
     OSOpenExternalService.open(supportUrl)
   }
 
+  /**
+   * @summary Open WiFi dialog
+   * @function
+   * @public
+   *
+   * @example
+   * HeaderController.openHelpPage()
+   */
+  this.openWifiSettings = () => {
+    WifiService.open()
+  }
+
   /**
    * @summary Whether to show the help link
    * @function
@@ -394,6 +407,20 @@ app.controller('HeaderController', function (OSOpenExternalService) {
   this.shouldShowHelp = () => {
     return !settings.get('disableExternalLinks')
   }
+
+  /**
+   * @summary Whether to show WiFi dialog link
+   * @function
+   * @public
+   *
+   * @returns {Boolean}
+   *
+   * @example
+   * HeaderController.shouldShowWifi()
+   */
+  this.shouldShowWifi = () => {
+    return settings.has('enableWifiDialog') && settings.get('enableWifiDialog')
+  }
 })
 
 app.controller('StateController', function ($rootScope, $scope) {

lib/gui/app/components/wifi/controllers/wifi.js

@@ -0,0 +1,36 @@
+
+/*
+ * Copyright 2018 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'
+
+module.exports = function (
+  $uibModalInstance
+) {
+  /**
+   * @summary Close the modal and resolve the connection
+   * @function
+   * @public
+   *
+   * @returns {Function}
+   *
+   * @example
+   * WifiController.closeModal();
+   */
+  this.closeModal = () => {
+    return $uibModalInstance.close()
+  }
+}

lib/gui/app/components/wifi/react/actions.js

@@ -0,0 +1,195 @@
+/*
+ * Copyright 2018 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 url = require('url')
+
+const wifiServiceEndpoint = url.format({
+  protocol: 'http',
+  hostname: process.env.ETCHER_WIFI_SERVICE_IP || 'localhost',
+  port: process.env.ETCHER_WIFI_SERVICE_PORT || '1337',
+  pathname: 'wifi'
+})
+
+module.exports = {
+  isActive: () => {
+    const method = 'get-wifi-active'
+    const api = `${wifiServiceEndpoint}/${method}`
+    return fetch(api, {
+      headers: {
+        Accept: 'application/json'
+      }
+    })
+      .then((res) => {
+        if (res.ok) {
+          return res.json()
+        }
+        return res.json().then((err) => {
+          throw err
+        })
+      })
+      .then((res) => {
+        return res.active
+      })
+      .catch((err) => {
+        if (!err.message) {
+          err.message = 'Couldn\'t get Wireless Device status'
+        } else if (err.message === 'Failed to fetch') {
+          err.message = 'NetworkManager service timed out'
+        }
+        throw err
+      })
+  },
+
+  toggleWifi: (value) => {
+    const method = 'toggle-wifi'
+    const api = `${wifiServiceEndpoint}/${method}`
+    return fetch(api, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ value })
+    })
+      .then((res) => {
+        if (res.ok) {
+          return res.json()
+        }
+        return res.json().then((err) => {
+          throw err
+        })
+      })
+      .then((res) => {
+        return res.value
+      })
+      .catch((err) => {
+        const message = (!_.isEmpty(err.data) && _.head(err.data)) || err.message
+
+        // In case there's no registered connection yet
+        if (message === 'The device \'wlan0\' has no connections available for activation.') {
+          return true
+        }
+        return err
+      })
+  },
+
+  getNetworks: () => {
+    const method = 'list-nearby-networks'
+    const api = `${wifiServiceEndpoint}/${method}`
+    return fetch(api, {
+      headers: {
+        Accept: 'application/json'
+      }
+    })
+      .then((res) => {
+        if (res.ok) {
+          return res.json()
+        }
+        return res.json().then((err) => {
+          throw err
+        })
+      })
+      .then((networks) => {
+        const formattedNetworks = _.map(networks, (network) => {
+          const newNetwork = _.reduce(network, (acc, val, key) => {
+            if (key === 'security') {
+              acc.security = val.open ? 'open' : 'closed'
+            } else {
+              acc[_.toLower(key)] = val
+            }
+            return acc
+          }, {})
+          return newNetwork
+        })
+        return formattedNetworks
+      })
+  },
+
+  getCurrentNetwork: () => {
+    const method = 'current-network'
+    const api = `${wifiServiceEndpoint}/${method}`
+    return fetch(api, {
+      headers: {
+        Accept: 'application/json'
+      }
+    })
+      .then((res) => {
+        if (res.ok) {
+          return res.text()
+        }
+        return res.json().then((err) => {
+          throw err
+        })
+      })
+      .then((network) => {
+        if (_.isEmpty(network)) {
+          return {}
+        }
+        return { ssid: JSON.parse(network) }
+      })
+  },
+
+  connect: (value) => {
+    const method = 'connect-network'
+    const api = `${wifiServiceEndpoint}/${method}`
+    return fetch(api, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ value })
+    })
+      .then((res) => {
+        if (res.ok) {
+          return res.json()
+        }
+        return res.json().then((err) => {
+          throw err
+        })
+      })
+      .then((success) => {
+        return success
+      })
+  },
+
+  forget: (value) => {
+    const method = 'forget-network'
+    const api = `${wifiServiceEndpoint}/${method}`
+    return fetch(api, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ value })
+    })
+      .then((res) => {
+        if (res.ok) {
+          return res.json()
+        }
+        return res.json().then((err) => {
+          throw err
+        })
+      })
+      .then((success) => {
+        return success
+      })
+  }
+}

lib/gui/app/components/wifi/react/keyboard/index.jsx

@@ -0,0 +1,108 @@
+/*
+ * Copyright 2018 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 Types = require('prop-types')
+const React = require('react')
+const Keyboard = require('react-virtual-keyboard').default
+
+class KBInput extends React.PureComponent {
+  componentDidMount () {
+    this.keyboard.interface.keyaction.enter = (base) => {
+      return this.keyboard.interface.keyaction.accept(base)
+    }
+  }
+
+  render () {
+    return (<Keyboard
+      value={this.props.value || ''}
+      type={this.props.type || 'text'}
+      name="keyboard"
+      options={{
+        type: 'input',
+        layout: 'custom',
+        usePreview: false,
+        useWheel: false,
+        stickyShift: true,
+        updateOnChange: true,
+        initialFocus: true,
+        closeByClickEvent: false,
+        beforeVisible: (evt, keyboard, el) => {
+          keyboard.$keyboard.show('slide')
+        },
+        display: {
+          'meta-1': '#%&',
+          'meta-2': 'ABC'
+        },
+        customLayout: {
+          normal: [
+            '1 2 3 4 5 6 7 8 9 0 {b}',
+            'q w e r t y u i o p',
+            'a s d f g h j k l',
+            '{s} z x c v b n m {s}',
+            '{meta-1} ! @ {space} \' , . /'
+          ],
+          'meta-2': [
+            '1 2 3 4 5 6 7 8 9 0 {b}',
+            'q w e r t y u i o p',
+            'a s d f g h j k l',
+            '{s} z x c v b n m {s}',
+            '{meta-1} ! @ {space} \' , . /'
+          ],
+          shift: [
+            '1 2 3 4 5 6 7 8 9 0 {b}',
+            'Q W E R T Y U I O P',
+            'A S D F G H J K L',
+            '{s} Z X C V B N M {e}',
+            '{meta-1} ! @ {space} \' , . /'
+          ],
+          'meta-2-shift': [
+            '1 2 3 4 5 6 7 8 9 0 {b}',
+            'Q W E R T Y U I O P',
+            'A S D F G H J K L',
+            '{s} Z X C V B N M {s}',
+            '{meta-1} ! @ {space} \' , . /'
+          ],
+          'meta-1': [
+            '1 2 3 4 5 6 7 8 9 0 {b}',
+            '@ # $ _ & - + ( )',
+            '{s} * " \' : ; ! ? / {s}',
+            '{meta-2} ! @ {space} \' , . /'
+          ],
+          'meta-1-shift': [
+            '~ ` | • √ π ÷ x ¶ ∆ {b}',
+            '£ ¢ € ¥ ^ ° = { }',
+            '{s} % © ® ™ ✔ [ ] \\ {s}',
+            '{meta-2} ! @ {space} \' , . /'
+          ]
+        }
+      }}
+      onChange = { this.props.onChange }
+      onAccepted = { this.props.onSubmit }
+      ref = { (kb) => { this.keyboard = kb }}
+    />)
+  }
+}
+
+KBInput.propTypes = {
+  type: Types.string,
+  value: Types.string,
+  onChange: Types.func,
+  onSubmit: Types.func
+}
+
+module.exports = KBInput