feat: migrate to vue 3 (#2689)

--------- Co-authored-by: Joep <jcbuhre@gmail.com> Co-authored-by: Omar Hussein <omarmohammad1951@gmail.com> Co-authored-by: Oleg Lobanov <oleg@lobanov.me>
2024-04-01 17:18:22 +02:00
parent 0e3b35b30e
commit 5100e587d7
164 changed files with 12202 additions and 8047 deletions
--- a/frontend/src/components/prompts/BaseModal.vue
+++ b/frontend/src/components/prompts/BaseModal.vue
@@ -0,0 +1,21 @@
+<template>
+  <VueFinalModal
+    overlay-transition="vfm-fade"
+    content-transition="vfm-fade"
+    @closed="layoutStore.closeHovers"
+    :focus-trap="{
+      initialFocus: '#focus-prompt',
+      fallbackFocus: 'div.vfm__content',
+    }"
+    style="z-index: 9999999"
+  >
+    <slot />
+  </VueFinalModal>
+</template>
+
+<script setup lang="ts">
+import { VueFinalModal } from "vue-final-modal";
+import { useLayoutStore } from "@/stores/layout";
+
+const layoutStore = useLayoutStore();
+</script>
--- a/frontend/src/components/prompts/Copy.vue
+++ b/frontend/src/components/prompts/Copy.vue
@@ -6,8 +6,11 @@

    <div class="card-content">
      <p>{{ $t("prompts.copyMessage") }}</p>
-      <file-list ref="fileList" @update:selected="(val) => (dest = val)">
-      </file-list>
+      <file-list
+        ref="fileList"
+        @update:selected="(val) => (dest = val)"
+        tabindex="1"
+      />
    </div>

    <div
@@ -28,17 +31,20 @@
      <div>
        <button
          class="button button--flat button--grey"
-          @click="$store.commit('closeHovers')"
+          @click="closeHovers"
          :aria-label="$t('buttons.cancel')"
          :title="$t('buttons.cancel')"
+          tabindex="3"
        >
          {{ $t("buttons.cancel") }}
        </button>
        <button
+          id="focus-prompt"
          class="button button--flat"
          @click="copy"
          :aria-label="$t('buttons.copy')"
          :title="$t('buttons.copy')"
+          tabindex="2"
        >
          {{ $t("buttons.copy") }}
        </button>
@@ -48,7 +54,10 @@
 </template>

 <script>
-import { mapState } from "vuex";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+import { useAuthStore } from "@/stores/auth";
 import FileList from "./FileList.vue";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
@@ -63,8 +72,14 @@ export default {
      dest: null,
    };
  },
-  computed: mapState(["req", "selected", "user"]),
+  inject: ["$showError"],
+  computed: {
+    ...mapState(useFileStore, ["req", "selected"]),
+    ...mapState(useAuthStore, ["user"]),
+    ...mapWritableState(useFileStore, ["reload"]),
+  },
  methods: {
+    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
    copy: async function (event) {
      event.preventDefault();
      let items = [];
@@ -87,7 +102,7 @@ export default {
            buttons.success("copy");

            if (this.$route.path === this.dest) {
-              this.$store.commit("setReload", true);
+              this.reload = true;

              return;
            }
@@ -101,7 +116,7 @@ export default {
      };

      if (this.$route.path === this.dest) {
-        this.$store.commit("closeHovers");
+        this.closeHovers();
        action(false, true);

        return;
@@ -114,14 +129,14 @@ export default {
      let rename = false;

      if (conflict) {
-        this.$store.commit("showHover", {
+        this.showHover({
          prompt: "replace-rename",
          confirm: (event, option) => {
            overwrite = option == "overwrite";
            rename = option == "rename";

            event.preventDefault();
-            this.$store.commit("closeHovers");
+            this.closeHovers();
            action(overwrite, rename);
          },
        });
--- a/frontend/src/components/prompts/Delete.vue
+++ b/frontend/src/components/prompts/Delete.vue
@@ -10,18 +10,21 @@
    </div>
    <div class="card-action">
      <button
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
        class="button button--flat button--grey"
        :aria-label="$t('buttons.cancel')"
        :title="$t('buttons.cancel')"
+        tabindex="2"
      >
        {{ $t("buttons.cancel") }}
      </button>
      <button
+        id="focus-prompt"
        @click="submit"
        class="button button--flat button--red"
        :aria-label="$t('buttons.delete')"
        :title="$t('buttons.delete')"
+        tabindex="1"
      >
        {{ $t("buttons.delete") }}
      </button>
@@ -30,18 +33,27 @@
 </template>

 <script>
-import { mapGetters, mapMutations, mapState } from "vuex";
+import { mapActions, mapState, mapWritableState } from "pinia";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";

 export default {
  name: "delete",
+  inject: ["$showError"],
  computed: {
-    ...mapGetters(["isListing", "selectedCount", "currentPrompt"]),
-    ...mapState(["req", "selected"]),
+    ...mapState(useFileStore, [
+      "isListing",
+      "selectedCount",
+      "req",
+      "selected",
+      "currentPrompt",
+    ]),
+    ...mapWritableState(useFileStore, ["reload"]),
  },
  methods: {
-    ...mapMutations(["closeHovers"]),
+    ...mapActions(useLayoutStore, ["closeHovers"]),
    submit: async function () {
      buttons.loading("delete");

@@ -69,11 +81,11 @@ export default {

        await Promise.all(promises);
        buttons.success("delete");
-        this.$store.commit("setReload", true);
+        this.reload = true;
      } catch (e) {
        buttons.done("delete");
        this.$showError(e);
-        if (this.isListing) this.$store.commit("setReload", true);
+        if (this.isListing) this.reload = true;
      }
    },
  },
--- a/frontend/src/components/prompts/DeleteUser.vue
+++ b/frontend/src/components/prompts/DeleteUser.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="card floating">
+    <div class="card-content">
+      <p>{{ t("prompts.deleteUser") }}</p>
+    </div>
+
+    <div class="card-action">
+      <button
+        id="focus-prompt"
+        class="button button--flat button--grey"
+        @click="layoutStore.closeHovers"
+        :aria-label="t('buttons.cancel')"
+        :title="t('buttons.cancel')"
+        tabindex="1"
+      >
+        {{ t("buttons.cancel") }}
+      </button>
+      <button
+        class="button button--flat"
+        @click="layoutStore.currentPrompt?.confirm()"
+        tabindex="2"
+      >
+        {{ t("buttons.delete") }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLayoutStore } from "@/stores/layout";
+import { useI18n } from "vue-i18n";
+
+const layoutStore = useLayoutStore();
+
+const { t } = useI18n();
+
+// const emit = defineEmits<{
+//   (e: "confirm"): void;
+// }>();
+</script>
--- a/frontend/src/components/prompts/DiscardEditorChanges.vue
+++ b/frontend/src/components/prompts/DiscardEditorChanges.vue
@@ -7,18 +7,21 @@
    </div>
    <div class="card-action">
      <button
-        @click="$store.commit('closeHovers')"
        class="button button--flat button--grey"
+        @click="closeHovers"
        :aria-label="$t('buttons.cancel')"
        :title="$t('buttons.cancel')"
+        tabindex="2"
      >
        {{ $t("buttons.cancel") }}
      </button>
      <button
+        id="focus-prompt"
        @click="submit"
        class="button button--flat button--red"
        :aria-label="$t('buttons.discardChanges')"
        :title="$t('buttons.discardChanges')"
+        tabindex="1"
      >
        {{ $t("buttons.discardChanges") }}
      </button>
@@ -27,15 +30,18 @@
 </template>

 <script>
-import { mapMutations } from "vuex";
+import { mapActions } from "pinia";
 import url from "@/utils/url";
+import { useLayoutStore } from "@/stores/layout";
+import { useFileStore } from "@/stores/file";

 export default {
  name: "discardEditorChanges",
  methods: {
-    ...mapMutations(["closeHovers"]),
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+    ...mapActions(useFileStore, ["updateRequest"]),
    submit: async function () {
-      this.$store.commit("updateRequest", {});
+      this.updateRequest(null);

      let uri = url.removeLastDir(this.$route.path) + "/";
      this.$router.push({ path: uri });
--- a/frontend/src/components/prompts/Download.vue
+++ b/frontend/src/components/prompts/Download.vue
@@ -1,18 +1,18 @@
 <template>
  <div class="card floating" id="download">
    <div class="card-title">
-      <h2>{{ $t("prompts.download") }}</h2>
+      <h2>{{ t("prompts.download") }}</h2>
    </div>

    <div class="card-content">
-      <p>{{ $t("prompts.downloadMessage") }}</p>
+      <p>{{ t("prompts.downloadMessage") }}</p>

      <button
+        id="focus-prompt"
        v-for="(ext, format) in formats"
        :key="format"
        class="button button--block"
-        @click="currentPrompt.confirm(format)"
-        v-focus
+        @click="layoutStore.currentPrompt?.confirm(format)"
      >
        {{ ext }}
      </button>
@@ -20,26 +20,21 @@
  </div>
 </template>

-<script>
-import { mapGetters } from "vuex";
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useLayoutStore } from "@/stores/layout";

-export default {
-  name: "download",
-  data: function () {
-    return {
-      formats: {
-        zip: "zip",
-        tar: "tar",
-        targz: "tar.gz",
-        tarbz2: "tar.bz2",
-        tarxz: "tar.xz",
-        tarlz4: "tar.lz4",
-        tarsz: "tar.sz",
-      },
-    };
-  },
-  computed: {
-    ...mapGetters(["currentPrompt"]),
-  },
+const layoutStore = useLayoutStore();
+
+const { t } = useI18n();
+
+const formats = {
+  zip: "zip",
+  tar: "tar",
+  targz: "tar.gz",
+  tarbz2: "tar.bz2",
+  tarxz: "tar.xz",
+  tarlz4: "tar.lz4",
+  tarsz: "tar.sz",
 };
 </script>
--- a/frontend/src/components/prompts/FileList.vue
+++ b/frontend/src/components/prompts/FileList.vue
@@ -25,7 +25,10 @@
 </template>

 <script>
-import { mapState } from "vuex";
+import { mapState } from "pinia";
+import { useAuthStore } from "@/stores/auth";
+import { useFileStore } from "@/stores/file";
+
 import url from "@/utils/url";
 import { files } from "@/api";

@@ -42,8 +45,10 @@ export default {
      current: window.location.pathname,
    };
  },
+  inject: ["$showError"],
  computed: {
-    ...mapState(["req", "user"]),
+    ...mapState(useAuthStore, ["user"]),
+    ...mapState(useFileStore, ["req"]),
    nav() {
      return decodeURIComponent(this.current);
    },
--- a/frontend/src/components/prompts/Help.vue
+++ b/frontend/src/components/prompts/Help.vue
@@ -20,11 +20,13 @@

    <div class="card-action">
      <button
+        id="focus-prompt"
        type="submit"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
        class="button button--flat"
        :aria-label="$t('buttons.ok')"
        :title="$t('buttons.ok')"
+        tabindex="1"
      >
        {{ $t("buttons.ok") }}
      </button>
@@ -33,5 +35,13 @@
 </template>

 <script>
-export default { name: "help" };
+import { mapActions } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
+
+export default {
+  name: "help",
+  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+  },
+};
 </script>
--- a/frontend/src/components/prompts/Info.vue
+++ b/frontend/src/components/prompts/Info.vue
@@ -40,33 +40,45 @@
        <p>
          <strong>MD5: </strong
          ><code
-            ><a @click="checksum($event, 'md5')">{{
-              $t("prompts.show")
-            }}</a></code
+            ><a
+              @click="checksum($event, 'md5')"
+              @keypress.enter="checksum($event, 'md5')"
+              tabindex="2"
+              >{{ $t("prompts.show") }}</a
+            ></code
          >
        </p>
        <p>
          <strong>SHA1: </strong
          ><code
-            ><a @click="checksum($event, 'sha1')">{{
-              $t("prompts.show")
-            }}</a></code
+            ><a
+              @click="checksum($event, 'sha1')"
+              @keypress.enter="checksum($event, 'sha1')"
+              tabindex="3"
+              >{{ $t("prompts.show") }}</a
+            ></code
          >
        </p>
        <p>
          <strong>SHA256: </strong
          ><code
-            ><a @click="checksum($event, 'sha256')">{{
-              $t("prompts.show")
-            }}</a></code
+            ><a
+              @click="checksum($event, 'sha256')"
+              @keypress.enter="checksum($event, 'sha256')"
+              tabindex="4"
+              >{{ $t("prompts.show") }}</a
+            ></code
          >
        </p>
        <p>
          <strong>SHA512: </strong
          ><code
-            ><a @click="checksum($event, 'sha512')">{{
-              $t("prompts.show")
-            }}</a></code
+            ><a
+              @click="checksum($event, 'sha512')"
+              @keypress.enter="checksum($event, 'sha512')"
+              tabindex="5"
+              >{{ $t("prompts.show") }}</a
+            ></code
          >
        </p>
      </template>
@@ -74,8 +86,9 @@

    <div class="card-action">
      <button
+        id="focus-prompt"
        type="submit"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
        class="button button--flat"
        :aria-label="$t('buttons.ok')"
        :title="$t('buttons.ok')"
@@ -87,16 +100,23 @@
 </template>

 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
 import { filesize } from "@/utils";
-import moment from "moment/min/moment-with-locales";
+import dayjs from "dayjs";
 import { files as api } from "@/api";

 export default {
  name: "info",
+  inject: ["$showError"],
  computed: {
-    ...mapState(["req", "selected"]),
-    ...mapGetters(["selectedCount", "isListing"]),
+    ...mapState(useFileStore, [
+      "req",
+      "selected",
+      "selectedCount",
+      "isListing",
+    ]),
    humanSize: function () {
      if (this.selectedCount === 0 || !this.isListing) {
        return filesize(this.req.size);
@@ -112,13 +132,19 @@ export default {
    },
    humanTime: function () {
      if (this.selectedCount === 0) {
-        return moment(this.req.modified).fromNow();
+        return dayjs(this.req.modified).fromNow();
      }

-      return moment(this.req.items[this.selected[0]].modified).fromNow();
+      return dayjs(this.req.items[this.selected[0]].modified).fromNow();
    },
    modTime: function () {
-      return new Date(Date.parse(this.req.modified)).toLocaleString();
+      if (this.selectedCount === 0) {
+        return new Date(Date.parse(this.req.modified)).toLocaleString();
+      }
+
+      return new Date(
+        Date.parse(this.req.items[this.selected[0]].modified)
+      ).toLocaleString();
    },
    name: function () {
      return this.selectedCount === 0
@@ -146,6 +172,7 @@ export default {
    },
  },
  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
    checksum: async function (event, algo) {
      event.preventDefault();

@@ -159,8 +186,7 @@ export default {

      try {
        const hash = await api.checksum(link, algo);
-        // eslint-disable-next-line
-        event.target.innerHTML = hash;
+        event.target.textContent = hash;
      } catch (e) {
        this.$showError(e);
      }
--- a/frontend/src/components/prompts/Move.vue
+++ b/frontend/src/components/prompts/Move.vue
@@ -5,8 +5,11 @@
    </div>

    <div class="card-content">
-      <file-list ref="fileList" @update:selected="(val) => (dest = val)">
-      </file-list>
+      <file-list
+        ref="fileList"
+        @update:selected="(val) => (dest = val)"
+        tabindex="1"
+      />
    </div>

    <div
@@ -27,18 +30,21 @@
      <div>
        <button
          class="button button--flat button--grey"
-          @click="$store.commit('closeHovers')"
+          @click="closeHovers"
          :aria-label="$t('buttons.cancel')"
          :title="$t('buttons.cancel')"
+          tabindex="3"
        >
          {{ $t("buttons.cancel") }}
        </button>
        <button
+          id="focus-prompt"
          class="button button--flat"
          @click="move"
          :disabled="$route.path === dest"
          :aria-label="$t('buttons.move')"
          :title="$t('buttons.move')"
+          tabindex="2"
        >
          {{ $t("buttons.move") }}
        </button>
@@ -48,7 +54,10 @@
 </template>

 <script>
-import { mapState } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+import { useAuthStore } from "@/stores/auth";
 import FileList from "./FileList.vue";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
@@ -63,8 +72,13 @@ export default {
      dest: null,
    };
  },
-  computed: mapState(["req", "selected", "user"]),
+  inject: ["$showError"],
+  computed: {
+    ...mapState(useFileStore, ["req", "selected"]),
+    ...mapState(useAuthStore, ["user"]),
+  },
  methods: {
+    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
    move: async function (event) {
      event.preventDefault();
      let items = [];
@@ -99,14 +113,14 @@ export default {
      let rename = false;

      if (conflict) {
-        this.$store.commit("showHover", {
+        this.showHover({
          prompt: "replace-rename",
          confirm: (event, option) => {
            overwrite = option == "overwrite";
            rename = option == "rename";

            event.preventDefault();
-            this.$store.commit("closeHovers");
+            this.closeHovers();
            action(overwrite, rename);
          },
        });
--- a/frontend/src/components/prompts/NewDir.vue
+++ b/frontend/src/components/prompts/NewDir.vue
@@ -1,98 +1,104 @@
 <template>
  <div class="card floating">
    <div class="card-title">
-      <h2>{{ $t("prompts.newDir") }}</h2>
+      <h2>{{ t("prompts.newDir") }}</h2>
    </div>

    <div class="card-content">
-      <p>{{ $t("prompts.newDirMessage") }}</p>
+      <p>{{ t("prompts.newDirMessage") }}</p>
      <input
+        id="focus-prompt"
        class="input input--block"
        type="text"
        @keyup.enter="submit"
        v-model.trim="name"
-        v-focus
+        tabindex="1"
      />
    </div>

    <div class="card-action">
      <button
        class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
-        :aria-label="$t('buttons.cancel')"
-        :title="$t('buttons.cancel')"
+        @click="layoutStore.closeHovers"
+        :aria-label="t('buttons.cancel')"
+        :title="t('buttons.cancel')"
+        tabindex="3"
      >
-        {{ $t("buttons.cancel") }}
+        {{ t("buttons.cancel") }}
      </button>
      <button
        class="button button--flat"
        :aria-label="$t('buttons.create')"
-        :title="$t('buttons.create')"
+        :title="t('buttons.create')"
        @click="submit"
+        tabindex="2"
      >
-        {{ $t("buttons.create") }}
+        {{ t("buttons.create") }}
      </button>
    </div>
  </div>
 </template>

-<script>
-import { mapGetters } from "vuex";
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
 import { files as api } from "@/api";
 import url from "@/utils/url";
+import { useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";

-export default {
-  name: "new-dir",
-  props: {
-    redirect: {
-      type: Boolean,
-      default: true,
-    },
-    base: {
-      type: [String, null],
-      default: null,
-    },
+const $showError = inject<IToastError>("$showError")!;
+
+const props = defineProps({
+  base: String,
+  redirect: {
+    type: Boolean,
+    default: true,
  },
-  data: function () {
-    return {
-      name: "",
-    };
-  },
-  computed: {
-    ...mapGetters(["isFiles", "isListing"]),
-  },
-  methods: {
-    submit: async function (event) {
-      event.preventDefault();
-      if (this.new === "") return;
+});

-      // Build the path of the new directory.
-      let uri;
+const fileStore = useFileStore();
+const layoutStore = useLayoutStore();

-      if (this.base) uri = this.base;
-      else if (this.isFiles) uri = this.$route.path + "/";
-      else uri = "/";
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();

-      if (!this.isListing) {
-        uri = url.removeLastDir(uri) + "/";
-      }
+const name = ref<string>("");

-      uri += encodeURIComponent(this.name) + "/";
-      uri = uri.replace("//", "/");
-      try {
-        await api.post(uri);
-        if (this.redirect) {
-          this.$router.push({ path: uri });
-        } else if (!this.base) {
-          const res = await api.fetch(url.removeLastDir(uri) + "/");
-          this.$store.commit("updateRequest", res);
-        }
-      } catch (e) {
-        this.$showError(e);
-      }
+const submit = async (event: Event) => {
+  event.preventDefault();
+  if (name.value === "") return;

-      this.$store.commit("closeHovers");
-    },
-  },
+  // Build the path of the new directory.
+  let uri: string;
+  if (props.base) uri = props.base;
+  else if (fileStore.isFiles) uri = route.path + "/";
+  else uri = "/";
+
+  if (!fileStore.isListing) {
+    uri = url.removeLastDir(uri) + "/";
+  }
+
+  uri += encodeURIComponent(name.value) + "/";
+  uri = uri.replace("//", "/");
+
+  try {
+    await api.post(uri);
+    if (props.redirect) {
+      router.push({ path: uri });
+    } else if (!props.base) {
+      const res = await api.fetch(url.removeLastDir(uri) + "/");
+      fileStore.updateRequest(res);
+    }
+  } catch (e) {
+    if (e instanceof Error) {
+      $showError(e);
+    }
+  }
+
+  layoutStore.closeHovers();
 };
 </script>
--- a/frontend/src/components/prompts/NewFile.vue
+++ b/frontend/src/components/prompts/NewFile.vue
@@ -1,14 +1,14 @@
 <template>
  <div class="card floating">
    <div class="card-title">
-      <h2>{{ $t("prompts.newFile") }}</h2>
+      <h2>{{ t("prompts.newFile") }}</h2>
    </div>

    <div class="card-content">
-      <p>{{ $t("prompts.newFileMessage") }}</p>
+      <p>{{ t("prompts.newFileMessage") }}</p>
      <input
+        id="focus-prompt"
        class="input input--block"
-        v-focus
        type="text"
        @keyup.enter="submit"
        v-model.trim="name"
@@ -18,63 +18,68 @@
    <div class="card-action">
      <button
        class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
-        :aria-label="$t('buttons.cancel')"
-        :title="$t('buttons.cancel')"
+        @click="layoutStore.closeHovers"
+        :aria-label="t('buttons.cancel')"
+        :title="t('buttons.cancel')"
      >
-        {{ $t("buttons.cancel") }}
+        {{ t("buttons.cancel") }}
      </button>
      <button
        class="button button--flat"
        @click="submit"
-        :aria-label="$t('buttons.create')"
-        :title="$t('buttons.create')"
+        :aria-label="t('buttons.create')"
+        :title="t('buttons.create')"
      >
-        {{ $t("buttons.create") }}
+        {{ t("buttons.create") }}
      </button>
    </div>
  </div>
 </template>

-<script>
-import { mapGetters } from "vuex";
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
 import { files as api } from "@/api";
 import url from "@/utils/url";

-export default {
-  name: "new-file",
-  data: function () {
-    return {
-      name: "",
-    };
-  },
-  computed: {
-    ...mapGetters(["isFiles", "isListing"]),
-  },
-  methods: {
-    submit: async function (event) {
-      event.preventDefault();
-      if (this.new === "") return;
+const $showError = inject<IToastError>("$showError")!;

-      // Build the path of the new directory.
-      let uri = this.isFiles ? this.$route.path + "/" : "/";
+const fileStore = useFileStore();
+const layoutStore = useLayoutStore();

-      if (!this.isListing) {
-        uri = url.removeLastDir(uri) + "/";
-      }
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();

-      uri += encodeURIComponent(this.name);
-      uri = uri.replace("//", "/");
+const name = ref<string>("");

-      try {
-        await api.post(uri);
-        this.$router.push({ path: uri });
-      } catch (e) {
-        this.$showError(e);
-      }
+const submit = async (event: Event) => {
+  event.preventDefault();
+  if (name.value === "") return;

-      this.$store.commit("closeHovers");
-    },
-  },
+  // Build the path of the new directory.
+  let uri = fileStore.isFiles ? route.path + "/" : "/";
+
+  if (!fileStore.isListing) {
+    uri = url.removeLastDir(uri) + "/";
+  }
+
+  uri += encodeURIComponent(name.value);
+  uri = uri.replace("//", "/");
+
+  try {
+    await api.post(uri);
+    router.push({ path: uri });
+  } catch (e) {
+    if (e instanceof Error) {
+      $showError(e);
+    }
+  }
+
+  layoutStore.closeHovers();
 };
 </script>
--- a/frontend/src/components/prompts/Prompts.vue
+++ b/frontend/src/components/prompts/Prompts.vue
@@ -1,22 +1,20 @@
 <template>
-  <div>
-    <component
-      v-if="showOverlay"
-      :ref="currentPromptName"
-      :is="currentPromptName"
-      v-bind="currentPrompt.props"
-    >
-    </component>
-    <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
-  </div>
+  <ModalsContainer />
 </template>

-<script>
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { ModalsContainer, useModal } from "vue-final-modal";
+import { storeToRefs } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
+
+import BaseModal from "./BaseModal.vue";
 import Help from "./Help.vue";
 import Info from "./Info.vue";
 import Delete from "./Delete.vue";
-import Rename from "./Rename.vue";
+import DeleteUser from "./DeleteUser.vue";
 import Download from "./Download.vue";
+import Rename from "./Rename.vue";
 import Move from "./Move.vue";
 import Copy from "./Copy.vue";
 import NewFile from "./NewFile.vue";
@@ -24,87 +22,61 @@ import NewDir from "./NewDir.vue";
 import Replace from "./Replace.vue";
 import ReplaceRename from "./ReplaceRename.vue";
 import Share from "./Share.vue";
-import Upload from "./Upload.vue";
 import ShareDelete from "./ShareDelete.vue";
-import Sidebar from "../Sidebar.vue";
+import Upload from "./Upload.vue";
 import DiscardEditorChanges from "./DiscardEditorChanges.vue";
-import { mapGetters, mapState } from "vuex";
-import buttons from "@/utils/buttons";

-export default {
-  name: "prompts",
-  components: {
-    Info,
-    Delete,
-    Rename,
-    Download,
-    Move,
-    Copy,
-    Share,
-    NewFile,
-    NewDir,
-    Help,
-    Replace,
-    ReplaceRename,
-    Upload,
-    ShareDelete,
-    Sidebar,
-    DiscardEditorChanges,
-  },
-  data: function () {
-    return {
-      pluginData: {
-        buttons,
-        store: this.$store,
-        router: this.$router,
-      },
-    };
-  },
-  created() {
-    window.addEventListener("keydown", (event) => {
-      if (this.currentPrompt == null) return;
+const layoutStore = useLayoutStore();

-      const promptName = this.currentPrompt.prompt;
-      const prompt = this.$refs[promptName];
+const { currentPromptName } = storeToRefs(layoutStore);

-      if (event.code === "Escape") {
-        event.stopImmediatePropagation();
-        this.$store.commit("closeHovers");
-      }
+const closeModal = ref<() => Promise<string>>();

-      if (event.code === "Enter") {
-        switch (promptName) {
-          case "delete":
-            prompt.submit();
-            break;
-          case "copy":
-            prompt.copy(event);
-            break;
-          case "move":
-            prompt.move(event);
-            break;
-          case "replace":
-            prompt.showConfirm(event);
-            break;
-        }
-      }
-    });
-  },
-  computed: {
-    ...mapState(["plugins"]),
-    ...mapGetters(["currentPrompt", "currentPromptName"]),
-    showOverlay: function () {
-      return (
-        this.currentPrompt !== null &&
-        this.currentPrompt.prompt !== "search" &&
-        this.currentPrompt.prompt !== "more"
-      );
+const components = new Map<string, any>([
+  ["info", Info],
+  ["help", Help],
+  ["delete", Delete],
+  ["rename", Rename],
+  ["move", Move],
+  ["copy", Copy],
+  ["newFile", NewFile],
+  ["newDir", NewDir],
+  ["download", Download],
+  ["replace", Replace],
+  ["replace-rename", ReplaceRename],
+  ["share", Share],
+  ["upload", Upload],
+  ["share-delete", ShareDelete],
+  ["deleteUser", DeleteUser],
+  ["discardEditorChanges", DiscardEditorChanges],
+]);
+
+watch(currentPromptName, (newValue) => {
+  if (closeModal.value) {
+    closeModal.value();
+    closeModal.value = undefined;
+  }
+
+  const modal = components.get(newValue!);
+  if (!modal) return;
+
+  const { open, close } = useModal({
+    component: BaseModal,
+    slots: {
+      default: modal,
    },
-  },
-  methods: {
-    resetPrompts() {
-      this.$store.commit("closeHovers");
-    },
-  },
-};
+  });
+
+  closeModal.value = close;
+  open();
+});
+
+window.addEventListener("keydown", (event) => {
+  if (!layoutStore.currentPrompt) return;
+
+  if (event.key === "Escape") {
+    event.stopImmediatePropagation();
+    layoutStore.closeHovers();
+  }
+});
 </script>
--- a/frontend/src/components/prompts/Rename.vue
+++ b/frontend/src/components/prompts/Rename.vue
@@ -10,8 +10,8 @@
        >:
      </p>
      <input
+        id="focus-prompt"
        class="input input--block"
-        v-focus
        type="text"
        @keyup.enter="submit"
        v-model.trim="name"
@@ -21,7 +21,7 @@
    <div class="card-action">
      <button
        class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
        :aria-label="$t('buttons.cancel')"
        :title="$t('buttons.cancel')"
      >
@@ -41,7 +41,9 @@
 </template>

 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
 import url from "@/utils/url";
 import { files as api } from "@/api";

@@ -55,13 +57,20 @@ export default {
  created() {
    this.name = this.oldName();
  },
+  inject: ["$showError"],
  computed: {
-    ...mapState(["req", "selected", "selectedCount"]),
-    ...mapGetters(["isListing"]),
+    ...mapState(useFileStore, [
+      "req",
+      "selected",
+      "selectedCount",
+      "isListing",
+    ]),
+    ...mapWritableState(useFileStore, ["reload"]),
  },
  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
    cancel: function () {
-      this.$store.commit("closeHovers");
+      this.closeHovers();
    },
    oldName: function () {
      if (!this.isListing) {
@@ -96,12 +105,12 @@ export default {
          return;
        }

-        this.$store.commit("setReload", true);
+        this.reload = true;
      } catch (e) {
        this.$showError(e);
      }

-      this.$store.commit("closeHovers");
+      this.closeHovers();
    },
  },
 };
--- a/frontend/src/components/prompts/Replace.vue
+++ b/frontend/src/components/prompts/Replace.vue
@@ -11,9 +11,10 @@
    <div class="card-action">
      <button
        class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
        :aria-label="$t('buttons.cancel')"
        :title="$t('buttons.cancel')"
+        tabindex="3"
      >
        {{ $t("buttons.cancel") }}
      </button>
@@ -22,14 +23,17 @@
        @click="currentPrompt.action"
        :aria-label="$t('buttons.continue')"
        :title="$t('buttons.continue')"
+        tabindex="2"
      >
        {{ $t("buttons.continue") }}
      </button>
      <button
+        id="focus-prompt"
        class="button button--flat button--red"
        @click="currentPrompt.confirm"
        :aria-label="$t('buttons.replace')"
        :title="$t('buttons.replace')"
+        tabindex="1"
      >
        {{ $t("buttons.replace") }}
      </button>
@@ -38,10 +42,16 @@
 </template>

 <script>
-import { mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useLayoutStore } from "@/stores/layout";

 export default {
  name: "replace",
-  computed: mapGetters(["currentPrompt"]),
+  computed: {
+    ...mapState(useLayoutStore, ["currentPrompt"]),
+  },
+  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+  },
 };
 </script>
--- a/frontend/src/components/prompts/ReplaceRename.vue
+++ b/frontend/src/components/prompts/ReplaceRename.vue
@@ -11,9 +11,10 @@
    <div class="card-action">
      <button
        class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
        :aria-label="$t('buttons.cancel')"
        :title="$t('buttons.cancel')"
+        tabindex="3"
      >
        {{ $t("buttons.cancel") }}
      </button>
@@ -22,14 +23,17 @@
        @click="(event) => currentPrompt.confirm(event, 'rename')"
        :aria-label="$t('buttons.rename')"
        :title="$t('buttons.rename')"
+        tabindex="2"
      >
        {{ $t("buttons.rename") }}
      </button>
      <button
+        id="focus-prompt"
        class="button button--flat button--red"
        @click="(event) => currentPrompt.confirm(event, 'overwrite')"
        :aria-label="$t('buttons.replace')"
        :title="$t('buttons.replace')"
+        tabindex="1"
      >
        {{ $t("buttons.replace") }}
      </button>
@@ -38,10 +42,16 @@
 </template>

 <script>
-import { mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useLayoutStore } from "@/stores/layout";

 export default {
  name: "replace-rename",
-  computed: mapGetters(["currentPrompt"]),
+  computed: {
+    ...mapState(useLayoutStore, ["currentPrompt"]),
+  },
+  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+  },
 };
 </script>
--- a/frontend/src/components/prompts/Share.vue
+++ b/frontend/src/components/prompts/Share.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="card floating share__promt__card" id="share">
+  <div class="card floating" id="share">
    <div class="card-title">
      <h2>{{ $t("buttons.share") }}</h2>
    </div>
@@ -25,9 +25,9 @@
            <td class="small">
              <button
                class="action copy-clipboard"
-                :data-clipboard-text="buildLink(link)"
                :aria-label="$t('buttons.copyToClipboard')"
                :title="$t('buttons.copyToClipboard')"
+                @click="copyToClipboard(buildLink(link))"
              >
                <i class="material-icons">content_paste</i>
              </button>
@@ -35,9 +35,9 @@
            <td class="small" v-if="hasDownloadLink()">
              <button
                class="action copy-clipboard"
-                :data-clipboard-text="buildDownloadLink(link)"
                :aria-label="$t('buttons.copyDownloadLinkToClipboard')"
                :title="$t('buttons.copyDownloadLinkToClipboard')"
+                @click="copyToClipboard(buildDownloadLink(link))"
              >
                <i class="material-icons">content_paste_go</i>
              </button>
@@ -59,17 +59,20 @@
      <div class="card-action">
        <button
          class="button button--flat button--grey"
-          @click="$store.commit('closeHovers')"
+          @click="closeHovers"
          :aria-label="$t('buttons.close')"
          :title="$t('buttons.close')"
+          tabindex="2"
        >
          {{ $t("buttons.close") }}
        </button>
        <button
+          id="focus-prompt"
          class="button button--flat button--blue"
          @click="() => switchListing()"
          :aria-label="$t('buttons.new')"
          :title="$t('buttons.new')"
+          tabindex="1"
        >
          {{ $t("buttons.new") }}
        </button>
@@ -80,15 +83,22 @@
      <div class="card-content">
        <p>{{ $t("settings.shareDuration") }}</p>
        <div class="input-group input">
-          <input
-            v-focus
-            type="number"
-            max="2147483647"
-            min="1"
+          <vue-number-input
+            center
+            controls
+            size="small"
+            :max="2147483647"
+            :min="0"
            @keyup.enter="submit"
-            v-model.trim="time"
+            v-model="time"
+            tabindex="1"
          />
-          <select class="right" v-model="unit" :aria-label="$t('time.unit')">
+          <select
+            class="right"
+            v-model="unit"
+            :aria-label="$t('time.unit')"
+            tabindex="2"
+          >
            <option value="seconds">{{ $t("time.seconds") }}</option>
            <option value="minutes">{{ $t("time.minutes") }}</option>
            <option value="hours">{{ $t("time.hours") }}</option>
@@ -100,6 +110,7 @@
          class="input input--block"
          type="password"
          v-model.trim="password"
+          tabindex="3"
        />
      </div>

@@ -109,14 +120,17 @@
          @click="() => switchListing()"
          :aria-label="$t('buttons.cancel')"
          :title="$t('buttons.cancel')"
+          tabindex="5"
        >
          {{ $t("buttons.cancel") }}
        </button>
        <button
+          id="focus-prompt"
          class="button button--flat button--blue"
          @click="submit"
          :aria-label="$t('buttons.share')"
          :title="$t('buttons.share')"
+          tabindex="4"
        >
          {{ $t("buttons.share") }}
        </button>
@@ -126,16 +140,18 @@
 </template>

 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useFileStore } from "@/stores/file";
 import { share as api, pub as pub_api } from "@/api";
-import moment from "moment/min/moment-with-locales";
-import Clipboard from "clipboard";
+import dayjs from "dayjs";
+import { useLayoutStore } from "@/stores/layout";
+import { copy } from "@/utils/clipboard";

 export default {
  name: "share",
  data: function () {
    return {
-      time: "",
+      time: 0,
      unit: "hours",
      links: [],
      clip: null,
@@ -143,9 +159,14 @@ export default {
      listing: true,
    };
  },
+  inject: ["$showError", "$showSuccess"],
  computed: {
-    ...mapState(["req", "selected", "selectedCount"]),
-    ...mapGetters(["isListing"]),
+    ...mapState(useFileStore, [
+      "req",
+      "selected",
+      "selectedCount",
+      "isListing",
+    ]),
    url() {
      if (!this.isListing) {
        return this.$route.path;
@@ -172,23 +193,24 @@ export default {
      this.$showError(e);
    }
  },
-  mounted() {
-    this.clip = new Clipboard(".copy-clipboard");
-    this.clip.on("success", () => {
-      this.$showSuccess(this.$t("success.linkCopied"));
-    });
-  },
-  beforeDestroy() {
-    this.clip.destroy();
-  },
  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+    copyToClipboard: function (text) {
+      copy(text).then(
+        () => {
+          // clipboard successfully set
+          this.$showSuccess(this.$t("success.linkCopied"));
+        },
+        () => {
+          // clipboard write failed
+        }
+      );
+    },
    submit: async function () {
-      let isPermanent = !this.time || this.time == 0;
-
      try {
        let res = null;

-        if (isPermanent) {
+        if (!this.time) {
          res = await api.create(this.url, this.password);
        } else {
          res = await api.create(this.url, this.password, this.time, this.unit);
@@ -197,7 +219,7 @@ export default {
        this.links.push(res);
        this.sort();

-        this.time = "";
+        this.time = 0;
        this.unit = "hours";
        this.password = "";

@@ -220,7 +242,7 @@ export default {
      }
    },
    humanTime(time) {
-      return moment(time * 1000).fromNow();
+      return dayjs(time * 1000).fromNow();
    },
    buildLink(share) {
      return api.getShareURL(share);
@@ -242,7 +264,7 @@ export default {
    },
    switchListing() {
      if (this.links.length == 0 && !this.listing) {
-        this.$store.commit("closeHovers");
+        this.closeHovers();
      }

      this.listing = !this.listing;
--- a/frontend/src/components/prompts/ShareDelete.vue
+++ b/frontend/src/components/prompts/ShareDelete.vue
@@ -5,18 +5,21 @@
    </div>
    <div class="card-action">
      <button
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
        class="button button--flat button--grey"
        :aria-label="$t('buttons.cancel')"
        :title="$t('buttons.cancel')"
+        tabindex="2"
      >
        {{ $t("buttons.cancel") }}
      </button>
      <button
+        id="focus-prompt"
        @click="submit"
        class="button button--flat button--red"
        :aria-label="$t('buttons.delete')"
        :title="$t('buttons.delete')"
+        tabindex="1"
      >
        {{ $t("buttons.delete") }}
      </button>
@@ -25,14 +28,16 @@
 </template>

 <script>
-import { mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useLayoutStore } from "@/stores/layout";

 export default {
  name: "share-delete",
  computed: {
-    ...mapGetters(["currentPrompt"]),
+    ...mapState(useLayoutStore, ["currentPrompt"]),
  },
  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
    submit: function () {
      this.currentPrompt?.confirm();
    },
--- a/frontend/src/components/prompts/Upload.vue
+++ b/frontend/src/components/prompts/Upload.vue
@@ -1,38 +1,111 @@
 <template>
  <div class="card floating">
    <div class="card-title">
-      <h2>{{ $t("prompts.upload") }}</h2>
+      <h2>{{ t("prompts.upload") }}</h2>
    </div>

    <div class="card-content">
-      <p>{{ $t("prompts.uploadMessage") }}</p>
+      <p>{{ t("prompts.uploadMessage") }}</p>
    </div>

    <div class="card-action full">
-      <div @click="uploadFile" class="action">
+      <div
+        @click="uploadFile"
+        @keypress.enter="uploadFile"
+        class="action"
+        id="focus-prompt"
+        tabindex="1"
+      >
        <i class="material-icons">insert_drive_file</i>
-        <div class="title">{{ $t("buttons.file") }}</div>
+        <div class="title">{{ t("buttons.file") }}</div>
      </div>
-      <div @click="uploadFolder" class="action">
+      <div
+        @click="uploadFolder"
+        @keypress.enter="uploadFolder"
+        class="action"
+        tabindex="2"
+      >
        <i class="material-icons">folder</i>
-        <div class="title">{{ $t("buttons.folder") }}</div>
+        <div class="title">{{ t("buttons.folder") }}</div>
      </div>
    </div>
  </div>
 </template>

-<script>
-export default {
-  name: "upload",
-  methods: {
-    uploadFile: function () {
-      document.getElementById("upload-input").value = "";
-      document.getElementById("upload-input").click();
-    },
-    uploadFolder: function () {
-      document.getElementById("upload-folder-input").value = "";
-      document.getElementById("upload-folder-input").click();
-    },
-  },
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
+import * as upload from "@/utils/upload";
+
+const { t } = useI18n();
+const route = useRoute();
+
+const fileStore = useFileStore();
+const layoutStore = useLayoutStore();
+
+// TODO: this is a copy of the same function in FileListing.vue
+const uploadInput = (event: Event) => {
+  layoutStore.closeHovers();
+
+  let files = (event.currentTarget as HTMLInputElement)?.files;
+  if (files === null) return;
+
+  let folder_upload = !!files[0].webkitRelativePath;
+
+  const uploadFiles: UploadList = [];
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+    const fullPath = folder_upload ? file.webkitRelativePath : undefined;
+    uploadFiles.push({
+      file,
+      name: file.name,
+      size: file.size,
+      isDir: false,
+      fullPath,
+    });
+  }
+
+  let path = route.path.endsWith("/") ? route.path : route.path + "/";
+  let conflict = upload.checkConflict(uploadFiles, fileStore.req!.items);
+
+  if (conflict) {
+    layoutStore.showHover({
+      prompt: "replace",
+      action: (event: Event) => {
+        event.preventDefault();
+        layoutStore.closeHovers();
+        upload.handleFiles(uploadFiles, path, false);
+      },
+      confirm: (event: Event) => {
+        event.preventDefault();
+        layoutStore.closeHovers();
+        upload.handleFiles(uploadFiles, path, true);
+      },
+    });
+
+    return;
+  }
+
+  upload.handleFiles(uploadFiles, path);
+};
+
+const openUpload = (isFolder: boolean) => {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.multiple = true;
+  input.webkitdirectory = isFolder;
+  // TODO: call the function in FileListing.vue instead
+  input.onchange = uploadInput;
+  input.click();
+};
+
+const uploadFile = () => {
+  openUpload(false);
+};
+const uploadFolder = () => {
+  openUpload(true);
 };
 </script>
--- a/frontend/src/components/prompts/UploadFiles.vue
+++ b/frontend/src/components/prompts/UploadFiles.vue
@@ -53,7 +53,9 @@
 </template>

 <script>
-import { mapGetters, mapMutations } from "vuex";
+import { mapState, mapWritableState, mapActions } from "pinia";
+import { useUploadStore } from "@/stores/upload";
+import { useFileStore } from "@/stores/file";
 import { abortAllUploads } from "@/api/tus";
 import buttons from "@/utils/buttons";

@@ -65,19 +67,20 @@ export default {
    };
  },
  computed: {
-    ...mapGetters([
+    ...mapState(useUploadStore, [
      "filesInUpload",
      "filesInUploadCount",
      "uploadSpeed",
-      "eta",
+      "getETA",
    ]),
-    ...mapMutations(["resetUpload"]),
+    ...mapWritableState(useFileStore, ["reload"]),
+    ...mapActions(useUploadStore, ["reset"]),
    formattedETA() {
-      if (!this.eta || this.eta === Infinity) {
+      if (!this.getETA || this.getETA === Infinity) {
        return "--:--:--";
      }

-      let totalSeconds = this.eta;
+      let totalSeconds = this.getETA;
      const hours = Math.floor(totalSeconds / 3600);
      totalSeconds %= 3600;
      const minutes = Math.floor(totalSeconds / 60);
@@ -97,8 +100,8 @@ export default {
        abortAllUploads();
        buttons.done("upload");
        this.open = false;
-        this.$store.commit("resetUpload");
-        this.$store.commit("setReload", true);
+        this.reset();
+        this.reload = true;
      }
    },
  },