info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-01-17 14:18:17 +01:00
Code Issues Releases Wiki Activity

Refactor captcha validation

Browse Source
This commit is contained in:
Kamran Ahmed 2023-01-04 13:08:35 +04:00
parent 2ac1781118
commit f4cf194638
8 changed files with 58 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Captcha/Captcha.astro
View File

@ -1,15 +0,0 @@
---
---
<script src='./captcha.js'></script>
<script
src='https://www.google.com/recaptcha/api.js?onload=onCaptchaLoad&render=explicit'
async
defer
></script>
<!-- Captcha form start -->
<div class='recaptcha-field mb-2'></div>
<input type='hidden' name='g-recaptcha-response' class='recaptcha-response' />
<!-- Catpcha form end -->

5
src/components/Captcha/CaptchaFields.astro Normal file
View File

@ -0,0 +1,5 @@
---
---
<div class='recaptcha-field mb-2'></div>
<input type='hidden' name='g-recaptcha-response' class='recaptcha-response' />

36
src/components/Captcha/CaptchaScripts.astro Normal file
View File

@ -0,0 +1,36 @@
---
---
<script src='./captcha.js'></script>
<script is:inline>
window.onCaptchaLoad = function () {
if (!window.grecaptcha) {
console.warn('window.grecaptcha is not defined');
return;
}
const recaptchaFields = document.querySelectorAll('.recaptcha-field');
// render recaptcha on fields
recaptchaFields.forEach((field) => {
// If captcha already rendered for this field
if (field.hasAttribute('data-recaptcha-id')) {
return;
}
const renderedId = window.grecaptcha.render(field, {
sitekey: '6Ldn2YsjAAAAABlUxNxukAuDAUIuZIhO0hRVxzJW',
});
field.setAttribute('data-recaptcha-id', renderedId);
});
};
</script>
<script
src='https://www.google.com/recaptcha/api.js?onload=onCaptchaLoad&render=explicit'
async
defer
></script>

28
src/components/Captcha/captcha.js
View File

@ -4,7 +4,6 @@ class Captcha {
this.bindValidation = this.bindValidation.bind(this);
this.validateCaptchaBeforeSubmit =
this.validateCaptchaBeforeSubmit.bind(this);
this.onCaptchaLoad = this.onCaptchaLoad.bind(this);
}
validateCaptchaBeforeSubmit(e) {
@ -30,36 +29,13 @@ class Captcha {
}
bindValidation() {
const forms = document.querySelectorAll('.validate-captcha-form');
const forms = document.querySelectorAll('[captcha-form]');
forms.forEach((form) => {
form.addEventListener('submit', this.validateCaptchaBeforeSubmit);
});
}
onCaptchaLoad() {
if (!window.grecaptcha) {
console.warn('window.grecaptcha is not defined');
return;
}
const recaptchaFields = document.querySelectorAll('.recaptcha-field');
// render recaptcha on fields
recaptchaFields.forEach((field) => {
// If captcha already rendered for this field
if (field.hasAttribute('data-recaptcha-id')) {
return;
}
const renderedId = window.grecaptcha.render(field, {
sitekey: '6Ldn2YsjAAAAABlUxNxukAuDAUIuZIhO0hRVxzJW',
});
field.setAttribute('data-recaptcha-id', renderedId);
});
}
onDOMLoaded() {
this.bindValidation();
}
@ -71,5 +47,3 @@ class Captcha {
const captcha = new Captcha();
captcha.init();
window.onCaptchaLoad = captcha.onCaptchaLoad;

6
src/components/DownloadPopup.astro
View File

@ -1,6 +1,6 @@
---
import Popup from './Popup/Popup.astro';
import Captcha from './Captcha/Captcha.astro';
import CaptchaFields from './Captcha/CaptchaFields.astro';
---
<Popup
@ -13,7 +13,7 @@ import Captcha from './Captcha/Captcha.astro';
method='POST'
accept-charset='utf-8'
target='_blank'
class='validate-captcha-form'
captcha-form
>
<input
type='email'
@ -25,7 +25,7 @@ import Captcha from './Captcha/Captcha.astro';
placeholder='Enter your Email'
/>
<Captcha />
<CaptchaFields />
<input type='hidden' name='list' value='tTqz1w7nexY3cWDpLnI88Q' />
<input type='hidden' name='subform' value='yes' />

6
src/components/SubscribePopup.astro
View File

@ -1,6 +1,6 @@
---
import Popup from './Popup/Popup.astro';
import Captcha from './Captcha/Captcha.astro';
import CaptchaFields from './Captcha/CaptchaFields.astro';
---
<Popup
@ -13,7 +13,7 @@ import Captcha from './Captcha/Captcha.astro';
method='POST'
accept-charset='utf-8'
target='_blank'
class='validate-captcha-form'
captcha-form
>
<input
type='email'
@ -24,7 +24,7 @@ import Captcha from './Captcha/Captcha.astro';
placeholder='Enter your Email'
/>
<Captcha />
<CaptchaFields />
<input type='hidden' name='list' value='tTqz1w7nexY3cWDpLnI88Q' />
<input type='hidden' name='subform' value='yes' />

3
src/pages/[roadmapId]/index.astro
View File

@ -1,4 +1,5 @@
---
import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
import InteractiveRoadamp from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
import MarkdownRoadmap from '../../components/MarkdownRoadmap.astro';
import RoadmapHeader from '../../components/RoadmapHeader.astro';
@ -55,4 +56,6 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
</MarkdownRoadmap>
)
}
<CaptchaScripts slot="after-footer" />
</BaseLayout>

10
src/pages/signup.astro
View File

@ -1,5 +1,6 @@
---
import Captcha from '../components/Captcha/Captcha.astro';
import CaptchaFields from '../components/Captcha/CaptchaFields.astro';
import CaptchaScripts from '../components/Captcha/CaptchaScripts.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
---
@ -27,7 +28,8 @@ import BaseLayout from '../layouts/BaseLayout.astro';
action='https://newsletter.roadmap.sh/subscribe'
method='POST'
accept-charset='utf-8'
class='w-full validate-captcha-form'
class='w-full'
captcha-form
>
<input
type='email'
@ -39,7 +41,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
placeholder='Enter your email'
/>
<Captcha />
<CaptchaFields />
<input type='hidden' name='list' value='tTqz1w7nexY3cWDpLnI88Q' />
<input type='hidden' name='subform' value='yes' />
@ -54,4 +56,6 @@ import BaseLayout from '../layouts/BaseLayout.astro';
</form>
</div>
</div>
<CaptchaScripts slot='after-footer' />
</BaseLayout>