From 8d6cbc617ba7bad92a0a6895c0c61e824ea04672 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Thu, 13 Oct 2022 19:54:27 +0200
Subject: [PATCH] webapp: Added interface to set AP password

---
 webapp/src/components/NavBar.vue            |   4 +
 webapp/src/components/SecurityAdminView.vue | 123 ++++++++++++++++++++
 webapp/src/router/index.ts                  |   6 +
 3 files changed, 133 insertions(+)
 create mode 100644 webapp/src/components/SecurityAdminView.vue

diff --git a/webapp/src/components/NavBar.vue b/webapp/src/components/NavBar.vue
index d6e6b982..df112b3c 100644
--- a/webapp/src/components/NavBar.vue
+++ b/webapp/src/components/NavBar.vue
@@ -30,6 +30,10 @@
                                 <router-link @click="onClick" class="dropdown-item" to="/settings/inverter">Inverter Settings
                                 </router-link>
                             </li>
+                            <li>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/security">Security Settings
+                                </router-link>
+                            </li>
                             <li>
                                 <router-link @click="onClick" class="dropdown-item" to="/settings/dtu">DTU Settings</router-link>
                             </li>
diff --git a/webapp/src/components/SecurityAdminView.vue b/webapp/src/components/SecurityAdminView.vue
new file mode 100644
index 00000000..6ae23749
--- /dev/null
+++ b/webapp/src/components/SecurityAdminView.vue
@@ -0,0 +1,123 @@
+<template>
+    <div class="container-xxl" role="main">
+        <div class="page-header">
+            <h1>Security Settings</h1>
+        </div>
+        <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
+            {{ alertMessage }}
+        </BootstrapAlert>
+
+        <div class="text-center" v-if="dataLoading">
+            <div class="spinner-border" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </div>
+
+        <template v-if="!dataLoading">
+            <form @submit="savePasswordConfig">
+                <div class="card">
+                    <div class="card-header text-white bg-primary">Admin password</div>
+                    <div class="card-body">
+                        <div class="row mb-3">
+                            <label for="inputPassword" class="col-sm-2 col-form-label">Password:</label>
+                            <div class="col-sm-10">
+                                <input type="password" class="form-control" id="inputPassword" maxlength="64"
+                                    placeholder="Password" v-model="password" />
+                            </div>
+                        </div>
+
+                        <div class="row mb-3">
+                            <label for="inputPasswordRepeat" class="col-sm-2 col-form-label">Repeat Password:</label>
+                            <div class="col-sm-10">
+                                <input type="password" class="form-control" id="inputPasswordRepeat" maxlength="64"
+                                    placeholder="Password" v-model="passwordRepeat" />
+                            </div>
+                        </div>
+
+                        <div class="alert alert-secondary" role="alert">
+                            <b>Hint:</b>
+                            The administrator password is used to connect to the device when in AP mode.
+                            It must be 8..64 characters.
+                        </div>
+
+                    </div>
+                </div>
+                <button type="submit" class="btn btn-primary mb-3">Save</button>
+            </form>
+        </template>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
+
+export default defineComponent({
+    components: {
+        BootstrapAlert,
+    },
+    data() {
+        return {
+            dataLoading: true,
+            alertMessage: "",
+            alertType: "info",
+            showAlert: false,
+
+            password: "",
+            passwordRepeat: "",
+        };
+    },
+    created() {
+        this.getPasswordConfig();
+    },
+    methods: {
+        getPasswordConfig() {
+            this.dataLoading = true;
+            fetch("/api/security/password")
+                .then((response) => response.json())
+                .then(
+                    (data) => {
+                        this.password = data["password"];
+                        this.passwordRepeat = this.password;
+                        this.dataLoading = false;
+                    }
+                );
+        },
+        savePasswordConfig(e: Event) {
+            e.preventDefault();
+
+            if (this.password != this.passwordRepeat) {
+                this.alertMessage = "Passwords are not equal";
+                this.alertType = "warning";
+                this.showAlert = true;
+                return;
+            }
+
+            const formData = new FormData();
+            const data = {
+                password: this.password
+            }
+            formData.append("data", JSON.stringify(data));
+
+            fetch("/api/security/password", {
+                method: "POST",
+                body: formData,
+            })
+                .then(function (response) {
+                    if (response.status != 200) {
+                        throw response.status;
+                    } else {
+                        return response.json();
+                    }
+                })
+                .then(
+                    (response) => {
+                        this.alertMessage = response.message;
+                        this.alertType = response.type;
+                        this.showAlert = true;
+                    }
+                );
+        },
+    },
+});
+</script>
\ No newline at end of file
diff --git a/webapp/src/router/index.ts b/webapp/src/router/index.ts
index f474f968..e30f6ee2 100644
--- a/webapp/src/router/index.ts
+++ b/webapp/src/router/index.ts
@@ -12,6 +12,7 @@ import InverterAdminView from '@/components/InverterAdminView.vue'
 import DtuAdminView from '@/components/DtuAdminView.vue'
 import FirmwareUpgradeView from '@/components/FirmwareUpgradeView.vue'
 import ConfigAdminView from '@/components/ConfigAdminView.vue'
+import SecurityAdminView from '@/components/SecurityAdminView.vue'
 
 const routes: Array<RouteRecordRaw> = [
     {
@@ -78,6 +79,11 @@ const routes: Array<RouteRecordRaw> = [
         path: '/settings/config',
         name: 'Config Management',
         component: ConfigAdminView
+    },
+    {
+        path: '/settings/security',
+        name: 'Security',
+        component: SecurityAdminView
     }
 ];