ethiopian-captcha 1.0.0 → 1.1.0

package/package.json

@@ -1,23 +1,23 @@
-{
-  "name": "ethiopian-captcha",
-  "version": "1.0.0",
-  "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.0",
+  "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"
+  }
+}

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

@@ -1,35 +1,183 @@
 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,56 +1,64 @@
-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;
-const MAX_ATTEMPTS = captchaConfig.attempts;
+const MAX_ATTEMPTS = captchaConfig.maxAttempts;
 export const validateCaptcha = (captchaId, userInput) => {
   const captcha = generatedCaptchas.get(captchaId);
 
@@ -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/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;
+};