patrick/OpenDTU-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

webapp: Added interface to set AP password

Browse Source
This commit is contained in:
Thomas Basler 2022-10-13 19:54:27 +02:00
parent cf727d4ff9
commit 8d6cbc617b
3 changed files with 133 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/src/components/NavBar.vue
View File

@ -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>

123
webapp/src/components/SecurityAdminView.vue Normal file
View File

@ -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>

6
webapp/src/router/index.ts
View File

@ -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
}
];