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

webapp: Implemented logged-out event

Browse Source
This commit is contained in:
Thomas Basler 2022-11-07 23:34:54 +01:00
parent ab0029d9fd
commit 0a6965c015
10 changed files with 33 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,8 +72,9 @@
<router-link @click="onClick" class="nav-link" to="/about">About</router-link>
</li>
</ul>
<form class="d-flex" role="search" v-if="isLogged">
<button class="btn btn-outline-danger" @click="signout">Logout</button>
<form class="d-flex" role="search">
<button v-if="isLogged" class="btn btn-outline-danger" @click="signout">Logout</button>
<button v-if="!isLogged" class="btn btn-outline-success" @click="signin">Login</button>
</form>
</div>
</div>
@ -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() {

5
webapp/src/utils/authentication.ts
View File

@ -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<Record<EventType, unknown>>) {
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();
}

2
webapp/src/views/ConfigAdminView.vue
View File

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

4
webapp/src/views/DtuAdminView.vue
View File

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

8
webapp/src/views/InverterAdminView.vue
View File

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

1
webapp/src/views/LoginView.vue
View File

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

4
webapp/src/views/MqttAdminView.vue
View File

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

4
webapp/src/views/NetworkAdminView.vue
View File

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

8
webapp/src/views/NtpAdminView.vue
View File

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

4
webapp/src/views/SecurityAdminView.vue
View File

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