add types, fix wrong error message

package.json

@@ -6,6 +6,5 @@
     "serve": "docker compose -f docker-compose.yml -f docker-compose.dev.yml up",
     "sudostart": "sudo docker run --env WG_HOST=0.0.0.0 --name wg-easy --cap-add=NET_ADMIN --cap-add=SYS_MODULE --sysctl=\"net.ipv4.conf.all.src_valid_mark=1\" --mount type=bind,source=\"$(pwd)\"/config,target=/etc/wireguard -p 51820:51820/udp -p 51821:51821/tcp wg-easy",
     "start": "docker run --env WG_HOST=0.0.0.0 --name wg-easy --cap-add=NET_ADMIN --cap-add=SYS_MODULE --sysctl=\"net.ipv4.conf.all.src_valid_mark=1\" --mount type=bind,source=\"$(pwd)\"/config,target=/etc/wireguard -p 51820:51820/udp -p 51821:51821/tcp wg-easy"
-  },
+  }
-  "packageManager": "pnpm@8.15.4+sha1.c85a4305534f76d461407b59277b954bac97b5c4"
 }

src/app.vue

@@ -617,12 +617,12 @@ const CHART_COLORS = {
   gradient: { light: ['rgba(0,0,0,1.0)', 'rgba(0,0,0,1.0)'], dark: ['rgba(128,128,128,0)', 'rgba(128,128,128,0)'] },
 };
 
-const authenticated = ref(null);
+const authenticated = ref<null|boolean>(null);
 const authenticating = ref(false);
-const password = ref(null);
+const password = ref<null|string>(null);
-const requiresPassword = ref(null);
+const requiresPassword = ref<null|boolean>(null);
 
-const clients = ref(null);
+const clients = ref<null|unknown[]>(null);
 const clientsPersist = ref({});
 const clientDelete = ref(null);
 const clientCreate = ref(null);
@@ -745,8 +745,8 @@ async function refresh({
 } = {}) {
   if (!authenticated) return;
 
-  const clients = await api.getClients();
+  const _clients = await api.getClients();
-  clients.value = clients.map((client) => {
+  clients.value = _clients.map((client) => {
     if (client.name.includes('@') && client.name.includes('.')) {
       client.avatar = `https://gravatar.com/avatar/${sha256(client.name.toLowerCase().trim())}.jpg`;
     }
@@ -813,7 +813,7 @@ function login(e) {
 
   authenticating.value = true;
   api.createSession({
-    password: password,
+    password: password.value,
   })
     .then(async () => {
       const session = await api.getSession();
@@ -822,6 +822,7 @@ function login(e) {
       return refresh();
     })
     .catch((err) => {
+      console.log(err)
       alert(err.message || err.toString());
     })
     .finally(() => {
@@ -843,7 +844,7 @@ function logout(e) {
     });
 }
 function createClient() {
-  const name = clientCreateName;
+  const name = clientCreateName.value;
   if (!name) return;
 
   api.createClient({ name })
@@ -865,12 +866,12 @@ function disableClient(client) {
     .catch((err) => alert(err.message || err.toString()))
     .finally(() => refresh().catch(console.error));
 }
-function updateClientName(client, name) {
+function updateClientName(client, name: string) {
   api.updateClientName({ clientId: client.id, name })
     .catch((err) => alert(err.message || err.toString()))
     .finally(() => refresh().catch(console.error));
 }
-function updateClientAddress(client, address) {
+function updateClientAddress(client, address: string) {
   api.updateClientAddress({ clientId: client.id, address })
     .catch((err) => alert(err.message || err.toString()))
     .finally(() => refresh().catch(console.error));
@@ -904,7 +905,7 @@ function setTheme(theme) {
   const shouldAddDarkClass = theme === 'dark' || (theme === 'auto' && prefersDarkScheme?.matches);
   classList.toggle('dark', shouldAddDarkClass);
 }
-function handlePrefersChange(e) {
+function handlePrefersChange(e: MediaQueryListEventMap["change"]) {
   if (getItem('theme') === 'auto') {
     setTheme(e.matches ? 'dark' : 'light');
   }
@@ -916,9 +917,23 @@ function toggleCharts() {
 const {availableLocales, locale} = useI18n();
 
 onMounted(() => {
-  prefersDarkScheme?.addListener(handlePrefersChange);
+  prefersDarkScheme?.addEventListener("change", handlePrefersChange);
   setTheme(uiTheme.value);
 
+  api.getSession()
+      .then((session) => {
+        authenticated.value = session.authenticated;
+        requiresPassword.value = session.requiresPassword;
+        refresh({
+          updateCharts: updateCharts.value,
+        }).catch((err) => {
+          alert(err.message || err.toString());
+        });
+      })
+      .catch((err) => {
+        alert(err.message || err.toString());
+      });
+
   setInterval(() => {
       refresh({
         updateCharts: updateCharts.value,

src/package.json

@@ -31,7 +31,7 @@
     "@types/qrcode": "^1.5.5",
     "eslint": "^9.8.0",
     "typescript": "^5.5.4",
-    "vue-tsc": "^2"
+    "vue-tsc": "^2.0.29"
   },
   "packageManager": "pnpm@8.15.4+sha1.c85a4305534f76d461407b59277b954bac97b5c4"
 }

src/server/api/lang.ts

@@ -1,6 +1,7 @@
+import { LANG } from "~/utils/config";
+
 export default defineEventHandler((event) => {
     assertMethod(event, "GET");
-    const {LANG} = useRuntimeConfig();
     setHeader(event, 'Content-Type', 'application/json');
     return `"${LANG}"`;
 })

src/server/api/release.ts

@@ -1,6 +1,7 @@
+import { RELEASE } from "~/utils/config";
+
 export default defineEventHandler((event) => {
     assertMethod(event, "GET");
-    const {RELEASE} = useRuntimeConfig();
     setHeader(event, 'Content-Type', 'application/json');
     return RELEASE;
 })

src/server/api/ui-chart-type.ts

@@ -1,6 +1,7 @@
+import { UI_CHART_TYPE } from "~/utils/config";
+
 export default defineEventHandler((event) => {
     assertMethod(event, "GET");
-    const {UI_CHART_TYPE} = useRuntimeConfig();
     setHeader(event, 'Content-Type', 'application/json');
     return `"${UI_CHART_TYPE}"`;
 })

src/server/api/ui-traffic-stats.ts

@@ -1,6 +1,7 @@
+import { UI_TRAFFIC_STATS } from "~/utils/config";
+
 export default defineEventHandler((event) => {
     assertMethod(event, "GET");
-    const {UI_TRAFFIC_STATS} = useRuntimeConfig();
     setHeader(event, 'Content-Type', 'application/json');
     return `"${UI_TRAFFIC_STATS}"`;
 })

src/utils/api.ts

@@ -3,7 +3,11 @@
 
 class API {
 
-  async call({ method, path, body }) {
+  async call({ method, path, body }: {
+    method: string,
+    path: string,
+    body?: Record<string, unknown>
+  }) {
     const res = await fetch(`./api${path}`, {
       method,
       headers: {
@@ -21,7 +25,7 @@ class API {
     const json = await res.json();
 
     if (!res.ok) {
-      throw new Error(json.error || res.statusText);
+      throw new Error(json.message || res.statusText);
     }
 
     return json;
@@ -62,7 +66,7 @@ class API {
     });
   }
 
-  async createSession({ password }) {
+  async createSession({ password }: {password: string}) {
     return this.call({
       method: 'post',
       path: '/session',
@@ -91,7 +95,7 @@ class API {
     })));
   }
 
-  async createClient({ name }) {
+  async createClient({ name }: {name: string}) {
     return this.call({
       method: 'post',
       path: '/wireguard/client',
@@ -99,28 +103,28 @@ class API {
     });
   }
 
-  async deleteClient({ clientId }) {
+  async deleteClient({ clientId }: {clientId: string}) {
     return this.call({
       method: 'delete',
       path: `/wireguard/client/${clientId}`,
     });
   }
 
-  async enableClient({ clientId }) {
+  async enableClient({ clientId }: {clientId: string}) {
     return this.call({
       method: 'post',
       path: `/wireguard/client/${clientId}/enable`,
     });
   }
 
-  async disableClient({ clientId }) {
+  async disableClient({ clientId }: {clientId: string}) {
     return this.call({
       method: 'post',
       path: `/wireguard/client/${clientId}/disable`,
     });
   }
 
-  async updateClientName({ clientId, name }) {
+  async updateClientName({ clientId, name }: {clientId: string, name: string}) {
     return this.call({
       method: 'put',
       path: `/wireguard/client/${clientId}/name/`,
@@ -128,7 +132,7 @@ class API {
     });
   }
 
-  async updateClientAddress({ clientId, address }) {
+  async updateClientAddress({ clientId, address }: {clientId: string, address: string}) {
     return this.call({
       method: 'put',
       path: `/wireguard/client/${clientId}/address/`,
@@ -136,7 +140,7 @@ class API {
     });
   }
 
-  async restoreConfiguration(file) {
+  async restoreConfiguration(file: string) {
     return this.call({
       method: 'put',
       path: '/wireguard/restore',