Merge pull request #534 from redpwn/feature/recaptcha

Author: ginkoid

client/index.html

@@ -7,6 +7,7 @@
 		<meta name="mobile-web-app-capable" content="yes">
 		<meta name="apple-mobile-web-app-capable" content="yes">
 
+		<link rel="shortcut icon" href="{{ config.faviconUrl }}">
 		<meta name="title" content="{{ config.ctfName }}">
 		<meta name="description" content="{{ config.meta.description }}">
 		<meta property="og:type" content="website">

client/src/api/auth.js

@@ -58,11 +58,12 @@ export const verify = async ({ verifyToken }) => {
   }
 }
 
-export const register = async ({ email, name, ctftimeToken }) => {
+export const register = async ({ email, name, ctftimeToken, recaptchaCode }) => {
   const resp = await request('POST', '/auth/register', {
     email,
     name,
-    ctftimeToken
+    ctftimeToken,
+    recaptchaCode
   })
   switch (resp.kind) {
     case 'goodRegister':
@@ -113,9 +114,10 @@ export const deleteCtftime = () => {
   return request('DELETE', '/users/me/auth/ctftime')
 }
 
-export const recover = async ({ email }) => {
+export const recover = async ({ email, recaptchaCode }) => {
   const resp = await request('POST', '/auth/recover', {
-    email
+    email,
+    recaptchaCode
   })
   switch (resp.kind) {
     case 'goodVerifySent':

client/src/api/profile.js

@@ -48,9 +48,10 @@ export const updateAccount = async ({ name, division }) => {
   return handleResponse({ resp, valid: ['goodUserUpdate'] })
 }
 
-export const updateEmail = async ({ email }) => {
+export const updateEmail = async ({ email, recaptchaCode }) => {
   const resp = await request('PUT', '/users/me/auth/email', {
-    email
+    email,
+    recaptchaCode
   })
 
   return handleResponse({ resp, valid: ['goodVerifySent', 'goodEmailSet'], resolveDataMessage: true })

client/src/components/profile/members-card.js

@@ -80,7 +80,7 @@ const MembersCard = withStyles({
     <div class='card'>
       <div class='content'>
         <p>Team Information</p>
-        <p class='font-thin u-no-margin'>There is no limit on team members. Please enter a separate email for each team member. This data is collected for informational purposes only. Ensure that this section is up to date in order to remain prize eligible.</p>
+        <p class='font-thin u-no-margin'>Please enter a separate email for each team member. This data is collected for informational purposes only. Ensure that this section is up to date in order to remain prize eligible.</p>
         <div class='row u-center'>
           <Form class={`col-12 ${classes.form}`} onSubmit={handleSubmit} disabled={buttonDisabled} buttonText='Add Member'>
             <input

client/src/components/recaptcha.js

@@ -0,0 +1,90 @@
+import config from '../config'
+import withStyles from './jss'
+import { useEffect, useCallback } from 'preact/hooks'
+
+const loadRecaptchaScript = () => new Promise((resolve, reject) => {
+  const script = document.createElement('script')
+  script.src = 'https://www.google.com/recaptcha/api.js?render=explicit'
+  script.addEventListener('load', () => {
+    window.grecaptcha.ready(() => resolve(window.grecaptcha))
+  })
+  script.addEventListener('error', reject)
+  document.body.appendChild(script)
+})
+
+const recaptchaQueue = []
+let recaptchaPromise
+let recaptchaId
+const handleRecaptchaDone = async (code) => {
+  (await loadRecaptcha()).reset(recaptchaId)
+  const { resolve } = recaptchaQueue.shift()
+  resolve(code)
+  handleRecaptchaNext()
+}
+const handleRecaptchaError = async (err) => {
+  (await loadRecaptcha()).reset(recaptchaId)
+  const { reject } = recaptchaQueue.shift()
+  reject(err)
+  handleRecaptchaNext()
+}
+const handleRecaptchaNext = async () => {
+  if (recaptchaQueue.length === 0) {
+    return
+  }
+  (await loadRecaptcha()).execute(recaptchaId)
+}
+const loadRecaptcha = async () => {
+  if (!recaptchaPromise) {
+    recaptchaPromise = loadRecaptchaScript()
+  }
+  if (!recaptchaId) {
+    recaptchaId = (await recaptchaPromise).render({
+      theme: 'dark',
+      sitekey: config.recaptcha.siteKey,
+      callback: handleRecaptchaDone,
+      'error-callback': handleRecaptchaError
+    })
+  }
+  return recaptchaPromise
+}
+const requestRecaptchaCode = () => new Promise((resolve, reject) => {
+  recaptchaQueue.push({ resolve, reject })
+  handleRecaptchaNext()
+})
+
+// exported for legacy class component usage
+export { loadRecaptcha, requestRecaptchaCode }
+
+export const RecaptchaLegalNotice = withStyles({
+  root: {
+    fontSize: '12px',
+    textAlign: 'center'
+  },
+  link: {
+    display: 'inline',
+    padding: '0'
+  }
+}, ({ classes }) => (
+  <div class={classes.root}>
+    This site is protected by reCAPTCHA.
+    <br />
+    The Google{' '}
+    <a class={classes.link} href='https://policies.google.com/privacy' target='_blank' rel='noopener noreferrer'>Privacy Policy</a>
+    {' '}and{' '}
+    <a class={classes.link} href='https://policies.google.com/terms' target='_blank' rel='noopener noreferrer'>Terms of Service</a>
+    {' '}apply.
+  </div>
+))
+
+export default (action) => {
+  const recaptchaEnabled = config.recaptcha?.protectedActions.includes(action)
+  useEffect(() => {
+    if (recaptchaEnabled) {
+      loadRecaptcha()
+    }
+  }, [recaptchaEnabled])
+  const callback = useCallback(requestRecaptchaCode, [recaptchaEnabled])
+  if (recaptchaEnabled) {
+    return callback
+  }
+}

client/src/index.js

@@ -93,6 +93,14 @@ export default withStyles({
   '@global body': {
     overflowX: 'hidden'
   },
+  '@global .grecaptcha-badge': {
+    // we show the google legal notice on each protected form
+    visibility: 'hidden'
+  },
+  // cirrus makes recaptcha position the modal incorrectly, so we reset it here
+  '@global body > div[style*="position: absolute"]': {
+    top: '10px !important'
+  },
   root: {
     display: 'flex',
     flexDirection: 'column',

client/src/routes/challs.js

@@ -182,11 +182,11 @@ const Challenges = ({ classes }) => {
           <div class='frame__body'>
             <div class='frame__title title'>Categories</div>
             {
-              Object.entries(categories).sort((a, b) => a[0].localeCompare(b[0])).map(([category, checked]) => {
+              Array.from(categoryCounts.entries()).sort((a, b) => a[0].localeCompare(b[0])).map(([category, { solved, total }]) => {
                 return (
                   <div key={category} class='form-ext-control form-ext-checkbox'>
-                    <input id={`category-${category}`} data-category={category} class='form-ext-input' type='checkbox' checked={checked} onChange={handleCategoryCheckedChange} />
-                    <label for={`category-${category}`} class='form-ext-label'>{category} ({categoryCounts.get(category).solved}/{categoryCounts.get(category).total} solved)</label>
+                    <input id={`category-${category}`} data-category={category} class='form-ext-input' type='checkbox' checked={categories[category]} onChange={handleCategoryCheckedChange} />
+                    <label for={`category-${category}`} class='form-ext-label'>{category} ({solved}/{total} solved)</label>
                   </div>
                 )
               })

client/src/routes/login.js

@@ -128,7 +128,7 @@ export default withStyles({
     setAuthToken({ authToken: this.state.pendingAuthToken })
   }
 
-  handleSubmit = e => {
+  handleSubmit = async (e) => {
     e.preventDefault()
     this.setState({
       disabledButton: true
@@ -143,16 +143,16 @@ export default withStyles({
       }
     } catch {}
 
-    login({ teamToken })
-      .then(result => {
-        if (result.authToken) {
-          setAuthToken({ authToken: result.authToken })
-          return
-        }
-        this.setState({
-          errors: result,
-          disabledButton: false
-        })
-      })
+    const result = await login({
+      teamToken
+    })
+    if (result.authToken) {
+      setAuthToken({ authToken: result.authToken })
+      return
+    }
+    this.setState({
+      errors: result,
+      disabledButton: false
+    })
   }
 })

client/src/routes/profile.js

@@ -17,6 +17,7 @@ import UserCircle from '../icons/user-circle.svg'
 import EnvelopeOpen from '../icons/envelope-open.svg'
 import Rank from '../icons/rank.svg'
 import Ctftime from '../icons/ctftime.svg'
+import useRecaptcha, { RecaptchaLegalNotice } from '../components/recaptcha'
 
 const SummaryCard = memo(withStyles({
   icon: {
@@ -159,9 +160,13 @@ const UpdateCard = withStyles({
   },
   divisionSelect: {
     paddingLeft: '2.75rem'
+  },
+  recaptchaLegalNotice: {
+    marginTop: '20px'
   }
 }, ({ name: oldName, email: oldEmail, divisionId: oldDivision, allowedDivisions, onUpdate, classes }) => {
   const { toast } = useToast()
+  const requestRecaptchaCode = useRecaptcha('setEmail')
 
   const [name, setName] = useState(oldName)
   const handleSetName = useCallback((e) => setName(e.target.value), [])
@@ -174,7 +179,7 @@ const UpdateCard = withStyles({
 
   const [isButtonDisabled, setIsButtonDisabled] = useState(false)
 
-  const doUpdate = useCallback((e) => {
+  const doUpdate = useCallback(async (e) => {
     e.preventDefault()
 
     let updated = false
@@ -183,65 +188,62 @@ const UpdateCard = withStyles({
       updated = true
 
       setIsButtonDisabled(true)
-      updateAccount({
+      const { error, data } = await updateAccount({
         name: oldName === name ? undefined : name,
         division: oldDivision === division ? undefined : division
       })
-        .then(({ error, data }) => {
-          setIsButtonDisabled(false)
+      setIsButtonDisabled(false)
 
-          if (error !== undefined) {
-            toast({ body: error, type: 'error' })
-            return
-          }
+      if (error !== undefined) {
+        toast({ body: error, type: 'error' })
+        return
+      }
 
-          toast({ body: 'Profile updated' })
+      toast({ body: 'Profile updated' })
 
-          onUpdate({
-            name: data.user.name,
-            divisionId: data.user.division
-          })
-        })
+      onUpdate({
+        name: data.user.name,
+        divisionId: data.user.division
+      })
     }
 
     if (email !== oldEmail) {
       updated = true
 
-      setIsButtonDisabled(true)
-
-      const handleResponse = ({ error, data }) => {
-        setIsButtonDisabled(false)
+      let error, data
+      if (email === '') {
+        setIsButtonDisabled(true)
+        ;({ error, data } = await deleteEmail())
+      } else {
+        const recaptchaCode = await requestRecaptchaCode?.()
+        setIsButtonDisabled(true)
+        ;({ error, data } = await updateEmail({
+          email,
+          recaptchaCode
+        }))
+      }
 
-        if (error !== undefined) {
-          toast({ body: error, type: 'error' })
-          return
-        }
+      setIsButtonDisabled(false)
 
-        toast({ body: data })
-        onUpdate({ email })
+      if (error !== undefined) {
+        toast({ body: error, type: 'error' })
+        return
       }
 
-      if (email === '') {
-        deleteEmail()
-          .then(handleResponse)
-      } else {
-        updateEmail({
-          email
-        })
-          .then(handleResponse)
-      }
+      toast({ body: data })
+      onUpdate({ email })
     }
 
     if (!updated) {
       toast({ body: 'Nothing to update!' })
     }
-  }, [name, email, division, oldName, oldEmail, oldDivision, onUpdate, toast])
+  }, [name, email, division, oldName, oldEmail, oldDivision, onUpdate, toast, requestRecaptchaCode])
 
   return (
     <div class='card'>
       <div class='content'>
         <p>Update Information</p>
-        <p class='font-thin u-no-margin'>This will change how your team appears on the scoreboard. Note that you may only change your team's name once every 10 minutes.</p>
+        <p class='font-thin u-no-margin'>This will change how your team appears on the scoreboard. You may only change your team's name once every 10 minutes.</p>
         <div class='row u-center'>
           <Form class={`col-12 ${classes.form}`} onSubmit={doUpdate} disabled={isButtonDisabled} buttonText='Update'>
             <input
@@ -276,6 +278,11 @@ const UpdateCard = withStyles({
               }
             </select>
           </Form>
+          {requestRecaptchaCode && (
+            <div class={classes.recaptchaLegalNotice}>
+              <RecaptchaLegalNotice />
+            </div>
+          )}
         </div>
       </div>
     </div>