File
projects/congarevenuecloud/elements/src/lib/captcha/captcha.component.ts
Description
The Captcha component provides an easy-to-use solution for implementing captcha functionality. It helps prevent automated bots from accessing or submitting forms by requiring users to complete a simple challenge.
Preview
Usage
Example :import { CaptchaModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [CaptchaModule, ...]
})
export class AppModule {}// Basic Usage
```typescript
<apt-captcha
[theme]="'light'"
[size]="'normal'"
[locale]="'en'"
[type]="'image' | 'audio'"
[siteKey]="site key"
></apt-captcha>
Implements
OnInit
Metadata
| selector | apt-captcha |
| styleUrls | ./captcha.component.scss |
| templateUrl | ./captcha.component.html |
Index
Methods |
Inputs |
Outputs |
Constructor
constructor(formBuilder: FormBuilder, userService: UserService, configService: ConfigurationService)
|
||||||||||||
|
Parameters :
|
Inputs
| locale |
Type : string
|
Default value : 'en'
|
|
Specifies the language/locale of the captcha. If no locale is explicitly specified, the component considers the user's locale. If user locale cannot be determined, the default language/locale is 'en' (English). |
| siteKey |
Type : string
|
Default value : ''
|
|
The unique site key assigned to your website by the captcha service provider. This key is used to identify and authenticate your website with the captcha service. For more details on how to generate this key, refer our product documentation. |
| size |
Type : "compact" | "normal"
|
Default value : 'normal'
|
|
Defines the size of the captcha element. Default value is normal. |
| theme |
Type : "light" | "dark"
|
Default value : 'light'
|
|
Determines the visual theme of the captcha. |
| type |
Type : "image" | "audio"
|
|
Determines the type of captcha to render. Use 'image' to display an image-based captcha and 'audio' to use an audio-based captcha for accessibility purposes. |
Outputs
| onCaptchaSuccess |
Type : EventEmitter<boolean>
|
|
Updates the calling component about successful captcha verification. |
Methods
| handleError |
handleError()
|
|
The method is responsible to update the calling component when CAPTCHA encounters an error and cannot continue. In the calling component the implementor gets the flexibity to write business logic to handle error scenario. The method emits this.onCaptchaSuccess event emitter as false when captcha erros out.
Returns :
void
|
| handleExpire |
handleExpire()
|
|
The method is responsible to update the calling component when CAPTCHA response expires and the user needs to re-verify. In the calling component the implementor gets the flexibity to write business logic to handle expire scenario. The method emits this.onCaptchaSuccess event emitter as false when captcha expires.
Returns :
void
|
| handleSuccess | ||||
handleSuccess(event)
|
||||
|
The method is responsible update the calling component when CAPTCHA is successful. In the calling component the implementor gets the flexibity to write business logic to handle success scenario. The method emits this.onCaptchaSuccess event emitter as true when captcha is successful.
Parameters :
Returns :
void
|
<div class="captcha">
<form [formGroup]="aFormGroup">
<ngx-recaptcha2 #captchaElement
[siteKey]="siteKey"
(success)="handleSuccess($event)"
(expire)="handleExpire()"
(error)="handleError()"
[size]="size"
[hl]="locale"
[theme]="theme"
[type]="type"
formControlName="recaptcha">
</ngx-recaptcha2>
</form>
</div>
./captcha.component.scss
.captcha {
transform: scale(0.7);
transform-origin: right;
}