diff --git a/components/create-character/CChar-Form-1.vue b/components/create-character/CChar-Form-1.vue
index 013e38c..a90f2d2 100644
--- a/components/create-character/CChar-Form-1.vue
+++ b/components/create-character/CChar-Form-1.vue
@@ -2,7 +2,7 @@
@@ -161,6 +142,7 @@ async function onSubmit(event: FormSubmitEvent) {
@@ -179,6 +161,7 @@ async function onSubmit(event: FormSubmitEvent) {
import type { FormError, FormSubmitEvent } from "#ui/types";
-import { useAuthStore } from "#imports";
+import { useAuthStore, useFormStore } from "#imports";
type CharacterForm = {
hair: string;
skin: string;
eyes: string;
- height: string;
+ height: number;
weight: number;
age: number;
gender: string;
};
+const config = useRuntimeConfig();
const authStore = useAuthStore();
+const formStore = useFormStore();
const toast = useToast();
const router = useRouter();
@@ -42,8 +44,8 @@ const validate = (state: CharacterForm): FormError[] => {
errors.push({ path: "skin", message: "Must be less than 25 characters" });
if (state.eyes && state.eyes.length > 25)
errors.push({ path: "eyes", message: "Must be less than 25 characters" });
- if (state.height && state.height.length > 25)
- errors.push({ path: "height", message: "Must be less than 25 characters" });
+ if (state.height && state.height < 1)
+ errors.push({ path: "height", message: "Must be at least 12 inches" });
if (state.gender && state.gender.length > 25)
errors.push({ path: "gender", message: "Must be less than 25 characters" });
if (state.age && state.age < 1)
@@ -53,35 +55,44 @@ const validate = (state: CharacterForm): FormError[] => {
return errors;
};
+function updateFormStore(fields: CharacterForm) {
+ Object.entries(fields).forEach(([field, value]) => {
+ formStore.updateFormField(field, value);
+ });
+}
+
async function goBack() {
await authStore.ensureValidToken();
router.back();
}
async function onSubmit(event: FormSubmitEvent) {
+ const uuid = "506bdf8b-4906-48ea-ad18-4e65a8a02e59";
+ const eventData = {
+ hair: event.data.hair,
+ skin: event.data.skin,
+ eyes: event.data.eyes,
+ age: event.data.age,
+ height: event.data.height,
+ weight: event.data.weight,
+ gender: event.data.gender,
+ };
disabled.value = true;
loading.value = true;
await authStore.ensureValidToken();
+ updateFormStore(eventData);
try {
const response = await $fetch<{
status: string;
message: string;
data: CharacterForm;
- }>("https://httpbin.org/post", {
+ }>(config.public.baseURL + "/campaign/" + uuid + "/character/create", {
method: "POST",
headers: {
Authorization: `Bearer ${authStore.token}`,
"Content-Type": "application/json",
},
- body: {
- hair: event.data.hair,
- skin: event.data.skin,
- eyes: event.data.eyes,
- age: event.data.age,
- height: event.data.height,
- weight: event.data.weight,
- gender: event.data.gender,
- },
+ body: formStore.formData,
});
console.log(response);
toast.add({
@@ -127,8 +138,8 @@ async function onSubmit(event: FormSubmitEvent) {
-
-
+
+
diff --git a/stores/formStore.ts b/stores/formStore.ts
new file mode 100644
index 0000000..03a20ba
--- /dev/null
+++ b/stores/formStore.ts
@@ -0,0 +1,16 @@
+import { defineStore } from "pinia";
+
+type FormData = {
+ [key: string]: string | number;
+}
+
+export const useFormStore = defineStore('form', {
+ state: (): { formData: FormData } => ({
+ formData: {}
+ }),
+ actions: {
+ updateFormField(field: string, value: string | number) {
+ this.formData[field] = value;
+ }
+ }
+ });