Converted settings/User.vue & UserForm.vue to Composition api

frontend/package-lock.json

@@ -33,6 +33,7 @@
       },
       "devDependencies": {
         "@intlify/unplugin-vue-i18n": "^0.12.3",
+        "@types/lodash-es": "^4.17.9",
         "@typescript-eslint/eslint-plugin": "^6.6.0",
         "@vitejs/plugin-legacy": "^4.1.1",
         "@vitejs/plugin-vue": "^4.3.3",
@@ -2495,6 +2496,21 @@
       "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.198",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.198.tgz",
+      "integrity": "sha512-trNJ/vtMZYMLhfN45uLq4ShQSw0/S7xCTLLVM+WM1rmFpba/VS42jVUgaO3w/NOLiWR/09lnYk0yMaA/atdIsg==",
+      "dev": true
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.9.tgz",
+      "integrity": "sha512-ZTcmhiI3NNU7dEvWLZJkzG6ao49zOIjEgIE0RgV7wbPxU0f2xT3VSAHw2gmst8swH6V0YkLRGp4qPlX/6I90MQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/semver": {
       "version": "7.5.1",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.1.tgz",

frontend/package.json

@@ -39,6 +39,7 @@
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^0.12.3",
+    "@types/lodash-es": "^4.17.9",
     "@typescript-eslint/eslint-plugin": "^6.6.0",
     "@vitejs/plugin-legacy": "^4.1.1",
     "@vitejs/plugin-vue": "^4.3.3",

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,52 @@
   </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 {
+const { t } = useI18n();
-  name: "user",
+
-  data: () => {
+const createUserDirData = ref<boolean | null>(null);
-    return {
+const originalUserScope = ref<string | null>(null);
-      createUserDirData: false,
+
-      originalUserScope: "/",
+const props = defineProps<{
-    };
+  user: IUser;
-  },
+  createUserDir: boolean;
-  components: {
+  isNew: boolean;
-    Permissions,
+  isDefault: boolean;
-    Languages,
+}>();
-    Rules,
+
-    Commands,
+onMounted(() => {
-  },
+  originalUserScope.value = props.user.scope;
-  props: ["user", "createUserDir", "isNew", "isDefault"],
+  createUserDirData.value = props.createUserDir;
-  created() {
+});
-    this.originalUserScope = this.user.scope;
+
-    this.createUserDirData = this.createUserDir;
+const passwordPlaceholder = computed(() =>
-  },
+  props.isNew ? "" : t("settings.avoidChanges")
-  computed: {
+);
-    passwordPlaceholder() {
+const scopePlaceholder = computed(() =>
-      return this.isNew ? "" : this.$t("settings.avoidChanges");
+  createUserDirData.value ? t("settings.userScopeGenerationPlaceholder") : ""
-    },
+);
-    scopePlaceholder() {
+const displayHomeDirectoryCheckbox = computed(
-      return this.createUserDir
+  () => props.isNew && createUserDirData.value
-        ? this.$t("settings.userScopeGenerationPlaceholder")
+);
-        : "";
+
-    },
+watch(props.user, () => {
-    displayHomeDirectoryCheckbox() {
+  if (!props.user.perm.admin) return;
-      return this.isNew && this.createUserDir;
+  props.user.lockPassword = false;
-    },
+});
-    isExecEnabled: () => enableExec,
+
-  },
+watch(createUserDirData, () => {
-  watch: {
+  if (props.user?.scope) {
-    "user.perm.admin": function () {
+    props.user.scope = createUserDirData.value
-      if (!this.user.perm.admin) return;
+      ? ""
-      this.user.lockPassword = false;
+      : originalUserScope.value ?? "";
-    },
+  }
-    createUserDirData() {
+});
-      this.user.scope = this.createUserDirData ? "" : this.originalUserScope;
-    },
-  },
-};
 </script>

frontend/src/stores/auth.ts

@@ -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,

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-if="user?.id === 0">{{ $t("settings.newUser") }}</h2>
-          <h2 v-else>{{ $t("settings.user") }} {{ user.username }}</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,119 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapActions, mapState, mapWritableState } from "pinia";
 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";
+// @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";
 
-export default {
+const error = ref<any | null>(null);
-  name: "user",
+const originalUser = ref<IUser | null>(null);
-  components: {
+const user = ref<IUser | null>(null);
-    UserForm,
+const createUserDir = ref<boolean>(false);
-    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;
 
-      try {
+const $showError = inject("$showError") as TToast;
-        if (this.isNew) {
+const $showSuccess = inject("$showSuccess") as TToast;
-          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();
 
-      try {
+const authStore = useAuthStore();
-        await api.remove(this.user.id);
+const layoutStore = useLayoutStore();
-        this.$router.push({ path: "/settings/users" });
+const route = useRoute();
-        this.$showSuccess(this.$t("settings.userDeleted"));
+const router = useRouter();
-      } catch (e) {
+const { t } = useI18n();
-        e.message === "403"
+
-          ? this.$showError(this.$t("errors.forbidden"), false)
+onMounted(() => {
-          : this.$showError(e);
+  fetchData();
-      }
+});
-    },
+
-    async save(event) {
+const isNew = computed(() => route.path === "/settings/users/new");
-      event.preventDefault();
+
-      let user = {
+watch(route, () => fetchData());
-        ...this.originalUser,
+watch(user, () => {
-        ...this.user,
+  if (!user.value?.perm.admin) return;
+  user.value.lockPassword = false;
+});
+
+// ...mapState(useAuthStore, { sUser: "user" }),
+// ...mapState(useLayoutStore, ["show"]),
+// ...mapWritableState(useLayoutStore, ["loading"]),
+// ...mapActions(useAuthStore, ["setUser"]),
+// ...mapActions(useLayoutStore, ["closeHovers", "showHover"]),
+
+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;
+  }
+};
 
-      try {
+const deletePrompt = () => layoutStore.showHover("deleteUser");
-        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);
 
-          if (user.id === this.sUser.id) {
+const deleteUser = async (e: Event) => {
-            this.setUser({ ...cloneDeep(user) });
+  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;
+  }
+  let newUser: IUser = {
+    ...originalUser.value,
+    ...user.value,
+  };
 
-          this.$showSuccess(this.$t("settings.userUpdated"));
+  try {
-        }
+    if (isNew.value) {
-      } catch (e) {
+      const loc = (await api.create(newUser)) as string;
-        this.$showError(e);
+      router.push({ path: loc });
+      $showSuccess(t("settings.userCreated"));
+    } else {
+      await api.update(user);
+
+      if (user.value.id === authStore.user?.id) {
+        authStore.setUser({ ...cloneDeep(user) });
       }
-    },
+
-  },
+      $showSuccess(t("settings.userUpdated"));
+    }
+  } catch (e: any) {
+    $showError(e);
+  }
 };
 </script>