feat(app): add Cloudflare Turnstile widget for sign-in and sign-up pages

Author: ourai

src/app/(uc)/signin/page.js

@@ -30,6 +30,7 @@ import { isEmpty } from '@/utils';
 import { wrapOnChange } from '@/utils/form';
 
 import { getOauthSourceFromParams } from '#/domain/auth/helper';
+import HumanProofWidget from '#/domain/auth/widgets/human-proof';
 import { signin, emailCodeLogin } from '#/services/auth';
 
 import LoginTypeSwitcher from './LoginTypeSwitcher';
@@ -44,6 +45,7 @@ export default function Login() {
   const emailFieldName = 'Email';
   const searchParams = useSearchParams();
   const [loading, setLoading] = useState(false);
+  const [humanVerified, setHumanVerified] = useState(false);
   const [passwordType, setPasswordType] = useState('password');
   const [loginType, setLoginType] = useState('verifyCode');
 
@@ -155,6 +157,7 @@ export default function Login() {
             <button
               type="submit"
               disabled={
+                !humanVerified ||
                 !watchAllFields.Email ||
                 (loginType === 'password' && !watchAllFields.Password) ||
                 (loginType === 'verifyCode' && !watchAllFields.VerifyCode) ||
@@ -166,20 +169,18 @@ export default function Login() {
               <span>Continue</span>
             </button>
           </form>
-
+          <HumanProofWidget onVerify={setHumanVerified} />
           {!isEmpty(errors) && watchAllFields.Email !== '' && (
             <p className="mt-4 text-xs text-center text-red">
               {loginType === 'password'
                 ? 'The email or password is wrong.'
                 : 'The email or code is wrong.'}
             </p>
           )}
-
           <LoginTypeSwitcher
             loginType={loginType}
             handleChangeLoginType={handleChangeLoginType}
           />
-
           {loginType == 'password' && (
             <div className="mt-6 text-center">
               Forget your password?&nbsp;

src/app/(uc)/signup/page.js

@@ -30,6 +30,7 @@ import { useAccount } from 'wagmi';
 import { EyeIcon, EyeSlashIcon } from '@/components/icon/outlined';
 import Loader from '@/components/Loader';
 
+import HumanProofWidget from '#/domain/auth/widgets/human-proof';
 import { registerEmail, sendCode } from '#/services/auth';
 
 import { NavButtonStyle } from '../signin/page';
@@ -40,6 +41,7 @@ export default function SignUp() {
   const router = useRouter();
   const [cdMss, setCdMss] = useState(0);
   const [loading, setLoading] = useState(false);
+  const [humanVerified, setHumanVerified] = useState(false);
   const { address } = useAccount();
   const searchParams = useSearchParams();
   const [sendLoading, setSendLoading] = useState(false);
@@ -149,6 +151,7 @@ export default function SignUp() {
           <button
             type="submit"
             disabled={
+              !humanVerified ||
               watchAllFields.Email === '' ||
               watchAllFields.ConfirmPassword === '' ||
               watchAllFields.VerificationCode === '' ||
@@ -166,7 +169,7 @@ export default function SignUp() {
           {watchAllFields.ConfirmPassword !== watchAllFields.Password && (
             <p className="mt-4 text-center text-xs text-red">The passwords entered twice are inconsistent</p>
           )}
-
+          <HumanProofWidget onVerify={setHumanVerified} />
           <div className="mt-6 text-center">
             Already have an account?&nbsp;
             <span

src/app/oauth/page.js

@@ -23,14 +23,14 @@ import Logo from 'public/images/svg/logo-black.svg';
 import { useEffect, useState } from 'react';
 
 import { Button } from '@/components/Button';
-import CloudflareTurnstile from '@/components/control/cf-turnstile';
 import { SvgIcon } from '@/components/Image';
 import Loader from '@/components/Loader';
 import useMounted from '@/hooks/useMounted';
 import { getCopyrightText } from '@/utils/app';
 
 import { setOauthSource } from '#/domain/auth/helper';
 import { fetchOauthClientInfo, fetchOauthClientCode } from '#/domain/auth/repository';
+import HumanProofWidget from '#/domain/auth/widgets/human-proof';
 
 import Link from './Link';
 import NoteItem from './NoteItem';
@@ -133,7 +133,7 @@ export default function Page() {
             <NoteItem icon="international" title="Public data only" description="Limited access to your public data" />
           </div>
           <div className="mx-[-24px] p-6 border-y border-gray-600">
-            <CloudflareTurnstile className="mb-2" onVerify={handleVerify} />
+            <HumanProofWidget className="mb-2" onVerify={handleVerify} />
             <div className="flex gap-3">
               <Button variant="outlined" className="flex-1" onClick={handleCancel}>
                 Cancel

src/shared/components/control/cf-turnstile/CloudflareTurnstile.js src/domain/auth/widgets/human-proof/HumanProof.js

@@ -16,11 +16,11 @@
 
 import Script from 'next/script';
 
-import { isFunction } from '../../../utils';
+import { isFunction } from '../../../../shared/utils';
 
 const sitekey = process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY;
 
-function CloudflareTurnstile({ className, onVerify }) {
+function HumanProof({ className, onVerify }) {
   const handleScriptLoad = () => {
     window.turnstile.render('#cfTurnstile', {
       sitekey,
@@ -40,4 +40,4 @@ function CloudflareTurnstile({ className, onVerify }) {
   );
 };
 
-export default CloudflareTurnstile;
+export default HumanProof;

src/shared/components/control/cf-turnstile/index.js src/domain/auth/widgets/human-proof/index.js

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { default } from './CloudflareTurnstile';
+export { default } from './HumanProof';