Feature/kathy/login recaptcha

frontend/src/env.d.ts

@@ -0,0 +1,7 @@
+// src/env.d.ts
+declare namespace NodeJS {
+  type ProcessEnv = {
+    REACT_APP_SITE_KEY: string;
+    // Add other environment variables as needed
+  };
+}

frontend/src/pages/Login.tsx

@@ -1,4 +1,5 @@
-import { FormEvent, useContext, useEffect, useState } from "react";
+import { FormEvent, useContext, useEffect, useRef, useState } from "react";
+import ReCAPTCHA from "react-google-recaptcha";
 import { useNavigate } from "react-router-dom";
 
 import { AuthContext } from "../contexts/AuthContext";
@@ -9,7 +10,9 @@
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [showError, setShowError] = useState(false);
+  const [showCaptchaError, setShowCaptchaError] = useState(false);
   const [isLoginLoading, setIsLoginLoading] = useState(false);
+  const recaptcha = useRef<ReCAPTCHA>(null);
   const navigate = useNavigate();
 
   // Redirect once logged in
@@ -25,6 +28,19 @@
     if (isLoginLoading) return;
 
     setIsLoginLoading(true);
+
+    if (recaptcha.current) {
+      const captchaValue = recaptcha.current.getValue();
+      if (!captchaValue) {
+        setShowCaptchaError(true);
+        setIsLoginLoading(false);
+        return;
+      }
+    } else {
+      setShowCaptchaError(true);
+      setIsLoginLoading(false);
+      return;
+    }
     const loginPromise = login(username, password);
 
     if (loginPromise instanceof Promise) {
@@ -51,7 +67,7 @@
         <div className={styles.sectionContent}>
           <h2 className={styles.loginSectionHeader}>Login</h2>
           <form onSubmit={handleSubmit} className={styles.loginForm}>
-            <div>
+            <div className={styles.inputField}>
               <label className={styles.loginFormLabel} htmlFor="username">
                 Username or Email Address
               </label>
@@ -66,7 +82,7 @@
                 }}
               />
             </div>
-            <div>
+            <div className={styles.inputField}>
               <label className={styles.loginFormLabel} htmlFor="password">
                 Password
               </label>
@@ -82,12 +98,25 @@
                 }}
               />
             </div>
+            <div>
+              <ReCAPTCHA
+                ref={recaptcha}
+                sitekey={import.meta.env.VITE_SERVER_SITE_KEY as string}
+                onChange={() => {
+                  setShowCaptchaError(false);
+                }}
+              />
+            </div>
+
             {showError && (
               <div className={styles.loginError}>
                 Sorry, we are having trouble logging you in. Please check that Username and Password
                 are correct.
               </div>
             )}
+            {showCaptchaError && (
+              <div className={styles.loginError}>Please verify the reCAPTCHA</div>
+            )}
             <input
               className={`${styles.loginFormSubmit} ${isLoginLoading && styles.loading}`}
               type="submit"

frontend/src/pages/index.ts

@@ -2,15 +2,6 @@ import { Application } from "./Application.tsx";
 import { Candidates } from "./Candidates.tsx";
 import { Login } from "./Login.tsx";
 import { PrescreeningForm } from "./PrescreeningForm.tsx";
-import { TestCongratulations } from "./TestCongratulations.tsx";
 import { TestModals } from "./TestModals.tsx";
 import { ThankyouForApplying } from "./ThankyouForApplying.tsx";
-export {
-  Application,
-  Candidates,
-  TestCongratulations,
-  ThankyouForApplying,
-  PrescreeningForm,
-  Login,
-  TestModals,
-};
+export { Application, Candidates, ThankyouForApplying, PrescreeningForm, Login, TestModals };

frontend/src/stylesheets/Login.module.css

@@ -50,6 +50,7 @@
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
+  align-items: center;
 }
 
 .loginHeader {
@@ -70,6 +71,10 @@
   border-radius: 0.25rem;
 }
 
+.inputField {
+  width: 100%;
+}
+
 .loginFormSubmit {
   padding: 0.75rem 0;
   background-color: var(--color-ccidc-red);

package.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "react-google-recaptcha": "^3.1.0"
+  },
+  "devDependencies": {
+    "@types/react-google-recaptcha": "^2.1.9"
+  }
+}