ethiopian-captcha 1.0.1 → 1.1.1

package/package.json

@@ -1,23 +1,23 @@
-{
-  "name": "ethiopian-captcha",
-  "version": "1.0.1",
-  "type": "module",
-  "main": "src/index.js",
-  "exports": {
-    ".": "./src/index.js",
-    "./react": "./src/react/EtCaptcha.jsx"
-  },
-  "keywords": [
-    "captcha",
-    "ethiopia",
-    "amharic",
-    "fidel",
-    "security"
-  ],
-  "author": "Amenadam Solomon",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/amenadam/ethiopian-captcha"
-  }
-}
+{
+  "name": "ethiopian-captcha",
+  "version": "1.1.1",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./react": "./src/react/index.js"
+  },
+  "keywords": [
+    "captcha",
+    "ethiopia",
+    "amharic",
+    "fidel",
+    "security"
+  ],
+  "author": "Amenadam Solomon",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/amenadam/ethiopian-captcha"
+  }
+}

package/src/assets/metadatas/metaData.js

@@ -0,0 +1,32 @@
+export const IMAGE_CAPTCHA_METADATA = [
+  {
+    id: "CLICK_IMG_001",
+    question: "Jebena/ጀበና",
+    image: "CAPTCHA_ETHIOPIAN_ITEMS.png",
+    answer: [0, 3],
+  },
+  {
+    id: "CLICK_IMG_002",
+    question: "Mesob/መሶብ",
+    image: "CAPTCHA_ETHIOPIAN_ITEMS.png",
+    answer: [2, 4, 5, 8],
+  },
+  {
+    id: "CLICK_IMG_003",
+    question: "Bandira/ባንዲራ",
+    image: "CAPTCHA_ETHIOPIAN_ITEMS.png",
+    answer: [1],
+  },
+  {
+    id: "CLICK_IMG_004",
+    question: "Buna/ቡና",
+    image: "CAPTCHA_ETHIOPIAN_ITEMS.png",
+    answer: [6],
+  },
+  {
+    id: "CLICK_IMG_005",
+    question: "Injera/እንጀራ",
+    image: "CAPTCHA_ETHIOPIAN_ITEMS.png",
+    answer: [4, 7],
+  },
+];

package/src/constants/amharicLetters.js

@@ -122,13 +122,7 @@ export const AMHARIC_LETTERS = [
   "ዜ",
   "ዝ",
   "ዞ",
-  "ዠ",
-  "ዡ",
-  "ዢ",
-  "ዣ",
-  "ዤ",
-  "ዥ",
-  "ዦ",
+
   "የ",
   "ዩ",
   "ዪ",

package/src/constants/common.js

@@ -0,0 +1 @@
+export const DEBUGING_OPACITY = 0;

package/src/constants/imageAPI.js

@@ -0,0 +1 @@
+export const IMAGES_API = "https://ethiopian-captcha.vercel.app/";

package/src/core/captchaEngine.js

@@ -1,52 +1,60 @@
-import { AMHARIC_LETTERS } from "../constants/amharicLetters.js";
 import { hashAnswer } from "../utils/hash.js";
 import { captchaConfig } from "../config/config.js";
+import { getRandomLetters } from "../utils/getRandomLetters.js";
+import { IMAGE_CAPTCHA_METADATA } from "../assets/metadatas/metaData.js";
+import { IMAGES_API } from "../constants/imageAPI.js";
 
-const getRandomLetter = () => {
-  return AMHARIC_LETTERS[Math.floor(Math.random() * AMHARIC_LETTERS.length)];
-};
+let imageAPI = IMAGES_API;
 
-const getRandomLetters = (count = 4) => {
-  let last = "";
-  let randomLetters = [];
-  for (let i = 0; i < count; i++) {
-    let letter;
-    do {
-      letter = getRandomLetter();
-    } while (letter === last);
-
-    last = letter;
-    randomLetters.push(letter);
-  }
+const generatedCaptchas = new Map();
 
-  return randomLetters;
+const getRandomImageClickCaptcha = () => {
+  let randomCaptcha =
+    IMAGE_CAPTCHA_METADATA[
+      Math.floor(Math.random() * IMAGE_CAPTCHA_METADATA.length)
+    ];
+  return randomCaptcha;
 };
 
-const generatedCaptchas = new Map();
-
 export const generateCaptcha = (
   type = captchaConfig.type,
-  count = captchaConfig.count
+  count = captchaConfig.count,
 ) => {
-  if (type !== "fidel") {
-    return { success: false, message: "Unsupported captcha type" };
+  if (type === "fidel") {
+    const captcha = getRandomLetters(count);
+    const captchaId = `ETH-fidel-${Date.now()}-${Math.floor(Math.random() * 1e6)}`;
+
+    generatedCaptchas.set(captchaId, {
+      answerHash: hashAnswer(captcha.join("")),
+      generatedAt: Date.now(),
+      attempts: 0,
+      type: "fidel",
+    });
+
+    return {
+      success: true,
+      type,
+      captchaId,
+      captcha,
+    };
   }
 
-  const captcha = getRandomLetters(count);
-  const captchaId = `ETH-${Date.now()}-${Math.floor(Math.random() * 1e6)}`;
-
-  generatedCaptchas.set(captchaId, {
-    answerHash: hashAnswer(captcha.join("")),
-    generatedAt: Date.now(),
-    attempts: 0,
-  });
-
-  return {
-    success: true,
-    type,
-    captchaId,
-    captcha,
-  };
+  if (type === "click-image") {
+    let captcha = getRandomImageClickCaptcha();
+    const captchaId = `ETH-click-image-${Date.now()}-${Math.floor(Math.random() * 1e6)}`;
+    let image = imageAPI + captcha.image;
+    generatedCaptchas.set(captchaId, {
+      captcha,
+      image,
+
+      generatedAt: Date.now(),
+      attempts: 0,
+      type: "click-image",
+    });
+    return { success: true, type, captchaId, captcha: captcha.question, image };
+  }
+
+  return { success: false, message: "Unsupported captcha type" };
 };
 
 const CAPTCHA_TTL = captchaConfig.ttl;
@@ -64,15 +72,27 @@ export const validateCaptcha = (captchaId, userInput) => {
   }
 
   captcha.attempts++;
-  if (captcha.attempts > MAX_ATTEMPTS) {
+  if (captcha.attempts >= MAX_ATTEMPTS) {
     generatedCaptchas.delete(captchaId);
     return { success: false, message: "Too many attempts" };
   }
 
-  const inputHash = hashAnswer(userInput.trim());
-  if (inputHash === captcha.answerHash) {
-    generatedCaptchas.delete(captchaId);
-    return { success: true };
+  if (captcha.type === "fidel") {
+    const inputHash = hashAnswer(userInput.trim());
+    if (inputHash === captcha.answerHash) {
+      generatedCaptchas.delete(captchaId);
+      return { success: true, message: "captcha correctly matched" };
+    }
+
+    return { success: false, message: "Incorrect captcha" };
+  }
+
+  if (captcha.type === "click-image") {
+    if (captcha.captcha.answer.includes(userInput)) {
+      return { success: true, message: "Correct Choice" };
+    }
+
+    return { success: false, message: "incorrect choice" };
   }
 
   return { success: false, message: "Incorrect captcha" };

package/src/react/ClickImage.jsx

@@ -0,0 +1,166 @@
+import { useState } from "react";
+import { DEBUGING_OPACITY } from "../constants/common";
+
+export function ClickImage({
+  captcha = {},
+  captchaId,
+  onVerify,
+  onRefresh,
+  loading = false,
+}) {
+  const [input, setInput] = useState(1000);
+  const [iconPosition, setIconPosition] = useState({ x: 0, y: 0 });
+
+  const handleClick = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left - 6; // Relative to container
+    const y = e.clientY - rect.top - 6;
+    setIconPosition({ x, y });
+  };
+
+  const handleVerify = () => {
+    onVerify({ captchaId, input });
+    setIconPosition({ x: 0, y: 0 });
+  };
+
+  return (
+    <div
+      style={{
+        border: "1px solid #ddd",
+        borderRadius: 8,
+        padding: 16,
+        width: 260,
+        fontFamily: "system-ui, sans-serif",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "1rem",
+      }}
+    >
+      <div
+        style={{
+          fontSize: 24,
+          textAlign: "center",
+          marginBottom: 12,
+          userSelect: "none",
+        }}
+      >
+        Click on <span style={{ fontWeight: "bold" }}>{captcha.captcha}</span>
+      </div>
+
+      <div
+        style={{
+          width: "15rem",
+          position: "relative",
+        }}
+        onClick={handleClick}
+      >
+        <div
+          style={{
+            position: "absolute",
+            background: "blue",
+            border: "1px solid white",
+            width: "15px",
+            height: "15px",
+            left: iconPosition.x,
+            top: iconPosition.y,
+            pointerEvents: "none",
+            display: iconPosition.x == 0 || iconPosition.y == 0 ? "none" : "",
+            borderRadius: "50%",
+          }}
+        ></div>
+        <div
+          style={{
+            position: "absolute",
+            opacity: DEBUGING_OPACITY,
+            display: "grid",
+            gridTemplateColumns: "repeat(3, 1fr)",
+            gridTemplateRows: "repeat(3, 1fr)",
+            width: "100%",
+            height: "100%",
+            borderRadius: "0.5rem",
+            margin: "0 auto",
+          }}
+        >
+          <div
+            onClick={() => setInput(0)}
+            style={{
+              background: `${input === 0 ? "#00000080" : ""}`,
+              border: "1px solid #000",
+            }}
+          >
+            0
+          </div>
+          <div
+            onClick={() => setInput(1)}
+            style={{
+              background: `${input === 1 ? "#00000080" : ""}`,
+              border: "1px solid #000",
+            }}
+          >
+            1
+          </div>
+          <div
+            onClick={() => setInput(2)}
+            style={{ background: "", border: "1px solid #000" }}
+          >
+            2
+          </div>
+          <div
+            onClick={() => setInput(3)}
+            style={{ background: "", border: "1px solid #000" }}
+          >
+            3
+          </div>
+          <div
+            onClick={() => setInput(4)}
+            style={{ background: "", border: "1px solid #000" }}
+          >
+            4
+          </div>
+          <div
+            onClick={() => setInput(5)}
+            style={{ background: "", border: "1px solid #000" }}
+          >
+            5
+          </div>
+          <div
+            onClick={() => setInput(6)}
+            style={{ background: "", border: "1px solid #000" }}
+          >
+            6
+          </div>
+          <div
+            onClick={() => setInput(7)}
+            style={{ background: "", border: "1px solid #000" }}
+          >
+            7
+          </div>
+          <div
+            onClick={() => setInput(8)}
+            style={{ background: "", border: "1px solid #000" }}
+          >
+            8
+          </div>
+        </div>
+
+        <img
+          src={`${captcha.image}`}
+          style={{ width: "100%", borderRadius: "0.5rem" }}
+          alt="CAPTCHA"
+        />
+      </div>
+
+      <div style={{ display: "flex", gap: 8 }}>
+        <button onClick={handleVerify} disabled={loading} style={{ flex: 1 }}>
+          Verify
+        </button>
+
+        <button onClick={onRefresh} disabled={loading}>
+          ↻
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/react/index.js

@@ -0,0 +1,2 @@
+export { default as EtCaptcha } from "./EtCaptcha.jsx";
+export { default as ClickImage } from "./ClickImage.jsx";

package/src/utils/getRandomLetters.js

@@ -0,0 +1,21 @@
+import { AMHARIC_LETTERS } from "../constants/amharicLetters.js";
+
+const getRandomLetter = () => {
+  return AMHARIC_LETTERS[Math.floor(Math.random() * AMHARIC_LETTERS.length)];
+};
+
+export const getRandomLetters = (count = 4) => {
+  let last = "";
+  let randomLetters = [];
+  for (let i = 0; i < count; i++) {
+    let letter;
+    do {
+      letter = getRandomLetter();
+    } while (letter === last);
+
+    last = letter;
+    randomLetters.push(letter);
+  }
+
+  return randomLetters;
+};