Verify
<salla-verify> web component used to show fields for verifying email/mobile of users by sending OTP verification code during registration, login, or profile update, and that can be done using the properties' parameters available.Note
Example
Usage
HTML
JS
SASS
<!-- render it as modal and will show via open method or event -->
<salla-verify></salla-verify>
<!-- render it as inline dom to show otp collect form -->
<salla-verify display="inline"></salla-verify>Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| Auto Reload | auto-reload | Should auto reloading the page after success verification. | boolean | 'true' |
| Display | display | Should render component without modal | "inline" | "modal" | 'modal' |
| Support Web Authentication | support-web-auth | Once the API verifies the success. It will login the customer in web pages | boolean | true |
| Type | type | Verifying method | "email" | "mobile" | 'mobile' |
Events
| Event | Description | Type |
|---|---|---|
verified | This is triggered when success verification event is fired. | CustomEvent<any> |
Methods
methods allow for calling functions built by Salla to carry out certain actvities, such as getCode which gets the current code and open(data:any) which shows the verifying as modal.| Method | Description | Return Type |
|---|---|---|
getCode() | Gets the current code. | Promise<string> |
open(data: any) | Shows the verifying as modal. | Promise<void> |
Slots
slots makes it customizable to modify certain labels, such as after-footer.| Slot | Description |
|---|---|
after-footer | Placeholder position that appears after the footer. |
footer | Replaces the footer. By default, it contains: verify button, resend, and timer. |
Modified at 2 months ago