Merge pull request #33 from CharlBest/limit-input-field-text-length

Add max 50 character limit to text input fields
CriticalMoments · Mar 12, 2024 · 7de7216 · 7de7216
2 parents dcaa344 + 01e1244
commit 7de7216
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 0 deletions.
diff --git a/src/routes/(admin)/account/(menu)/settings/edit_profile/+page.svelte b/src/routes/(admin)/account/(menu)/settings/edit_profile/+page.svelte
@@ -28,16 +28,19 @@
       label: "Name",
       initialValue: profile?.full_name ?? "",
       placeholder: "Your full name",
+      maxlength: 50,
     },
     {
       id: "companyName",
       label: "Company Name",
       initialValue: profile?.company_name ?? "",
+      maxlength: 50,
     },
     {
       id: "website",
       label: "Company Website",
       initialValue: profile?.website ?? "",
+      maxlength: 50,
     },
   ]}
 />
diff --git a/src/routes/(admin)/account/(menu)/settings/settings_module.svelte b/src/routes/(admin)/account/(menu)/settings/settings_module.svelte
@@ -18,6 +18,7 @@
     label?: string
     initialValue: string | boolean
     placeholder?: string
+    maxlength?: number
   }
 
   // Module context
@@ -96,6 +97,7 @@
                 ? 'input-error'
                 : ''} input-sm mt-1 input input-bordered w-full max-w-xs mb-3 text-base py-4"
               value={$page.form ? $page.form[field.id] : field.initialValue}
+              maxlength={field.maxlength ? `${field.maxlength}` : null}
             />
           {:else}
             <div class="text-lg mb-3">{field.initialValue}</div>

diff --git a/src/routes/(admin)/account/api/+page.server.ts b/src/routes/(admin)/account/api/+page.server.ts
@@ -203,20 +203,30 @@ export const actions = {
     const website = formData.get("website") as string
 
     let validationError
+    const fieldMaxTextLength = 50
     const errorFields = []
     if (!fullName) {
       validationError = "Name is required"
       errorFields.push("fullName")
+    } else if (fullName.length > fieldMaxTextLength) {
+      validationError = `Name must be less than ${fieldMaxTextLength} characters`
+      errorFields.push("fullName")
     }
     if (!companyName) {
       validationError =
         "Company name is required. If this is a hobby project or personal app, please put your name."
       errorFields.push("companyName")
+    } else if (companyName.length > fieldMaxTextLength) {
+      validationError = `Company name must be less than ${fieldMaxTextLength} characters`
+      errorFields.push("companyName")
     }
     if (!website) {
       validationError =
         "Company website is required. An app store URL is a good alternative if you don't have a website."
       errorFields.push("website")
+    } else if (website.length > fieldMaxTextLength) {
+      validationError = `Company website must be less than ${fieldMaxTextLength} characters`
+      errorFields.push("website")
     }
     if (validationError) {
       return fail(400, {

diff --git a/src/routes/(admin)/account/create_profile/+page.svelte b/src/routes/(admin)/account/create_profile/+page.svelte
@@ -57,6 +57,7 @@
               ? 'input-error'
               : ''} mt-1 input input-bordered w-full max-w-xs"
             value={form?.fullName ?? fullName}
+            maxlength="50"
           />
         </div>
 
@@ -73,6 +74,7 @@
               ? 'input-error'
               : ''} mt-1 input input-bordered w-full max-w-xs"
             value={form?.companyName ?? companyName}
+            maxlength="50"
           />
         </div>
 
@@ -89,6 +91,7 @@
               ? 'input-error'
               : ''} mt-1 input input-bordered w-full max-w-xs"
             value={form?.website ?? website}
+            maxlength="50"
           />
         </div>