feat: add profile form to profile page

packages/vue-user/src/api/user/index.ts

@@ -1,6 +1,6 @@
 import client from "../axios";
 
-import type { UserType } from "../../types";
+import type { UpdateProfileInputType, UserType } from "../../types";
 
 export const getMe = async (
   apiBaseUrl: string,
@@ -15,3 +15,18 @@ export const getMe = async (
     return response;
   }
 };
+
+export const updateUserProfile = async (
+  data: UpdateProfileInputType,
+  apiBaseUrl: string,
+): Promise<{ data: UserType }> => {
+  const response = await client(apiBaseUrl).put(`me`, data, {
+    withCredentials: true,
+  });
+
+  if ("error" in response.data) {
+    throw new Error(response.data.message);
+  } else {
+    return response;
+  }
+};

packages/vue-user/src/components/index.ts

@@ -6,6 +6,7 @@ export { default as InvitationModal } from "./invitation/InvitationModal.vue";
 export { default as LoginForm } from "./LoginForm.vue";
 export { default as PasswordResetForm } from "./PasswordResetForm.vue";
 export { default as PasswordResetRequestForm } from "./PasswordResetRequestForm.vue";
+export { default as ProfileForm } from "./profile/ProfileForm.vue";
 export { default as SignInUpMenu } from "./SignInUpMenu.vue";
 export { default as SignupForm } from "./SignupForm.vue";
 export { default as TermsAndConditions } from "./TermsAndConditions.vue";

packages/vue-user/src/components/profile/ProfileForm.vue

@@ -0,0 +1,98 @@
+<template>
+  <Form ref="dzangolabVueUpdateProfile" class="profile-form" @submit="onSubmit">
+    <Input
+      v-model="formValues.givenName"
+      :label="t('user.profile.form.firstName.label')"
+      :placeholder="t('user.profile.form.firstName.placeholder')"
+      name="givenName"
+      type="text"
+    />
+
+    <Input
+      v-model="formValues.surname"
+      :label="t('user.profile.form.lastName.label')"
+      :placeholder="t('user.profile.form.lastName.placeholder')"
+      name="surname"
+      type="text"
+    />
+
+    <FormActions
+      :loading="loading || !isDirty"
+      @cancel="dzangolabVueUpdateProfile.resetForm()"
+    />
+  </Form>
+</template>
+
+<script lang="ts">
+export default {
+  name: "ProfileForm",
+};
+</script>
+
+<script setup lang="ts">
+import { useConfig } from "@dzangolab/vue3-config";
+import { Input, Form, FormActions } from "@dzangolab/vue3-form";
+import { useI18n } from "@dzangolab/vue3-i18n";
+import { storeToRefs } from "pinia";
+import { computed, reactive, ref } from "vue";
+
+import { updateUserProfile } from "../../api/user";
+import { emitter, useTranslations } from "../../index";
+import useUserStore from "../../store";
+
+import type { UpdateProfileInputType } from "../../types";
+
+const config = useConfig();
+
+const messages = useTranslations();
+const { t } = useI18n({ messages });
+
+const userStore = useUserStore();
+const setUser = userStore.setUser;
+const { user } = storeToRefs(userStore);
+
+const formValues = reactive({
+  givenName: user.value?.givenName || "",
+  surname: user.value?.surname || "",
+});
+
+const dzangolabVueUpdateProfile = ref();
+const loading = ref<boolean>(false);
+
+const isDirty = computed(() => {
+  return (
+    formValues.givenName !== user.value?.givenName ||
+    formValues.surname !== user.value?.surname
+  );
+});
+
+const onSubmit = async (data: UpdateProfileInputType) => {
+  loading.value = true;
+
+  updateUserProfile(data, config.apiBaseUrl)
+    .then((response) => {
+      if ("data" in response) {
+        emitter.emit("notify", {
+          text: t("user.profile.form.messages.success"),
+          type: "success",
+        });
+
+        setUser(response.data);
+      } else {
+        emitter.emit("notify", {
+          text: t("user.profile.form.messages.error"),
+          type: "error",
+        });
+      }
+    })
+    .catch(() => {
+      emitter.emit("notify", {
+        text: t("user.profile.form.messages.error"),
+        type: "error",
+      });
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+</script>

packages/vue-user/src/locales/messages.json

@@ -165,6 +165,20 @@
           },
           "title": "Update email"
         },
+        "form": {
+          "firstName": {
+            "label": "First name",
+            "placeholder": "Enter your first name"
+          },
+          "lastName": {
+            "label": "Last name",
+            "placeholder": "Enter your last name"
+          },
+          "messages": {
+            "error": "Something went wrong. Please try again",
+            "success": "Profile updated successfully"
+          }
+        },
         "title": "Profile"
       },
       "signup": {
@@ -373,7 +387,21 @@
           },
           "title": "Update email"
         },
-        "title": "Profil"
+        "form": {
+          "firstName": {
+            "label": "First name",
+            "placeholder": "Enter your first name"
+          },
+          "lastName": {
+            "label": "Last name",
+            "placeholder": "Enter your last name"
+          },
+          "messages": {
+            "error": "Something went wrong. Please try again",
+            "success": "Profile updated successfully"
+          }
+        },
+      "title": "Profil"
       },
       "signup": {
         "errors": {

packages/vue-user/src/types/auth.ts

@@ -27,6 +27,12 @@ interface UpdatePasswordPayload {
   newPassword: string;
 }
 
+type UpdateProfileInputType = {
+  email: string;
+  givenName: string;
+  surname: string;
+};
+
 interface User extends EmailPasswordUserType {
   //usertype and emailusertype are same one type with different name in different recipe
   email: string;
@@ -55,6 +61,7 @@ export type {
   PasswordResetPayload,
   PasswordResetRequestPayload,
   UpdatePasswordPayload,
+  UpdateProfileInputType,
   User,
   UserType,
 };

packages/vue-user/src/types/index.ts

@@ -4,6 +4,7 @@ export type {
   PasswordResetPayload,
   PasswordResetRequestPayload,
   UpdatePasswordPayload,
+  UpdateProfileInputType,
   User,
   UserType,
 } from "./auth";

packages/vue-user/src/views/Profile.vue

@@ -1,6 +1,7 @@
 <template>
   <Page :title="t('user.profile.title')" class="profile">
     <AccountInfo />
+    <ProfileForm />
   </Page>
 </template>
 
@@ -15,9 +16,18 @@ import { useI18n } from "@dzangolab/vue3-i18n";
 import { Page } from "@dzangolab/vue3-ui";
 
 import AccountInfo from "../components/profile/AccountInfo.vue";
+import ProfileForm from "../components/profile/ProfileForm.vue";
 import { useTranslations } from "../index";
 
 const messages = useTranslations();
 
 const { t } = useI18n({ messages });
 </script>
+
+<style lang="css">
+.page.profile > main {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>

packages/vue-user/src/views/__test__/snapshot/Profile.test.ts

@@ -34,6 +34,7 @@ describe("Profile", () => {
         stubs: {
           RouterLink: RouterLinkStub,
           AccountInfo: true,
+          profileForm: true,
         },
       },
     });

packages/vue-user/src/views/__test__/snapshot/__snapshots__/Profile.test.ts.snap

@@ -17,6 +17,7 @@ exports[`Profile > matches snapshot in en 1`] = `
   <main>
     
     <account-info-stub />
+    <profile-form-stub />
     
   </main>
 </div>
@@ -39,6 +40,7 @@ exports[`Profile > matches snapshot in fr 1`] = `
   <main>
     
     <account-info-stub />
+    <profile-form-stub />
     
   </main>
 </div>