From efcee593a063a2b6e02aa6b21151068bcface117 Mon Sep 17 00:00:00 2001
From: Tom Slanda <jesus_slanda@yahoo.com>
Date: Fri, 20 Sep 2024 15:30:49 -0400
Subject: [PATCH] added last name input (#20)

Co-authored-by: Tom Slanda <tomslanda@Toms-Laptop-121.local>
---
 .prettierrc                                  |  3 ++
 components/create-character/CChar-Form-1.vue | 37 +++++++++++++++-----
 package-lock.json                            |  6 ++--
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index e69de29..6aa114f 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+    "singleAttributePerLine": false
+  }
\ No newline at end of file
diff --git a/components/create-character/CChar-Form-1.vue b/components/create-character/CChar-Form-1.vue
index a90f2d2..9a715be 100644
--- a/components/create-character/CChar-Form-1.vue
+++ b/components/create-character/CChar-Form-1.vue
@@ -5,7 +5,8 @@ import type { FormError, FormSubmitEvent } from "#ui/types";
 import { useAuthStore, useFormStore } from "#imports";
 
 type CharacterForm = {
-  name: string;
+  firstName: string;
+  lastName: string;
   ruleset: string;
   class: string;
   alignment: string;
@@ -77,7 +78,8 @@ const races = [
 ];
 
 const state = reactive({
-  name: undefined,
+  firstName: undefined,
+  lastName: undefined,
   ruleset: "5e",
   class: undefined,
   alignment: undefined,
@@ -90,9 +92,18 @@ const buttonText = ref("Next Step: Appearance");
 
 const validate = (state: CharacterForm): FormError[] => {
   const errors = [];
-  if (!state.name) errors.push({ path: "name", message: "Required" });
-  if (state.name && state.name.length > 25)
-    errors.push({ path: "name", message: "Must be less than 25 characters" });
+  if (!state.firstName) errors.push({ path: "firstName", message: "Required" });
+  if (state.firstName && state.firstName.length > 25)
+    errors.push({
+      path: "firstName",
+      message: "Must be less than 25 characters",
+    });
+  if (!state.lastName) errors.push({ path: "lastName", message: "Required" });
+  if (state.lastName && state.lastName.length > 25)
+    errors.push({
+      path: "firstName",
+      message: "Must be less than 25 characters",
+    });
   if (!state.alignment) errors.push({ path: "alignment", message: "Required" });
   return errors;
 };
@@ -105,7 +116,8 @@ function updateFormStore(fields: CharacterForm) {
 
 async function onSubmit(event: FormSubmitEvent<CharacterForm>) {
   const eventData = {
-    name: event.data.name,
+    firstName: event.data.firstName,
+    lastName: event.data.lastName,
     ruleset: event.data.ruleset,
     class: event.data.class,
     alignment: event.data.alignment,
@@ -121,9 +133,18 @@ async function onSubmit(event: FormSubmitEvent<CharacterForm>) {
 
 <template>
   <UForm :validate="validate" :state="state" @submit.prevent="onSubmit">
-    <UFormGroup label="Character Name" name="name" class="mb-4">
+    <UFormGroup label="Character First Name" name="firstName" class="mb-4">
       <UInput
-        v-model="state.name"
+        v-model="state.firstName"
+        placeholder="Must be less than 25 characters"
+        :disabled="disabled"
+        type="text"
+        required
+      />
+    </UFormGroup>
+    <UFormGroup label="Character Last Name" name="lastName" class="mb-4">
+      <UInput
+        v-model="state.lastName"
         placeholder="Must be less than 25 characters"
         :disabled="disabled"
         type="text"
diff --git a/package-lock.json b/package-lock.json
index a594f58..5848535 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12704,9 +12704,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.3.tgz",
-      "integrity": "sha512-IH+nl64eq9lJjFqU+/yrRnrHPVTlgy42/+IzbOdaFDVlyLgI/wDlf+FCobXLX1cT0X5+7LMyH1mIy2xJdLfo8Q==",
+      "version": "5.4.7",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.7.tgz",
+      "integrity": "sha512-5l2zxqMEPVENgvzTuBpHer2awaetimj2BGkhBPdnwKbPNOlHsODU+oiazEZzLK7KhAnOrO+XGYJYn4ZlUhDtDQ==",
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",