Bind the password form (#15748)

melohagan · web-flow · commit e705a23b74b7 · 2025-03-14T14:24:07.000Z
* Bind the password form

* Type fixes
diff --git a/packages/builder/src/pages/builder/auth/reset.svelte b/packages/builder/src/pages/builder/auth/reset.svelte
@@ -79,6 +79,7 @@
       <Heading size="M">Reset your password</Heading>
       <Body size="M">Must contain at least 12 characters</Body>
       <PasswordRepeatInput
+        bind:passwordForm={form}
         bind:password
         bind:error={passwordError}
         minLength={$admin.passwordMinLength || 12}
diff --git a/packages/frontend-core/src/components/PasswordRepeatInput.svelte b/packages/frontend-core/src/components/PasswordRepeatInput.svelte
@@ -1,13 +1,14 @@
-<script>
+<script lang="ts">
   import { FancyForm, FancyInput } from "@budibase/bbui"
   import { createValidationStore, requiredValidator } from "../utils/validation"
 
-  export let password
-  export let error
+  export let passwordForm: FancyForm | undefined = undefined
+  export let password: string
+  export let error: string
   export let minLength = "12"
 
-  const validatePassword = value => {
-    if (!value || value.length < minLength) {
+  const validatePassword = (value: string | undefined) => {
+    if (!value || value.length < parseInt(minLength)) {
       return `Please enter at least ${minLength} characters. We recommend using machine generated or random passwords.`
     }
     return null
@@ -35,7 +36,7 @@
     firstPasswordError
 </script>
 
-<FancyForm>
+<FancyForm bind:this={passwordForm}>
   <FancyInput
     label="Password"
     type="password"
