kwikui-react
Version:
KwikID's UI Component Library in React
63 lines (62 loc) • 2.74 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getCaptchaLetterSpacing = exports.generateCaptchaText = exports.drawCaptchaOnCanvas = void 0;
var _Captcha = require("./Captcha.constants");
var _Captcha2 = require("./Captcha.definition");
const generateRandomChar = (min, max) => String.fromCharCode(Math.floor(Math.random() * (max - min + 1) + min));
const generateCaptchaText = characterSize => {
let captcha = "";
for (let i = 0; i < characterSize; i++) {
const charGenerators = [() => generateRandomChar(65, 90),
// Uppercase letters
() => generateRandomChar(97, 122),
// Lowercase letters
() => generateRandomChar(48, 57) // Numbers
];
const randomIndex = Math.floor(Math.random() * charGenerators.length);
captcha += charGenerators[randomIndex]();
}
return captcha.split("").sort(() => Math.random() - 0.5).join("");
};
exports.generateCaptchaText = generateCaptchaText;
const drawCaptchaOnCanvas = (ctx, captcha, size) => {
if (ctx) {
const smallLetterMultiplier = getCaptchaLetterSpacing("--kwikui-multiplier-s");
const largeLetterMultiplier = getCaptchaLetterSpacing("--kwikui-multiplier-l");
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
let xInitialSpacing;
let characterYSpacing;
switch (size) {
case _Captcha2.IKwikUICaptchaSize.S:
ctx.canvas.width = 120;
ctx.canvas.height = 30;
xInitialSpacing = smallLetterMultiplier * _Captcha.KWIKUI__CAPTCHA__MEDIUM_LETTER_REFERENCE_VALUE;
characterYSpacing = ctx.canvas.height - 5;
break;
case _Captcha2.IKwikUICaptchaSize.L:
ctx.canvas.width = 300;
ctx.canvas.height = 75;
xInitialSpacing = largeLetterMultiplier * _Captcha.KWIKUI__CAPTCHA__MEDIUM_LETTER_REFERENCE_VALUE;
characterYSpacing = ctx.canvas.height - 20;
break;
default:
ctx.canvas.width = 200;
ctx.canvas.height = 50;
xInitialSpacing = _Captcha.KWIKUI__CAPTCHA__MEDIUM_LETTER_REFERENCE_VALUE;
characterYSpacing = ctx.canvas.height - 10;
break;
}
const fontSize = ctx.canvas.width / captcha.length;
const textColors = ["rgb(0, 0, 0)", "rgb(80, 80, 80)", "rgb(160, 160, 160)"];
ctx.font = `${fontSize}px Manrope Mono`;
for (let i = 0; i < captcha.length; i++) {
ctx.fillStyle = textColors[Math.floor(Math.random() * 3)];
ctx.fillText(captcha[i], xInitialSpacing + i * fontSize, characterYSpacing, fontSize);
}
}
};
exports.drawCaptchaOnCanvas = drawCaptchaOnCanvas;
const getCaptchaLetterSpacing = value => getComputedStyle(document.documentElement).getPropertyValue(value);
exports.getCaptchaLetterSpacing = getCaptchaLetterSpacing;