Skip to content

Commit

Permalink
reset captcha widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@rajranjan0608
rajranjan0608 committed Jun 21, 2022
1 parent 5fa5f68 commit c9a386b
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 67 deletions.
99 changes: 51 additions & 48 deletions client/src/components/FaucetForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { AxiosResponse } from 'axios'
const FaucetForm = (props: any) => {
const [chain, setChain] = useState<number | null>(null)
const [token, setToken] = useState<number | null>(null)
const [widgetID, setwidgetID] = useState<string | undefined>(undefined)
const [isV2, setIsV2] = useState<boolean>(false)
const [chainConfigs, setChainConfigs] = useState<any>([])
const [inputAddress, setInputAddress] = useState<string>("")
Expand All @@ -29,7 +30,13 @@ const FaucetForm = (props: any) => {
message: null
})

const recaptcha: ReCaptcha = new ReCaptcha(props.config.SITE_KEY, props.config.ACTION, props.config.V2_SITE_KEY)
const recaptcha: ReCaptcha = new ReCaptcha(
props.config.SITE_KEY,
props.config.ACTION,
props.config.V2_SITE_KEY,
setwidgetID,
widgetID
)

// Update chain configs
useEffect(() => {
Expand Down Expand Up @@ -416,7 +423,7 @@ const FaucetForm = (props: any) => {

const resetRecaptcha = (): void => {
setIsV2(false)
recaptcha.loadReCaptcha(props.config.SITE_KEY)
recaptcha.resetV2Captcha()
}

const back = (): void => {
Expand Down Expand Up @@ -472,60 +479,56 @@ const FaucetForm = (props: any) => {

<br/>

{
!sendTokenResponse.txHash
?
<div>
<p className='rate-limit-text'>
Drops are limited to
<span>
{chainConfigs[token!]?.RATELIMIT?.MAX_LIMIT} request in {toString(chainConfigs[token!]?.RATELIMIT?.WINDOW_SIZE)}.
</span>
</p>
<div style={{ display: sendTokenResponse?.txHash ? "none" : "block" }}>
<p className='rate-limit-text'>
Drops are limited to
<span>
{chainConfigs[token!]?.RATELIMIT?.MAX_LIMIT} request in {toString(chainConfigs[token!]?.RATELIMIT?.WINDOW_SIZE)}.
</span>
</p>

<div className='address-input'>
<input placeholder='Hexadecimal Address (0x...)' value={inputAddress || ""} onChange={(e) => updateAddress(e.target.value)} autoFocus/>
</div>
<span className='rate-limit-text' style={{color: "red"}}>{sendTokenResponse?.message}</span>
<div className='address-input'>
<input placeholder='Hexadecimal Address (0x...)' value={inputAddress || ""} onChange={(e) => updateAddress(e.target.value)} autoFocus/>
</div>
<span className='rate-limit-text' style={{color: "red"}}>{sendTokenResponse?.message}</span>

<div className='v2-recaptcha' style={{marginTop: "10px"}}></div>

<div className="beta-alert">
<p>This is a testnet faucet. Funds are not real.</p>
</div>
<div className='v2-recaptcha' style={{marginTop: "10px"}}></div>

<button className={shouldAllowSend ? 'send-button' : 'send-button-disabled'} onClick={sendToken}>
{
isLoading
?
<ClipLoader size="20px" speedMultiplier={0.3} color="403F40"/>
:
<span>Request {chainConfigs[token || 0]?.DRIP_AMOUNT / 1e9} {chainConfigs[token || 0]?.TOKEN}</span>
}
</button>
<div className="beta-alert">
<p>This is a testnet faucet. Funds are not real.</p>
</div>
:

<button className={shouldAllowSend ? 'send-button' : 'send-button-disabled'} onClick={sendToken}>
{
isLoading
?
<ClipLoader size="20px" speedMultiplier={0.3} color="403F40"/>
:
<span>Request {chainConfigs[token || 0]?.DRIP_AMOUNT / 1e9} {chainConfigs[token || 0]?.TOKEN}</span>
}
</button>
</div>

<div style={{ display: sendTokenResponse?.txHash ? "block" : "none" }}>
<p className='rate-limit-text'>
{sendTokenResponse?.message}
</p>

<div>
<span className='bold-text'>Transaction ID</span>
<p className='rate-limit-text'>
{sendTokenResponse.message}
<a
target = {'_blank'}
href = {chainConfigs[token!]?.EXPLORER + '/tx/' + sendTokenResponse?.txHash}
rel = "noreferrer"
>
{sendTokenResponse?.txHash}
</a>
</p>

<div>
<span className='bold-text'>Transaction ID</span>
<p className='rate-limit-text'>
<a
target = {'_blank'}
href = {chainConfigs[token!].EXPLORER + '/tx/' + sendTokenResponse.txHash}
rel = "noreferrer"
>
{sendTokenResponse.txHash}
</a>
</p>
</div>

<button className='back-button' onClick={back}>Back</button>
</div>
}

<button className='back-button' onClick={back}>Back</button>
</div>
</div>
</div>

Expand Down
46 changes: 28 additions & 18 deletions client/src/components/ReCaptcha.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,17 @@ export default class ReCaptcha {
siteKey: string
v2siteKey?: string
action: string
widgetID: string | undefined
setWidgetID: any

constructor(SITE_KEY: string, ACTION: string, V2_SITE_KEY: string) {
constructor(SITE_KEY: string, ACTION: string, V2_SITE_KEY: string, setWidgetID: any, widgetID: string | undefined) {
this.loadReCaptcha(SITE_KEY)

this.siteKey = SITE_KEY
this.v2siteKey = V2_SITE_KEY
this.action = ACTION
this.widgetID = widgetID
this.setWidgetID = setWidgetID
}

async getToken(isV2 = false): Promise<{token?: string, v2Token?: string}> {
Expand All @@ -25,26 +29,37 @@ export default class ReCaptcha {
})

if(isV2){
const widgetID = getWidgetID()
v2Token = await window.grecaptcha.getResponse(widgetID)
v2Token = await window.grecaptcha.getResponse(this.widgetID)
}

return { token, v2Token }
}

resetV2Captcha = () => {
const v2CaptchaContainer = <HTMLElement>document.getElementsByClassName('v2-recaptcha')[0]
if(v2CaptchaContainer) {
if(this.widgetID) {
window.grecaptcha.reset(this.widgetID)
}
v2CaptchaContainer.style.display = "none"
}
}

loadV2Captcha = (v2siteKey: string) => {
const v2CaptchaContainer = document.getElementsByClassName('v2-recaptcha')[0]

const widgetID = window.grecaptcha.render(v2CaptchaContainer, {
'sitekey' : v2siteKey,
'theme': 'dark'
})

const widgetContainer = document.createElement('div')
const widgetElem = `<input style='display:none' id='widgetID' value="${widgetID}"/>`
widgetContainer.innerHTML = widgetElem

document.body.appendChild(widgetContainer)
if(this.widgetID || this.widgetID == "0") {
const v2CaptchaContainer = <HTMLElement>document.getElementsByClassName('v2-recaptcha')[0]
if(v2CaptchaContainer) {
v2CaptchaContainer.style.display = "block"
}
} else {
const widgetID = window.grecaptcha.render(v2CaptchaContainer, {
'sitekey' : v2siteKey,
'theme': 'dark'
})
this.setWidgetID(widgetID)
}

return true
}
Expand All @@ -56,9 +71,4 @@ export default class ReCaptcha {
document.body.appendChild(script)
return true
}
}

const getWidgetID = () => {
const elem = <HTMLInputElement>document.getElementById('widgetID');
return elem!?.value
}
2 changes: 1 addition & 1 deletion middlewares/verifyCaptcha.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export class VerifyCaptcha {

if(data?.success) {
if(data?.action == 'faucetdrip') {
if(data?.score > 1) {
if(data?.score > 0.5) {
return true
}
}
Expand Down

0 comments on commit c9a386b

Please sign in to comment.