From 910db80068be999a99f346ffe1f0251866009d44 Mon Sep 17 00:00:00 2001
From: Kloon ImKloon <kloon15@gmail.com>
Date: Mon, 11 Sep 2023 11:28:35 +0200
Subject: [PATCH] Merge branch 'vue3-wip' into vue3

---
 frontend/src/api/share.ts                     |   8 +-
 frontend/src/components/settings/Themes.vue   |  29 ++-
 frontend/src/components/settings/UserForm.vue |  93 ++++----
 frontend/src/stores/auth.ts                   |  26 ++-
 frontend/src/types/api.d.ts                   |   4 +-
 frontend/src/types/user.d.ts                  |  27 ++-
 frontend/src/views/settings/Global.vue        |   4 +-
 frontend/src/views/settings/Profile.vue       | 214 +++++++++---------
 frontend/src/views/settings/Shares.vue        | 160 +++++++------
 frontend/src/views/settings/User.vue          | 208 +++++++++--------
 frontend/src/views/settings/Users.vue         |  59 +++--
 11 files changed, 431 insertions(+), 401 deletions(-)

diff --git a/frontend/src/api/share.ts b/frontend/src/api/share.ts
index 241702f0..52987415 100644
--- a/frontend/src/api/share.ts
+++ b/frontend/src/api/share.ts
@@ -1,11 +1,11 @@
-import type { Share } from "@/types";
+import type { ApiUrl, IShare } from "@/types";
 import { fetchURL, fetchJSON, removePrefix, createURL } from "./utils";
 
 export async function list() {
   return fetchJSON("/api/shares");
 }
 
-export async function get(url: string) {
+export async function get(url: ApiUrl) {
   url = removePrefix(url);
   return fetchJSON(`/api/share${url}`);
 }
@@ -17,7 +17,7 @@ export async function remove(hash: string) {
 }
 
 export async function create(
-  url: string,
+  url: ApiUrl,
   password = "",
   expires = "",
   unit = "hours"
@@ -41,6 +41,6 @@ export async function create(
   });
 }
 
-export function getShareURL(share: Share) {
+export function getShareURL(share: IShare) {
   return createURL("share/" + share.hash, {}, false);
 }
diff --git a/frontend/src/components/settings/Themes.vue b/frontend/src/components/settings/Themes.vue
index a2ccfa6b..d440336c 100644
--- a/frontend/src/components/settings/Themes.vue
+++ b/frontend/src/components/settings/Themes.vue
@@ -1,18 +1,25 @@
 <template>
   <select v-on:change="change" :value="theme">
-    <option value="">{{ $t("settings.themes.light") }}</option>
-    <option value="dark">{{ $t("settings.themes.dark") }}</option>
+    <option value="">{{ t("settings.themes.light") }}</option>
+    <option value="dark">{{ t("settings.themes.dark") }}</option>
   </select>
 </template>
 
-<script>
-export default {
-  name: "themes",
-  props: ["theme"],
-  methods: {
-    change(event) {
-      this.$emit("update:theme", event.target.value);
-    },
-  },
+<script setup lang="ts">
+import { SelectHTMLAttributes } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+defineProps<{
+  theme: any;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:theme", val: string | null): void;
+}>();
+
+const change = (event: Event) => {
+  emit("update:theme", (event.target as SelectHTMLAttributes)?.value);
 };
 </script>
diff --git a/frontend/src/components/settings/UserForm.vue b/frontend/src/components/settings/UserForm.vue
index dd250cf2..0c7397dc 100644
--- a/frontend/src/components/settings/UserForm.vue
+++ b/frontend/src/components/settings/UserForm.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p v-if="!isDefault">
+    <p v-if="!isDefault && props.user !== null">
       <label for="username">{{ $t("settings.username") }}</label>
       <input
         class="input input--block"
@@ -24,7 +24,7 @@
     <p>
       <label for="scope">{{ $t("settings.scope") }}</label>
       <input
-        :disabled="createUserDirData"
+        :disabled="createUserDirData ?? false"
         :placeholder="scopePlaceholder"
         class="input input--block"
         type="text"
@@ -56,7 +56,7 @@
     </p>
 
     <permissions v-model:perm="user.perm" />
-    <commands v-if="isExecEnabled" v-model:commands="user.commands" />
+    <commands v-if="enableExec" v-model:commands="user.commands" />
 
     <div v-if="!isDefault">
       <h3>{{ $t("settings.rules") }}</h3>
@@ -66,54 +66,53 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import Languages from "./Languages.vue";
 import Rules from "./Rules.vue";
 import Permissions from "./Permissions.vue";
 import Commands from "./Commands.vue";
 import { enableExec } from "@/utils/constants";
+import { computed, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { IUser } from "@/types";
 
-export default {
-  name: "user",
-  data: () => {
-    return {
-      createUserDirData: false,
-      originalUserScope: "/",
-    };
-  },
-  components: {
-    Permissions,
-    Languages,
-    Rules,
-    Commands,
-  },
-  props: ["user", "createUserDir", "isNew", "isDefault"],
-  created() {
-    this.originalUserScope = this.user.scope;
-    this.createUserDirData = this.createUserDir;
-  },
-  computed: {
-    passwordPlaceholder() {
-      return this.isNew ? "" : this.$t("settings.avoidChanges");
-    },
-    scopePlaceholder() {
-      return this.createUserDir
-        ? this.$t("settings.userScopeGenerationPlaceholder")
-        : "";
-    },
-    displayHomeDirectoryCheckbox() {
-      return this.isNew && this.createUserDir;
-    },
-    isExecEnabled: () => enableExec,
-  },
-  watch: {
-    "user.perm.admin": function () {
-      if (!this.user.perm.admin) return;
-      this.user.lockPassword = false;
-    },
-    createUserDirData() {
-      this.user.scope = this.createUserDirData ? "" : this.originalUserScope;
-    },
-  },
-};
+const { t } = useI18n();
+
+const createUserDirData = ref<boolean | null>(null);
+const originalUserScope = ref<string | null>(null);
+
+const props = defineProps<{
+  user: IUser;
+  isNew: boolean;
+  isDefault: boolean;
+  createUserDir?: boolean;
+}>();
+
+onMounted(() => {
+  originalUserScope.value = props.user.scope;
+  createUserDirData.value = props.createUserDir;
+});
+
+const passwordPlaceholder = computed(() =>
+  props.isNew ? "" : t("settings.avoidChanges")
+);
+const scopePlaceholder = computed(() =>
+  createUserDirData.value ? t("settings.userScopeGenerationPlaceholder") : ""
+);
+const displayHomeDirectoryCheckbox = computed(
+  () => props.isNew && createUserDirData.value
+);
+
+watch(props.user, () => {
+  if (!props.user.perm.admin) return;
+  props.user.lockPassword = false;
+});
+
+watch(createUserDirData, () => {
+  if (props.user?.scope) {
+    props.user.scope = createUserDirData.value
+      ? ""
+      : originalUserScope.value ?? "";
+  }
+});
 </script>
diff --git a/frontend/src/stores/auth.ts b/frontend/src/stores/auth.ts
index 0ac05182..2b4defa8 100644
--- a/frontend/src/stores/auth.ts
+++ b/frontend/src/stores/auth.ts
@@ -1,4 +1,4 @@
-import type { User } from "@/types";
+import type { IUser } from "@/types";
 import { defineStore } from "pinia";
 import dayjs from "dayjs";
 import i18n, { detectLocale } from "@/i18n";
@@ -7,7 +7,7 @@ import { cloneDeep } from "lodash-es";
 export const useAuthStore = defineStore("auth", {
   // convert to a function
   state: (): {
-    user: User | null;
+    user: IUser | null;
     jwt: string;
   } => ({
     user: null,
@@ -19,24 +19,26 @@ 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);
-      // according to doc u only need .value if legacy: false
-      // in createI18n but they lied
-      // https://vue-i18n.intlify.dev/guide/essentials/scope.html#local-scope-1
       //@ts-ignore
       i18n.global.locale = locale;
-      this.user = value;
+      this.user = user;
     },
-    updateUser(value: User) {
-      if (typeof value !== "object" || !value) return;
-      this.setUser(cloneDeep(value));
+    updateUser(user: Partial<IUser>) {
+      if (user.locale) {
+        dayjs.locale(user.locale);
+        //@ts-ignore
+        i18n.global.locale = user.locale;
+      }
+
+      this.user = { ...this.user, ...cloneDeep(user) } as IUser;
     },
     // easily reset state using `$reset`
     clearUser() {
diff --git a/frontend/src/types/api.d.ts b/frontend/src/types/api.d.ts
index 5700b0a3..01c2de6a 100644
--- a/frontend/src/types/api.d.ts
+++ b/frontend/src/types/api.d.ts
@@ -1,3 +1,5 @@
+export type ApiUrl = string; // Can also be set as a path eg: "path1" | "path2"
+
 export type ApiMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
 
 export type ApiContent =
@@ -21,7 +23,7 @@ export type ChecksumAlgs = "md5" | "sha1" | "sha256" | "sha512";
 
 type inline = any;
 
-export interface Share {
+export interface IShare {
   expire: any;
   hash: string;
   path: string;
diff --git a/frontend/src/types/user.d.ts b/frontend/src/types/user.d.ts
index ad01b816..cc8b5b7d 100644
--- a/frontend/src/types/user.d.ts
+++ b/frontend/src/types/user.d.ts
@@ -1,7 +1,16 @@
-export interface User {
+export interface IUser {
   id: number;
+  username: string;
+  password: string;
+  scope: string;
   locale: string;
   perm: Permissions;
+  commands: string[];
+  rules: IRule[];
+  lockPassword: boolean;
+  hideDotfiles: boolean;
+  singleClick: boolean;
+  dateFormat: boolean;
 }
 
 export interface Permissions {
@@ -18,3 +27,19 @@ export interface Permissions {
   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;
+}
diff --git a/frontend/src/views/settings/Global.vue b/frontend/src/views/settings/Global.vue
index 10cb5a80..23ac3754 100644
--- a/frontend/src/views/settings/Global.vue
+++ b/frontend/src/views/settings/Global.vue
@@ -257,8 +257,8 @@ const commandObject = ref<{
 }>({});
 const shellValue = ref<string>("");
 
-const $showSuccess = inject<IToastSuccess>("$showSuccess") as IToastSuccess;
-const $showError = inject<IToastError>("$showError") as IToastError;
+const $showError = inject<IToastError>("$showError")!;
+const $showSuccess = inject<IToastSuccess>("$showSuccess")!;
 
 const { t } = useI18n();
 
diff --git a/frontend/src/views/settings/Profile.vue b/frontend/src/views/settings/Profile.vue
index 5ccf81df..172a2857 100644
--- a/frontend/src/views/settings/Profile.vue
+++ b/frontend/src/views/settings/Profile.vue
@@ -3,23 +3,23 @@
     <div class="column">
       <form class="card" @submit="updateSettings">
         <div class="card-title">
-          <h2>{{ $t("settings.profileSettings") }}</h2>
+          <h2>{{ t("settings.profileSettings") }}</h2>
         </div>
 
         <div class="card-content">
           <p>
             <input type="checkbox" v-model="hideDotfiles" />
-            {{ $t("settings.hideDotfiles") }}
+            {{ t("settings.hideDotfiles") }}
           </p>
           <p>
             <input type="checkbox" v-model="singleClick" />
-            {{ $t("settings.singleClick") }}
+            {{ t("settings.singleClick") }}
           </p>
           <p>
             <input type="checkbox" v-model="dateFormat" />
-            {{ $t("settings.setDateFormat") }}
+            {{ t("settings.setDateFormat") }}
           </p>
-          <h3>{{ $t("settings.language") }}</h3>
+          <h3>{{ t("settings.language") }}</h3>
           <languages
             class="input input--block"
             v-model:locale="locale"
@@ -30,30 +30,34 @@
           <input
             class="button button--flat"
             type="submit"
-            :value="$t('buttons.update')"
+            :value="t('buttons.update')"
           />
         </div>
       </form>
     </div>
 
     <div class="column">
-      <form class="card" v-if="!user.lockPassword" @submit="updatePassword">
+      <form
+        class="card"
+        v-if="!authStore.user?.lockPassword"
+        @submit="updatePassword"
+      >
         <div class="card-title">
-          <h2>{{ $t("settings.changePassword") }}</h2>
+          <h2>{{ t("settings.changePassword") }}</h2>
         </div>
 
         <div class="card-content">
           <input
             :class="passwordClass"
             type="password"
-            :placeholder="$t('settings.newPassword')"
+            :placeholder="t('settings.newPassword')"
             v-model="password"
             name="password"
           />
           <input
             :class="passwordClass"
             type="password"
-            :placeholder="$t('settings.newPasswordConfirm')"
+            :placeholder="t('settings.newPasswordConfirm')"
             v-model="passwordConf"
             name="password"
           />
@@ -63,7 +67,7 @@
           <input
             class="button button--flat"
             type="submit"
-            :value="$t('buttons.update')"
+            :value="t('buttons.update')"
           />
         </div>
       </form>
@@ -71,102 +75,108 @@
   </div>
 </template>
 
-<script>
-import { mapActions, mapState, mapWritableState } from "pinia";
+<script setup lang="ts">
 import { useAuthStore } from "@/stores/auth";
 import { useLayoutStore } from "@/stores/layout";
 import { users as api } from "@/api";
 import Languages from "@/components/settings/Languages.vue";
-import i18n, { rtlLanguages } from "@/i18n";
+// import i18n, { rtlLanguages } from "@/i18n";
+import { inject, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import type { IToastError, IToastSuccess } from "@/types";
 
-export default {
-  name: "settings",
-  components: {
-    Languages,
-  },
-  data: function () {
-    return {
-      password: "",
-      passwordConf: "",
-      hideDotfiles: false,
-      singleClick: false,
-      dateFormat: false,
-      locale: "",
+const layoutStore = useLayoutStore();
+const authStore = useAuthStore();
+const { t } = useI18n();
+
+const $showError = inject<IToastError>("$showError")!;
+const $showSuccess = inject<IToastSuccess>("$showSuccess")!;
+
+const password = ref<string>("");
+const passwordConf = ref<string>("");
+const hideDotfiles = ref<boolean>(false);
+const singleClick = ref<boolean>(false);
+const dateFormat = ref<boolean>(false);
+const locale = ref<string>("");
+
+// ...mapState(useAuthStore, ["user"]),
+// ...mapWritableState(useLayoutStore, ["loading"]),
+//...mapActions(useAuthStore, ["updateUser"]),
+
+const passwordClass = () => {
+  const baseClass = "input input--block";
+
+  if (password.value === "" && passwordConf.value === "") {
+    return baseClass;
+  }
+
+  if (password.value === passwordConf.value) {
+    return `${baseClass} input--green`;
+  }
+
+  return `${baseClass} input--red`;
+};
+
+onMounted(() => {
+  layoutStore.loading = true;
+  if (authStore.user === null) return false;
+  locale.value = authStore.user.locale;
+  hideDotfiles.value = authStore.user.hideDotfiles;
+  singleClick.value = authStore.user.singleClick;
+  dateFormat.value = authStore.user.dateFormat;
+  layoutStore.loading = false;
+});
+
+const updatePassword = async (event: Event) => {
+  event.preventDefault();
+
+  if (
+    password.value !== passwordConf.value ||
+    password.value === "" ||
+    authStore.user === null
+  ) {
+    return;
+  }
+
+  try {
+    const data = { id: authStore.user.id, password: password.value };
+    await api.update(data, ["password"]);
+    authStore.updateUser(data);
+    $showSuccess(t("settings.passwordUpdated"));
+  } catch (e: any) {
+    $showError(e);
+  }
+};
+const updateSettings = async (event: Event) => {
+  event.preventDefault();
+
+  try {
+    if (authStore.user === null) throw "User is not set";
+
+    const data = {
+      id: authStore.user.id,
+      locale: locale.value,
+      hideDotfiles: hideDotfiles.value,
+      singleClick: singleClick.value,
+      dateFormat: dateFormat.value,
     };
-  },
-  inject: ["$showError", "$showSuccess"],
-  computed: {
-    ...mapState(useAuthStore, ["user"]),
-    ...mapWritableState(useLayoutStore, ["loading"]),
-    passwordClass() {
-      const baseClass = "input input--block";
-
-      if (this.password === "" && this.passwordConf === "") {
-        return baseClass;
-      }
-
-      if (this.password === this.passwordConf) {
-        return `${baseClass} input--green`;
-      }
-
-      return `${baseClass} input--red`;
-    },
-  },
-  created() {
-    this.loading = true;
-    this.locale = this.user.locale;
-    this.hideDotfiles = this.user.hideDotfiles;
-    this.singleClick = this.user.singleClick;
-    this.dateFormat = this.user.dateFormat;
-    this.loading = false;
-  },
-  methods: {
-    ...mapActions(useAuthStore, ["updateUser"]),
-    async updatePassword(event) {
-      event.preventDefault();
-
-      if (this.password !== this.passwordConf || this.password === "") {
-        return;
-      }
-
-      try {
-        const data = { id: this.user.id, password: this.password };
-        await api.update(data, ["password"]);
-        this.updateUser(data);
-        this.$showSuccess(this.$t("settings.passwordUpdated"));
-      } catch (e) {
-        this.$showError(e);
-      }
-    },
-    async updateSettings(event) {
-      event.preventDefault();
-
-      try {
-        const data = {
-          id: this.user.id,
-          locale: this.locale,
-          hideDotfiles: this.hideDotfiles,
-          singleClick: this.singleClick,
-          dateFormat: this.dateFormat,
-        };
-        const shouldReload =
-          rtlLanguages.includes(data.locale) !==
-          rtlLanguages.includes(i18n.locale);
-        await api.update(data, [
-          "locale",
-          "hideDotfiles",
-          "singleClick",
-          "dateFormat",
-        ]);
-        this.updateUser(data);
-        if (shouldReload) {
-          location.reload();
-        }
-        this.$showSuccess(this.$t("settings.settingsUpdated"));
-      } catch (e) {
-        this.$showError(e);
-      }
-    },
-  },
+    // TODO don't know what this is doing
+    const shouldReload = false;
+    // rtlLanguages.includes(data.locale) !==
+    // rtlLanguages.includes(i18n.locale);
+    await api.update(data, [
+      "locale",
+      "hideDotfiles",
+      "singleClick",
+      "dateFormat",
+    ]);
+    authStore.updateUser(data);
+    if (shouldReload) {
+      location.reload();
+    }
+    $showSuccess(t("settings.settingsUpdated"));
+  } catch (e: any) {
+    $showError(e);
+  }
 };
 </script>
diff --git a/frontend/src/views/settings/Shares.vue b/frontend/src/views/settings/Shares.vue
index 5a718331..a093da84 100644
--- a/frontend/src/views/settings/Shares.vue
+++ b/frontend/src/views/settings/Shares.vue
@@ -1,18 +1,20 @@
 <template>
   <errors v-if="error" :errorCode="error.status" />
-  <div class="row" v-else-if="!loading">
+  <div class="row" v-else-if="!layoutStore.loading">
     <div class="column">
       <div class="card">
         <div class="card-title">
-          <h2>{{ $t("settings.shareManagement") }}</h2>
+          <h2>{{ t("settings.shareManagement") }}</h2>
         </div>
 
         <div class="card-content full" v-if="links.length > 0">
           <table>
             <tr>
-              <th>{{ $t("settings.path") }}</th>
-              <th>{{ $t("settings.shareDuration") }}</th>
-              <th v-if="user.perm.admin">{{ $t("settings.username") }}</th>
+              <th>{{ t("settings.path") }}</th>
+              <th>{{ t("settings.shareDuration") }}</th>
+              <th v-if="authStore.user?.perm.admin">
+                {{ t("settings.username") }}
+              </th>
               <th></th>
               <th></th>
             </tr>
@@ -25,15 +27,15 @@
                 <template v-if="link.expire !== 0">{{
                   humanTime(link.expire)
                 }}</template>
-                <template v-else>{{ $t("permanent") }}</template>
+                <template v-else>{{ t("permanent") }}</template>
               </td>
-              <td v-if="user.perm.admin">{{ link.username }}</td>
+              <td v-if="authStore.user?.perm.admin">{{ link.username }}</td>
               <td class="small">
                 <button
                   class="action"
                   @click="deleteLink($event, link)"
-                  :aria-label="$t('buttons.delete')"
-                  :title="$t('buttons.delete')"
+                  :aria-label="t('buttons.delete')"
+                  :title="t('buttons.delete')"
                 >
                   <i class="material-icons">delete</i>
                 </button>
@@ -42,8 +44,8 @@
                 <button
                   class="action copy-clipboard"
                   :data-clipboard-text="buildLink(link)"
-                  :aria-label="$t('buttons.copyToClipboard')"
-                  :title="$t('buttons.copyToClipboard')"
+                  :aria-label="t('buttons.copyToClipboard')"
+                  :title="t('buttons.copyToClipboard')"
                 >
                   <i class="material-icons">content_paste</i>
                 </button>
@@ -53,94 +55,88 @@
         </div>
         <h2 class="message" v-else>
           <i class="material-icons">sentiment_dissatisfied</i>
-          <span>{{ $t("files.lonely") }}</span>
+          <span>{{ t("files.lonely") }}</span>
         </h2>
       </div>
     </div>
   </div>
 </template>
 
-<script>
-import { mapState, mapWritableState } from "pinia";
+<script setup lang="ts">
 import { useAuthStore } from "@/stores/auth";
 import { useLayoutStore } from "@/stores/layout";
 import { share as api, users } from "@/api";
 import dayjs from "dayjs";
 import Clipboard from "clipboard";
 import Errors from "@/views/Errors.vue";
+import { inject, onBeforeUnmount, ref, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
+import type { IShare, IToastError, IToastSuccess } from "@/types";
 
-export default {
-  name: "shares",
-  components: {
-    Errors,
-  },
-  inject: ["$showError", "$showSuccess"],
-  computed: {
-    ...mapState(useAuthStore, ["user"]),
-    ...mapWritableState(useLayoutStore, ["loading"]),
-  },
-  data: function () {
-    return {
-      error: null,
-      links: [],
-      clip: null,
-    };
-  },
-  async created() {
-    this.loading = true;
+const $showError = inject<IToastError>("$showError")!;
+const $showSuccess = inject<IToastSuccess>("$showSuccess")!;
+const { t } = useI18n();
 
-    try {
-      let links = await api.list();
-      if (this.user.perm.admin) {
-        let userMap = new Map();
-        for (let user of await users.getAll())
-          userMap.set(user.id, user.username);
-        for (let link of links)
-          link.username = userMap.has(link.userID)
-            ? userMap.get(link.userID)
-            : "";
-      }
-      this.links = links;
-    } catch (e) {
-      this.error = e;
-    } finally {
-      this.loading = false;
+const layoutStore = useLayoutStore();
+const authStore = useAuthStore();
+
+// ...mapState(useAuthStore, ["user"]),
+// ...mapWritableState(useLayoutStore, ["loading"]),
+const error = ref<any>(null);
+const links = ref<any[]>([]);
+const clip = ref<Clipboard | null>(null);
+
+onMounted(async () => {
+  layoutStore.loading = true;
+
+  try {
+    let newLinks = await api.list();
+    if (authStore.user?.perm.admin) {
+      let userMap = new Map();
+      for (let user of await users.getAll())
+        userMap.set(user.id, user.username);
+      for (let link of newLinks)
+        link.username = userMap.has(link.userID)
+          ? userMap.get(link.userID)
+          : "";
     }
-  },
-  mounted() {
-    this.clip = new Clipboard(".copy-clipboard");
-    this.clip.on("success", () => {
-      this.$showSuccess(this.$t("success.linkCopied"));
-    });
-  },
-  beforeUnmount() {
-    this.clip.destroy();
-  },
-  methods: {
-    deleteLink: async function (event, link) {
-      event.preventDefault();
+    links.value = newLinks;
+  } catch (e: any) {
+    error.value = e;
+  } finally {
+    layoutStore.loading = false;
+  }
+  clip.value = new Clipboard(".copy-clipboard");
+  clip.value.on("success", () => {
+    $showSuccess(t("success.linkCopied"));
+  });
+});
 
-      this.showHover({
-        prompt: "share-delete",
-        confirm: () => {
-          this.closeHovers();
+onBeforeUnmount(() => clip.value?.destroy());
 
-          try {
-            api.remove(link.hash);
-            this.links = this.links.filter((item) => item.hash !== link.hash);
-            this.$showSuccess(this.$t("settings.shareDeleted"));
-          } catch (e) {
-            this.$showError(e);
-          }
-        },
-      });
+const deleteLink = async (event: Event, link: any) => {
+  event.preventDefault();
+
+  layoutStore.showHover({
+    prompt: "share-delete",
+    confirm: () => {
+      layoutStore.closeHovers();
+
+      try {
+        api.remove(link.hash);
+        links.value = links.value.filter((item) => item.hash !== link.hash);
+        $showSuccess(t("settings.shareDeleted"));
+      } catch (e: any) {
+        $showError(e);
+      }
     },
-    humanTime(time) {
-      return dayjs(time * 1000).fromNow();
-    },
-    buildLink(share) {
-      return api.getShareURL(share);
-    },
-  },
+  });
+};
+const humanTime = (time: number) => {
+  return dayjs(time * 1000).fromNow();
+};
+
+const buildLink = (share: IShare) => {
+  return api.getShareURL(share);
 };
 </script>
diff --git a/frontend/src/views/settings/User.vue b/frontend/src/views/settings/User.vue
index 1f75fc2f..0d346795 100644
--- a/frontend/src/views/settings/User.vue
+++ b/frontend/src/views/settings/User.vue
@@ -1,14 +1,14 @@
 <template>
   <errors v-if="error" :errorCode="error.status" />
-  <div class="row" v-else-if="!loading">
+  <div class="row" v-else-if="!layoutStore.loading">
     <div class="column">
       <form @submit="save" class="card">
         <div class="card-title">
-          <h2 v-if="user.id === 0">{{ $t("settings.newUser") }}</h2>
-          <h2 v-else>{{ $t("settings.user") }} {{ user.username }}</h2>
+          <h2 v-if="user?.id === 0">{{ $t("settings.newUser") }}</h2>
+          <h2 v-else>{{ $t("settings.user") }} {{ user?.username }}</h2>
         </div>
 
-        <div class="card-content">
+        <div class="card-content" v-if="user">
           <user-form
             v-model:user="user"
             v-model:createUserDir="createUserDir"
@@ -46,7 +46,7 @@
       </form>
     </div>
 
-    <div v-if="show === 'deleteUser'" class="card floating">
+    <div v-if="layoutStore.show === 'deleteUser'" class="card floating">
       <div class="card-content">
         <p>Are you sure you want to delete this user?</p>
       </div>
@@ -54,7 +54,7 @@
       <div class="card-action">
         <button
           class="button button--flat button--grey"
-          @click="closeHovers"
+          @click="layoutStore.closeHovers"
           v-focus
           :aria-label="$t('buttons.cancel')"
           :title="$t('buttons.cancel')"
@@ -69,117 +69,113 @@
   </div>
 </template>
 
-<script>
-import { mapActions, mapState, mapWritableState } from "pinia";
+<script setup lang="ts">
 import { useAuthStore } from "@/stores/auth";
 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";
-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 type { IToastError, IToastSuccess, IUser } from "@/types";
 
-export default {
-  name: "user",
-  components: {
-    UserForm,
-    Errors,
-  },
-  data: () => {
-    return {
-      error: null,
-      originalUser: null,
-      user: {},
-      createUserDir: false,
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  inject: ["$showError", "$showSuccess"],
-  computed: {
-    ...mapState(useAuthStore, { sUser: "user" }),
-    ...mapState(useLayoutStore, ["show"]),
-    ...mapWritableState(useLayoutStore, ["loading"]),
-    isNew() {
-      return this.$route.path === "/settings/users/new";
-    },
-  },
-  watch: {
-    $route: "fetchData",
-    "user.perm.admin": function () {
-      if (!this.user.perm.admin) return;
-      this.user.lockPassword = false;
-    },
-  },
-  methods: {
-    ...mapActions(useAuthStore, ["setUser"]),
-    ...mapActions(useLayoutStore, ["closeHovers", "showHover"]),
-    async fetchData() {
-      this.loading = true;
+const error = ref<any | null>(null);
+const originalUser = ref<IUser | null>(null);
+const user = ref<IUser | null>(null);
+const createUserDir = ref<boolean>(false);
 
-      try {
-        if (this.isNew) {
-          let { defaults, createUserDir } = await settings.get();
-          this.createUserDir = createUserDir;
-          this.user = {
-            ...defaults,
-            username: "",
-            passsword: "",
-            rules: [],
-            lockPassword: false,
-            id: 0,
-          };
-        } else {
-          const id = this.$route.params.id;
-          this.user = { ...(await api.get(id)) };
-        }
-      } catch (e) {
-        this.error = e;
-      } finally {
-        this.loading = false;
-      }
-    },
-    deletePrompt() {
-      this.showHover("deleteUser");
-    },
-    async deleteUser(event) {
-      event.preventDefault();
+const $showError = inject<IToastError>("$showError")!;
+const $showSuccess = inject<IToastSuccess>("$showSuccess")!;
 
-      try {
-        await api.remove(this.user.id);
-        this.$router.push({ path: "/settings/users" });
-        this.$showSuccess(this.$t("settings.userDeleted"));
-      } catch (e) {
-        e.message === "403"
-          ? this.$showError(this.$t("errors.forbidden"), false)
-          : this.$showError(e);
-      }
-    },
-    async save(event) {
-      event.preventDefault();
-      let user = {
-        ...this.originalUser,
-        ...this.user,
+const authStore = useAuthStore();
+const layoutStore = useLayoutStore();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+
+onMounted(() => {
+  fetchData();
+});
+
+const isNew = computed(() => route.path === "/settings/users/new");
+
+watch(route, () => fetchData());
+watch(user, () => {
+  if (!user.value?.perm.admin) return;
+  user.value.lockPassword = false;
+});
+
+const fetchData = async () => {
+  layoutStore.loading = true;
+
+  try {
+    if (isNew.value) {
+      let { defaults, _createUserDir } = await settings.get();
+      createUserDir.value = _createUserDir;
+      user.value = {
+        ...defaults,
+        username: "",
+        passsword: "",
+        rules: [],
+        lockPassword: false,
+        id: 0,
+      };
+    } 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;
+  }
+};
+
+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,
       };
 
-      try {
-        if (this.isNew) {
-          const loc = await api.create(user);
-          this.$router.push({ path: loc });
-          this.$showSuccess(this.$t("settings.userCreated"));
-        } else {
-          await api.update(user);
+      const loc = (await api.create(newUser)) as string;
+      router.push({ path: loc });
+      $showSuccess(t("settings.userCreated"));
+    } else {
+      await api.update(user);
 
-          if (user.id === this.sUser.id) {
-            this.setUser({ ...cloneDeep(user) });
-          }
-
-          this.$showSuccess(this.$t("settings.userUpdated"));
-        }
-      } catch (e) {
-        this.$showError(e);
+      if (user.value.id === authStore.user?.id) {
+        authStore.updateUser(user.value);
       }
-    },
-  },
+
+      $showSuccess(t("settings.userUpdated"));
+    }
+  } catch (e: any) {
+    $showError(e);
+  }
 };
 </script>
diff --git a/frontend/src/views/settings/Users.vue b/frontend/src/views/settings/Users.vue
index a60494f0..e1f96d6b 100644
--- a/frontend/src/views/settings/Users.vue
+++ b/frontend/src/views/settings/Users.vue
@@ -1,13 +1,13 @@
 <template>
   <errors v-if="error" :errorCode="error.status" />
-  <div class="row" v-else-if="!loading">
+  <div class="row" v-else-if="!layoutStore.loading">
     <div class="column">
       <div class="card">
         <div class="card-title">
-          <h2>{{ $t("settings.users") }}</h2>
+          <h2>{{ t("settings.users") }}</h2>
           <router-link to="/settings/users/new"
             ><button class="button">
-              {{ $t("buttons.new") }}
+              {{ t("buttons.new") }}
             </button></router-link
           >
         </div>
@@ -15,9 +15,9 @@
         <div class="card-content full">
           <table>
             <tr>
-              <th>{{ $t("settings.username") }}</th>
-              <th>{{ $t("settings.admin") }}</th>
-              <th>{{ $t("settings.scope") }}</th>
+              <th>{{ t("settings.username") }}</th>
+              <th>{{ t("settings.admin") }}</th>
+              <th>{{ t("settings.scope") }}</th>
               <th></th>
             </tr>
 
@@ -41,36 +41,29 @@
   </div>
 </template>
 
-<script>
-import { mapWritableState } from "pinia";
+<script setup lang="ts">
 import { useLayoutStore } from "@/stores/layout";
 import { users as api } from "@/api";
 import Errors from "@/views/Errors.vue";
+import { onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import type { IUser } from "@/types";
 
-export default {
-  name: "users",
-  components: {
-    Errors,
-  },
-  data: function () {
-    return {
-      error: null,
-      users: [],
-    };
-  },
-  async created() {
-    this.loading = true;
+const error = ref<any>(null);
+const users = ref<IUser[]>([]);
 
-    try {
-      this.users = await api.getAll();
-    } catch (e) {
-      this.error = e;
-    } finally {
-      this.loading = false;
-    }
-  },
-  computed: {
-    ...mapWritableState(useLayoutStore, ["loading"]),
-  },
-};
+const layoutStore = useLayoutStore();
+const { t } = useI18n();
+
+onMounted(async () => {
+  layoutStore.loading = true;
+
+  try {
+    users.value = await api.getAll();
+  } catch (e: any) {
+    error.value = e;
+  } finally {
+    layoutStore.loading = false;
+  }
+});
 </script>