Release: v5.3.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "codebase of Matters' website",
   "author": "Matters <hi@matters.town>",
   "engines": {

src/components/Forms/EmailLoginForm/index.tsx

@@ -268,8 +268,6 @@ export const EmailLoginForm: React.FC<FormProps> = ({
 
   const InnerForm = (
     <>
-      <ReCaptcha action="email_login" setToken={setTurnstileToken} />
-
       <Form id={formId} onSubmit={handleSubmit}>
         <Form.Input
           label={<FormattedMessage defaultMessage="Email" id="sy+pv5" />}
@@ -344,6 +342,8 @@ export const EmailLoginForm: React.FC<FormProps> = ({
               disabled={sendingCode}
             />
           )}
+
+        <ReCaptcha action="email_login" setToken={setTurnstileToken} />
       </Form>
     </>
   )

src/components/Forms/EmailSignUpForm/Init.tsx

@@ -142,7 +142,6 @@ const Init: React.FC<FormProps> = ({
 
   const InnerForm = (
     <Form id={formId} onSubmit={handleSubmit}>
-      <ReCaptcha action="register" setToken={setTurnstileToken} />
       <Form.Input
         label={<FormattedMessage defaultMessage="Email" id="sy+pv5" />}
         type="email"
@@ -163,6 +162,8 @@ const Init: React.FC<FormProps> = ({
         spacingBottom="base"
         autoFocus
       />
+
+      <ReCaptcha action="register" setToken={setTurnstileToken} />
     </Form>
   )
 

src/components/ReCaptcha/index.tsx

@@ -1,8 +1,10 @@
-import { useContext, useRef } from 'react'
+import classNames from 'classnames'
+import { useContext, useRef, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 
 import { toast, ViewerContext } from '~/components'
 
+import styles from './styles.module.css'
 import { Turnstile, TurnstileInstance } from './Turnstile'
 
 export * from './Turnstile/types'
@@ -22,6 +24,7 @@ export const ReCaptcha: React.FC<ReCaptchaProps> = ({
 }) => {
   const viewer = useContext(ViewerContext)
   const turnstileRef = useRef<TurnstileInstance>(null)
+  const [interaction, setInteraction] = useState(false)
 
   const onError = () => {
     if (silence) return
@@ -36,27 +39,39 @@ export const ReCaptcha: React.FC<ReCaptchaProps> = ({
     })
   }
 
+  const containerClasses = classNames({
+    [styles.container]: true,
+    [styles.interaction]: interaction,
+  })
+
   return (
-    <Turnstile
-      ref={turnstileRef}
-      siteKey={siteKey}
-      options={{
-        action,
-        cData: `user-group-${viewer.info.group}`,
-        size: 'invisible',
-      }}
-      scriptOptions={{
-        compat: 'recaptcha',
-        appendTo: 'body',
-      }}
-      onSuccess={(token) => {
-        if (setToken) {
-          setToken(token)
-        }
-      }}
-      onError={onError}
-      onUnsupported={onError}
-      onExpire={() => turnstileRef.current?.reset()}
-    />
+    <div className={containerClasses}>
+      <Turnstile
+        ref={turnstileRef}
+        siteKey={siteKey}
+        options={{
+          action,
+          cData: `user-group-${viewer.info.group}`,
+          size: 'normal',
+          theme: 'light',
+          appearance: 'interaction-only',
+        }}
+        scriptOptions={{
+          compat: 'recaptcha',
+          appendTo: 'body',
+        }}
+        onBeforeInteractive={() => {
+          setInteraction(true)
+        }}
+        onSuccess={(token) => {
+          if (setToken) {
+            setToken(token)
+          }
+        }}
+        onError={onError}
+        onUnsupported={onError}
+        onExpire={() => turnstileRef.current?.reset()}
+      />
+    </div>
   )
 }

src/components/ReCaptcha/styles.module.css

@@ -0,0 +1,9 @@
+.container {
+  @mixin flex-center-all;
+
+  margin-top: var(--sp12);
+
+  &:not(.interaction) {
+    display: none;
+  }
+}