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>

frontend/src/components/settings/Languages.vue

@@ -1,5 +1,5 @@
 <template>
-  <select v-on:change="change" :value="locale">
+  <select name="selectLanguage" v-on:change="change" :value="locale">
     <option v-for="(language, value) in locales" :key="value" :value="value">
       {{ $t("languages." + language) }}
     </option>
@@ -7,40 +7,45 @@
 </template>
 
 <script>
+import { markRaw } from "vue";
+
 export default {
   name: "languages",
   props: ["locale"],
   data() {
-    let dataObj = {
-      locales: {
-        he: "he",
-        hu: "hu",
-        ar: "ar",
-        de: "de",
-        el: "el",
-        en: "en",
-        es: "es",
-        fr: "fr",
-        is: "is",
-        it: "it",
-        ja: "ja",
-        ko: "ko",
-        "nl-be": "nlBE",
-        pl: "pl",
-        "pt-br": "ptBR",
-        pt: "pt",
-        ro: "ro",
-        ru: "ru",
-        sk: "sk",
-        "sv-se": "svSE",
-        tr: "tr",
-        ua: "ua",
-        "zh-cn": "zhCN",
-        "zh-tw": "zhTW",
-      },
+    let dataObj = {};
+    const locales = {
+      he: "he",
+      hu: "hu",
+      ar: "ar",
+      de: "de",
+      el: "el",
+      en: "en",
+      es: "es",
+      fr: "fr",
+      is: "is",
+      it: "it",
+      ja: "ja",
+      ko: "ko",
+      "nl-be": "nlBE",
+      pl: "pl",
+      "pt-br": "ptBR",
+      pt: "pt",
+      ro: "ro",
+      ru: "ru",
+      sk: "sk",
+      "sv-se": "svSE",
+      tr: "tr",
+      uk: "uk",
+      "zh-cn": "zhCN",
+      "zh-tw": "zhTW",
     };
 
+    // Vue3 reactivity breaks with this configuration
+    // so we need to use markRaw as a workaround
+    // https://github.com/vuejs/core/issues/3024
     Object.defineProperty(dataObj, "locales", {
+      value: markRaw(locales),
       configurable: false,
       writable: false,
     });

frontend/src/components/settings/Themes.vue

@@ -1,18 +1,27 @@
 <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.default") }}</option>
+    <option value="light">{{ 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: UserTheme;
+}>();
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (e: "update:theme", val: string | null): void;
+}>();
+
+const change = (event: Event) => {
+  emit("update:theme", (event.target as SelectHTMLAttributes)?.value);
 };
 </script>

frontend/src/components/settings/UserForm.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <p v-if="!isDefault">
-      <label for="username">{{ $t("settings.username") }}</label>
+    <p v-if="!isDefault && props.user !== null">
+      <label for="username">{{ t("settings.username") }}</label>
       <input
         class="input input--block"
         type="text"
@@ -11,7 +11,7 @@
     </p>
 
     <p v-if="!isDefault">
-      <label for="password">{{ $t("settings.password") }}</label>
+      <label for="password">{{ t("settings.password") }}</label>
       <input
         class="input input--block"
         type="password"
@@ -22,9 +22,9 @@
     </p>
 
     <p>
-      <label for="scope">{{ $t("settings.scope") }}</label>
+      <label for="scope">{{ t("settings.scope") }}</label>
       <input
-        :disabled="createUserDirData"
+        :disabled="createUserDirData ?? false"
         :placeholder="scopePlaceholder"
         class="input input--block"
         type="text"
@@ -34,86 +34,89 @@
     </p>
     <p class="small" v-if="displayHomeDirectoryCheckbox">
       <input type="checkbox" v-model="createUserDirData" />
-      {{ $t("settings.createUserHomeDirectory") }}
+      {{ t("settings.createUserHomeDirectory") }}
     </p>
 
     <p>
-      <label for="locale">{{ $t("settings.language") }}</label>
+      <label for="locale">{{ t("settings.language") }}</label>
       <languages
         class="input input--block"
         id="locale"
-        :locale.sync="user.locale"
+        v-model:locale="user.locale"
       ></languages>
     </p>
 
-    <p v-if="!isDefault">
+    <p v-if="!isDefault && user.perm">
       <input
         type="checkbox"
         :disabled="user.perm.admin"
         v-model="user.lockPassword"
       />
-      {{ $t("settings.lockPassword") }}
+      {{ t("settings.lockPassword") }}
     </p>
 
-    <permissions :perm.sync="user.perm" />
-    <commands v-if="isExecEnabled" :commands.sync="user.commands" />
+    <permissions v-model:perm="user.perm" />
+    <commands v-if="enableExec" v-model:commands="user.commands" />
 
     <div v-if="!isDefault">
-      <h3>{{ $t("settings.rules") }}</h3>
-      <p class="small">{{ $t("settings.rulesHelp") }}</p>
-      <rules :rules.sync="user.rules" />
+      <h3>{{ t("settings.rules") }}</h3>
+      <p class="small">{{ t("settings.rulesHelp") }}</p>
+      <rules v-model:rules="user.rules" />
     </div>
   </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";
 
-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: IUserForm;
+  isNew: boolean;
+  isDefault: boolean;
+  createUserDir?: boolean;
+}>();
+
+onMounted(() => {
+  if (props.user.scope) {
+    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>