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/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>