Welcome to ethernet

2021-01-22 14:09:03 +01:00
parent 896becce45
commit 3620e93ae6
7 changed files with 156 additions and 109 deletions
--- a/app/backend/src/views/network-manage.vue
+++ b/app/backend/src/views/network-manage.vue
@@ -7,18 +7,18 @@
            <div class="container interfaces-container">
                <div class="columns">
                    <div class="column col-6">
-                        <span class="interface-label">First interface</span>
+                        <span class="interface-label">Wireless AP interface</span>
                        <div class="form-group">
                            <div class="btn-group btn-group-block">
-                                <button class="btn btn-sm btn-iface" @click="change_interface('in', iface)" :class="iface == config.network.in ? 'active' : ''" v-for="iface in config.interfaces" :key="iface">{{ iface.toUpperCase() }}</button>
+                                <button class="btn btn-sm btn-iface" @click="change_interface('in', iface)" :class="iface == config.network.in ? 'active' : ''" v-for="iface in config.ifaces_in" :key="iface">{{ iface.toUpperCase() }}</button>
                            </div>
                        </div>
                    </div>
                    <div class="column col-6">
-                        <span class="interface-label">Second interface</span>
+                        <span class="interface-label">Internet link interface</span>
                        <div class="form-group">
                            <div class="btn-group btn-group-block">
-                                <button class="btn btn-sm btn-iface" @click="change_interface('out', iface)" :class="iface == config.network.out ? 'active' : ''" v-for="iface in config.interfaces" :key="iface">{{ iface.toUpperCase() }}</button>
+                                <button class="btn btn-sm btn-iface" @click="change_interface('out', iface)" :class="iface == config.network.out ? 'active' : ''" v-for="iface in config.ifaces_out" :key="iface">{{ iface.toUpperCase() }}</button>
                            </div>
                        </div>
                    </div>
--- a/app/frontend/package-lock.json
+++ b/app/frontend/package-lock.json
@@ -1806,6 +1806,16 @@
          "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
          "dev": true
        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
        "cacache": {
          "version": "13.0.1",
          "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1832,6 +1842,34 @@
            "unique-filename": "^1.1.1"
          }
        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
        "find-cache-dir": {
          "version": "3.3.1",
          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -1853,6 +1891,25 @@
            "path-exists": "^4.0.0"
          }
        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
        "locate-path": {
          "version": "5.0.0",
          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1917,6 +1974,16 @@
            "minipass": "^3.1.1"
          }
        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
        "terser-webpack-plugin": {
          "version": "2.3.8",
          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1933,6 +2000,18 @@
            "terser": "^4.6.12",
            "webpack-sources": "^1.4.3"
          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.1.2",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
+          "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
        }
      }
    },
@@ -11257,87 +11336,6 @@
        }
      }
    },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-rc.1",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-rc.1.tgz",
-      "integrity": "sha512-yR+BS90EOXTNieasf8ce9J3TFCpm2DGqoqdbtiwQ33hon3FyIznLX7sKavAq1VmfBnOeV6It0Htg4aniv8ph1g==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
    "vue-router": {
      "version": "3.4.3",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz",
--- a/app/frontend/src/views/home.vue
+++ b/app/frontend/src/views/home.vue
@@ -11,14 +11,22 @@ import router from '../router'

 export default {
    name: 'home',
-    props: { saved_ssid: String, list_ssids: Array, internet: Boolean },
+    props: { saved_ssid: String, iface_out: String, list_ssids: Array, internet: Boolean },
    methods: {
        next: function() {
            var saved_ssid = this.saved_ssid
            var list_ssids = this.list_ssids
            var internet = this.internet
-            router.push({ name: 'wifi-select', params: { saved_ssid: saved_ssid, list_ssids: list_ssids, internet:internet } });
-        }
+            console.log(this.iface_out)
+            if (this.iface_out.charAt(0) == "e"){
+                router.push({ name: 'generate-ap' });
+            } else {
+                router.push({ name: 'wifi-select', 
+                              params: { saved_ssid: saved_ssid, 
+                                        list_ssids: list_ssids, 
+                                        internet:internet } });
+            }
+               }
    }
 }
 </script>
--- a/app/frontend/src/views/splash-screen.vue
+++ b/app/frontend/src/views/splash-screen.vue
@@ -15,35 +15,58 @@
        data() {
            return {
                list_ssids: [],
-                internet: false
+                internet: false,
+                iface_out:""
            }
        },
        methods: {
-            // Check if the device is already connected to internet.
+            // Check if the device is connected to internet.
            internet_check: function() {
                axios.get(`/api/network/status`, { timeout: 10000 })
                    .then(response => {
-                        if (response.data.internet) this.internet = true
-                        this.get_wifi_networks()
+                        if (response.data.internet){
+                            this.internet = true
+                            this.load_config()
+                        } 
                    })
                    .catch(err => (console.log(err)))
            },
            // Get the WiFi networks around the box.
            get_wifi_networks: function() {
                axios.get(`/api/network/wifi/list`, { timeout: 10000 })
-                    .then(response => (this.append_ssids(response.data.networks)))
+                    .then(response => { 
+                        this.list_ssids = response.data.networks
+                        this.goto_home();
+                     })
                    .catch(err => (console.log(err)))
            },
-            // Handle the get_wifi_networks answer and call goto_home.
-            append_ssids: function(networks) {
-                this.list_ssids = networks
-                this.goto_home()
-            },
-            // Pass the list of ssids and the internet status as a prop to the home view.
+            // Forward the view to home, with some props 
+            // such as (SSIDs, internet & interface)
            goto_home: function() {
                var list_ssids = this.list_ssids
-                var internet = this.internet
-                router.replace({ name: 'home', params: { list_ssids: list_ssids, internet: internet } });
+                var internet   = this.internet
+                var iface_out  = this.iface_out
+                router.replace({ name: 'home', params: { list_ssids: list_ssids, internet: internet, iface_out : iface_out } });
+            },
+            // Get the network_out from the config
+            // to determine the next steps.
+            load_config: function() {
+                axios.get(`/api/misc/config`, { timeout: 60000 })
+                    .then(response => {
+                        if(response.data.iface_out){
+                            this.iface_out = response.data.iface_out
+                            // If ethernet, just goto the homepage.
+                            // Else, get wifi networks and then go to home.
+                            if(this.iface_out.charAt(0) == "e"){
+                                setTimeout(function () { this.goto_home(); }.bind(this), 1000);
+                            } else {
+                                this.get_wifi_networks();
+                            }
+                        }
+                    })
+                    .catch(error => {
+                        console.log(error)
+                });
            }
        },
        created: function() {