feat: refactoring, soem work on forms

islands/PasswordConfirmationFields.tsx

@@ -0,0 +1,67 @@
+import { useRef, useState } from "preact/hooks";
+
+const mismatchMessage = "Passwords do not match.";
+
+export default function PasswordConfirmationFields() {
+  const [password, setPassword] = useState("");
+  const [passwordConfirm, setPasswordConfirm] = useState("");
+  const confirmInput = useRef<HTMLInputElement>(null);
+  const passwordsDoNotMatch = passwordConfirm.length > 0 &&
+    password !== passwordConfirm;
+
+  function updatePassword(value: string) {
+    setPassword(value);
+    const confirmation = confirmInput.current;
+    if (confirmation) {
+      confirmation.setCustomValidity(
+        confirmation.value && value !== confirmation.value
+          ? mismatchMessage
+          : "",
+      );
+    }
+  }
+
+  function updatePasswordConfirm(value: string) {
+    setPasswordConfirm(value);
+    confirmInput.current?.setCustomValidity(
+      value && password !== value ? mismatchMessage : "",
+    );
+  }
+
+  return (
+    <div class="grid grid-cols-2 gap-4">
+      <input
+        type="password"
+        name="password"
+        placeholder="Password"
+        class="input min-w-0 flex-1"
+        autocomplete="new-password"
+        minLength={8}
+        required
+        value={password}
+        onInput={(event) => updatePassword(event.currentTarget.value)}
+      />
+      <div class="min-w-0 flex-1">
+        <input
+          ref={confirmInput}
+          type="password"
+          name="passwordConfirm"
+          placeholder="Confirm"
+          class="input w-full"
+          autocomplete="new-password"
+          minLength={8}
+          required
+          value={passwordConfirm}
+          aria-invalid={passwordsDoNotMatch}
+          aria-describedby="password-confirm-error"
+          onInput={(event) => updatePasswordConfirm(event.currentTarget.value)}
+        />
+        {passwordsDoNotMatch && (
+          <p id="password-confirm-error" class="mt-1 text-sm text-error">
+            {mismatchMessage}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}