fix(auth form): initial values

src/components/organisms/AtAuthForm/AtAuthForm.spec.js

@@ -4,7 +4,7 @@
 import userEvent from "@testing-library/user-event";
 import { render, screen, fireEvent } from "@testing-library/vue";
 import { describe, expect, it } from "vitest";
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 import AuthForm from "./AtAuthForm.vue";
 
 describe("AuthForm component", () => {
@@ -92,9 +92,57 @@ describe("AuthForm component", () => {
     });
   });
 
-  it("Should render the component register", async () => {
+  it("Should change email on initial value change", async () => {
+    const initialValues = ref({
+      email: "",
+    });
+
+    const email = "[email protected]";
+
+    const component = render(AuthForm, {
+      props: {
+        mode: "register",
+        initialValues: initialValues,
+        config: {
+          email: {
+            disabled: true
+          }
+        }
+      },
+    });
+
+    initialValues.value.email = email;
+    const inputEmail = await component.findByTestId("input-email");
+    expect(inputEmail.value).toBe(email);
+  });
+  it("Should disable email on config set", async () => {
+    const initialValues = ref({
+      email: "",
+    });
+
+    const email = "[email protected]";
+
+    const component = render(AuthForm, {
+      props: {
+        mode: "register",
+        initialValues: initialValues,
+        config: {
+          email: {
+            disabled: true
+          }
+        }
+      },
+    });
+
+    initialValues.value.email = email;
+    const inputEmail = await component.findByTestId("input-email");
+    await userEvent.type(inputEmail, "[email protected]")
+    expect(inputEmail.value).toBe(email);
+  });
+
+  it("Should disable email after initialization in register", async () => {
     const initialValues = reactive({
-      email: "[email protected]",
+      email: "",
     });
 
     const component = render(AuthForm, {
@@ -103,6 +151,8 @@ describe("AuthForm component", () => {
       },
     });
 
+    initialValues.email = "[email protected]"
+
     component.findByText("[email protected]");
     initialValues.email = "[email protected]";
     component.findByText("[email protected]");

src/components/organisms/AtAuthForm/AtAuthForm.vue

@@ -1,9 +1,6 @@
 <template>
   <form @submit.prevent="loginUser()">
-    <div
-      class="flex items-center justify-center w-full"
-      :class="brandContainerClass"
-    >
+    <div class="flex items-center justify-center w-full" :class="brandContainerClass">
       <div
         class="text-6xl text-center cursor-pointer brand-font"
         @click="$emit('home-pressed')"
@@ -20,6 +17,8 @@
         <component
           :is="AtInput"
           v-model.trim="formData.email"
+          v-bind="getFieldConfig('email')"
+          :disabled="true"
           data-testid="input-email"
           required
         />
@@ -28,12 +27,7 @@
         </template>
       </component>
 
-      <component
-        :is="AtField"
-        field="password"
-        label="Password"
-        :errors="errors"
-      >
+      <component :is="AtField" field="password" label="Password" :errors="errors">
         <component
           :is="AtInputPassword"
           data-testid="input-password"
@@ -103,7 +97,7 @@
   </form>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { reactive, computed, toRefs, provide, watch } from "vue";
 import AtButton from "../../atoms/AtButton/AtButton.vue";
 import AtField from "../../atoms/AtField/AtField.vue";
@@ -113,6 +107,8 @@ import AtInputPassword from "../../molecules/AtInputPassword/AtInputPassword.vue
 
 const emit = defineEmits({
   submit: null,
+  "link-pressed": null,
+  "home-pressed": null
 });
 
 const props = defineProps({
@@ -209,10 +205,7 @@ const state = reactive({
   }),
 
   linkLabel: computed(() => {
-    return (
-      props.customLinkLabel ??
-      (mode.value == "register" ? "Login" : "Create One")
-    );
+    return props.customLinkLabel ?? (mode.value == "register" ? "Login" : "Create One");
   }),
   // validation
   isDirty: false,
@@ -225,21 +218,28 @@ const state = reactive({
   }),
 });
 
+
+const getFieldConfig = (field: string) => {
+  return props.config?.[field] ?? {};
+} 
+
 watch(
   initialValues,
   (formValues) => {
+   
     Object.keys(state.formData).forEach((key) => {
       const fieldConfig = props.config?.[key];
-      if (
-        fieldConfig &&
-        state.formData[key] !== formValues[fieldConfig.mapper || key]
-      ) {
-        state.formData[key] = formValues[fieldConfig.mapper || key];
+      let fieldName = key
+      if (fieldConfig && state.formData[key] !== formValues[fieldConfig.mapper || key]) {
+        fieldName = fieldConfig.mapper || key
       }
+
+      state.formData[key] = formValues[fieldName] ?? "";
     });
   },
   {
     immediate: true,
+    deep: true
   }
 );