patrick/OpenDTU
1
0
Fork 0
Code Issues Pull Requests Actions 1 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> <router-link @click="onClick" class="nav-link" to="/about">About</router-link>
</li> </li>
</ul> </ul>
<form class="d-flex" role="search" v-if="isLogged"> <form class="d-flex" role="search">
<button class="btn btn-outline-danger" @click="signout">Logout</button> <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> </form>
</div> </div>
</div> </div>
@ -98,14 +99,21 @@ export default defineComponent({
this.$emitter.on("logged-in", () => { this.$emitter.on("logged-in", () => {
this.isLogged = this.isLoggedIn(); this.isLogged = this.isLoggedIn();
}); });
this.$emitter.on("logged-out", () => {
this.isLogged = this.isLoggedIn();
});
}, },
methods: { methods: {
isLoggedIn, isLoggedIn,
logout, logout,
signin(e: Event) {
e.preventDefault();
this.$router.push('/login');
},
signout(e: Event) { signout(e: Event) {
e.preventDefault(); e.preventDefault();
this.logout(); this.logout();
this.isLogged = this.isLoggedIn(); this.$emitter.emit("logged-out");
this.$router.push('/'); this.$router.push('/');
}, },
onClick() { onClick() {

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

@ -1,3 +1,5 @@
import type { Emitter, EventType } from "mitt";
export function authHeader(): Headers { export function authHeader(): Headers {
// return authorization header with basic auth credentials // return authorization header with basic auth credentials
let user = JSON.parse(localStorage.getItem('user') || ""); 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 => { return response.text().then(text => {
const data = text && JSON.parse(text); const data = text && JSON.parse(text);
if (!response.ok) { if (!response.ok) {
if (response.status === 401) { if (response.status === 401) {
// auto logout if 401 response returned from api // auto logout if 401 response returned from api
logout(); logout();
emitter.emit("logged-out");
location.reload(); location.reload();
} }

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

@ -156,7 +156,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;

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

@ -79,7 +79,7 @@ export default defineComponent({
getDtuConfig() { getDtuConfig() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/dtu/config", { headers: authHeader() }) fetch("/api/dtu/config", { headers: authHeader() })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then( .then(
(data) => { (data) => {
this.dtuConfigList = data; this.dtuConfigList = data;
@ -98,7 +98,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;

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

@ -198,7 +198,7 @@ export default defineComponent({
getInverters() { getInverters() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/inverter/list", { headers: authHeader() }) fetch("/api/inverter/list", { headers: authHeader() })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then((data) => { .then((data) => {
this.inverters = data.inverter; this.inverters = data.inverter;
this.dataLoading = false; this.dataLoading = false;
@ -213,7 +213,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;
@ -249,7 +249,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;
@ -289,7 +289,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;

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

@ -76,6 +76,7 @@ export default defineComponent({
router.push(this.returnUrl); router.push(this.returnUrl);
}, },
error => { error => {
this.$emitter.emit("logged-out");
this.alertMessage = error; this.alertMessage = error;
this.alertType = 'danger'; this.alertType = 'danger';
this.showAlert = true; this.showAlert = true;

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

@ -242,7 +242,7 @@ export default defineComponent({
getMqttConfig() { getMqttConfig() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/mqtt/config", { headers: authHeader() }) fetch("/api/mqtt/config", { headers: authHeader() })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then((data) => { .then((data) => {
this.mqttConfigList = data; this.mqttConfigList = data;
this.dataLoading = false; this.dataLoading = false;
@ -259,7 +259,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;

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

@ -128,7 +128,7 @@ export default defineComponent({
getNetworkConfig() { getNetworkConfig() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/network/config", { headers: authHeader() }) fetch("/api/network/config", { headers: authHeader() })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then((data) => { .then((data) => {
this.networkConfigList = data; this.networkConfigList = data;
this.dataLoading = false; this.dataLoading = false;
@ -145,7 +145,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;

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

@ -129,7 +129,7 @@ export default defineComponent({
getNtpConfig() { getNtpConfig() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/ntp/config", { headers: authHeader() }) fetch("/api/ntp/config", { headers: authHeader() })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then( .then(
(data) => { (data) => {
this.ntpConfigList = data; this.ntpConfigList = data;
@ -144,7 +144,7 @@ export default defineComponent({
getCurrentTime() { getCurrentTime() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/ntp/time", { headers: authHeader() }) fetch("/api/ntp/time", { headers: authHeader() })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then( .then(
(data) => { (data) => {
this.mcuTime = new Date( this.mcuTime = new Date(
@ -172,7 +172,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;
@ -195,7 +195,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;

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

@ -67,7 +67,7 @@ export default defineComponent({
getPasswordConfig() { getPasswordConfig() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/security/password", { headers: authHeader() }) fetch("/api/security/password", { headers: authHeader() })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then( .then(
(data) => { (data) => {
this.securityConfigList = data; this.securityConfigList = data;
@ -94,7 +94,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then(handleResponse) .then((response) => handleResponse(response, this.$emitter))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;