Formatting with Prettier

3 years ago · f5b8c0b77a
24 changed files with 401 additions and 301 deletions
--- a/webui/index.html
+++ b/webui/index.html
@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
    <title>WireGuard</title>
-    <link rel="manifest" href="./manifest.json">
-    <link rel="icon" type="image/png" href="./img/favicon.png">
-    <link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-    <meta name="apple-mobile-web-app-capable" content="yes">
+    <link rel="manifest" href="./manifest.json" />
+    <link rel="icon" type="image/png" href="./img/favicon.png" />
+    <link rel="apple-touch-icon" href="./img/apple-touch-icon.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
  </head>
  <body class="bg-gray-50 dark:bg-neutral-800">
    <div id="app"></div>
--- a/webui/src/App.vue
+++ b/webui/src/App.vue
@ -21,7 +21,7 @@ import LoadingSpinner from './components/LoadingSpinner.vue';
 import IconClose from './components/icons/IconClose.vue';
 import IconWarning from './components/icons/IconWarning.vue';
 import IconAvatarDefault from './components/icons/IconAvatarDefault.vue';
-import ClientTransfer from './components/ClientTransfer.vue'
+import ClientTransfer from './components/ClientTransfer.vue';

 class API {
  async call({ method, path, body }) {
@ -352,7 +352,9 @@ export default {
      const clientsData = await this.api.getClients();
      this.clients = clientsData.map((client) => {
        if (client.name.includes('@') && client.name.includes('.')) {
-          client.avatar = `https://www.gravatar.com/avatar/${sha256(client.name)}?d=blank`;
+          client.avatar = `https://www.gravatar.com/avatar/${sha256(
+            client.name
+          )}?d=blank`;
        }

        if (!this.clientsPersist[client.id]) {
@ -369,10 +371,12 @@ export default {

        if (updateCharts) {
          this.clientsPersist[client.id].transferRxCurrent =
-            client.transferRx - this.clientsPersist[client.id].transferRxPrevious;
+            client.transferRx -
+            this.clientsPersist[client.id].transferRxPrevious;
          this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
          this.clientsPersist[client.id].transferTxCurrent =
-            client.transferTx - this.clientsPersist[client.id].transferTxPrevious;
+            client.transferTx -
+            this.clientsPersist[client.id].transferTxPrevious;
          this.clientsPersist[client.id].transferTxPrevious = client.transferTx;

          this.clientsPersist[client.id].transferRxHistory.push(
@ -386,11 +390,15 @@ export default {
          this.clientsPersist[client.id].transferTxHistory.shift();
        }

-        client.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent;
-        client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
+        client.transferTxCurrent =
+          this.clientsPersist[client.id].transferTxCurrent;
+        client.transferRxCurrent =
+          this.clientsPersist[client.id].transferRxCurrent;

-        client.transferTxHistory = this.clientsPersist[client.id].transferTxHistory;
-        client.transferRxHistory = this.clientsPersist[client.id].transferRxHistory;
+        client.transferTxHistory =
+          this.clientsPersist[client.id].transferTxHistory;
+        client.transferRxHistory =
+          this.clientsPersist[client.id].transferRxHistory;
        client.transferMax = Math.max(
          ...client.transferTxHistory,
          ...client.transferRxHistory
@ -524,7 +532,10 @@ export default {
        </h1>
        <h2 class="text-sm text-gray-400 dark:text-neutral-400 mb-10"></h2>

-        <UpdateNotification :latestRelease="latestRelease" :currentRelease="currentRelease" />
+        <UpdateNotification
+          :latestRelease="latestRelease"
+          :currentRelease="currentRelease"
+        />

        <div
          class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden"
@ -939,7 +950,9 @@ export default {
          <div
            class="h-20 w-20 mb-10 mt-5 mx-auto rounded-full bg-red-800 dark:bg-red-800 relative overflow-hidden"
          >
-            <IconAvatarDefault class="w-10 h-10 m-5 text-white dark:text-white" />
+            <IconAvatarDefault
+              class="w-10 h-10 m-5 text-white dark:text-white"
+            />
          </div>

          <input
--- a/webui/src/components/ClientAddress.vue
+++ b/webui/src/components/ClientAddress.vue
@ -11,9 +11,11 @@
      :ref="'client-' + client.id + '-address'"
      class="rounded border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 outline-none w-20 text-black dark:text-neutral-300 dark:placeholder:text-neutral-500"
    />
-        <span v-show="editAddressId !== client.id" class="inline-block border-t-2 border-b-2 border-transparent">{{
-            client.address
-        }}</span>
+    <span
+      v-show="editAddressId !== client.id"
+      class="inline-block border-t-2 border-b-2 border-transparent"
+      >{{ client.address }}</span
+    >

    <!-- Edit -->
    <span
@ -30,7 +32,7 @@
 import IconEdit from './icons/IconEdit.vue';

 export default {
-    props: ["client"],
+  props: ['client'],
  data() {
    return {
      editAddress: null,
@ -39,7 +41,7 @@ export default {
  },
  methods: {
    updateAddress() {
-            this.$emit("update-address", this.client, this.editAddress);
+      this.$emit('update-address', this.client, this.editAddress);
      this.editAddress = null;
      this.editAddressId = null;
    },
@ -51,10 +53,10 @@ export default {
      this.editAddress = this.client.address;
      this.editAddressId = this.client.id;
      this.$nextTick(() => {
-                this.$refs["client-" + this.client.id + "-address"].select();
+        this.$refs['client-' + this.client.id + '-address'].select();
      });
    },
  },
-    components: { IconEdit }
+  components: { IconEdit },
 };
 </script>
--- a/webui/src/components/ClientAvatar.vue
+++ b/webui/src/components/ClientAvatar.vue
@ -1,8 +1,8 @@
 <script>
-import IconAvatarDefault from "./icons/IconAvatarDefault.vue";
+import IconAvatarDefault from './icons/IconAvatarDefault.vue';

 export default {
-    props: ["client"],
+  props: ['client'],
  components: { IconAvatarDefault },
 };
 </script>
@ -10,13 +10,24 @@ export default {
 <template>
  <div class="h-10 w-10 mr-5 rounded-full bg-gray-50 relative">
    <IconAvatarDefault class="w-6 m-2 text-gray-300" />
-        <img v-if="client.avatar" :src="client.avatar" class="w-10 rounded-full absolute top-0 left-0" />
+    <img
+      v-if="client.avatar"
+      :src="client.avatar"
+      class="w-10 rounded-full absolute top-0 left-0"
+    />

-        <div v-if="client.latestHandshakeAt && new Date() - new Date(client.latestHandshakeAt) < 1000 * 60 * 10">
+    <div
+      v-if="
+        client.latestHandshakeAt &&
+        new Date() - new Date(client.latestHandshakeAt) < 1000 * 60 * 10
+      "
+    >
      <div
        class="animate-ping w-4 h-4 p-1 bg-red-100 dark:bg-red-100 rounded-full absolute -bottom-1 -right-1"
      ></div>
-            <div class="w-2 h-2 bg-red-800 dark:bg-red-600 rounded-full absolute bottom-0 right-0"></div>
+      <div
+        class="w-2 h-2 bg-red-800 dark:bg-red-600 rounded-full absolute bottom-0 right-0"
+      ></div>
    </div>
  </div>
 </template>
--- a/webui/src/components/ClientName.vue
+++ b/webui/src/components/ClientName.vue
@ -3,7 +3,7 @@ import { useDateTime } from '../composables/useDateTime';
 import IconEdit from './icons/IconEdit.vue';

 export default {
-    props: ["client", "clientEditName", "clientEditNameId"],
+  props: ['client', 'clientEditName', 'clientEditNameId'],
  setup() {
    const { dateTime } = useDateTime();
    return {
@ -13,7 +13,7 @@ export default {
  },
  methods: {
    updateClientName() {
-            this.$emit("update-client-name", this.client, this.clientEditName);
+      this.$emit('update-client-name', this.client, this.clientEditName);
      this.clientEditName = null;
      this.clientEditNameId = null;
    },
@ -25,11 +25,11 @@ export default {
      this.clientEditName = this.client.name;
      this.clientEditNameId = this.client.id;
      this.$nextTick(() => {
-                this.$refs["client-" + this.client.id + "-name"][0].select();
+        this.$refs['client-' + this.client.id + '-name'][0].select();
      });
    },
  },
-    components: { IconEdit }
+  components: { IconEdit },
 };
 </script>
 <template>
@ -47,9 +47,11 @@ export default {
      :ref="'client-' + client.id + '-name'"
      class="rounded px-1 border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 dark:placeholder:text-neutral-500 outline-none w-30"
    />
-        <span v-show="clientEditNameId !== client.id" class="inline-block border-t-2 border-b-2 border-transparent">{{
-            client.name
-        }}</span>
+    <span
+      v-show="clientEditNameId !== client.id"
+      class="inline-block border-t-2 border-b-2 border-transparent"
+      >{{ client.name }}</span
+    >

    <!-- Edit -->
    <span
@ -61,4 +63,3 @@ export default {
    </span>
  </div>
 </template>
-
--- a/webui/src/components/ClientNewButton.vue
+++ b/webui/src/components/ClientNewButton.vue
@ -1,6 +1,8 @@
 <!-- ClientNewButton.vue -->
 <template>
-    <div class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600">
+  <div
+    class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600"
+  >
    <div class="flex-grow">
      <p class="text-2xl font-medium dark:text-neutral-200">Clients</p>
    </div>
@ -22,9 +24,9 @@ import IconNew from './icons/IconNew.vue';
 export default {
  methods: {
    createNewClient() {
-            this.$emit("create-new-client");
+      this.$emit('create-new-client');
    },
  },
-    components: { IconNew }
+  components: { IconNew },
 };
 </script>
--- a/webui/src/components/ClientTransfer.vue
+++ b/webui/src/components/ClientTransfer.vue
@ -8,6 +8,6 @@

 <script>
 export default {
-    props: ["transferData", "transferDataCurrent", "title"],
+  props: ['transferData', 'transferDataCurrent', 'title'],
 };
 </script>
--- a/webui/src/components/LoadingSpinner.vue
+++ b/webui/src/components/LoadingSpinner.vue
@ -1,8 +1,8 @@
 <script>
-import IconSpinnerVue from "./icons/IconSpinner.vue";
+import IconSpinnerVue from './icons/IconSpinner.vue';

 export default {
-    components: { IconSpinnerVue }
+  components: { IconSpinnerVue },
 };
 </script>

--- a/webui/src/components/UpdateNotification.vue
+++ b/webui/src/components/UpdateNotification.vue
@ -1,7 +1,7 @@
 <script>
 export default {
-  props: ['latestRelease', 'currentRelease']
-}
+  props: ['latestRelease', 'currentRelease'],
+};
 </script>

 <template>
--- a/webui/src/components/icons/IconAvatarDefault.vue
+++ b/webui/src/components/icons/IconAvatarDefault.vue
@ -1,5 +1,13 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+      clip-rule="evenodd"
+    />
  </svg>
 </template>
--- a/webui/src/components/icons/IconClose.vue
+++ b/webui/src/components/icons/IconClose.vue
@ -1,5 +1,16 @@
 <template>
-    <svg class="w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+  <svg
+    class="w-8"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M6 18L18 6M6 6l12 12"
+    />
  </svg>
 </template>
--- a/webui/src/components/icons/IconDelete.vue
+++ b/webui/src/components/icons/IconDelete.vue
@ -1,5 +1,10 @@
 <template>
-    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+  <svg
+    class="w-5"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
    <path
      fill-rule="evenodd"
      d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
--- a/webui/src/components/icons/IconDownArrow.vue
+++ b/webui/src/components/icons/IconDownArrow.vue
@ -1,5 +1,10 @@
 <template>
-    <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+  <svg
+    class="align-middle h-3 inline"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
    <path
      fill-rule="evenodd"
      d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
--- a/webui/src/components/icons/IconDownload.vue
+++ b/webui/src/components/icons/IconDownload.vue
@ -1,5 +1,11 @@
 <template>
-    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <svg
+    class="w-5"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
--- a/webui/src/components/icons/IconLogout.vue
+++ b/webui/src/components/icons/IconLogout.vue
@ -1,5 +1,11 @@
 <template>
-    <svg class="h-3 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <svg
+    class="h-3 inline"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
--- a/webui/src/components/icons/IconNew.vue
+++ b/webui/src/components/icons/IconNew.vue
@ -6,6 +6,11 @@
    viewBox="0 0 24 24"
    stroke="currentColor"
  >
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+    />
  </svg>
 </template>
--- a/webui/src/components/icons/IconQRCode.vue
+++ b/webui/src/components/icons/IconQRCode.vue
@ -1,5 +1,11 @@
 <template>
-    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <svg
+    class="w-5"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
--- a/webui/src/components/icons/IconSpinner.vue
+++ b/webui/src/components/icons/IconSpinner.vue
@ -1,6 +1,17 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
    <path
      class="opacity-75"
      fill="currentColor"
--- a/webui/src/components/icons/IconUpArrow.vue
+++ b/webui/src/components/icons/IconUpArrow.vue
@ -1,5 +1,10 @@
 <template>
-    <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+  <svg
+    class="align-middle h-3 inline"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
    <path
      fill-rule="evenodd"
      d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
--- a/webui/src/composables/useDateTime.js
+++ b/webui/src/composables/useDateTime.js
@ -1,11 +1,11 @@
 export function useDateTime() {
  const dateTime = (value) => {
    return new Intl.DateTimeFormat(undefined, {
-            year: "numeric",
-            month: "short",
-            day: "numeric",
-            hour: "numeric",
-            minute: "numeric",
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
    }).format(value);
  };

--- a/webui/src/composables/useTimeAgo.js
+++ b/webui/src/composables/useTimeAgo.js
@ -4,19 +4,19 @@ export function useTimeAgo() {
    const diff = now - date;

    if (diff < 1000) {
-            return "just now";
+      return 'just now';
    } else if (diff < 60000) {
      const seconds = Math.floor(diff / 1000);
-            return `${seconds} ${plural("second", seconds)} ago`;
+      return `${seconds} ${plural('second', seconds)} ago`;
    } else if (diff < 3600000) {
      const minutes = Math.floor(diff / 60000);
-            return `${minutes} ${plural("minute", minutes)} ago`;
+      return `${minutes} ${plural('minute', minutes)} ago`;
    } else if (diff < 86400000) {
      const hours = Math.floor(diff / 3600000);
-            return `${hours} ${plural("hour", hours)} ago`;
+      return `${hours} ${plural('hour', hours)} ago`;
    } else {
      const days = Math.floor(diff / 86400000);
-            return `${days} ${plural("day", days)} ago`;
+      return `${days} ${plural('day', days)} ago`;
    }
  };

--- a/webui/src/main.js
+++ b/webui/src/main.js
@ -1,6 +1,6 @@
-import './assets/style.css'
+import './assets/style.css';

-import { createApp } from 'vue'
-import App from './App.vue'
+import App from './App.vue';
+import { createApp } from 'vue';

-createApp(App).mount('#app')
+createApp(App).mount('#app');