add types, fix wrong error message

2 years ago · 2d9717a8ce
8 changed files with 51 additions and 29 deletions
--- a/package.json
+++ b/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": "[email protected]+sha1.c85a4305534f76d461407b59277b954bac97b5c4"
+  }
 }
--- a/src/app.vue
+++ b/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 requiresPassword = ref(null);
+const password = ref<null|string>(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();
-  clients.value = clients.map((client) => {
+  const _clients = await api.getClients();
+  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,
--- a/src/package.json
+++ b/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": "[email protected]+sha1.c85a4305534f76d461407b59277b954bac97b5c4"
 }
--- a/src/server/api/lang.ts
+++ b/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}"`;
 })
--- a/src/server/api/release.ts
+++ b/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;
 })
--- a/src/server/api/ui-chart-type.ts
+++ b/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}"`;
 })
--- a/src/server/api/ui-traffic-stats.ts
+++ b/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}"`;
 })
--- a/src/utils/api.ts
+++ b/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',