From 0a6965c0157e95d596ed73cd4c7024f5c1e114b7 Mon Sep 17 00:00:00 2001 From: Thomas Basler Date: Mon, 7 Nov 2022 23:34:54 +0100 Subject: [PATCH] webapp: Implemented logged-out event --- webapp/src/components/NavBar.vue | 14 +++++++++++--- webapp/src/utils/authentication.ts | 5 ++++- webapp/src/views/ConfigAdminView.vue | 2 +- webapp/src/views/DtuAdminView.vue | 4 ++-- webapp/src/views/InverterAdminView.vue | 8 ++++---- webapp/src/views/LoginView.vue | 1 + webapp/src/views/MqttAdminView.vue | 4 ++-- webapp/src/views/NetworkAdminView.vue | 4 ++-- webapp/src/views/NtpAdminView.vue | 8 ++++---- webapp/src/views/SecurityAdminView.vue | 4 ++-- 10 files changed, 33 insertions(+), 21 deletions(-) diff --git a/webapp/src/components/NavBar.vue b/webapp/src/components/NavBar.vue index 4cda7032..f86f587d 100644 --- a/webapp/src/components/NavBar.vue +++ b/webapp/src/components/NavBar.vue @@ -72,8 +72,9 @@ About - @@ -98,14 +99,21 @@ export default defineComponent({ this.$emitter.on("logged-in", () => { this.isLogged = this.isLoggedIn(); }); + this.$emitter.on("logged-out", () => { + this.isLogged = this.isLoggedIn(); + }); }, methods: { isLoggedIn, logout, + signin(e: Event) { + e.preventDefault(); + this.$router.push('/login'); + }, signout(e: Event) { e.preventDefault(); this.logout(); - this.isLogged = this.isLoggedIn(); + this.$emitter.emit("logged-out"); this.$router.push('/'); }, onClick() { diff --git a/webapp/src/utils/authentication.ts b/webapp/src/utils/authentication.ts index aef44c37..a4551e7c 100644 --- a/webapp/src/utils/authentication.ts +++ b/webapp/src/utils/authentication.ts @@ -1,3 +1,5 @@ +import type { Emitter, EventType } from "mitt"; + export function authHeader(): Headers { // return authorization header with basic auth credentials let user = JSON.parse(localStorage.getItem('user') || ""); @@ -45,13 +47,14 @@ export function login(username: String, password: String) { }); } -export function handleResponse(response: Response) { +export function handleResponse(response: Response, emitter: Emitter>) { return response.text().then(text => { const data = text && JSON.parse(text); if (!response.ok) { if (response.status === 401) { // auto logout if 401 response returned from api logout(); + emitter.emit("logged-out"); location.reload(); } diff --git a/webapp/src/views/ConfigAdminView.vue b/webapp/src/views/ConfigAdminView.vue index 7802ddf5..479c7171 100644 --- a/webapp/src/views/ConfigAdminView.vue +++ b/webapp/src/views/ConfigAdminView.vue @@ -156,7 +156,7 @@ export default defineComponent({ headers: authHeader(), body: formData, }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then( (response) => { this.alertMessage = response.message; diff --git a/webapp/src/views/DtuAdminView.vue b/webapp/src/views/DtuAdminView.vue index 6d563f06..e23ba406 100644 --- a/webapp/src/views/DtuAdminView.vue +++ b/webapp/src/views/DtuAdminView.vue @@ -79,7 +79,7 @@ export default defineComponent({ getDtuConfig() { this.dataLoading = true; fetch("/api/dtu/config", { headers: authHeader() }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then( (data) => { this.dtuConfigList = data; @@ -98,7 +98,7 @@ export default defineComponent({ headers: authHeader(), body: formData, }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then( (response) => { this.alertMessage = response.message; diff --git a/webapp/src/views/InverterAdminView.vue b/webapp/src/views/InverterAdminView.vue index 61441878..6cdf5b02 100644 --- a/webapp/src/views/InverterAdminView.vue +++ b/webapp/src/views/InverterAdminView.vue @@ -198,7 +198,7 @@ export default defineComponent({ getInverters() { this.dataLoading = true; fetch("/api/inverter/list", { headers: authHeader() }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then((data) => { this.inverters = data.inverter; this.dataLoading = false; @@ -213,7 +213,7 @@ export default defineComponent({ headers: authHeader(), body: formData, }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then( (response) => { this.alertMessage = response.message; @@ -249,7 +249,7 @@ export default defineComponent({ headers: authHeader(), body: formData, }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then( (response) => { this.alertMessage = response.message; @@ -289,7 +289,7 @@ export default defineComponent({ headers: authHeader(), body: formData, }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then( (response) => { this.alertMessage = response.message; diff --git a/webapp/src/views/LoginView.vue b/webapp/src/views/LoginView.vue index b1c5f480..c5d43e09 100644 --- a/webapp/src/views/LoginView.vue +++ b/webapp/src/views/LoginView.vue @@ -76,6 +76,7 @@ export default defineComponent({ router.push(this.returnUrl); }, error => { + this.$emitter.emit("logged-out"); this.alertMessage = error; this.alertType = 'danger'; this.showAlert = true; diff --git a/webapp/src/views/MqttAdminView.vue b/webapp/src/views/MqttAdminView.vue index 47f33674..b2f62d96 100644 --- a/webapp/src/views/MqttAdminView.vue +++ b/webapp/src/views/MqttAdminView.vue @@ -242,7 +242,7 @@ export default defineComponent({ getMqttConfig() { this.dataLoading = true; fetch("/api/mqtt/config", { headers: authHeader() }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then((data) => { this.mqttConfigList = data; this.dataLoading = false; @@ -259,7 +259,7 @@ export default defineComponent({ headers: authHeader(), body: formData, }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then( (response) => { this.alertMessage = response.message; diff --git a/webapp/src/views/NetworkAdminView.vue b/webapp/src/views/NetworkAdminView.vue index ea617fdf..235869ce 100644 --- a/webapp/src/views/NetworkAdminView.vue +++ b/webapp/src/views/NetworkAdminView.vue @@ -128,7 +128,7 @@ export default defineComponent({ getNetworkConfig() { this.dataLoading = true; fetch("/api/network/config", { headers: authHeader() }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then((data) => { this.networkConfigList = data; this.dataLoading = false; @@ -145,7 +145,7 @@ export default defineComponent({ headers: authHeader(), body: formData, }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then( (response) => { this.alertMessage = response.message; diff --git a/webapp/src/views/NtpAdminView.vue b/webapp/src/views/NtpAdminView.vue index 3b8315e8..be6a13e3 100644 --- a/webapp/src/views/NtpAdminView.vue +++ b/webapp/src/views/NtpAdminView.vue @@ -129,7 +129,7 @@ export default defineComponent({ getNtpConfig() { this.dataLoading = true; fetch("/api/ntp/config", { headers: authHeader() }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then( (data) => { this.ntpConfigList = data; @@ -144,7 +144,7 @@ export default defineComponent({ getCurrentTime() { this.dataLoading = true; fetch("/api/ntp/time", { headers: authHeader() }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then( (data) => { this.mcuTime = new Date( @@ -172,7 +172,7 @@ export default defineComponent({ headers: authHeader(), body: formData, }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then( (response) => { this.alertMessage = response.message; @@ -195,7 +195,7 @@ export default defineComponent({ headers: authHeader(), body: formData, }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then( (response) => { this.alertMessage = response.message; diff --git a/webapp/src/views/SecurityAdminView.vue b/webapp/src/views/SecurityAdminView.vue index d557bd8b..b4aae349 100644 --- a/webapp/src/views/SecurityAdminView.vue +++ b/webapp/src/views/SecurityAdminView.vue @@ -67,7 +67,7 @@ export default defineComponent({ getPasswordConfig() { this.dataLoading = true; fetch("/api/security/password", { headers: authHeader() }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then( (data) => { this.securityConfigList = data; @@ -94,7 +94,7 @@ export default defineComponent({ headers: authHeader(), body: formData, }) - .then(handleResponse) + .then((response) => handleResponse(response, this.$emitter)) .then( (response) => { this.alertMessage = response.message;