Added 3 components(Drag and Drop, PasswordChecker, FixPassword)

frontend/package.json

@@ -19,7 +19,7 @@
     "react-error-boundary": "^4.0.13",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.22.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-simple-code-editor": "^0.13.1",
     "react-use": "^17.5.0",
     "reagraph": "^4.15.10",

frontend/src/components/BookImage.tsx

@@ -32,7 +32,9 @@ import { ClothingActivity } from "./ClothingActivity";
 import BookRushHour from "./BookRushHour";
 import { ImageQuestion } from "./ImageQuestion";
 import { DragMultiChoice } from "./DragMultiChoice";
-
+import { PasswordChecker } from "./PasswordChecker";
+import { DragDrop } from "./DragDrop";
+import FixPassword from "./FixPassword";
 export function BookImage({
   image,
   page,
@@ -141,6 +143,15 @@ export function BookImage({
       {image === "DragMultiChoice" && (
         <DragMultiChoice props={page?.props} setAllowNext={setAllowNext} />
       )}
+      {image === "PasswordChecker" && (
+        <PasswordChecker props={page?.props} setAllowNext={setAllowNext} />
+      )}
+      {image === "DragDrop" && (
+        <DragDrop props={page?.props} setAllowNext={setAllowNext} />
+      )}
+      {image === "FixPassword" && (
+        <FixPassword props={page?.props} setAllowNext={setAllowNext} />
+      )}
     </div>
   );
 }

frontend/src/components/DragDrop.tsx

@@ -0,0 +1,143 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+interface WordItem {
+  id: number;
+  text: string;
+  correctBox: string;
+}
+
+interface DropAreaProps {
+  title: string;
+  words: WordItem[];
+  onDrop: (item: WordItem) => void;
+  errorMessage: string | null;
+}
+
+const DropArea = ({ title, words, onDrop, errorMessage }: DropAreaProps) => {
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const word = JSON.parse(event.dataTransfer.getData("word"));
+    onDrop(word);
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+  };
+
+  return (
+    <div
+      className="border p-4 m-2 w-1/3 min-h-[200px]"
+      onDrop={handleDrop}
+      onDragOver={handleDragOver}
+    >
+      <h2 className="text-lg font-bold">{title}</h2>
+      {errorMessage && <div className="text-red-500">{errorMessage}</div>}
+      <div>
+        {words.map((word) => (
+          <div key={word.id} className="p-2 m-1 border bg-gray-200">
+            {word.text}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const DraggableWord = ({ word }: { word: WordItem }) => {
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    event.dataTransfer.setData("word", JSON.stringify(word));
+  };
+
+  return (
+    <div
+      className="p-2 m-1 border bg-blue-200 cursor-pointer"
+      draggable
+      onDragStart={handleDragStart}
+    >
+      {word.text}
+    </div>
+  );
+};
+
+export function DragDrop({
+  props,
+  setAllowNext,
+}: {
+  props: any;
+  setAllowNext: Dispatch<SetStateAction<boolean>>;
+}) {
+  const [strongWords, setStrongWords] = useState<WordItem[]>([]);
+  const [weakWords, setWeakWords] = useState<WordItem[]>([]);
+  const [wordBank, setWordBank] = useState<WordItem[]>(props.words);
+  const [strongErrorMessage, setStrongErrorMessage] = useState<string | null>(
+    null,
+  );
+  const [weakErrorMessage, setWeakErrorMessage] = useState<string | null>(null);
+
+  const boxNames = props.boxNames || { strong: "Strong", weak: "Weak" };
+
+  useEffect(() => {
+    const allWordsValid =
+      strongWords.every((word) => word.correctBox === boxNames.strong) &&
+      weakWords.every((word) => word.correctBox === boxNames.weak) &&
+      strongWords.length + weakWords.length === props.words.length;
+    setAllowNext(allWordsValid);
+  }, [
+    strongWords,
+    weakWords,
+    boxNames.strong,
+    boxNames.weak,
+    props.words.length,
+    setAllowNext,
+  ]);
+
+  const handleDropStrong = (item: WordItem) => {
+    if (item.correctBox === boxNames.strong) {
+      setStrongWords((prev) => [...prev, item]);
+      setWordBank((prev) => prev.filter((word) => word.id !== item.id));
+      setStrongErrorMessage(null);
+    } else {
+      setStrongErrorMessage(`Incorrect`);
+    }
+  };
+
+  const handleDropWeak = (item: WordItem) => {
+    if (item.correctBox === boxNames.weak) {
+      setWeakWords((prev) => [...prev, item]);
+      setWordBank((prev) => prev.filter((word) => word.id !== item.id));
+      setWeakErrorMessage(null);
+    } else {
+      setWeakErrorMessage(`Incorrect`);
+    }
+  };
+
+  return (
+    <div className="w-full h-full flex flex-col items-center justify-center">
+      <h2 className="text-2xl mb-4">
+        Drag and Drop the words into the correct categories
+      </h2>
+      <div className="flex w-full justify-center">
+        <DropArea
+          title={boxNames.strong}
+          words={strongWords}
+          onDrop={handleDropStrong}
+          errorMessage={strongErrorMessage}
+        />
+        <DropArea
+          title={boxNames.weak}
+          words={weakWords}
+          onDrop={handleDropWeak}
+          errorMessage={weakErrorMessage}
+        />
+      </div>
+      <div className="mt-4 p-4 border w-full">
+        <h3 className="text-lg font-bold">Word Bank</h3>
+        <div className="flex flex-wrap">
+          {wordBank.map((word) => (
+            <DraggableWord key={word.id} word={word} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/FixPassword.tsx

@@ -0,0 +1,86 @@
+import { useState, useEffect } from "react";
+
+interface FixPasswordProps {
+  props: {
+    weakPasswords: string[];
+  };
+  setAllowNext: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const isStrongPassword = (password: string) => {
+  const minLength = 8;
+  const hasUpperCase = /[A-Z]/.test(password);
+  const hasLowerCase = /[a-z]/.test(password);
+  const hasNumber = /[0-9]/.test(password);
+  const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+  return (
+    password.length >= minLength &&
+    hasUpperCase &&
+    hasLowerCase &&
+    hasNumber &&
+    hasSpecialChar
+  );
+};
+
+const FixPassword = ({ props, setAllowNext }: FixPasswordProps) => {
+  const { weakPasswords } = props;
+  const [passwords, setPasswords] = useState(
+    Array(weakPasswords.length).fill(""),
+  );
+  const [isStrong, setIsStrong] = useState(
+    Array(weakPasswords.length).fill(false),
+  );
+  const [showPasswords, setShowPasswords] = useState(
+    Array(weakPasswords.length).fill(false),
+  );
+
+  useEffect(() => {
+    setAllowNext(isStrong.every((strength) => strength));
+  }, [isStrong, setAllowNext]);
+
+  const handleChange = (index: number, value: string) => {
+    const updatedPasswords = [...passwords];
+    updatedPasswords[index] = value;
+    setPasswords(updatedPasswords);
+
+    const updatedIsStrong = [...isStrong];
+    updatedIsStrong[index] = isStrongPassword(value);
+    setIsStrong(updatedIsStrong);
+  };
+
+  const toggleShowPassword = (index: number) => {
+    const updatedShowPasswords = [...showPasswords];
+    updatedShowPasswords[index] = !updatedShowPasswords[index];
+    setShowPasswords(updatedShowPasswords);
+  };
+
+  return (
+    <div className="flex flex-col items-center">
+      {weakPasswords.map((weakPassword, index) => (
+        <div key={index} className="flex flex-col items-center mb-4">
+          <span className="mb-2">{weakPassword}</span>
+          <div className="flex items-center">
+            <input
+              type={showPasswords[index] ? "text" : "password"}
+              value={passwords[index]}
+              onChange={(e) => handleChange(index, e.target.value)}
+              className="border p-2 mr-2"
+            />
+            <button
+              onClick={() => toggleShowPassword(index)}
+              className="border p-2 bg-gray-200"
+            >
+              {showPasswords[index] ? "Hide" : "Show"}
+            </button>
+            {isStrong[index] && (
+              <span className="text-green-500 ml-4">Success!</span>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default FixPassword;

frontend/src/components/PasswordChecker.tsx

@@ -0,0 +1,111 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+export function PasswordChecker({
+  props,
+  setAllowNext,
+}: {
+  props: any;
+  setAllowNext: Dispatch<SetStateAction<boolean>>;
+}) {
+  const [password, setPassword] = useState("");
+  const [isValid, setIsValid] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [hasMinLength, setHasMinLength] = useState(false);
+  const [hasUpperCase, setHasUpperCase] = useState(false);
+  const [hasLowerCase, setHasLowerCase] = useState(false);
+  const [hasSpecialChar, setHasSpecialChar] = useState(false);
+  const [hasNumber, setHasNumber] = useState(false);
+
+  useEffect(() => {
+    validatePassword(password, props);
+  }, [password, props]);
+
+  const validatePassword = (password: string, requirements: any) => {
+    const minLength = password.length >= requirements.minLength;
+    const upperCase = requirements.requireUpperCase
+      ? /[A-Z]/.test(password)
+      : true;
+    const lowerCase = requirements.requireLowerCase
+      ? /[a-z]/.test(password)
+      : true;
+    const specialChar = requirements.requireSpecialChar
+      ? /[!@#$%^&*(),.?":{}|<>]/.test(password)
+      : true;
+    const number = requirements.requireNumber ? /\d/.test(password) : true;
+
+    setHasMinLength(minLength);
+    setHasUpperCase(upperCase);
+    setHasLowerCase(lowerCase);
+    setHasSpecialChar(specialChar);
+    setHasNumber(number);
+
+    setIsValid(minLength && upperCase && lowerCase && specialChar && number);
+  };
+
+  useEffect(() => {
+    setAllowNext(isValid);
+  }, [isValid, setAllowNext]);
+
+  const toggleShowPassword = () => {
+    setShowPassword((prev) => !prev);
+  };
+
+  return (
+    <div className="w-full h-full flex flex-col items-center justify-center">
+      <p>Type your password below:</p>
+      <div className="relative flex items-center mt-2">
+        <input
+          type={showPassword ? "text" : "password"}
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className={`border p-2 ${isValid ? "border-green-500" : "border-red-500"} flex-grow`}
+        />
+        <button
+          className="ml-2 px-2 py-1 bg-gray-200 rounded"
+          onClick={toggleShowPassword}
+        >
+          {showPassword ? "Hide" : "Show"}
+        </button>
+      </div>
+      <p className="mt-2">
+        Password must meet the following requirements:
+        {props.minLength && (
+          <span
+            className={`${hasMinLength ? "text-green-500" : "text-red-500"}`}
+          >
+            <br />- Minimum {props.minLength} characters long
+          </span>
+        )}
+        {props.requireUpperCase && (
+          <span
+            className={`${hasUpperCase ? "text-green-500" : "text-red-500"}`}
+          >
+            <br />- At least one uppercase letter
+          </span>
+        )}
+        {props.requireLowerCase && (
+          <span
+            className={`${hasLowerCase ? "text-green-500" : "text-red-500"}`}
+          >
+            <br />- At least one lowercase letter
+          </span>
+        )}
+        {props.requireSpecialChar && (
+          <span
+            className={`${hasSpecialChar ? "text-green-500" : "text-red-500"}`}
+          >
+            <br />- At least one special character
+          </span>
+        )}
+        {props.requireNumber && (
+          <span className={`${hasNumber ? "text-green-500" : "text-red-500"}`}>
+            <br />- At least one number
+          </span>
+        )}
+      </p>
+      {isValid && (
+        <p className="text-green-500 mt-2">Password meets all requirements!</p>
+      )}
+    </div>
+  );
+}