Skip to content

Commit

Permalink
Support alternative HTTP methods
Browse files Browse the repository at this point in the history
This change proposed supporting the use of alternative HTTP methods.

For example, now a user can define `http-method=GET` and then component will issue a `GET` request using encoded query params instead. All values other than POST will use this new approach. The default remains POST.
  • Loading branch information
srt32 authored May 24, 2024
1 parent 342da47 commit 03e00a7
Showing 1 changed file with 18 additions and 5 deletions.
23 changes: 18 additions & 5 deletions src/auto-check-element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,14 @@ export class AutoCheckElement extends HTMLElement {
set csrfField(value: string) {
this.setAttribute('csrf-field', value)
}

get httpMethod(): string {
return this.getAttribute('http-method') || 'POST'
}

get isHttpPost(): bool {
return this.httpMethod == 'POST'

Check failure on line 185 in src/auto-check-element.ts

View workflow job for this annotation

GitHub Actions / build

Expected '===' and instead saw '=='
}
}

function setLoadingState(event: Event) {
Expand All @@ -190,7 +198,7 @@ function setLoadingState(event: Event) {
const state = states.get(autoCheckElement)

// If some attributes are missing we want to exit early and make sure that the element is valid.
if (!src || !csrf || !state) {
if (!src || (isHttpPost && !csrf) || !state) {
return
}

Expand Down Expand Up @@ -240,7 +248,7 @@ async function check(autoCheckElement: AutoCheckElement) {
const state = states.get(autoCheckElement)

// If some attributes are missing we want to exit early and make sure that the element is valid.
if (!src || !csrf || !state) {
if (!src || (isHttpPost && !csrf) || !state) {
if (autoCheckElement.required) {
input.setCustomValidity('')
}
Expand All @@ -255,8 +263,13 @@ async function check(autoCheckElement: AutoCheckElement) {
}

const body = new FormData()
body.append(csrfField, csrf)
body.append('value', input.value)
if (isHttpPost) {
body.append(csrfField, csrf)
body.append('value', input.value)
} else {
url = new URL(src);

Check failure on line 270 in src/auto-check-element.ts

View workflow job for this annotation

GitHub Actions / build

Please pass in `window.location.origin` as the 2nd argument to `new URL()`

Check failure on line 270 in src/auto-check-element.ts

View workflow job for this annotation

GitHub Actions / build

Delete `;`
url.search = new URLSearchParams({ value: input.value }).toString();

Check failure on line 271 in src/auto-check-element.ts

View workflow job for this annotation

GitHub Actions / build

Replace `·value:·input.value·}).toString();` with `value:·input.value}).toString()`
}

input.dispatchEvent(new AutoCheckSendEvent(body))

Expand All @@ -272,7 +285,7 @@ async function check(autoCheckElement: AutoCheckElement) {
const response = await fetchWithNetworkEvents(autoCheckElement, src, {
credentials: 'same-origin',
signal: state.controller.signal,
method: 'POST',
method: httpMethod,
body,
})
if (response.ok) {
Expand Down

0 comments on commit 03e00a7

Please sign in to comment.