Skip to content

Commit

Permalink
Form can be valid regardless of order filling out (#28)
Browse files Browse the repository at this point in the history
## Goal
This adjusts the faucet form validation to allow the submit button to be enabled regardless of the order of clicking captcha or filling in an address. Address validation isn't performed until `focusout` fires. A little trickier to fix than at first blush.

Also did a yarn update to fix a browserslist warning. Thanks to @JoeCap08055 for the nudge to turn this into an issue.

Closes #27
  • Loading branch information
shannonwells authored Sep 30, 2024
1 parent 6d9f72a commit e2b45b8
Show file tree
Hide file tree
Showing 4 changed files with 207 additions and 318 deletions.
8 changes: 4 additions & 4 deletions client/src/lib/components/Form.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -31,19 +31,17 @@
});
}
function addressValid(maybeAddress: string) {
function addressValid() {
try {
return validateAddress(maybeAddress);
return validateAddress(address);
} catch(error) {
console.error(error);
operation.set({ success: false, error: "Address is invalid", hash: "" });
}
}
function onToken(tokenEvent: CustomEvent<string>) {
if (address !== "" && addressValid(address)) {
token = tokenEvent.detail;
}
}
async function request(address: string): Promise<string> {
Expand All @@ -69,6 +67,8 @@
id="address"
disabled={!!webRequest}
data-testid="address"
required
on:focusout={() => addressValid() }
/>
</div>
{#if !webRequest}
Expand Down
11 changes: 11 additions & 0 deletions client/tests/faucet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,17 @@ export class FaucetTests {
await expect(submit).toBeEnabled();
});

test("submit form becomes valid when click captcha first", async ({ page }) => {
await page.goto(this.url);
const { address, captcha, submit } = await getFormElements(page, true);
await expect(submit).toBeDisabled();
await captcha.click();
// simulate the captcha check / human wait
await page.waitForTimeout(500);
await address.fill(validAddress);
await expect(submit).toBeEnabled();
});

test("Shows address invalid message when invalid address is entered", async ({page}, {config}) => {
await page.goto(this.url);
const { address, captcha, submit } = await getFormElements(page, true);
Expand Down
Loading

0 comments on commit e2b45b8

Please sign in to comment.