Captcha

Shows Captcha.

Features/Functionality

• Shows Captcha.
• Display validate button also
• Without validate, it will display error.

Basic Usage

Dependencies

• jquery
• font-awesome
• shared styles

HTML Structure

<require from="{user_path}/captchas/captcha"></require>

<cst-captcha input-mdl.bind="" options.bind="" other-info.bind="" evt-click-callback.bind=""></cst-captcha>

Bindable Properties

Property Name	Data Type	Required	Decription
inputMdl	number	No	Specifies the state of captcha.
options	object	No	Basic component options
otherInfo	any	No	Extra info to be passed on event
evtClickCallback	method	Yes	Give callback on verify button click

inputMdl

-1 = No value,

0 = Wrong value,

1 = True value

options

options = {

captchaLength: 5, // Length of captcha

hideVerifyBtn: false, // Hide verify button

pageLabel: {}, // Override page labels

pageColorData: {} // Override css colour property

}

evtClickCallback

evtClickCallback(_event,_info);

_info = {

overrideContext: overrideContext,

otherInfo: otherInfo,

value: -1/ 0/ 1

}

Working Example

HTML

<template>

<require from="./shared/custom_comp/captchas/captcha"></require>

<div>

<cst-captcha input-mdl.bind="captchaStatus" options.bind="options" other-info.bind="otherInfo" evt-click-callback.bind="evtClickCallback"></cst-captcha>

</div>

</template>

JS

class MyCls{

constructor(){

this.otherInfo = {};

this.captchaStatus = -1;

this.options = {};

}

evtClickCallback(_event,_info) {

}

}

export { MyCls }

Example Screen Shots

Demo Link
Demo

Commit check list

Mark down usage
https://guides.github.com/features/mastering-markdown/

Version	Date	Developed By	Information Classification	Reviewed By	Approved By
1.0	05-05-2020	Tarun	INTERNAL	Prasan & Gunjan	Prasan