Merge remote-tracking branch 'kloon15/vue3' into vue3

2023-09-11 21:52:59 +02:00 · 2023-09-11 21:52:59 +02:00 · bf99823977
commit bf99823977
parent 5d7960746d d4439c9ae9
41 changed files with 1075 additions and 1041 deletions
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@ -3,26 +3,20 @@
  "env": {
    "node": true
  },
-  "parser": "vue-eslint-parser",
  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript",
    "@vue/eslint-config-prettier"
-
  ],
  "rules": {
    "vue/multi-word-component-names": "off",
    "vue/no-reserved-component-names": "warn",
    "vue/no-mutating-props": "warn",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/ban-ts-comment": "off",
-    "no-undef": "off"
+    "no-undef": "error"
  },
  "parserOptions": {
    "ecmaVersion": "latest",
-    "sourceType": "module",
-    "parser": "@typescript-eslint/parser"
+    "sourceType": "module"
  }
 }
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -14,17 +14,17 @@
    "format": "prettier --write ."
  },
  "dependencies": {
+    "@vue/eslint-config-typescript": "^11.0.3",
    "@vueuse/core": "^10.4.1",
-    "ace-builds": "^1.24.1",
+    "ace-builds": "^1.24.2",
    "clipboard": "^2.0.11",
-    "core-js": "^3.32.1",
+    "core-js": "^3.32.2",
    "dayjs": "^1.11.9",
    "filesize": "^10.0.12",
    "js-base64": "^3.7.5",
    "jwt-decode": "^3.1.2",
    "lodash-es": "^4.17.21",
-    "material-icons": "^1.13.10",
-    "moment": "^2.29.4",
+    "material-icons": "^1.13.11",
    "normalize.css": "^8.0.1",
    "pinia": "^2.1.6",
    "pretty-bytes": "^6.1.1",
@ -32,26 +32,32 @@
    "tus-js-client": "^3.1.1",
    "utif": "^3.1.0",
    "vue": "^3.3.4",
-    "vue-i18n": "^9.2.2",
+    "vue-i18n": "^9.3.0",
    "vue-lazyload": "^3.0.0",
    "vue-router": "^4.2.4",
    "vue-toastification": "^2.0.0-rc.5"
  },
  "devDependencies": {
+<<<<<<< HEAD
    "@intlify/unplugin-vue-i18n": "^0.12.3",
    "@types/lodash-es": "^4.17.9",
+=======
+    "@intlify/unplugin-vue-i18n": "^1.0.1",
+    "@types/lodash-es": "^4.17.9",
+    "@types/node": "^20.6.0",
+>>>>>>> kloon15/vue3
    "@typescript-eslint/eslint-plugin": "^6.6.0",
    "@vitejs/plugin-legacy": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.3.3",
+    "@vitejs/plugin-vue": "^4.3.4",
    "@vue/eslint-config-prettier": "^8.0.0",
    "autoprefixer": "^10.4.15",
-    "eslint": "^8.48.0",
+    "eslint": "^8.49.0",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-vue": "^9.17.0",
    "jsdom": "^22.1.0",
-    "postcss": "^8.4.28",
-    "prettier": "^3.0.2",
-    "terser": "^5.19.2",
+    "postcss": "^8.4.29",
+    "prettier": "^3.0.3",
+    "terser": "^5.19.4",
    "vite": "^4.4.9",
    "vite-plugin-compression2": "^0.10.4",
    "vite-plugin-rewrite-all": "^1.0.1"
--- a/frontend/public/themes/dark.css
+++ b/frontend/public/themes/dark.css
@ -1,7 +1,7 @@
 :root {
-  --background: #141D24;
-  --surfacePrimary: #20292F;
-  --surfaceSecondary: #3A4147;
+  --background: #141d24;
+  --surfacePrimary: #20292f;
+  --surfaceSecondary: #3a4147;
  --divider: rgba(255, 255, 255, 0.12);
  --icon: #ffffff;
  --textPrimary: rgba(255, 255, 255, 0.87);
@ -16,7 +16,8 @@ body {
 #loading {
  background: var(--background);
 }
-#loading .spinner div, main .spinner div {
+#loading .spinner div,
+main .spinner div {
  background: var(--icon);
 }

@ -56,7 +57,7 @@ header {
  color: var(--textPrimary) !important;
 }
 .action:hover {
-  background-color: rgba(255, 255, 255, .1);
+  background-color: rgba(255, 255, 255, 0.1);
 }
 .action i {
  color: var(--icon) !important;
@ -77,7 +78,7 @@ nav > div {
  color: var(--textPrimary) !important;
 }
 .breadcrumbs a:hover {
-  background-color: rgba(255, 255, 255, .1);
+  background-color: rgba(255, 255, 255, 0.1);
 }

 #listing .item {
@ -141,11 +142,11 @@ nav > div {
  border-color: rgba(255, 255, 255, 0.15);
 }
 .input--red {
-  background: #73302D;
+  background: #73302d;
 }

 .input--green {
-  background: #147A41;
+  background: #147a41;
 }

 .dashboard #nav .wrapper,
@ -166,7 +167,7 @@ table th {
 .file-list li:before {
  color: var(--textSecondary);
 }
-.file-list li[aria-selected=true]:before {
+.file-list li[aria-selected="true"]:before {
  color: var(--icon);
 }

@ -208,4 +209,4 @@ table th {

 .share__box__element {
  border-top-color: var(--divider);
-}
+}
--- a/frontend/src/api/files.ts
+++ b/frontend/src/api/files.ts
@ -2,8 +2,15 @@ import { createURL, fetchURL, removePrefix } from "./utils";
 import { baseURL } from "@/utils/constants";
 import { useAuthStore } from "@/stores/auth";
 import { upload as postTus, useTus } from "./tus";
+import type {
+  ApiContent,
+  ApiMethod,
+  ApiOpts,
+  ChecksumAlgs,
+  IFile,
+} from "@/types";

-export async function fetch(url: ApiUrl) {
+export async function fetch(url: string) {
  url = removePrefix(url);

  const res = await fetchURL(`/api/resources${url}`, {});
@ -29,7 +36,7 @@ export async function fetch(url: ApiUrl) {
  return data;
 }

-async function resourceAction(url: ApiUrl, method: ApiMethod, content?: any) {
+async function resourceAction(url: string, method: ApiMethod, content?: any) {
  url = removePrefix(url);

  const opts: ApiOpts = {
@ -45,11 +52,11 @@ async function resourceAction(url: ApiUrl, method: ApiMethod, content?: any) {
  return res;
 }

-export async function remove(url: ApiUrl) {
+export async function remove(url: string) {
  return resourceAction(url, "DELETE");
 }

-export async function put(url: ApiUrl, content = "") {
+export async function put(url: string, content = "") {
  return resourceAction(url, "PUT", content);
 }

@ -83,7 +90,7 @@ export function download(format: any, ...files: string[]) {
 }

 export async function post(
-  url: ApiUrl,
+  url: string,
  content: ApiContent = "",
  overwrite = false,
  onupload: any = () => {}
@ -103,7 +110,7 @@ export async function post(
 }

 async function postResources(
-  url: ApiUrl,
+  url: string,
  content: ApiContent = "",
  overwrite = false,
  onupload: any
@ -178,7 +185,7 @@ export function copy(items: any[], overwrite = false, rename = false) {
  return moveCopy(items, true, overwrite, rename);
 }

-export async function checksum(url: ApiUrl, algo: algo) {
+export async function checksum(url: string, algo: ChecksumAlgs) {
  const data = await resourceAction(`${url}?checksum=${algo}`, "GET");
  return (await data.json()).checksums[algo];
 }
@ -213,7 +220,7 @@ export function getSubtitlesURL(file: IFile) {
  return subtitles;
 }

-export async function usage(url: ApiUrl) {
+export async function usage(url: string) {
  url = removePrefix(url);

  const res = await fetchURL(`/api/usage${url}`, {});
--- a/frontend/src/api/pub.ts
+++ b/frontend/src/api/pub.ts
@ -1,7 +1,8 @@
+import type { IShare } from "@/types";
 import { fetchURL, removePrefix, createURL } from "./utils";
 import { baseURL } from "@/utils/constants";

-export async function fetch(url: ApiUrl, password: string = "") {
+export async function fetch(url: string, password: string = "") {
  url = removePrefix(url);

  const res = await fetchURL(
@ -66,7 +67,7 @@ export function download(
  window.open(url);
 }

-export function getDownloadURL(share: IFile, inline = false) {
+export function getDownloadURL(share: IShare, inline = false) {
  const params = {
    ...(inline && { inline: "true" }),
    ...(share.token && { token: share.token }),
--- a/frontend/src/api/search.ts
+++ b/frontend/src/api/search.ts
@ -1,7 +1,8 @@
 import { fetchURL, removePrefix } from "./utils";
 import url from "../utils/url";
+import type { Item } from "@/types";

-export default async function search(base: apiUrl, query: string) {
+export default async function search(base: string, query: string) {
  base = removePrefix(base);
  query = encodeURIComponent(query);

@ -13,7 +14,7 @@ export default async function search(base: apiUrl, query: string) {

  let data = await res.json();

-  data = data.map((item: item) => {
+  data = data.map((item: Item) => {
    item.url = `/files${base}` + url.encodePath(item.path);

    if (item.dir) {
--- a/frontend/src/api/settings.ts
+++ b/frontend/src/api/settings.ts
@ -1,3 +1,4 @@
+import type { ISettings } from "@/types";
 import { fetchURL, fetchJSON } from "./utils";

 export function get() {
--- a/frontend/src/api/share.ts
+++ b/frontend/src/api/share.ts
@ -1,3 +1,4 @@
+import type { ApiUrl, IShare } from "@/types";
 import { fetchURL, fetchJSON, removePrefix, createURL } from "./utils";

 export async function list() {
--- a/frontend/src/api/tus.ts
+++ b/frontend/src/api/tus.ts
@ -3,6 +3,7 @@ import { baseURL, tusEndpoint, tusSettings } from "@/utils/constants";
 import { useAuthStore } from "@/stores/auth";
 import { removePrefix } from "@/api/utils";
 import { fetchURL } from "./utils";
+import type { ApiContent, TusSettings } from "@/types";

 const RETRY_BASE_DELAY = 1000;
 const RETRY_MAX_DELAY = 20000;
@ -57,7 +58,7 @@ export async function upload(
  });
 }

-async function createUpload(resourcePath: resourcePath) {
+async function createUpload(resourcePath: string) {
  const headResp = await fetchURL(resourcePath, {
    method: "POST",
  });
@ -68,7 +69,7 @@ async function createUpload(resourcePath: resourcePath) {
  }
 }

-function computeRetryDelays(tusSettings: tusSettings): number[] | undefined {
+function computeRetryDelays(tusSettings: TusSettings): number[] | undefined {
  if (!tusSettings.retryCount || tusSettings.retryCount < 1) {
    // Disable retries altogether
    return undefined;
--- a/frontend/src/api/users.ts
+++ b/frontend/src/api/users.ts
@ -1,3 +1,4 @@
+import type { User } from "@/types/user";
 import { fetchURL, fetchJSON } from "./utils";

 export async function getAll() {
@ -8,7 +9,7 @@ export async function get(id: number) {
  return fetchJSON(`/api/users/${id}`, {});
 }

-export async function create(user: user) {
+export async function create(user: User) {
  const res = await fetchURL(`/api/users`, {
    method: "POST",
    body: JSON.stringify({
@ -23,7 +24,7 @@ export async function create(user: user) {
  }
 }

-export async function update(user: user, which = ["all"]) {
+export async function update(user: User, which = ["all"]) {
  await fetchURL(`/api/users/${user.id}`, {
    method: "PUT",
    body: JSON.stringify({
--- a/frontend/src/api/utils.ts
+++ b/frontend/src/api/utils.ts
@ -1,9 +1,20 @@
 import { useAuthStore } from "@/stores/auth";
+import type { ApiOpts, SearchParams } from "@/types";
 import { renew, logout } from "@/utils/auth";
 import { baseURL } from "@/utils/constants";
 import { encodePath } from "@/utils/url";

-export async function fetchURL(url: ApiUrl, opts: ApiOpts, auth = true) {
+export class StatusError extends Error {
+  constructor(
+    message: any,
+    public status?: number
+  ) {
+    super(message);
+    this.name = "StatusError";
+  }
+}
+
+export async function fetchURL(url: string, opts: ApiOpts, auth = true) {
  const authStore = useAuthStore();

  opts = opts || {};
@ -20,11 +31,7 @@ export async function fetchURL(url: ApiUrl, opts: ApiOpts, auth = true) {
      ...rest,
    });
  } catch {
-    const error = new Error("000 No connection");
-    // @ts-ignore don't know yet how to solve
-    error.status = 0;
-
-    throw error;
+    throw new StatusError("000 No connection", 0);
  }

  if (auth && res.headers.get("X-Renew-Token") === "true") {
@ -32,9 +39,7 @@ export async function fetchURL(url: ApiUrl, opts: ApiOpts, auth = true) {
  }

  if (res.status < 200 || res.status > 299) {
-    const error = new Error(await res.text());
-    // @ts-ignore don't know yet how to solve
-    error.status = res.status;
+    const error = new StatusError(await res.text(), res.status);

    if (auth && res.status == 401) {
      logout();
@ -46,7 +51,7 @@ export async function fetchURL(url: ApiUrl, opts: ApiOpts, auth = true) {
  return res;
 }

-export async function fetchJSON(url: ApiUrl, opts?: any) {
+export async function fetchJSON(url: string, opts?: any) {
  const res = await fetchURL(url, opts);

  if (res.status === 200) {
@ -56,7 +61,7 @@ export async function fetchJSON(url: ApiUrl, opts?: any) {
  }
 }

-export function removePrefix(url: ApiUrl) {
+export function removePrefix(url: string) {
  url = url.split("/").splice(2).join("/");

  if (url === "") url = "/";
@ -64,7 +69,7 @@ export function removePrefix(url: ApiUrl) {
  return url;
 }

-export function createURL(endpoint: ApiUrl, params = {}, auth = true) {
+export function createURL(endpoint: string, params = {}, auth = true) {
  const authStore = useAuthStore();

  let prefix = baseURL;
@ -73,7 +78,7 @@ export function createURL(endpoint: ApiUrl, params = {}, auth = true) {
  }
  const url = new URL(prefix + encodePath(endpoint), origin);

-  const searchParams: searchParams = {
+  const searchParams: SearchParams = {
    ...(auth && { auth: authStore.jwt }),
    ...params,
  };
--- a/frontend/src/components/settings/UserForm.vue
+++ b/frontend/src/components/settings/UserForm.vue
@ -74,6 +74,10 @@ import Commands from "./Commands.vue";
 import { enableExec } from "@/utils/constants";
 import { computed, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
+<<<<<<< HEAD
+=======
+import { IUser } from "@/types";
+>>>>>>> kloon15/vue3

 const { t } = useI18n();

@ -82,9 +86,15 @@ const originalUserScope = ref<string | null>(null);

 const props = defineProps<{
  user: IUser;
+<<<<<<< HEAD
  createUserDir: boolean;
  isNew: boolean;
  isDefault: boolean;
+=======
+  isNew: boolean;
+  isDefault: boolean;
+  createUserDir?: boolean;
+>>>>>>> kloon15/vue3
 }>();

 onMounted(() => {
--- a/frontend/src/i18n/index.ts
+++ b/frontend/src/i18n/index.ts
@ -24,29 +24,9 @@ import("dayjs/locale/uk");
 import("dayjs/locale/zh-cn");
 import("dayjs/locale/zh-tw");

-import he from "./he.json";
-import hu from "./hu.json";
-import ar from "./ar.json";
-import de from "./de.json";
-import en from "./en.json";
-import es from "./es.json";
-import fr from "./fr.json";
-import is from "./is.json";
-import it from "./it.json";
-import ja from "./ja.json";
-import ko from "./ko.json";
-import nlBE from "./nl-be.json";
-import pl from "./pl.json";
-import pt from "./pt.json";
-import ptBR from "./pt-br.json";
-import ro from "./ro.json";
-import ru from "./ru.json";
-import sk from "./sk.json";
-import tr from "./tr.json";
-import uk from "./uk.json";
-import svSE from "./sv-se.json";
-import zhCN from "./zh-cn.json";
-import zhTW from "./zh-tw.json";
+// All i18n resources specified in the plugin `include` option can be loaded
+// at once using the import syntax
+import messages from "@intlify/unplugin-vue-i18n/messages";

 export function detectLocale() {
  // locale is an RFC 5646 language tag
@ -132,7 +112,8 @@ export function detectLocale() {
  return locale;
 }

-const removeEmpty = (obj) =>
+// TODO: was this really necessary?
+function removeEmpty(obj: Record<string, any>): void {
  Object.keys(obj)
    .filter((k) => obj[k] !== null && obj[k] !== undefined && obj[k] !== "") // Remove undef. and null and empty.string.
    .reduce(
@ -142,37 +123,14 @@ const removeEmpty = (obj) =>
          : Object.assign(newObj, { [k]: obj[k] }), // Copy value.
      {}
    );
+}

 export const rtlLanguages = ["he", "ar"];

 export const i18n = createI18n({
  locale: detectLocale(),
  fallbackLocale: "en",
-  messages: {
-    he: removeEmpty(he),
-    hu: removeEmpty(hu),
-    ar: removeEmpty(ar),
-    de: removeEmpty(de),
-    en: en,
-    es: removeEmpty(es),
-    fr: removeEmpty(fr),
-    is: removeEmpty(is),
-    it: removeEmpty(it),
-    ja: removeEmpty(ja),
-    ko: removeEmpty(ko),
-    "nl-be": removeEmpty(nlBE),
-    pl: removeEmpty(pl),
-    "pt-br": removeEmpty(ptBR),
-    pt: removeEmpty(pt),
-    ru: removeEmpty(ru),
-    ro: removeEmpty(ro),
-    sk: removeEmpty(sk),
-    sv: removeEmpty(svSE),
-    tr: removeEmpty(tr),
-    uk: removeEmpty(uk),
-    "zh-cn": removeEmpty(zhCN),
-    "zh-tw": removeEmpty(zhTW),
-  },
+  messages,
  // expose i18n.global for outside components
  legacy: true,
 });
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@ -1,4 +1,3 @@
-// @ts-nocheck
 import { disableExternal } from "@/utils/constants";
 import { createApp } from "vue";
 import VueLazyload from "vue-lazyload";
@ -64,7 +63,7 @@ const toastConfig = {
  icon: true,
 };

-app.provide("$showSuccess", (message) => {
+app.provide("$showSuccess", (message: string) => {
  const $toast = useToast();
  $toast.success(
    {
@ -73,22 +72,27 @@ app.provide("$showSuccess", (message) => {
        message: message,
      },
    },
+    // their type defs are messed up
+    //@ts-ignore
    { ...toastConfig, rtl: rtlLanguages.includes(i18n.global.locale) }
  );
 });

-app.provide("$showError", (error, displayReport = true) => {
+app.provide("$showError", (error: Error | string, displayReport = true) => {
  const $toast = useToast();
  $toast.error(
    {
      component: CustomToast,
      props: {
-        message: error.message || error,
+        message: (error as Error).message || error,
        isReport: !disableExternal && displayReport,
        // TODO: i couldnt use $t inside the component
+        //@ts-ignore
        reportText: i18n.global.t("buttons.reportIssue"),
      },
    },
+    // their type defs are messed up
+    //@ts-ignore
    {
      ...toastConfig,
      timeout: 0,
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@ -176,12 +176,10 @@ const router = createRouter({
  routes,
 });

-router.beforeResolve(async (to: RouteLocation, from, next) => {
+router.beforeResolve(async (to, from, next) => {
  let title;
  try {
-    // this should not fail after we finished the migration
-    // @ts-ignore
-    title = i18n.global.t(titles[to.name]);
+    title = i18n.global.t(titles[to.name as keyof typeof titles]);
  } catch (error) {
    console.error(error);
  }
--- a/frontend/src/stores/auth.ts
+++ b/frontend/src/stores/auth.ts
@ -1,4 +1,4 @@
-// @ts-nocheck
+import type { IUser } from "@/types";
 import { defineStore } from "pinia";
 import dayjs from "dayjs";
 import i18n, { detectLocale } from "@/i18n";
@ -19,33 +19,29 @@ export const useAuthStore = defineStore("auth", {
  },
  actions: {
    // no context as first argument, use `this` instead
-    setUser(value: user) {
-      if (value === null) {
+    setUser(user: IUser | null) {
+      if (user === null) {
        this.user = null;
        return;
      }

-      const locale = value.locale || detectLocale();
+      const locale = user.locale || detectLocale();
      dayjs.locale(locale);
-      // @ts-ignore Don't know how to fix this yet
+      // according to doc u only need .value if legacy: false but they lied
+      // https://vue-i18n.intlify.dev/guide/essentials/scope.html#local-scope-1
+      //@ts-ignore
      i18n.global.locale.value = locale;
-      this.user = value;
+      this.user = user;
    },
-    updateUser(value: user) {
-      if (typeof value !== "object") return;
-
-      let field: userKey;
-      for (field in value) {
-        if (field === "locale") {
-          const locale = value[field];
-          dayjs.locale(locale);
-          // @ts-ignore Don't know how to fix this yet
-          i18n.global.locale.value = locale;
-        }
-
-        // @ts-ignore to fix
-        this.user[field] = cloneDeep(value[field]);
+    updateUser(user: Partial<IUser>) {
+      if (user.locale) {
+        dayjs.locale(user.locale);
+        // see above
+        //@ts-ignore
+        i18n.global.locale.value = user.locale;
      }
+
+      this.user = { ...this.user, ...cloneDeep(user) } as IUser;
    },
    // easily reset state using `$reset`
    clearUser() {
--- a/frontend/src/stores/file.ts
+++ b/frontend/src/stores/file.ts
@ -1,3 +1,4 @@
+import type { IFile } from "@/types";
 import { defineStore } from "pinia";

 export const useFileStore = defineStore("file", {
--- a/frontend/src/stores/layout.ts
+++ b/frontend/src/stores/layout.ts
@ -1,3 +1,4 @@
+import type { LayoutValue } from "@/types";
 import { defineStore } from "pinia";
 // import { useAuthPreferencesStore } from "./auth-preferences";
 // import { useAuthEmailStore } from "./auth-email";
--- a/frontend/src/stores/upload.ts
+++ b/frontend/src/stores/upload.ts
@ -1,10 +1,11 @@
-// @ts-nocheck
 import { defineStore } from "pinia";
 import { useFileStore } from "./file";
 import { files as api } from "@/api";
 import throttle from "lodash/throttle";
 import buttons from "@/utils/buttons";
+import type { Item, Uploads } from "@/types";

+// TODO: make this into a user setting
 const UPLOADS_LIMIT = 5;

 const beforeUnload = (event: Event) => {
@ -20,8 +21,8 @@ export const useUploadStore = defineStore("upload", {
    sizes: any[];
    progress: any[];
    queue: any[];
-    uploads: uploads;
-    error: any;
+    uploads: Uploads;
+    error: Error | null;
  } => ({
    id: 0,
    sizes: [],
@ -39,7 +40,6 @@ export const useUploadStore = defineStore("upload", {

      const totalSize = state.sizes.reduce((a, b) => a + b, 0);

-      // @ts-ignore
      const sum: number = state.progress.reduce((acc, val) => acc + val);
      return Math.ceil((sum / totalSize) * 100);
    },
@ -80,7 +80,7 @@ export const useUploadStore = defineStore("upload", {
      const { id, loaded } = obj;
      this.progress[id] = loaded;
    },
-    setError(error) {
+    setError(error: Error) {
      this.error = error;
    },
    reset() {
@ -88,7 +88,7 @@ export const useUploadStore = defineStore("upload", {
      this.sizes = [];
      this.progress = [];
    },
-    addJob(item: item) {
+    addJob(item: Item) {
      this.queue.push(item);
      this.sizes[this.id] = item.file.size;
      this.id++;
@ -103,7 +103,7 @@ export const useUploadStore = defineStore("upload", {
      // Vue.delete(this.uploads, id);
      delete this.uploads[id];
    },
-    upload(item: item) {
+    upload(item: Item) {
      const uploadsCount = Object.keys(this.uploads).length;

      const isQueueEmpty = this.queue.length == 0;
@ -117,7 +117,7 @@ export const useUploadStore = defineStore("upload", {
      this.addJob(item);
      this.processUploads();
    },
-    finishUpload(item: item) {
+    finishUpload(item: Item) {
      this.setProgress({ id: item.id, loaded: item.file.size > 0 });
      this.removeJob(item.id);
      this.processUploads();
--- a/frontend/src/types/api.d.ts
+++ b/frontend/src/types/api.d.ts
@ -1,40 +1,45 @@
-type ApiUrl = string; // Can also be set as a path eg: "path1" | "path2"
+export type ApiUrl = string; // Can also be set as a path eg: "path1" | "path2"

-type resourcePath = string;
+export type ApiMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";

-type ApiMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
-
-type ApiContent =
+export type ApiContent =
  | Blob
  | File
  | Pick<ReadableStreamDefaultReader<any>, "read">
  | "";

-interface ApiOpts {
+export interface ApiOpts {
  method?: ApiMethod;
  headers?: object;
  body?: any;
 }

-interface tusSettings {
+export interface TusSettings {
  retryCount: number;
  chunkSize: number;
 }

-type algo = any;
+export type ChecksumAlgs = "md5" | "sha1" | "sha256" | "sha512";

 type inline = any;

+<<<<<<< HEAD
 interface IShare {
  expire: any;
+=======
+export interface IShare {
+>>>>>>> kloon15/vue3
  hash: string;
  path: string;
-  userID: number;
-  token: string;
+  expire?: any;
+  userID?: number;
+  token?: string;
 }

 interface settings {
  any;
 }

-type searchParams = any;
+export interface SearchParams {
+  [key: string]: string;
+}
--- a/frontend/src/types/file.d.ts
+++ b/frontend/src/types/file.d.ts
@ -1,4 +1,4 @@
-interface IFile {
+export interface IFile {
  index?: number;
  name: string;
  modified: string;
@ -7,14 +7,14 @@ interface IFile {
  isDir: boolean;
  size: number;
  fullPath: string;
-  type: uploadType;
+  type: FileType;
  items: IFile[];
  token?: string;
  hash: string;
  url?: string;
 }

-type uploadType =
+export type FileType =
  | "video"
  | "audio"
  | "image"
@ -37,12 +37,22 @@ type req = {
  hash: string;
 };

-interface uploads {
-  [key: string]: upload;
+export interface Uploads {
+  [key: string]: Upload;
 }

-interface upload {
+export interface Upload {
  id: number;
-  file: file;
+  file: IFile;
  type: string;
 }
+
+export interface Item {
+  id: number;
+  url?: string;
+  path: string;
+  file: IFile;
+  dir?: boolean;
+  overwrite?: boolean;
+  type?: FileType;
+}
--- a/frontend/src/types/index.d.ts
+++ b/frontend/src/types/index.d.ts
@ -0,0 +1,6 @@
+export * from "./api";
+export * from "./file";
+export * from "./layout";
+export * from "./settings";
+export * from "./toast";
+export * from "./user";
--- a/frontend/src/types/layout.d.ts
+++ b/frontend/src/types/layout.d.ts
@ -1,4 +1,4 @@
-interface LayoutValue {
+export interface LayoutValue {
  prompt: string;
  confirm: any;
  action?: boolean;
--- a/frontend/src/types/settings.d.ts
+++ b/frontend/src/types/settings.d.ts
@ -1,8 +1,10 @@
-interface ISettings {
+import type { Permissions } from "./user";
+
+export interface ISettings {
  signup: boolean;
  createUserDir: boolean;
  userHomeBasePath: string;
-  defaults: Defaults;
+  defaults: SettingsDefaults;
  rules: any[];
  branding: SettingsBranding;
  tus: SettingsTus;
@ -16,7 +18,7 @@ interface SettingsDefaults {
  viewMode: string;
  singleClick: boolean;
  sorting: SettingsSorting;
-  perm: SettingsPerm;
+  perm: Permissions;
  commands: any[];
  hideDotfiles: boolean;
  dateFormat: boolean;
@ -27,17 +29,6 @@ interface SettingsSorting {
  asc: boolean;
 }

-interface SettingsPerm {
-  admin: boolean;
-  execute: boolean;
-  create: boolean;
-  rename: boolean;
-  modify: boolean;
-  delete: boolean;
-  share: boolean;
-  download: boolean;
-}
-
 interface SettingsBranding {
  name: string;
  disableExternal: boolean;
@ -52,7 +43,7 @@ interface SettingsTus {
  retryCount: number;
 }

-interface SettingsCommand {
+export interface SettingsCommand {
  after_copy?: string[];
  after_delete?: string[];
  after_rename?: string[];
@ -65,7 +56,7 @@ interface SettingsCommand {
  before_upload?: string[];
 }

-interface SettingsUnit {
+export interface SettingsUnit {
  KB: number;
  MB: number;
  GB: number;
--- a/frontend/src/types/toast.d.ts
+++ b/frontend/src/types/toast.d.ts
@ -1 +1,5 @@
-type TToast = (message: string) => void;
+export type IToastSuccess = (message: string) => void;
+export type IToastError = (
+  error: Error | string,
+  displayReport?: boolean
+) => void;
--- a/frontend/src/types/user.d.ts
+++ b/frontend/src/types/user.d.ts
@ -1,11 +1,16 @@
+<<<<<<< HEAD
 type UserKey = keyof IUser;

 interface IUser {
+=======
+export interface IUser {
+>>>>>>> kloon15/vue3
  id: number;
  username: string;
  password: string;
  scope: string;
  locale: string;
+<<<<<<< HEAD
  lockPassword: boolean;
  viewMode: string;
  singleClick: boolean;
@ -32,3 +37,44 @@ interface UserSorting {
  by: string;
  asc: boolean;
 }
+=======
+  perm: Permissions;
+  commands: string[];
+  rules: IRule[];
+  lockPassword: boolean;
+  hideDotfiles: boolean;
+  singleClick: boolean;
+  dateFormat: boolean;
+}
+
+export interface Permissions {
+  admin: boolean;
+  copy: boolean;
+  create: boolean;
+  delete: boolean;
+  download: boolean;
+  execute: boolean;
+  modify: boolean;
+  move: boolean;
+  rename: boolean;
+  share: boolean;
+  shell: boolean;
+  upload: boolean;
+}
+
+export interface UserSorting {
+  by: string;
+  asc: boolean;
+}
+
+export interface IRule {
+  allow: boolean;
+  path: string;
+  regex: boolean;
+  regexp: IRegexp;
+}
+
+interface IRegexp {
+  raw: string;
+}
+>>>>>>> kloon15/vue3
--- a/frontend/src/utils/auth.ts
+++ b/frontend/src/utils/auth.ts
@ -2,10 +2,12 @@ import { useAuthStore } from "@/stores/auth";
 import router from "@/router";
 import jwt_decode from "jwt-decode";
 import { baseURL } from "./constants";
+import { StatusError } from "@/api/utils";
+import type { User } from "@/types";

 export function parseToken(token: string) {
  // falsy or malformed jwt will throw InvalidTokenError
-  const data = jwt_decode<{ [key: string]: any; user: user }>(token);
+  const data = jwt_decode<{ [key: string]: any; user: User }>(token);

  document.cookie = `auth=${token}; Path=/; SameSite=Strict;`;

@ -80,8 +82,7 @@ export async function signup(username: string, password: string) {
  });

  if (res.status !== 200) {
-    // @ts-ignore still need to fix these errors
-    throw new Error(res.status);
+    throw new StatusError(res.statusText, res.status);
  }
 }

--- a/frontend/src/utils/upload.ts
+++ b/frontend/src/utils/upload.ts
@ -1,7 +1,8 @@
 import { useUploadStore } from "@/stores/upload";
+import type { IFile, Item, FileType } from "@/types";
 import url from "@/utils/url";

-export function checkConflict(files: file[], items: item[]) {
+export function checkConflict(files: IFile[], items: Item[]) {
  if (typeof items === "undefined" || items === null) {
    items = [];
  }
@ -34,7 +35,7 @@ export function checkConflict(files: file[], items: item[]) {
  return conflict;
 }

-export function scanFiles(dt: { [key: string]: any; item: item }) {
+export function scanFiles(dt: { [key: string]: any; item: Item }) {
  return new Promise((resolve) => {
    let reading = 0;
    const contents: any[] = [];
@ -56,7 +57,7 @@ export function scanFiles(dt: { [key: string]: any; item: item }) {
    function readEntry(entry: any, directory = "") {
      if (entry.isFile) {
        reading++;
-        entry.file((file: file) => {
+        entry.file((file: IFile) => {
          reading--;

          file.fullPath = `${directory}${file.name}`;
@ -101,7 +102,7 @@ export function scanFiles(dt: { [key: string]: any; item: item }) {
  });
 }

-function detectType(mimetype: string): uploadType {
+function detectType(mimetype: string): FileType {
  if (mimetype.startsWith("video")) return "video";
  if (mimetype.startsWith("audio")) return "audio";
  if (mimetype.startsWith("image")) return "image";
@ -110,7 +111,7 @@ function detectType(mimetype: string): uploadType {
  return "blob";
 }

-export function handleFiles(files: file[], base: string, overwrite = false) {
+export function handleFiles(files: IFile[], base: string, overwrite = false) {
  const uploadStore = useUploadStore();

  for (let i = 0; i < files.length; i++) {
@ -128,7 +129,7 @@ export function handleFiles(files: file[], base: string, overwrite = false) {
      path += "/";
    }

-    const item = {
+    const item: Item = {
      id,
      path,
      file,
--- a/frontend/src/utils/vue.cjs
+++ b/frontend/src/utils/vue.cjs
@ -1,67 +0,0 @@
-import Vue from "vue";
-import Noty from "noty";
-import VueLazyload from "vue-lazyload";
-// @ts-ignore
-import i18n from "@/i18n";
-import { disableExternal } from "@/utils/constants";
-
-Vue.use(VueLazyload);
-
-Vue.config.productionTip = true;
-
-const notyDefault = {
-  type: "info",
-  layout: "bottomRight",
-  timeout: 1000,
-  progressBar: true,
-};
-
-Vue.prototype.$noty = (opts) => {
-  new Noty(Object.assign({}, notyDefault, opts)).show();
-};
-
-Vue.prototype.$showSuccess = (message) => {
-  new Noty(
-    Object.assign({}, notyDefault, {
-      text: message,
-      type: "success",
-    })
-  ).show();
-};
-
-Vue.prototype.$showError = (error, displayReport = true) => {
-  let btns = [
-    Noty.button(i18n.t("buttons.close"), "", function () {
-      n.close();
-    }),
-  ];
-
-  if (!disableExternal && displayReport) {
-    btns.unshift(
-      Noty.button(i18n.t("buttons.reportIssue"), "", function () {
-        window.open(
-          "https://github.com/filebrowser/filebrowser/issues/new/choose"
-        );
-      })
-    );
-  }
-
-  let n = new Noty(
-    Object.assign({}, notyDefault, {
-      text: error.message || error,
-      type: "error",
-      timeout: null,
-      buttons: btns,
-    })
-  );
-
-  n.show();
-};
-
-Vue.directive("focus", {
-  inserted: function (el) {
-    el.focus();
-  },
-});
-
-export default Vue;
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@ -34,6 +34,7 @@ import {
  watch,
 } from "vue";
 import { files as api } from "@/api";
+import { storeToRefs } from "pinia";
 import { useFileStore } from "@/stores/file";
 import { useLayoutStore } from "@/stores/layout";
 import { useUploadStore } from "@/stores/upload";
@ -51,6 +52,9 @@ const layoutStore = useLayoutStore();
 const fileStore = useFileStore();
 const uploadStore = useUploadStore();

+const { reload } = storeToRefs(fileStore);
+const { error: uploadError } = storeToRefs(uploadStore);
+
 const route = useRoute();

 const { t } = useI18n({});
@ -98,14 +102,11 @@ onUnmounted(() => {
 });

 watch(route, () => fetchData());
-// @ts-ignore
-watch(fileStore.reload, (val) => {
-  if (val) {
-    fetchData();
-  }
+watch(reload, (newValue) => {
+  newValue && fetchData();
 });
-watch(uploadStore.error, (newValue, oldValue) => {
-  newValue && newValue !== oldValue && layoutStore.showError();
+watch(uploadError, (newValue) => {
+  newValue && layoutStore.showError();
 });

 // Define functions
--- a/frontend/src/views/Layout.vue
+++ b/frontend/src/views/Layout.vue
@ -1,8 +1,8 @@
 <template>
  <div>
-    <!-- <div v-if="true" class="layoutStore.progress">
-      <div v-bind:style="{ width: this.layoutStore.progress + '%' }"></div>
-    </div> -->
+    <div v-if="uploadStore.getProgress" class="progress">
+      <div v-bind:style="{ width: uploadStore.getProgress + '%' }"></div>
+    </div>
    <sidebar></sidebar>
    <main>
      <router-view></router-view>
@ -21,6 +21,7 @@
 import { useAuthStore } from "@/stores/auth";
 import { useLayoutStore } from "@/stores/layout";
 import { useFileStore } from "@/stores/file";
+import { useUploadStore } from "@/stores/upload";
 import Sidebar from "@/components/Sidebar.vue";
 import Prompts from "@/components/prompts/Prompts.vue";
 import Shell from "@/components/Shell.vue";
@ -32,6 +33,7 @@ import { useRoute } from "vue-router";
 const layoutStore = useLayoutStore();
 const authStore = useAuthStore();
 const fileStore = useFileStore();
+const uploadStore = useUploadStore();
 const route = useRoute();

 watch(route, () => {
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@ -71,10 +71,7 @@ const submit = async (event: Event) => {
  event.preventDefault();
  event.stopPropagation();

-  let redirect = route.query.redirect;
-  if (redirect === "" || redirect === undefined || redirect === null) {
-    redirect = "/files/";
-  }
+  const redirect = (route.query.redirect || "/files/") as string;

  let captcha = "";
  if (recaptcha) {
@ -99,7 +96,6 @@ const submit = async (event: Event) => {
    }

    await auth.login(username.value, password.value, captcha);
-    // @ts-ignore
    router.push({ path: redirect });
  } catch (e: any) {
    console.error(e);
--- a/frontend/src/views/Share.vue
+++ b/frontend/src/views/Share.vue
@ -194,9 +194,10 @@ import Item from "@/components/files/ListingItem.vue";
 import Clipboard from "clipboard";
 import { useFileStore } from "@/stores/file";
 import { useLayoutStore } from "@/stores/layout";
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
+import type { IToastSuccess } from "@/types";

 const error = ref<null | any>(null);
 const showLimit = ref<number>(100);
@ -206,6 +207,8 @@ const hash = ref<any>(null);
 const token = ref<any>(null);
 const clip = ref<any>(null);

+const $showSuccess = inject<IToastSuccess>("$showError")!;
+
 const { t } = useI18n({});

 const route = useRoute();
@ -256,7 +259,7 @@ const fetchData = async () => {
  fileStore.reload = false;
  fileStore.selected = [];
  fileStore.multiple = false;
-  // fileStore.closeHovers();
+  layoutStore.closeHovers();

  // Set loading to true and reset the error.
  layoutStore.loading = true;
@ -324,7 +327,6 @@ const download = () => {
        files.push(req.value.items[i].path);
      }

-      // @ts-ignore
      api.download(format, hash.value, token.value, ...files);
    },
  });
@ -332,8 +334,7 @@ const download = () => {

 const linkSelected = () => {
  return isSingleFile() && req.value
-    ? // @ts-ignore
-      api.getDownloadURL({
+    ? api.getDownloadURL({
        hash: hash.value,
        path: req.value.items[fileStore.selected[0]].path,
      })
@ -348,7 +349,7 @@ onMounted(async () => {
  window.addEventListener("keydown", keyEvent);
  clip.value = new Clipboard(".copy-clipboard");
  clip.value.on("success", () => {
-    // $showSuccess(this.t("success.linkCopied"));
+    $showSuccess(t("success.linkCopied"));
  });
 });

--- a/frontend/src/views/settings/Global.vue
+++ b/frontend/src/views/settings/Global.vue
@ -158,6 +158,7 @@
        <div class="card-content">
          <p class="small">{{ t("settings.defaultUserDescription") }}</p>

+          <!-- TODO: idk how to fix this ts error -->
          <user-form
            :isNew="false"
            :isDefault="true"
@ -239,6 +240,13 @@ import Themes from "@/components/settings/Themes.vue";
 import Errors from "@/views/Errors.vue";
 import { computed, inject, onBeforeUnmount, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
+import type {
+  ISettings,
+  IToastError,
+  IToastSuccess,
+  SettingsCommand,
+  SettingsUnit,
+} from "@/types";

 const error = ref<any>(null);
 const originalSettings = ref<ISettings | null>(null);
@ -246,12 +254,12 @@ const settings = ref<ISettings | null>(null);
 const debounceTimeout = ref<number | null>(null);

 const commandObject = ref<{
-  [key in keyof SettingsCommand]: string;
+  [key in keyof SettingsCommand]: string[] | string;
 }>({});
 const shellValue = ref<string>("");

-const $showError = inject<TToast>("$showError") as TToast;
-const $showSuccess = inject<TToast>("$showSuccess") as TToast;
+const $showError = inject<IToastError>("$showError")!;
+const $showSuccess = inject<IToastSuccess>("$showSuccess")!;

 const { t } = useI18n();

@ -304,6 +312,7 @@ const save = async () => {
    commands: {},
  };

+<<<<<<< HEAD
  // @ts-ignore
  for (const name of Object.keys(settings.value.commands)) {
    // @ts-ignore
@ -317,6 +326,22 @@ const save = async () => {
    } else {
      // @ts-ignore
      newSettings.commands[name] = newValue;
+=======
+  const keys = Object.keys(settings.value.commands) as Array<
+    keyof SettingsCommand
+  >;
+  for (const key of keys) {
+    // not sure if we can safely assert non-null
+    const newValue = commandObject.value[key];
+    if (!newValue) continue;
+
+    if (Array.isArray(newValue)) {
+      newSettings.commands[key] = newValue;
+    } else if (key in commandObject.value) {
+      newSettings.commands[key] = newValue
+        .split("\n")
+        .filter((cmd: string) => cmd !== "");
+>>>>>>> kloon15/vue3
    }
  }
  newSettings.shell = shellValue.value.split("\n");
@ -371,16 +396,20 @@ onMounted(async () => {
    const original: ISettings = await api.get();
    let newSettings: ISettings = { ...original, commands: {} };

-    for (const key in original.commands) {
-      // @ts-ignore
+    const keys = Object.keys(original.commands) as Array<keyof SettingsCommand>;
+    for (const key in keys) {
+      //@ts-ignore
      newSettings.commands[key] = original.commands[key];
-      // @ts-ignore
+      //@ts-ignore
      commandObject.value[key] = original.commands[key].join("\n");
    }

    originalSettings.value = original;
    settings.value = newSettings;
+<<<<<<< HEAD
    // @ts-ignore
+=======
+>>>>>>> kloon15/vue3
    shellValue.value = newSettings.shell.join("\n");
  } catch (e) {
    error.value = e;
--- a/frontend/src/views/settings/Profile.vue
+++ b/frontend/src/views/settings/Profile.vue
@ -83,13 +83,22 @@ import Languages from "@/components/settings/Languages.vue";
 // import i18n, { rtlLanguages } from "@/i18n";
 import { inject, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
+<<<<<<< HEAD
+=======
+import type { IToastError, IToastSuccess } from "@/types";
+>>>>>>> kloon15/vue3

 const layoutStore = useLayoutStore();
 const authStore = useAuthStore();
 const { t } = useI18n();

+<<<<<<< HEAD
 const $showError = inject("$showError") as TToast;
 const $showSuccess = inject("$showSuccess") as TToast;
+=======
+const $showError = inject<IToastError>("$showError")!;
+const $showSuccess = inject<IToastSuccess>("$showSuccess")!;
+>>>>>>> kloon15/vue3

 const password = ref<string>("");
 const passwordConf = ref<string>("");
--- a/frontend/src/views/settings/Shares.vue
+++ b/frontend/src/views/settings/Shares.vue
@ -71,9 +71,16 @@ import Clipboard from "clipboard";
 import Errors from "@/views/Errors.vue";
 import { inject, onBeforeUnmount, ref, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
+<<<<<<< HEAD

 const $showError = inject("$showError") as TToast;
 const $showSuccess = inject("$showSuccess") as TToast;
+=======
+import type { IShare, IToastError, IToastSuccess } from "@/types";
+
+const $showError = inject<IToastError>("$showError")!;
+const $showSuccess = inject<IToastSuccess>("$showSuccess")!;
+>>>>>>> kloon15/vue3
 const { t } = useI18n();

 const layoutStore = useLayoutStore();
--- a/frontend/src/views/settings/User.vue
+++ b/frontend/src/views/settings/User.vue
@ -75,19 +75,31 @@ import { useLayoutStore } from "@/stores/layout";
 import { users as api, settings } from "@/api";
 import UserForm from "@/components/settings/UserForm.vue";
 import Errors from "@/views/Errors.vue";
+<<<<<<< HEAD
 // @ts-ignore
 import { cloneDeep } from "lodash-es";
 import { computed, inject, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
+=======
+import { computed, inject, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import type { IToastError, IToastSuccess, IUser } from "@/types";
+>>>>>>> kloon15/vue3

 const error = ref<any | null>(null);
 const originalUser = ref<IUser | null>(null);
 const user = ref<IUser | null>(null);
 const createUserDir = ref<boolean>(false);

+<<<<<<< HEAD
 const $showError = inject("$showError") as TToast;
 const $showSuccess = inject("$showSuccess") as TToast;
+=======
+const $showError = inject<IToastError>("$showError")!;
+const $showSuccess = inject<IToastSuccess>("$showSuccess")!;
+>>>>>>> kloon15/vue3

 const authStore = useAuthStore();
 const layoutStore = useLayoutStore();
@ -121,6 +133,8 @@ const fetchData = async () => {
        rules: [],
        lockPassword: false,
        id: 0,
+<<<<<<< HEAD
+=======
      };
    } else {
      const id = Array.isArray(route.params.id)
@ -137,6 +151,48 @@ const fetchData = async () => {

 const deletePrompt = () => layoutStore.showHover("deleteUser");

+const deleteUser = async (e: Event) => {
+  e.preventDefault();
+  if (user.value === null) {
+    return false;
+  }
+  try {
+    await api.remove(user.value.id);
+    router.push({ path: "/settings/users" });
+    $showSuccess(t("settings.userDeleted"));
+  } catch (e: any) {
+    e.message === "403" ? $showError(t("errors.forbidden")) : $showError(e);
+  }
+};
+const save = async (event: Event) => {
+  event.preventDefault();
+  if (originalUser.value === null || user.value === null) {
+    return false;
+  }
+
+  try {
+    if (isNew.value) {
+      const newUser: IUser = {
+        ...originalUser.value,
+        ...user.value,
+>>>>>>> kloon15/vue3
+      };
+    } else {
+      const id = Array.isArray(route.params.id)
+        ? route.params.id.join("")
+        : route.params.id;
+      user.value = { ...(await api.get(parseInt(id))) };
+    }
+  } catch (e) {
+    error.value = e;
+  } finally {
+    layoutStore.loading = false;
+  }
+};
+
+<<<<<<< HEAD
+const deletePrompt = () => layoutStore.showHover("deleteUser");
+
 const deleteUser = async (e: Event) => {
  e.preventDefault();
  if (user.value === null) {
@ -170,6 +226,16 @@ const save = async (event: Event) => {

      if (user.value.id === authStore.user?.id) {
        authStore.setUser({ ...cloneDeep(user) });
+=======
+      const loc = (await api.create(newUser)) as string;
+      router.push({ path: loc });
+      $showSuccess(t("settings.userCreated"));
+    } else {
+      await api.update(user);
+
+      if (user.value.id === authStore.user?.id) {
+        authStore.updateUser(user.value);
+>>>>>>> kloon15/vue3
      }

      $showSuccess(t("settings.userUpdated"));
--- a/frontend/src/views/settings/Users.vue
+++ b/frontend/src/views/settings/Users.vue
@ -47,6 +47,10 @@ import { users as api } from "@/api";
 import Errors from "@/views/Errors.vue";
 import { onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
+<<<<<<< HEAD
+=======
+import type { IUser } from "@/types";
+>>>>>>> kloon15/vue3

 const error = ref<any>(null);
 const users = ref<IUser[]>([]);
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -5,26 +5,19 @@
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "Node10",
    "strict": true,
-    "jsx": "preserve",
    "sourceMap": true,
-    "outDir": "../dist/frontend",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
-    "types": ["vite/client"],
-    "typeRoots": ["./node_modules/@types", "./some-custom-lib"],
+    "types": ["vite/client", "@intlify/unplugin-vue-i18n/messages"],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
-  "include": [
-    "./**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.vue",
-  ],
+  "include": ["src/**/*.ts", "src/**/*.vue", "src/i18n/index.ts.bak"],
  "exclude": ["node_modules", "dist"]
 }
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@ -8,7 +8,9 @@ import pluginRewriteAll from "vite-plugin-rewrite-all";

 const plugins = [
  vue(),
-  VueI18nPlugin({}),
+  VueI18nPlugin({
+    include: [path.resolve(__dirname, "./src/i18n/**.json")],
+  }),
  legacy({
    // defaults already drop IE support
    targets: ["defaults"],