@swetrix/captcha 1.0.3

package/src/captcha-loader.ts

@@ -0,0 +1,242 @@
+// @ts-ignore
+const isDevelopment = window.__SWETRIX_CAPTCHA_DEV || false
+
+const CAPTCHA_SELECTOR = '.swecaptcha'
+const LIGHT_CAPTCHA_IFRAME_URL = isDevelopment ? './light.html' : 'https://cap.swetrix.com/pages/light'
+const DARK_CAPTCHA_IFRAME_URL = isDevelopment ? './dark.html' : 'https://cap.swetrix.com/pages/dark'
+const DEFAULT_RESPONSE_INPUT_NAME = 'swetrix-captcha-response'
+const MESSAGE_IDENTIFIER = 'swetrix-captcha'
+const ID_PREFIX = 'swetrix-captcha-'
+const THEMES = ['light', 'dark']
+const PID_REGEX = /^(?!.*--)[a-zA-Z0-9-]{12}$/
+
+enum LOG_ACTIONS {
+  log = 'log',
+  error = 'error',
+  warn = 'warn',
+  info = 'info',
+}
+
+const DUMMY_PIDS = [
+  'AP00000000000', 'MP00000000000', 'FAIL000000000',
+]
+
+const isValidPID = (pid: string) => DUMMY_PIDS.includes(pid) || PID_REGEX.test(pid)
+
+const FRAME_HEIGHT_MAPPING = {
+  default: '66px',
+  manual: '200px',
+}
+
+const getFrameID = (cid: string) => `${cid}-frame`
+
+const ids: string[] = []
+
+const log = (status: LOG_ACTIONS, text: string) => {
+  console[status](`[Swetrix Captcha] ${text}`)
+}
+
+const appendParamsToURL = (url: string, params: any) => {
+  const queryString = Object.keys(params).map((key) => {
+    return `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
+  }).join('&')
+
+  return `${url}?${queryString}`
+}
+
+const renderCaptcha = (container: Element, params: any) => {
+  const cid = generateRandomID()
+  const cParams = {
+    ...params,
+    cid, // CAPTCHA ID
+  }
+
+  const frame = generateCaptchaFrame(cParams)
+  const input = generateHiddenInput(cParams)
+
+  container.appendChild(frame)
+  container.appendChild(input)
+}
+
+const generateRandomID = (): string => {
+  const randomID = ID_PREFIX + Math.random().toString(36).substr(2, 6)
+
+  if (ids.includes(randomID)) {
+    return generateRandomID()
+  }
+
+  ids.push(randomID)
+
+  return randomID
+}
+
+const postMessageCallback = (pmEvent: MessageEvent) => {
+  // TODO: Validate origin
+
+  const { data } = pmEvent
+
+  if (!data) {
+    return
+  }
+
+  const {
+    type, cid, event,
+  } = data
+
+  if (type !== MESSAGE_IDENTIFIER) {
+    return
+  }
+
+  if (!cid || !ids.includes(cid)) {
+    return
+  }
+
+  const input = document.getElementById(cid)
+  const inputExists = input !== null
+
+  switch (event) {
+    case 'success': {
+      const { token } = data
+
+      if (!inputExists) {
+        log(LOG_ACTIONS.error, '[PM -> success] Input element does not exist.')
+        return
+      }
+
+      // @ts-ignore
+      input.value = token
+
+      break
+    }
+
+    case 'failure': {
+      if (!inputExists) {
+        log(LOG_ACTIONS.error, '[PM -> failure] Input element does not exist.')
+        return
+      }
+
+      // @ts-ignore
+      input.value = ''
+
+      break
+    }
+
+    case 'tokenExpired': {
+      if (!inputExists) {
+        log(LOG_ACTIONS.error, '[PM -> failure] Input element does not exist.')
+        return
+      }
+
+      // @ts-ignore
+      input.value = ''
+
+      break
+    }
+    
+    case 'manualStarted': {
+      const frame = document.getElementById(getFrameID(cid))
+
+      if (!frame) {
+        log(LOG_ACTIONS.error, '[PM -> manualStarted] Frame does not exist.')
+        return
+      }
+
+      frame.style.height = FRAME_HEIGHT_MAPPING.manual
+
+      break
+    }
+
+    case 'manualFinished': {
+      const frame = document.getElementById(getFrameID(cid))
+
+      if (!frame) {
+        log(LOG_ACTIONS.error, '[PM -> manualFinished] Frame does not exist.')
+        return
+      }
+
+      frame.style.height = FRAME_HEIGHT_MAPPING.default
+
+      break
+    }
+  }
+}
+
+const generateCaptchaFrame = (params: any) => {
+  const { theme } = params
+  const captchaFrame = document.createElement('iframe')
+
+  captchaFrame.id = getFrameID(params.cid)
+  captchaFrame.src = theme === 'dark'
+    ? appendParamsToURL(DARK_CAPTCHA_IFRAME_URL, params)
+    : appendParamsToURL(LIGHT_CAPTCHA_IFRAME_URL, params)
+  captchaFrame.style.height = FRAME_HEIGHT_MAPPING.default
+  captchaFrame.title = 'Swetrix Captcha'
+  captchaFrame.style.border = 'none'
+  captchaFrame.style.width = '302px'
+  captchaFrame.style.overflow = 'visible'
+
+  return captchaFrame
+}
+
+const generateHiddenInput = (params: any) => {
+  const { cid } = params
+  const input = document.createElement('input')
+
+  input.type = 'hidden'
+  input.name = params.respName
+  input.value = ''
+  input.id = cid
+
+  return input
+}
+
+const validateParams = (params: any) => {
+  const { theme, pid } = params
+
+  if (theme && !THEMES.includes(theme)) {
+    log(LOG_ACTIONS.error, `Invalid data-theme parameter: ${theme}`)
+    return false
+  }
+
+  if (!pid || !isValidPID(pid)) {
+    log(LOG_ACTIONS.error, `Invalid data-project-id parameter: ${pid}`)
+    return false
+  }
+
+  return true
+}
+
+const parseParams = (container: Element): object => ({
+  pid: container.getAttribute('data-project-id'),
+  respName: container.getAttribute('data-response-input-name') || DEFAULT_RESPONSE_INPUT_NAME,
+  theme: container.getAttribute('data-theme'),
+})
+
+const main = (forced = false) => {
+  if (!forced && 'swecaptcha' in window) {
+    log(LOG_ACTIONS.warn, 'Captcha is already loaded.')
+  }
+
+  // TODO: Add some callbacks here
+  // @ts-ignore
+  window.swecaptcha = true
+  window.addEventListener('message', postMessageCallback)
+
+  const containers = Array.from(document.querySelectorAll(CAPTCHA_SELECTOR))
+
+  for (const container of containers) {
+    const params = parseParams(container)
+
+    if (!validateParams(params)) {
+      log(LOG_ACTIONS.error, 'Aborting captcha rendering due to invalid parameters.')
+      return
+    }
+
+    renderCaptcha(container, params)
+  }
+}
+
+// @ts-ignore
+window.swetrixCaptchaForceLoad = () => main(true)
+
+document.addEventListener('DOMContentLoaded', () => main())

package/src/captcha.ts

@@ -0,0 +1,284 @@
+// @ts-ignore
+const isDevelopment = window.__SWETRIX_CAPTCHA_DEV || false
+
+const API_URL = isDevelopment ? 'http://localhost:5005/v1/captcha' : 'https://api.swetrix.com/v1/captcha'
+const MSG_IDENTIFIER = 'swetrix-captcha'
+const DEFAULT_THEME = 'light'
+const CAPTCHA_TOKEN_LIFETIME = 300 // seconds (5 minutes).
+let TOKEN = ''
+let HASH = ''
+
+const ENDPOINTS = {
+  VERIFY: '/verify',
+  GENERATE: '/generate',
+  VERIFY_MANUAL: '/verify-manual',
+}
+
+enum IFRAME_MESSAGE_TYPES {
+  SUCCESS = 'success',
+  FAILURE = 'failure',
+  TOKEN_EXPIRED = 'tokenExpired',
+  MANUAL_STARTED = 'manualStarted',
+  MANUAL_FINISHED = 'manualFinished',
+}
+
+enum ACTION {
+  checkbox = 'checkbox',
+  failure = 'failure',
+  completed = 'completed',
+  loading = 'loading',
+}
+
+let activeAction: ACTION = ACTION.checkbox
+
+const sendMessageToLoader = (event: IFRAME_MESSAGE_TYPES, data = {}) => {
+  window.parent.postMessage({
+    event,
+    type: MSG_IDENTIFIER,
+    // @ts-ignore
+    cid: window.__SWETRIX_CAPTCHA_ID,
+    ...data,
+  }, '*')
+}
+
+/**
+ * Sets the provided action visible and the rest hidden
+ * @param {*} action checkbox | failure | completed | loading
+ */
+const activateAction = (action: ACTION) => {
+  activeAction = action
+
+  const statusDefault = document.querySelector('#status-default')
+  const statusFailure = document.querySelector('#status-failure')
+
+  const actions = {
+    checkbox: document.querySelector('#checkbox'),
+    failure: document.querySelector('#failure'),
+    completed: document.querySelector('#completed'),
+    loading: document.querySelector('#loading'),
+  }
+
+  // Apply hidden class to all actions
+  actions.checkbox?.classList.add('hidden')
+  actions.failure?.classList.add('hidden')
+  actions.completed?.classList.add('hidden')
+  actions.loading?.classList.add('hidden')
+
+  // Change the status text
+  if (action === 'failure') {
+    statusDefault?.classList.add('hidden')
+    statusFailure?.classList.remove('hidden')
+  } else {
+    statusDefault?.classList.remove('hidden')
+    statusFailure?.classList.add('hidden')
+  }
+
+  // Remove hidden class from the provided action
+  actions[action]?.classList.remove('hidden')
+}
+
+const setLifetimeTimeout = () => {
+  setTimeout(() => {
+    sendMessageToLoader(IFRAME_MESSAGE_TYPES.TOKEN_EXPIRED)
+    activateAction(ACTION.checkbox)
+  }, CAPTCHA_TOKEN_LIFETIME * 1000)
+}
+
+const enableManualChallenge = (svg: string) => {
+  const manualChallenge = document.querySelector('#manual-challenge')
+  const svgCaptcha = document.querySelector('#svg-captcha')
+
+  if (!svgCaptcha) {
+    return
+  }
+
+  if (!svg) {
+    const error = document.createElement('p')
+    error.innerText = 'Error loading captcha'
+    error.style.color = '#d6292a'
+    svgCaptcha?.appendChild(error)
+  } else {
+    svgCaptcha.innerHTML = svg
+  }
+
+  sendMessageToLoader(IFRAME_MESSAGE_TYPES.MANUAL_STARTED)
+  manualChallenge?.classList.remove('hidden')
+}
+
+const disableManualChallenge = () => {
+  const manualChallenge = document.querySelector('#manual-challenge')
+  const svgCaptcha = document.querySelector('#svg-captcha')
+
+  if (!svgCaptcha) {
+    return
+  }
+
+  sendMessageToLoader(IFRAME_MESSAGE_TYPES.MANUAL_FINISHED)
+  svgCaptcha.innerHTML = ''
+  manualChallenge?.classList.add('hidden')
+}
+
+const generateCaptcha = async () => {
+  try {
+    const response = await fetch(`${API_URL}${ENDPOINTS.GENERATE}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        // @ts-ignore
+        theme: window.__SWETRIX_CAPTCHA_THEME || DEFAULT_THEME,
+        // @ts-ignore
+        pid: window.__SWETRIX_PROJECT_ID,
+      }),
+    })
+  
+    if (!response.ok) {
+      throw ''
+    }
+  
+    const data = await response.json()
+    return data
+  } catch (e) {
+    sendMessageToLoader(IFRAME_MESSAGE_TYPES.FAILURE)
+    activateAction(ACTION.failure)
+    return {}
+  }
+}
+
+const verify = async () => {
+  try {
+    const response = await fetch(`${API_URL}${ENDPOINTS.VERIFY}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        // @ts-ignore
+        pid: window.__SWETRIX_PROJECT_ID,
+      }),
+    })
+
+    if (!response.ok) {
+      return {}
+    }
+
+    const data = await response.json()
+    return data
+  } catch (e) {
+    sendMessageToLoader(IFRAME_MESSAGE_TYPES.FAILURE)
+    activateAction(ACTION.failure)
+    return {}
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const captchaComponent = document.querySelector('#swetrix-captcha')
+  const branding = document.querySelector('#branding')
+  const svgCaptchaInput = document.querySelector('#svg-captcha-input')
+  const manualSubmitBtn = document.querySelector('#manual-submit-btn')
+
+  branding?.addEventListener('click', (e: Event) => {
+    e.stopPropagation()
+  })
+
+  manualSubmitBtn?.addEventListener('click', async (e: Event) => {
+    e.stopPropagation()
+
+    if (!svgCaptchaInput) {
+      return
+    }
+
+    // @ts-ignore
+    const code = svgCaptchaInput.value
+
+    if (!code) {
+      return
+    }
+
+    let response
+
+    try {
+      response = await fetch(`${API_URL}${ENDPOINTS.VERIFY_MANUAL}`, {
+        method: 'POST',
+        body: JSON.stringify({
+          hash: HASH,
+          code,
+          // @ts-ignore
+          pid: window.__SWETRIX_PROJECT_ID,
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+    } catch (e) {
+      disableManualChallenge()
+      sendMessageToLoader(IFRAME_MESSAGE_TYPES.FAILURE)
+      activateAction(ACTION.failure)
+      // @ts-ignore
+      svgCaptchaInput.value = ''
+      return
+    }
+
+    if (!response.ok) {
+      disableManualChallenge()
+      sendMessageToLoader(IFRAME_MESSAGE_TYPES.FAILURE)
+      activateAction(ACTION.failure)
+      // @ts-ignore
+      svgCaptchaInput.value = ''
+      return
+    }
+
+    const { success, token } = await response.json()
+
+    if (!success) {
+      disableManualChallenge()
+      sendMessageToLoader(IFRAME_MESSAGE_TYPES.FAILURE)
+      activateAction(ACTION.failure)
+      // @ts-ignore
+      svgCaptchaInput.value = ''
+      return
+    }
+
+    // @ts-ignore
+    svgCaptchaInput.value = ''
+
+    sendMessageToLoader(IFRAME_MESSAGE_TYPES.SUCCESS, { token })
+    setLifetimeTimeout()
+    activateAction(ACTION.completed)
+    disableManualChallenge()
+  })
+
+  captchaComponent?.addEventListener('click', async () => {
+    if (activeAction === ACTION.loading || activeAction === ACTION.completed) {
+      return
+    }
+
+    if (activeAction === ACTION.failure) {
+      activateAction(ACTION.checkbox)
+      return
+    }
+
+    activateAction(ACTION.loading)
+
+    try {
+      const { token } = await verify()
+
+      if (!token) {
+        throw ''
+      }
+
+      TOKEN = token
+      sendMessageToLoader(IFRAME_MESSAGE_TYPES.SUCCESS, { token })
+      setLifetimeTimeout()
+      activateAction(ACTION.completed)
+      return
+    } catch (e) {
+      const { data, hash } = await generateCaptcha()
+
+      HASH = hash
+      enableManualChallenge(data)
+      return
+    }
+  })
+})