COMPONENTS

Login with username

Installation

Follow these steps to install and use the ip-login component in your project.

Step 1

Install the ip-login component as a dependency in your project:

Step 2

Import the module in your script file:

Usage

To use this component, add it to your HTML and configure it with the desired properties.

Properties

Property	Attribute	Necessity	Description	Type	Default
usernameLabel	username-label	Optional	Label for the username input field	string	Username
passwordLabel	password-label	Optional	Label for the password input field	string	Password
submitButtonLabel	submit-button-label	Optional	Label for the submit button	string	Login
usernameErrorMessage	username-error-message	Optional	Error message for empty username field	string	Username is required
usernameInvalidEmailMsg	username-invalid-email-message	Optional	Error message for invalid email format	string	The email address is invalid
passwordLengthErrorMsg	password-length-error-msg	Optional	Error message for insufficient password length	string	The password must contain at least 8 characters
passwordUppercaseErrorMsg	password-uppercase-error-msg	Optional	Error message for missing uppercase letter in password	string	The Password must contain at least one capital
passwordLowercaseErrorMsg	password-lowercase-error-msg	Optional	Error message for missing lowercase letter in password	string	The Password must contain at least one lowercase
passwordDigitErrorMsg	password-digit-error-msg	Optional	Error message for missing digit in password	string	The Password must contain at least one digit
usernameType	username-type	Optional	Type of the username input field (text or email)	text/email	text
showPasswordAriaLabel	show-password-aria-label	Optional	Aria label for the button to show password	string	Show password
hidePasswordAriaLabel	hide-password-aria-label	Optional	Aria label for the button to hide password	string	Hide password
usernameRequired	username-required	Optional	Whether the username field is required	boolean	false
pwdPlaceholder	pwd-placeholder	Optional	Placeholder text for the password field	string	Type your password here...
usernamePlaceholder	username-placeholder	Optional	Placeholder text for the username field	string	Type your username here...
forgotPasswordLink	forgot-password-link	Optional	URL for the forgot password link	string	Undefined
forgotPasswordLabel	forgot-password-label	Optional	Label text for the forgot password link	string	Forgot password?
loginTitle	login-title	Optional	Title of the login form	string	Login
indicationLabel	indication-label	Optional	Label indicating required fields	string	Required fields
submitBtnAriaLabel	submit-btn-aria-label	Optional	Aria-label of submit button	string	Submit the form

Example

Customization

You can customize the appearance of the login-form component using CSS variables and part selectors:

CSS variables

--primary-color
--secondary-color
--focus-color

Parts Selectors

title: For the title section
indication: For the required indication label
username-label: For the username label
username-input: For the username input field
passsword-label: For the password label
passsword-input: For the password input field
toggle-password: For the button to toggle password visibility
error-message: For error message
forgot-password: For the forgot password link
submit-btn: For the submit button

To update the values, use the following CSS:

Listening to Events

The login-form component emits a formSubmitted event when the form is successfully submitted. You can listen to this event in your JavaScript code:

Example

Login with username

Demo

Code

Documentation