From 9e5906e5aa443938d8af00eec1a160a5e7e460ea Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Fri, 15 Apr 2022 14:23:25 +0200
Subject: [PATCH] webapp: Implemented first part of the network settings

---
 webapp/src/components/NavBar.vue           |  31 +++-
 webapp/src/components/NetworkAdminView.vue | 179 +++++++++++++++++++++
 webapp/src/router/index.js                 |   6 +
 3 files changed, 214 insertions(+), 2 deletions(-)
 create mode 100644 webapp/src/components/NetworkAdminView.vue

diff --git a/webapp/src/components/NavBar.vue b/webapp/src/components/NavBar.vue
index 9b4f13b..6eaea40 100644
--- a/webapp/src/components/NavBar.vue
+++ b/webapp/src/components/NavBar.vue
@@ -18,6 +18,25 @@
           <li class="nav-item">
             <router-link class="nav-link" to="/">Home</router-link>
           </li>
+          <li class="nav-item dropdown">
+            <a
+              class="nav-link dropdown-toggle"
+              href="#"
+              id="navbarScrollingDropdown"
+              role="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              Settings
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
+              <li>
+                <router-link class="dropdown-item" to="/settings/network"
+                  >Network Settings</router-link
+                >
+              </li>
+            </ul>
+          </li>
           <li class="nav-item dropdown">
             <a
               class="nav-link dropdown-toggle"
@@ -30,8 +49,16 @@
               Info
             </a>
             <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
-              <li><router-link class="dropdown-item" to="/info/system">System</router-link></li>
-              <li><router-link class="dropdown-item" to="/info/network">Network</router-link></li>
+              <li>
+                <router-link class="dropdown-item" to="/info/system"
+                  >System</router-link
+                >
+              </li>
+              <li>
+                <router-link class="dropdown-item" to="/info/network"
+                  >Network</router-link
+                >
+              </li>
             </ul>
           </li>
           <li class="nav-item">
diff --git a/webapp/src/components/NetworkAdminView.vue b/webapp/src/components/NetworkAdminView.vue
new file mode 100644
index 0000000..44c5775
--- /dev/null
+++ b/webapp/src/components/NetworkAdminView.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="container" role="main">
+    <div class="page-header">
+      <h1>Network Settings</h1>
+    </div>
+    <form>
+      <div class="card">
+        <div class="card-header text-white bg-primary">WiFi Configuration</div>
+        <div class="card-body">
+          <div class="row mb-3">
+            <label for="inputSSID" class="col-sm-2 col-form-label"
+              >WiFi SSID:</label
+            >
+            <div class="col-sm-10">
+              <input
+                type="text"
+                class="form-control"
+                id="inputSSID"
+                maxlength="32"
+                placeholder="SSID"
+                v-model="networkConfigList.ssid"
+              />
+            </div>
+          </div>
+
+          <div class="row mb-3">
+            <label for="inputPassword" class="col-sm-2 col-form-label"
+              >WiFi Password:</label
+            >
+            <div class="col-sm-10">
+              <input
+                type="password"
+                class="form-control"
+                id="inputPassword"
+                maxlength="32"
+                placeholder="PSK"
+                v-model="networkConfigList.password"
+              />
+            </div>
+          </div>
+
+          <div class="row mb-3">
+            <label for="inputHostname" class="col-sm-2 col-form-label"
+              >Hostname:</label
+            >
+            <div class="col-sm-10">
+              <input
+                type="text"
+                class="form-control"
+                id="inputHostname"
+                maxlength="32"
+                placeholder="Hostname"
+                v-model="networkConfigList.hostname"
+              />
+            </div>
+          </div>
+
+          <div class="form-check form-switch">
+            <input
+              class="form-check-input"
+              type="checkbox"
+              id="inputDHCP"
+              v-model="networkConfigList.dhcp"
+            />
+            <label class="form-check-label" for="inputDHCP">Enable DHCP</label>
+          </div>
+        </div>
+      </div>
+
+      <div class="card" v-show="!networkConfigList.dhcp">
+        <div class="card-header text-white bg-primary">
+          Static IP Configuration
+        </div>
+        <div class="card-body">
+          <div class="row mb-3">
+            <label for="inputIP" class="col-sm-2 col-form-label"
+              >IP Address:</label
+            >
+            <div class="col-sm-10">
+              <input
+                type="text"
+                class="form-control"
+                id="inputIP"
+                maxlength="32"
+                placeholder="IP address"
+                v-model="networkConfigList.ipaddress"
+              />
+            </div>
+          </div>
+
+          <div class="row mb-3">
+            <label for="inputNetmask" class="col-sm-2 col-form-label"
+              >Netmask:</label
+            >
+            <div class="col-sm-10">
+              <input
+                type="text"
+                class="form-control"
+                id="inputNetmask"
+                maxlength="32"
+                placeholder="Netmask"
+                v-model="networkConfigList.netmask"
+              />
+            </div>
+          </div>
+
+          <div class="row mb-3">
+            <label for="inputGateway" class="col-sm-2 col-form-label"
+              >Default Gateway:</label
+            >
+            <div class="col-sm-10">
+              <input
+                type="text"
+                class="form-control"
+                id="inputGateway"
+                maxlength="32"
+                placeholder="Default Gateway"
+                v-model="networkConfigList.gateway"
+              />
+            </div>
+          </div>
+
+          <div class="row mb-3">
+            <label for="inputDNS1" class="col-sm-2 col-form-label"
+              >DNS Server 1:</label
+            >
+            <div class="col-sm-10">
+              <input
+                type="text"
+                class="form-control"
+                id="inputDNS1"
+                maxlength="32"
+                placeholder="DNS Server 1"
+                v-model="networkConfigList.dns1"
+              />
+            </div>
+          </div>
+
+          <div class="row mb-3">
+            <label for="inputDNS2" class="col-sm-2 col-form-label"
+              >DNS Server 2:</label
+            >
+            <div class="col-sm-10">
+              <input
+                type="text"
+                class="form-control"
+                id="inputDNS2"
+                maxlength="32"
+                placeholder="DNS Server 2"
+                v-model="networkConfigList.dns2"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+    {{ networkConfigList }}
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      networkConfigList: [],
+    };
+  },
+  created() {
+    this.getNetworkConfig();
+  },
+  methods: {
+    getNetworkConfig() {
+      fetch("/api/network/config")
+        .then((response) => response.json())
+        .then((data) => (this.networkConfigList = data));
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/webapp/src/router/index.js b/webapp/src/router/index.js
index 7b0b0c4..bc85ab6 100644
--- a/webapp/src/router/index.js
+++ b/webapp/src/router/index.js
@@ -3,6 +3,7 @@ import HomeView from '@/components/HomeView'
 import AboutView from '@/components/AboutView'
 import NetworkInfoView from '@/components/NetworkInfoView'
 import SystemInfoView from '@/components/SystemInfoView'
+import NetworkAdminView from '@/components/NetworkAdminView'
 
 const routes = [
     {
@@ -24,6 +25,11 @@ const routes = [
         path: '/info/system',
         name: 'System',
         component: SystemInfoView
+    },
+    {
+        path: '/settings/network',
+        name: 'Network Settings',
+        component: NetworkAdminView
     }
 ];