Merge pull request #772 from andreasbrett/patch-6

show logged in user on settings page

package-lock.json

@@ -33,6 +33,7 @@
                 "http-graceful-shutdown": "~3.1.4",
                 "iconv-lite": "^0.6.3",
                 "jsonwebtoken": "~8.5.1",
+                "jwt-decode": "^3.1.2",
                 "limiter": "^2.1.0",
                 "nodemailer": "~6.6.5",
                 "notp": "~2.0.3",
@@ -7846,6 +7847,11 @@
                 "safe-buffer": "^5.0.1"
             }
         },
+        "node_modules/jwt-decode": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+            "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+        },
         "node_modules/kind-of": {
             "version": "3.2.2",
             "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
@@ -18495,6 +18501,11 @@
                 "safe-buffer": "^5.0.1"
             }
         },
+        "jwt-decode": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+            "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+        },
         "kind-of": {
             "version": "3.2.2",
             "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",

package.json

@@ -76,6 +76,7 @@
         "http-graceful-shutdown": "~3.1.4",
         "iconv-lite": "^0.6.3",
         "jsonwebtoken": "~8.5.1",
+        "jwt-decode": "^3.1.2",
         "limiter": "^2.1.0",
         "nodemailer": "~6.6.5",
         "notp": "~2.0.3",

src/languages/de-DE.js

@@ -304,4 +304,5 @@ export default {
     "One record": "Ein Eintrag",
     "Showing {from} to {to} of {count} records": "Zeige {from} zu {to} von {count} Einträge",
     steamApiKeyDescription: "Um einen Steam Game Server zu überwachen, wird ein Steam Web-API-Schlüssel benötigt. Dieser kann hier registriert werden: ",
+    "Current User": "Aktueller Benutzer",
 };

src/languages/en.js

@@ -306,4 +306,5 @@ export default {
     "One record": "One record",
     "Showing {from} to {to} of {count} records": "Showing {from} to {to} of {count} records",
     steamApiKeyDescription: "For monitoring a Steam Game Server you need a Steam Web-API key. You can register your API key here: ",
+    "Current User": "Current User",
 };

src/pages/Settings.vue

@@ -149,6 +149,7 @@
                             <!-- Change Password -->
                             <template v-if="! settings.disableAuth">
                                 <h2 class="mt-5 mb-2">{{ $t("Change Password") }}</h2>
+                                <p>{{ $t("Current User") }}: <strong>{{ this.username }}</strong></p>
                                 <form class="mb-3" @submit.prevent="savePassword">
                                     <div class="mb-3">
                                         <label for="current-password" class="form-label">{{ $t("Current Password") }}</label>
@@ -415,6 +416,7 @@ import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
 import NotificationDialog from "../components/NotificationDialog.vue";
 import TwoFADialog from "../components/TwoFADialog.vue";
+import jwt_decode from "jwt-decode";
 dayjs.extend(utc);
 dayjs.extend(timezone);
 
@@ -471,6 +473,7 @@ export default {
     },
 
     mounted() {
+        this.loadUsername();
         this.loadSettings();
         this.loadDatabaseSize();
     },
@@ -497,6 +500,12 @@ export default {
             }
         },
 
+        loadUsername() {
+            const jwtToken = this.$root.storage().token;
+            const jwtPayload = jwt_decode(jwtToken);
+            this.username = jwtPayload.username;
+        },
+
         loadSettings() {
             this.$root.getSocket().emit("getSettings", (res) => {
                 this.settings = res.data;

src/util-frontend.js

@@ -51,7 +51,7 @@ export function timezoneList() {
 }
 
 export function setPageLocale() {
-    const html = document.documentElement 
+    const html = document.documentElement
     html.setAttribute('lang', currentLocale() )
     html.setAttribute('dir', localeDirection() )
-  }
+}