Login

The <salla-login-modal> web component displays the login form, which prompts a user for their credentials in order to authenticate their access. It usually comprises of the standard username or email as well as a phone number. It consists of a Modal activated by the Button component, and that can be customized using the properties' parameters available.

Note

Available API Endpoints for the Login component is:

Auth Login

Example

Usage

HTML

SASS

Properties

Property	Attribute	Description	Type	Default
Inline	`inline`	Display the login modal in an inline manner	`boolean`	`undefined`
Is Email Allowed	`is-email-allowed`	Granting email input by the merchant	`boolean`	`undefined`
Is Email Required	`is-email-required`	Requiring email input by the merchant	`boolean`	`false`
Is Mobile Allowed	`is-mobile-allowed`	Granting mobile input by the merchant. Outside KSA is set to `false` by default	`boolean`	`true`
Support Web Authentication	`support-web-auth`	Once the API verifyies the success of the process, it will login the customer in web pages.	`boolean`	`true`
Without Reload	`without-reload`	Render reloading of the page after a successful login	`boolean`	`false`

Methods

The pre-defined methods allow for calling the function built by Salla which is open to display the Login Component.

Method	Description	Return Type
`open(event?: any)`	Opens the login's component	`Promise<HTMLElement>`

Slots

Theslots makes it customizable to modify certain labels, such as before-login-email & after-registeration, as well as adding footer extended feature.

Slot	Description
`before-login-email`	Shows content before the login with email screen has appeared
`before-login-mobile`	Shows content before the mobile with mobile screen has appeared
`before-login-type`	Shows content before the login types has been listed in the login screen
`before-registration`	Shows content before user registers
`after-login-email`	Shows content after the login with email screen has appeared
`after-login-mobile`	Shows content after the login with mobile screen has appeared
`after-login-type`	Shows content after the login types has been listed in the login screen
`after-registration`	Shows content after user registers
`footer`	Shows content at the modal's footer

Example#

Usage#

Properties#

Methods#

Slots#

Example

Usage

Properties

Methods

Slots