turnstile for spam, misc

.github/workflows/ci.yml

@@ -139,6 +139,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       NEXT_PUBLIC_FORMS_ENDPOINT: /not-real
+      NEXT_PUBLIC_TURNSTILE_SITEKEY: not-real
     steps:
       - name: checkout
         uses: actions/checkout@v4

appviews/src/Onboarding/ExpandableContent.tsx

@@ -8,6 +8,7 @@ interface Props {
   asset: CdnAsset;
   width: number;
   height: number;
+  maxWidth?: number;
   lessRounded?: boolean;
   showInstructions?: boolean;
   className?: string;
@@ -20,6 +21,7 @@ const ExpandableContent: React.FC<Props> = ({
   showInstructions = true,
   lessRounded = false,
   className,
+  maxWidth = 800,
 }) => {
   const [expanded, setExpanded] = useState(false);
   const [frameCoords, setFrameCoords] = useState({ x: 0, y: 0 });
@@ -32,7 +34,6 @@ const ExpandableContent: React.FC<Props> = ({
   const withinActiveStep = useContext(WithinActiveStepContext);
 
   const aspectRatio = width / height;
-  const maxWidth = 800;
 
   useEffect(() => {
     if (contentRef.current) {

appviews/src/Onboarding/Steps/ViewHealthCheck.tsx

@@ -24,8 +24,9 @@ const ViewHealthCheck: React.FC = () => (
     <ExpandableContent
       asset={assets.img(`administrate`)}
       lessRounded
-      width={800 * 0.45}
-      height={600 * 0.45}
+      width={758 * 0.48}
+      height={556 * 0.48}
+      maxWidth={700}
     />
   </Onboarding.Centered>
 );

site/app/(marketing-old)/old/contact/OldContactForm.tsx

@@ -3,20 +3,19 @@
 import { useState } from 'react';
 import cx from 'classnames';
 import { TextInput, Logo, Button, Loading } from '@shared/components';
+import Turnstile from 'react-turnstile';
 import type { NextPage } from 'next';
 import ContactStatusMessage from './ContactStatusMessage';
+import * as env from '@/lib/env';
 
 const ContactForm: NextPage = () => {
   const [state, setState] = useState<'idle' | 'ongoing' | 'failed' | 'succeeded'>(`idle`);
   const [name, setName] = useState(``);
   const [emailAddress, setEmailAddress] = useState(``);
   const [subject, setSubject] = useState(``);
   const [message, setMessage] = useState(``);
-
-  const endpoint = process.env.NEXT_PUBLIC_FORMS_ENDPOINT;
-  if (!endpoint) {
-    throw new Error(`Missing NEXT_PUBLIC_FORMS_ENDPOINT`);
-  }
+  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
+  const { formsEndpoint, turnstileSitekey } = env.getPublicVars();
 
   return (
     <section className="bg-gradient-to-b from-violet-500 to-fuchsia-500 flex-grow flex flex-col justify-center items-center px-6 pt-8 sm:pt-16 pb-16">
@@ -52,16 +51,21 @@ const ContactForm: NextPage = () => {
           name="contact"
           onSubmit={(event) => {
             event.preventDefault();
+            if (!turnstileToken) {
+              setState(`failed`);
+              return;
+            }
             const params = new URLSearchParams();
             params.append(`form`, `contact`);
             params.append(`name`, name);
             params.append(`email`, emailAddress);
             params.append(`subject`, subject);
             params.append(`message`, message);
+            params.append(`turnstileToken`, turnstileToken);
             setState(`ongoing`);
             try {
               window
-                .fetch(endpoint, {
+                .fetch(formsEndpoint, {
                   method: `POST`,
                   headers: { 'Content-Type': `application/x-www-form-urlencoded` },
                   body: params.toString(),
@@ -109,6 +113,11 @@ const ContactForm: NextPage = () => {
             value={message}
             setValue={setMessage}
           />
+          <Turnstile
+            sitekey={turnstileSitekey}
+            refreshExpired="auto"
+            onVerify={setTurnstileToken}
+          />
           <Button
             className="self-end relative z-10"
             type="submit"

site/components/ContactForm.tsx

@@ -3,19 +3,18 @@
 import React, { useState } from 'react';
 import cx from 'classnames';
 import { CheckIcon, Loader2Icon, SendIcon, XIcon } from 'lucide-react';
+import Turnstile from 'react-turnstile';
 import FancyLink from './FancyLink';
+import * as env from '@/lib/env';
 
 const ContactForm: React.FC = () => {
   const [state, setState] = useState<'idle' | 'ongoing' | 'failed' | 'succeeded'>(`idle`);
   const [name, setName] = useState(``);
   const [emailAddress, setEmailAddress] = useState(``);
   const [subject, setSubject] = useState(``);
   const [message, setMessage] = useState(``);
-
-  const endpoint = process.env.NEXT_PUBLIC_FORMS_ENDPOINT;
-  if (!endpoint) {
-    throw new Error(`Missing NEXT_PUBLIC_FORMS_ENDPOINT`);
-  }
+  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
+  const { formsEndpoint, turnstileSitekey } = env.getPublicVars();
 
   return (
     <form
@@ -25,15 +24,20 @@ const ContactForm: React.FC = () => {
       method="POST"
       onSubmit={(event) => {
         event.preventDefault();
+        if (!turnstileToken) {
+          setState(`failed`);
+          return;
+        }
         const params = new URLSearchParams();
         params.append(`form`, `contact`);
         params.append(`name`, name);
         params.append(`email`, emailAddress);
         params.append(`subject`, subject);
         params.append(`message`, message);
+        params.append(`turnstileToken`, turnstileToken);
         setState(`ongoing`);
         try {
-          fetch(endpoint, {
+          fetch(formsEndpoint, {
             method: `POST`,
             headers: { 'Content-Type': `application/x-www-form-urlencoded` },
             body: params.toString(),
@@ -82,7 +86,11 @@ const ContactForm: React.FC = () => {
           required
         />
       </div>
-      <div></div>
+      <Turnstile
+        sitekey={turnstileSitekey}
+        refreshExpired="auto"
+        onVerify={setTurnstileToken}
+      />
       {state === `idle` && (
         <FancyLink
           type="submit"

site/components/articles/ArticleFeedbackForm.tsx

@@ -1,85 +1,93 @@
-import React from 'react';
+'use client';
+
+import React, { useState } from 'react';
+import Turnstile from 'react-turnstile';
 import FancyLink from '@/components/FancyLink';
+import * as env from '@/lib/env';
 
 interface Props {
   name: string;
   lang: 'en' | 'es';
 }
 
-const ArticleFeedbackForm: React.FC<Props> = ({ name, lang }) => (
-  <div className="mt-24">
-    <div className="flex gap-4">
-      <span className="text-4xl" role="img" aria-label="thinking emoji">
-        🤔
-      </span>
-      <p className="mb-3 mt-0 italic leading-snug">
-        {lang === `en`
-          ? `Questions? Comments? Stuck trying to do some step of this tutorial? Let us know by
+const ArticleFeedbackForm: React.FC<Props> = ({ name, lang }) => {
+  const [turnstileToken, setTurnstileToken] = useState<string>(``);
+  const { formsEndpoint, turnstileSitekey } = env.getPublicVars();
+  return (
+    <div className="mt-24">
+      <div className="flex gap-4">
+        <span className="text-4xl" role="img" aria-label="thinking emoji">
+          🤔
+        </span>
+        <p className="mb-3 mt-0 italic leading-snug">
+          {lang === `en`
+            ? `Questions? Comments? Stuck trying to do some step of this tutorial? Let us know by
         submitting the form below, and we'll try to help!`
-          : `¿Preguntas? ¿Comentarios? ¿Te quedaste atascado intentando realizar algún paso de este tutorial? Háznoslo saber enviando el siguiente formulario y ¡haremos lo posible por ayudarte!`}
-      </p>
-    </div>
-    <form
-      className="pl-12 flex flex-col space-y-4 text-white max-w-2xl pr-2"
-      data-netlify="true"
-      name={name}
-      method="POST"
-      action={(() => {
-        const endpoint = process.env.NEXT_PUBLIC_FORMS_ENDPOINT;
-        if (!endpoint) {
-          throw new Error(`Missing NEXT_PUBLIC_FORMS_ENDPOINT`);
-        }
-        return endpoint;
-      })()}
-    >
-      <input type="hidden" name="form" value={name} />
-      <div className="lg:flex lg:space-x-4">
-        <fieldset className="lg:w-1/2">
-          <label className="block text-slate-600 ml-3" htmlFor="name">
-            {lang === `en` ? `Name:` : `Nombre:`}
+            : `¿Preguntas? ¿Comentarios? ¿Te quedaste atascado intentando realizar algún paso de este tutorial? Háznoslo saber enviando el siguiente formulario y ¡haremos lo posible por ayudarte!`}
+        </p>
+      </div>
+      <form
+        className="pl-12 flex flex-col space-y-4 text-white max-w-2xl pr-2"
+        data-netlify="true"
+        name={name}
+        method="POST"
+        action={formsEndpoint}
+      >
+        <Turnstile
+          sitekey={turnstileSitekey}
+          refreshExpired="auto"
+          onVerify={setTurnstileToken}
+        />
+        <input type="hidden" name="form" value={name} />
+        <input type="hidden" name="turnstileToken" value={turnstileToken} />
+        <div className="lg:flex lg:space-x-4">
+          <fieldset className="lg:w-1/2">
+            <label className="block text-slate-600 ml-3" htmlFor="name">
+              {lang === `en` ? `Name:` : `Nombre:`}
+            </label>
+            <input
+              className="bg-slate-100 text-slate-800 rounded-xl w-full max-w-sm border-none placeholder-slate-300"
+              placeholder="John Doe"
+              type="text"
+              name="name"
+              id="name"
+              required
+            />
+          </fieldset>
+          <fieldset className="lg:w-1/2 mt-4 lg:mt-0">
+            <label className="block text-slate-600 ml-3" htmlFor="email">
+              {lang === `en` ? `Email:` : `Correo electrónico:`}
+            </label>
+            <input
+              className="bg-slate-100 text-slate-800 rounded-xl w-full max-w-sm border-none placeholder-slate-300"
+              type="email"
+              name="email"
+              id="email"
+              placeholder="[email protected]"
+              required
+            />
+          </fieldset>
+        </div>
+        <fieldset>
+          <label className="block text-slate-600 ml-3" htmlFor="message">
+            {lang === `en` ? `Message:` : `Mensaje:`}
           </label>
-          <input
-            className="bg-slate-100 text-slate-800 rounded-xl w-full max-w-sm border-none placeholder-slate-300"
-            placeholder="John Doe"
-            type="text"
-            name="name"
-            id="name"
+          <textarea
+            className="bg-slate-100 text-slate-800 rounded-xl w-full border-none placeholder-slate-300"
+            name="message"
+            id="message"
+            rows={5}
             required
           />
         </fieldset>
-        <fieldset className="lg:w-1/2 mt-4 lg:mt-0">
-          <label className="block text-slate-600 ml-3" htmlFor="email">
-            {lang === `en` ? `Email:` : `Correo electrónico:`}
-          </label>
-          <input
-            className="bg-slate-100 text-slate-800 rounded-xl w-full max-w-sm border-none placeholder-slate-300"
-            type="email"
-            name="email"
-            id="email"
-            placeholder="[email protected]"
-            required
-          />
+        <fieldset>
+          <FancyLink type="submit" color="primary">
+            {lang === `en` ? `Submit` : `Enviar`} →
+          </FancyLink>
         </fieldset>
-      </div>
-      <fieldset>
-        <label className="block text-slate-600 ml-3" htmlFor="message">
-          {lang === `en` ? `Message:` : `Mensaje:`}
-        </label>
-        <textarea
-          className="bg-slate-100 text-slate-800 rounded-xl w-full border-none placeholder-slate-300"
-          name="message"
-          id="message"
-          rows={5}
-          required
-        />
-      </fieldset>
-      <fieldset>
-        <FancyLink type="submit" color="primary">
-          {lang === `en` ? `Submit` : `Enviar`} →
-        </FancyLink>
-      </fieldset>
-    </form>
-  </div>
-);
+      </form>
+    </div>
+  );
+};
 
 export default ArticleFeedbackForm;

site/lib/env.ts

@@ -0,0 +1,11 @@
+export function getPublicVars(): { formsEndpoint: string; turnstileSitekey: string } {
+  const endpoint = process.env.NEXT_PUBLIC_FORMS_ENDPOINT;
+  if (!endpoint) {
+    throw new Error(`Missing NEXT_PUBLIC_FORMS_ENDPOINT`);
+  }
+  const sitekey = process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY;
+  if (!sitekey) {
+    throw new Error(`Missing NEXT_PUBLIC_TURNSTILE_SITEKEY`);
+  }
+  return { formsEndpoint: endpoint, turnstileSitekey: sitekey };
+}

site/package.json

@@ -25,7 +25,8 @@
     "next": "14.1.4",
     "prismjs": "1.29.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-turnstile": "1.1.4"
   },
   "devDependencies": {
     "@types/glob": "8.1.0",

smoke/cypress/e2e/smoke.cy.ts

@@ -83,7 +83,7 @@ describe(`Smoke test`, () => {
     cy.contains(`MacBook Pro`);
 
     // edit the user
-    cy.contains(`Edit`).click();
+    cy.get(`[data-test="edit-user"]`).click();
     cy.get(`[data-test=user-name]`).clear().type(`Franny (edited)`);
     cy.contains(`Save child`).click();
     cy.contains(`Child saved`);