COMPOSANTS
Connexion avec nom d'utilisateur
Demo
Or sign up using
Don't have an account ? Create Account
Code
Documentation
Installation
Suivez les étapes ci-dessous pour installer et utiliser le composant ip-login dans votre projet.
Étape 1
Installez le composant ip-login en tant que dépendance dans votre projet :
Étape 2
Importez le module dans votre fichier script :
Utilisation
Pour utiliser ce composant, ajoutez-le à votre HTML et configurez-le avec les propriétés souhaitées.
Propriétés
| Propriété | Attribut | Nécessité | Description | Type | Valeur par défaut |
|---|---|---|---|---|---|
| usernameLabel | username-label | Optionnel | Le libellé du champ de saisie du nom d'utilisateur. | string | Username |
| passwordLabel | password-label | Optionnel | Libellé du champ mot de passe. | string | Password |
| submitButtonLabel | submit-button-label | Optionnel | Le libellé du bouton de soumission. | string | Login |
| usernameErrorMessage | username-error-message | Optionnel | Message d’erreur si le nom d’utilisateur est vide. | string | Username is required |
| usernameInvalidEmailMsg | username-invalid-email-message | Optionnel | Message d’erreur si le nom d’utilisateur n’est pas un email valide. | string | The email address is invalid |
| passwordLengthErrorMsg | password-length-error-msg | Optionnel | Message d’erreur si le mot de passe est trop court. | string | The password must contain at least 8 characters |
| passwordUppercaseErrorMsg | password-uppercase-error-msg | Optionnel | Message d’erreur si le mot de passe ne contient pas de majuscule. | string | The Password must contain at least one capital |
| passwordLowercaseErrorMsg | password-lowercase-error-msg | Optionnel | Message d’erreur si le mot de passe ne contient pas de minuscule. | string | The Password must contain at least one lowercase |
| passwordDigitErrorMsg | password-digit-error-msg | Optionnel | Message d’erreur si le mot de passe ne contient pas de chiffre. | string | The Password must contain at least one digit |
| usernameType | username-type | Optionnel | Type du champ nom d’utilisateur. | text/email | text |
| showPasswordAriaLabel | show-password-aria-label | Optionnel | Aria-label du bouton afficher le mot de passe. | string | Show password |
| hidePasswordAriaLabel | hide-password-aria-label | Optionnel | Aria-label du bouton masquer le mot de passe. | string | Hide password |
| usernameRequired | username-required | Optionnel | Indique si le nom d’utilisateur est requis. | boolean | false |
| pwdPlaceholder | pwd-placeholder | Optionnel | Texte d’aide du champ mot de passe. | string | Type your password here... |
| usernamePlaceholder | username-placeholder | Optionnel | Texte d’aide du champ nom d’utilisateur. | string | Type your username here... |
| forgotPasswordLink | forgot-password-link | Optionnel | URL du lien mot de passe oublié. | string | Non défini |
| forgotPasswordLabel | forgot-password-label | Optionnel | Libellé du lien mot de passe oublié. | string | Forgot password? |
| loginTitle | login-title | Optionnel | Titre du formulaire de connexion. | string | Login |
| indicationLabel | indication-label | Optionnel | Libellé indiquant les champs requis. | string | Required fields |
| submitBtnAriaLabel | submit-btn-aria-label | Optionnel | Aria-label du bouton de soumission du formulaire. | string | Submit the form |
Exemple
Personnalisation
Vous pouvez personnaliser l’apparence du composant login-form en utilisant des variables CSS et des part selectors.
Variables CSS
--primary-color--secondary-color--focus-color
Selecteur de parties (Part selectors)
title: pour la section du titre.indication: pour le libellé indiquant les champs requis.username-label: pour le label du nom d’utilisateur.username-input: pour le champ de saisie du nom d’utilisateur.passsword-label: pour le label du mot de passe.passsword-input: pour le champ de saisie du mot de passe.toggle-password: pour le bouton permettant d’afficher/masquer le mot de passeerror-message: pour le message d’erreurforgot-password: pour le lien « mot de passe oublié »submit-btn: pour le bouton de soumission du formulaire.
Pour mettre à jour les valeurs, utilisez le CSS suivant :
Écoute des événements
Le composant login-form émet un événement formSubmitted lorsque le formulaire est soumis avec succès. Vous pouvez écouter cet événement dans votre code JavaScript :
Exemple