Update PwdFormInput to Formsnap

src/lib/PwdFormInput.svelte

@@ -1,16 +1,30 @@
-<script lang="ts">
+<script lang="ts" generics="T extends Record<string, unknown>">
+  import { Field, Control, FieldErrors } from "formsnap";
+  import type { FormPath, SuperForm } from "sveltekit-superforms";
   import Icon from "@iconify/svelte";
 
-  let { value = $bindable(), label, class: className = '', ...props } = $props();
+  let { form, label, name }: {
+    form: SuperForm<T>,
+    label: string,
+    name: FormPath<T>,
+  } = $props();
+  const formData = form.form;
 
   let show = $state(false);
-  let inputType = $derived(show ? 'text' : 'password');
+  let type = $derived(show ? 'text' : 'password');
+
 </script>
 
+<div>
+  <Field {form} {name}>
+    <Control>
+      {#snippet children({ props })}
         <div class="flex w-full gap-1">
           <label class="label floating-label w-full">
             <span>{label}</span>
-    <input type={inputType} class={["input w-full", className]} placeholder={label} {...props} bind:value={value}/>
+            <input {type} class="input w-full aria-[invalid]:input-error" placeholder={label}
+                   bind:value={$formData[name]} {...props}
+            />
           </label>
           <button class="btn btn-circle" onclick={() => show = !show}>
             {#if show}
@@ -20,3 +34,14 @@
             {/if}
           </button>
         </div>
+      {/snippet}
+    </Control>
+    <FieldErrors>
+      {#snippet children({ errors, errorProps })}
+        {#each errors as err, idx (idx)}
+          <p class="text-error" {...errorProps}>{err}</p>
+        {/each}
+      {/snippet}
+    </FieldErrors>
+  </Field>
+</div>

src/routes/user/create/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { superForm } from 'sveltekit-superforms';
   import { arktypeClient } from 'sveltekit-superforms/adapters';
-  import { Field, Control, FieldErrors } from "formsnap";
   import PwdFormInput from "$lib/PwdFormInput.svelte";
   import { schema } from './schema';
   import FormInput from "$lib/FormInput.svelte";
@@ -11,7 +10,7 @@
     validators: arktypeClient(schema),
     resetForm: false,
   });
-  const { form: formData, errors, constraints, message, enhance } = form;
+  const { message, enhance } = form;
 </script>
 
 <div>
@@ -20,56 +19,16 @@
     <form class="fieldset mt-4 bg-base-200 border border-base-300 p-4 rounded-box gap-4" method="POST" use:enhance>
       <h1 class="card-title">Create User</h1>
       <div>
-        <Field {form} name="username">
-          <Control>
-            {#snippet children({ props })}
-              <label class="label floating-label w-full">
-                <span>Username</span>
-                <input type="text" class="input w-full aria-[invalid]:input-error" placeholder="Username"
-                       bind:value={$formData.username} {...props}
-                />
-              </label>
-            {/snippet}
-          </Control>
-          <FieldErrors>
-            {#snippet children({ errors, errorProps })}
-              {#each errors as err, idx (idx)}
-                <p class="text-error" {...errorProps}>{err}</p>
-              {/each}
-            {/snippet}
-          </FieldErrors>
-        </Field>
+        <FormInput {form} type="text" label="Username" name="username"/>
       </div>
       <div>
         <FormInput {form} type="email" label="Email" name="email"/>
-        <!--      <label class="label floating-label w-full">-->
-        <!--        <span>Email</span>-->
-        <!--        <input type="email" class={["input w-full", $errors['email'] && 'input-error']} placeholder="Email"-->
-        <!--               name="email"-->
-        <!--               aria-invalid={$errors['email'] ? 'true' : undefined}-->
-        <!--               bind:value={$formData.email}-->
-        <!--               {...$constraints.email}-->
-        <!--        />-->
-        <!--      </label>-->
-        <!--      <p class="text-error">{$errors['email'] ?? ''}</p>-->
       </div>
       <div>
-        <PwdFormInput label="Password" autocomplete="new-password" name="password"
-                      class={$errors['password'] && 'input-error'}
-                      aria-invalid={$errors['password'] ? 'true' : undefined}
-                      bind:value={$formData.password}
-                      {...$constraints.password}
-        />
-        <p class="text-error">{$errors['password'] ?? ''}</p>
+        <PwdFormInput {form} label="Password" name="password"/>
       </div>
       <div>
-        <PwdFormInput label="Re-insert password" autocomplete="new-password" name="confirmPassword"
-                      class={$errors['confirmPassword'] && 'input-error'}
-                      aria-invalid={$errors['confirmPassword'] ? 'true' : undefined}
-                      bind:value={$formData.confirmPassword}
-                      {...$constraints.confirmPassword}
-        />
-        <p class="text-error">{$errors['confirmPassword'] ?? ''}</p>
+        <PwdFormInput {form} label="Re-insert password" name="confirmPassword"/>
       </div>
       <label class="label">
         <span>RossiniEnergy Staff</span>