Commit 3c319704 authored by Ms Kimsible's avatar Ms Kimsible
Browse files

Load MT-captcha after stepper rendered + display on every steps

parent 94790cbd
import loadjs from "loadjs"
import loadjs from 'loadjs'
function register({ registerHook, peertubeHelpers }) {
initMTC(registerHook, peertubeHelpers).catch(err =>
console.error("Cannot initialize mtcaptcha plugin", err)
console.error('Cannot initialize mtcaptcha plugin', err)
)
}
......@@ -10,55 +10,77 @@ export { register }
function initMTC(registerHook, peertubeHelpers) {
return peertubeHelpers.getSettings().then(async s => {
if (!s || !s["mtcaptcha-site-key"]) {
if (!s || !s['mtcaptcha-site-key']) {
console.error(
"MTCaptcha plugin lacks a site key set to use the MTCaptcha. Falling back to normal registration."
'MTCaptcha plugin lacks a site key set to use the MTCaptcha. Falling back to normal registration.'
)
return
}
// add captcha to the first form (user form)
const node = document.getElementsByTagName("form")[0]
const div = document.createElement("div")
div.setAttribute("class", "mtcaptcha")
node.appendChild(div)
// add captcha to the last step of the register stepper
const stepperSelector = 'my-custom-stepper .container'
await rendering(stepperSelector)
const stepper = document.querySelector(stepperSelector)
const div = document.createElement('div')
div.classList.add('mtcaptcha')
stepper.appendChild(div)
window.mtcaptchaConfig = {
"sitekey": s["mtcaptcha-site-key"],
"render": "auto",
"customStyle": {
"cardColor": "#f5f5f5",
"cardBorder": "#9EA1A0",
"placeHolderColor": "#F89300",
"inputTextColor": "#F87800",
"inputBackgroundColor": "#fafafa",
"inputBorderColor": {
"byDefault": "#F89300",
"hover": "#f07000",
"active": "#f07000"
'sitekey': s['mtcaptcha-site-key'],
'render': 'auto',
'customStyle': {
'cardColor': '#f5f5f5',
'cardBorder': '#9EA1A0',
'placeHolderColor': '#F89300',
'inputTextColor': '#F87800',
'inputBackgroundColor': '#fafafa',
'inputBorderColor': {
'byDefault': '#F89300',
'hover': '#f07000',
'active': '#f07000'
},
"buttonIconColor": {
"refresh": "#dddddd",
"verify": "#55caf1",
"audio": "#F89300",
"audiofocus": "#f07000"
'buttonIconColor': {
'refresh': '#dddddd',
'verify': '#55caf1',
'audio': '#F89300',
'audiofocus': '#f07000'
}
},
"verified-callback": state => window.MTCaptchaLoadCallbackResponse = state.verifiedToken,
"renderQueue": []
'verified-callback': state => window.MTCaptchaLoadCallbackResponse = state.verifiedToken,
'renderQueue': []
}
loadjs([
"https://service.mtcaptcha.com/mtcv1/client/mtcaptcha.min.js",
"https://service2.mtcaptcha.com/mtcv1/client/mtcaptcha2.min.js",
'https://service.mtcaptcha.com/mtcv1/client/mtcaptcha.min.js',
'https://service2.mtcaptcha.com/mtcv1/client/mtcaptcha2.min.js',
])
registerHook({
target: "filter:api.signup.registration.create.params",
target: 'filter:api.signup.registration.create.params',
handler: body =>
Object.assign({}, body, {
"mtcaptcha-response": window.MTCaptchaLoadCallbackResponse
'mtcaptcha-response': window.MTCaptchaLoadCallbackResponse
})
})
})
}
async function rendering (selector) {
// Waiting for DOMContent updated with a timeout of 5 seconds
await new Promise((resolve, reject) => {
const timeout = setTimeout(() => {
clearInterval(interval)
reject(new Error('DOMContent cannot be loaded'))
}, 5000)
// Waiting for videofile input in DOM
const interval = setInterval(() => {
if (document.querySelector(selector) !== null) {
clearTimeout(timeout)
clearInterval(interval)
resolve()
}
}, 10)
})
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment