react-canvas-captcha - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.js

@@ -9,5 +9,3 @@ "use strict";
 var _react = require("react");
-var _useGenerateCaptcha2 = _interopRequireDefault(require("./useGenerateCaptcha"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -24,2 +22,51 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var randomColor = function randomColor() {
+  var r = Math.floor(Math.random() * 256);
+  var g = Math.floor(Math.random() * 256);
+  var b = Math.floor(Math.random() * 256);
+  return 'rgb(' + r + ',' + g + ',' + b + ')';
+};
+var createCaptcha = function createCaptcha(canvas, config) {
+  var showNum = [];
+  var canvasWidth = config === null || config === void 0 ? void 0 : config.boxWidth;
+  var canvasHeight = config.boxHeight;
+  var context = canvas.getContext('2d');
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  var sCode = 'A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,0,1,2,3,4,5,6,7,8,9';
+  var saCode = sCode.split(',');
+  var saCodeLen = saCode.length;
+  for (var i = 0; i < (config === null || config === void 0 ? void 0 : config.numberOfChars); i++) {
+    var sIndex = Math.floor(Math.random() * saCodeLen);
+    var sDeg = Math.random() * 30 * Math.PI / 180;
+    var cTxt = saCode[sIndex];
+    showNum[i] = cTxt.toLowerCase();
+    var x = 10 + i * 20;
+    var y = 20 + Math.random() * 8;
+    context.font = config === null || config === void 0 ? void 0 : config.font;
+    context.translate(x, y);
+    context.rotate(sDeg);
+    context.fillStyle = randomColor();
+    context.fillText(cTxt, config === null || config === void 0 ? void 0 : config.textStartingX, config === null || config === void 0 ? void 0 : config.textStartingY);
+    context.rotate(-sDeg);
+    context.translate(-x, -y);
+  }
+  for (var _i = 0; _i <= 5; _i++) {
+    context.strokeStyle = randomColor();
+    context.beginPath();
+    context.moveTo(Math.random() * canvasWidth, Math.random() * canvasHeight);
+    context.lineTo(Math.random() * canvasWidth, Math.random() * canvasHeight);
+    context.stroke();
+  }
+  for (var _i2 = 0; _i2 < 30; _i2++) {
+    context.strokeStyle = randomColor();
+    context.beginPath();
+    var _x = Math.random() * canvasWidth;
+    var _y = Math.random() * canvasHeight;
+    context.moveTo(_x, _y);
+    context.lineTo(_x + 1, _y + 1);
+    context.stroke();
+  }
+  return showNum.join('');
+};
 var Captcha = function Captcha(_ref) {
@@ -31,4 +78,2 @@ var boxWidth = _ref.boxWidth,
   var canvasRef = (0, _react.useRef)();
-  var _useGenerateCaptcha = (0, _useGenerateCaptcha2["default"])(),
-    createCaptcha = _useGenerateCaptcha.createCaptcha;
   var _useState = (0, _react.useState)(''),
@@ -35,0 +80,0 @@ _useState2 = _slicedToArray(_useState, 2),

package.json

 {
   "name": "react-canvas-captcha",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Add captcha to your react projects",
@@ -11,3 +11,3 @@ "main": "dist/index.js",
     "type": "git",
-    "url": "git+https://github.com/kumbhar-ketan/react-captcha.git"
+    "url": "git+https://github.com/kumbhar-ketan/react-canvas-captcha.git"
   },
@@ -27,5 +27,5 @@ "keywords": [
   "bugs": {
-    "url": "https://github.com/kumbhar-ketan/react-captcha/issues"
+    "url": "https://github.com/kumbhar-ketan/react-canvas-captcha/issues"
   },
-  "homepage": "https://github.com/kumbhar-ketan/react-captcha#readme",
+  "homepage": "https://github.com/kumbhar-ketan/react-canvas-captcha#readme",
   "peerDependencies": {
@@ -32,0 +32,0 @@ "react": "^18.2.0",

src/index.js

 import { useEffect, useRef, useState } from "react";
-import useGenerateCaptcha from "./useGenerateCaptcha";
 
+const randomColor = () => {
+  let r = Math.floor(Math.random()*256);
+  let g = Math.floor(Math.random()*256);
+  let b = Math.floor(Math.random()*256);
+  return 'rgb(' + r + ',' + g + ',' + b + ')';
+};
+
+const createCaptcha = (canvas, config) => {
+  let showNum = [];
+  let canvasWidth = config?.boxWidth;
+  let canvasHeight = config.boxHeight;
+  let context = canvas.getContext('2d');
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  let sCode = 'A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,0,1,2,3,4,5,6,7,8,9';
+  let saCode = sCode.split(',');
+  let saCodeLen = saCode.length;
+  for (let i = 0; i < config?.numberOfChars; i++) {
+    let sIndex = Math.floor(Math.random()*saCodeLen);
+    let sDeg = (Math.random()*30*Math.PI) / 180;
+    let cTxt = saCode[sIndex];
+    showNum[i] = cTxt.toLowerCase();
+    let x = 10 + i*20;
+    let y = 20 + Math.random()*8;
+    context.font = config?.font;
+    context.translate(x, y);
+    context.rotate(sDeg);
+
+    context.fillStyle = randomColor();
+    context.fillText(cTxt, config?.textStartingX, config?.textStartingY);
+
+    context.rotate(-sDeg);
+    context.translate(-x, -y);
+  }
+  for (let i = 0; i <= 5; i++) {
+    context.strokeStyle = randomColor();
+    context.beginPath();
+    context.moveTo(
+      Math.random() * canvasWidth,
+      Math.random() * canvasHeight
+    );
+    context.lineTo(
+      Math.random() * canvasWidth,
+      Math.random() * canvasHeight
+    );
+    context.stroke();
+  }
+  for (let i = 0; i < 30; i++) {
+    context.strokeStyle = randomColor();
+    context.beginPath();
+    let x = Math.random() * canvasWidth;
+    let y = Math.random() * canvasHeight;
+    context.moveTo(x,y);
+    context.lineTo(x+1, y+1);
+    context.stroke();
+  }
+  return showNum.join('');
+};
+
 const Captcha = ({ boxWidth, boxHeight, captchaConfig, setCode }) => {
   const canvasRef = useRef();
-  const { createCaptcha } = useGenerateCaptcha();
   const [captchaCode, setCaptchaCode] = useState('');
@@ -8,0 +65,0 @@

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

412502

increased by0.34%

Lines of code

10285

increased by0.36%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Number of package files

5

decreased by-16.67%

No dependency changes