Convert views/settings/Profile.vue to composition api + ts

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,107 @@
   </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 } 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";
 
-export default {
+const layoutStore = useLayoutStore();
-  name: "settings",
+const authStore = useAuthStore();
-  components: {
+const { t } = useI18n();
-    Languages,
+
-  },
+const $showError = inject("$showError") as TToast;
-  data: function () {
+const $showSuccess = inject("$showSuccess") as TToast;
-    return {
+
-      password: "",
+const password = ref<string>("");
-      passwordConf: "",
+const passwordConf = ref<string>("");
-      hideDotfiles: false,
+const hideDotfiles = ref<boolean>(false);
-      singleClick: false,
+const singleClick = ref<boolean>(false);
-      dateFormat: false,
+const dateFormat = ref<boolean>(false);
-      locale: "",
+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,
     };
-  },
+    // TODO don't know what this is doing
-  inject: ["$showError", "$showSuccess"],
+    const shouldReload = false;
-  computed: {
+    // rtlLanguages.includes(data.locale) !==
-    ...mapState(useAuthStore, ["user"]),
+    // rtlLanguages.includes(i18n.locale);
-    ...mapWritableState(useLayoutStore, ["loading"]),
+    await api.update(data, [
-    passwordClass() {
+      "locale",
-      const baseClass = "input input--block";
+      "hideDotfiles",
-
+      "singleClick",
-      if (this.password === "" && this.passwordConf === "") {
+      "dateFormat",
-        return baseClass;
+    ]);
-      }
+    authStore.updateUser(data);
-
+    if (shouldReload) {
-      if (this.password === this.passwordConf) {
+      location.reload();
-        return `${baseClass} input--green`;
+    }
-      }
+    $showSuccess(t("settings.settingsUpdated"));
-
+  } catch (e: any) {
-      return `${baseClass} input--red`;
+    $showError(e);
-    },
+  }
-  },
-  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);
-      }
-    },
-  },
 };
 </script>