@fy-/fws-vue 0.3.67 → 0.3.68

package/components/fws/UserData.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import useVuelidate from "@vuelidate/core";
+import DefaultInput from "../ui/DefaultInput.vue";
+import { useUserStore } from "../../stores/user";
+import { useRest } from "../../composables/rest";
+import { computed, reactive, watchEffect } from "vue";
+import { required } from "@vuelidate/validators";
+const rest = useRest();
+const userStore = useUserStore();
+const userData = computed(() => userStore.user);
+const state = reactive({
+  userData: {
+    Firstname: userData.value?.Firstname || "",
+    Lastname: userData.value?.Lastname || "",
+    Phone: userData.value?.Phone || "",
+    Bio: userData.value?.Bio || "",
+    Username: userData.value?.Username || "",
+  },
+});
+watchEffect(() => {
+  state.userData = {
+    Firstname: userData.value?.Firstname || "",
+    Lastname: userData.value?.Lastname || "",
+    Phone: userData.value?.Phone || "",
+    Bio: userData.value?.Bio || "",
+    Username: userData.value?.Username || "",
+  };
+});
+const rules = {
+  userData: {
+    Username: {
+      required: required,
+    },
+    Firstname: {},
+    Lastname: {},
+    Phone: {},
+    Bio: {},
+  },
+};
+const v$ = useVuelidate(rules, state);
+
+const patchUser = async () => {
+  if (await v$.value.userData.$validate()) {
+    const response = await rest("User", "PATCH", state.userData);
+    if (response && response.result == "success") {
+      window.location.reload();
+    }
+  }
+};
+</script>
+
+<template>
+  <form @submit.prevent="patchUser">
+    <DefaultInput
+      id="usernameFWS"
+      v-model="state.userData.Username"
+      class="mb-4"
+      type="text"
+      :label="$t('fws_username_label')"
+      :help="$t('fws_username_help')"
+      :error-vuelidate="v$.userData.Username.$errors"
+      :req="true"
+    />
+    <DefaultInput
+      id="firstnameFWS"
+      v-model="state.userData.Firstname"
+      class="mb-4"
+      type="text"
+      :label="$t('fws_firstname_label')"
+      :help="$t('fws_firstname_help')"
+      :error-vuelidate="v$.userData.Firstname.$errors"
+    />
+    <DefaultInput
+      id="lastnameFWS"
+      v-model="state.userData.Lastname"
+      class="mb-4"
+      type="text"
+      :label="$t('fws_lastname_label')"
+      :help="$t('fws_lastname_help')"
+      :error-vuelidate="v$.userData.Lastname.$errors"
+    />
+    <DefaultInput
+      id="phoneFWS"
+      v-model="state.userData.Phone"
+      class="mb-4"
+      type="text"
+      :label="$t('fws_phone_label')"
+      :help="$t('fws_phone_help')"
+      :error-vuelidate="v$.userData.Phone.$errors"
+    />
+    <div class="flex">
+      <button type="submit" class="btn defaults primary">
+        {{ $t("fws_save_user_cta") }}
+      </button>
+    </div>
+  </form>
+</template>

package/env.d.ts

@@ -4,5 +4,3 @@ declare module "*.vue" {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
-
-declare module "./presets/Wind";

package/index.ts

@@ -50,6 +50,7 @@ import FilterData from "./components/fws/FilterData.vue";
 import CmsArticleBoxed from "./components/fws/CmsArticleBoxed.vue";
 import CmsArticleSingle from "./components/fws/CmsArticleSingle.vue";
 import UserOAuth2 from "./components/fws/UserOAuth2.vue";
+import UserData from "./components/fws/UserData.vue";
 // Css
 import "./style.css";
 
@@ -139,4 +140,5 @@ export {
   FilterData,
   CmsArticleBoxed,
   CmsArticleSingle,
+  UserData,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "0.3.67",
+  "version": "0.3.68",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {

package/stores/user.ts

@@ -23,7 +23,6 @@ export const useUserStore = defineStore({
   actions: {
     async refreshUser() {
       const user: APIResult = await rest("User:get", "GET").catch((err) => {
-        console.log(err);
         this.setUser(null);
       });
       if (user.result === "success") {