Skip to content

feat: Normalize glue to others captcha provider #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
maxlerebourg wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: Normalize glue to others captcha provider #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 13 additions & 16 deletions packages/vanilla/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,21 @@

## Usage

Add this snippet to the form which requires to be protected using
mCaptcha
Add this snippet to the form which requires to be protected using mCaptcha

```html
<label
data-mcaptcha_url="{{paste your widget link here}}"
for="mcaptcha__token"
id="mcaptcha__token-label"
>
mCaptcha authorization token.
<a
href="https://mcaptcha.org/docs/user-manual/how-to-mcaptcha-without-js/"
>Instructions</a
>.
<input type="text" name="mcaptcha__token" id="mcaptcha__token" />
</label>
<div id="mcaptcha__widget-container"></div>
<script src="https://unpkg.com/@mcaptcha/vanilla-glue@0.1.0-rc2/dist/index.js"/>
<form>
...
<div
class="mcaptcha"
data-sitekey="{{ siteKey }}"
data-instance_url="{{ mcaptchaUrl | 'http://localhost:7000/') }}"
data-callback="{{ callbackFunctionName | optional }}">
</div>
...
</form>
<script>const callbackFunctionName = () => {}</script>
<script src="https://unpkg.com/@mcaptcha/vanilla-glue@0.2.0-rc2/dist/index.js" defer async />
```

## Example
Expand Down
6 changes: 3 additions & 3 deletions packages/vanilla/src/const.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
// SPDX-License-Identifier: Apache-2.0
// SPDX-License-Identifier: MIT

export const INPUT_NAME = "mcaptcha__token";
export const INPUT_LABEL_ID = "mcaptcha__token-label";
export const ID = "mcaptcha__widget-container";
export const ID = "mcaptcha";
export const INPUT_NAME = "mcaptcha-response";
export const INPUT_LABEL_ID = "mcaptcha-label";
2 changes: 1 addition & 1 deletion packages/vanilla/src/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ afterEach(() => {
} catch {}
});

it("Widget fails when mcaptcha__widget-container div is absent", () => {
it("Widget fails when mcaptcha div is absent", () => {
document.getElementById(ID)?.remove();
try {
new Widget({ widgetLink: new URL(widgetLink) });
Expand Down
61 changes: 46 additions & 15 deletions packages/vanilla/src/widget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,31 @@ class Widget {
receiver: Receiver;

constructor(config: WidgetConfig) {
this.receiver = new Receiver(config, this.setToken);
this.receiver.listen();

const parentElement = document.getElementById(ID);
const parentElement = getParentElement();
if (parentElement === null || parentElement === undefined) {
throw new Error(`Element ${ID}'s parent element is undefined`);
}

this.receiver = new Receiver(
config,
(val: string) => {
this.setToken(val)
const callback = parentElement.dataset?.callback
if (callback && typeof (window as any)[callback] === 'function') {
(window as any)[callback]()
}
},
);
this.receiver.listen();

let label = <HTMLLabelElement | null>(
document.getElementById(INPUT_LABEL_ID)
);
if (label !== null) {
label.style.display = "none";
}
this.inputElement = <HTMLInputElement>document.getElementById(INPUT_NAME);
this.inputElement =
<HTMLInputElement>document.getElementById(INPUT_NAME) ?? document.createElement('input');

this.inputElement.id = INPUT_NAME;
this.inputElement.name = INPUT_NAME;
Expand Down Expand Up @@ -72,18 +82,39 @@ class Widget {
setToken = (val: string) => (this.inputElement.value = val);
}

export const run = () => {
let label = <HTMLElement | null>document.getElementById(INPUT_LABEL_ID);
const getParentElement = () => {
let parent: HTMLElement | null = document.getElementById(ID);
if (!parent) parent = <HTMLElement>document.getElementsByClassName(ID)[0] ?? null;
return parent;
}

if (label !== null && label.dataset.mcaptcha_url) {
let config = {
widgetLink: new URL(label.dataset.mcaptcha_url),
};
new Widget(config);
export const run = () => {
const parentElement = getParentElement();
if (parentElement) {
if (parentElement.dataset?.instance_url && parentElement.dataset?.sitekey) {
new Widget({
siteKey: {
instanceUrl: new URL(parentElement.dataset.instance_url),
key: parentElement.dataset.sitekey,
}
});
} else if (parentElement.dataset.mcaptcha_url) {
new Widget({
widgetLink: new URL(parentElement.dataset.mcaptcha_url),
});
}
} else {
throw new Error(
`Couldn't find "mcaptcha_url" dataset in element (ID=${INPUT_LABEL_ID})`
);
let label = <HTMLElement | null>document.getElementById(INPUT_LABEL_ID);

if (label !== null && label.dataset.mcaptcha_url) {
new Widget({
widgetLink: new URL(label.dataset.mcaptcha_url),
});
} else {
throw new Error(
`Couldn't find "mcaptcha_url" dataset in element (ID=${INPUT_LABEL_ID})`
);
}
}
};

Expand Down