Ajouter la possibilité pour les utilisateurs d'afficher le mot de passe qu'ils tapent est un moyen simple d'améliorer l'expérience utilisateur de votre application Bubble.

Cela leur permet de s'assurer qu'ils ne font pas de faute de frappe lors du choix de leur mot de passe.

Rien de très sophistiqué, mais c'est quelque chose que tout développeur Bubble doit savoir réaliser.

Dans ce guide, vous apprendrez comment faire cela, de 2 façons.

La première sera en utilisant du Javascript personnalisé, et la seconde sera en utilisant un plugin gratuit.

Commençons.

Note : Vous pouvez également lire notre article sur comment créer un indicateur de force de mot de passe sur Bubble pour aller plus loin.

Approche 1 : Utiliser Javascript pour afficher le mot de passe

Très bien !

Commençons par la première approche.

Cette approche est - selon moi - la meilleure approche à utiliser dans ce cas.

En général, éviter d'utiliser des plugins quand c'est possible est une bonne pratique, car cela aidera à garder vos applications légères, et c'est aussi une bonne pratique de sécurité.

C'est pourquoi je recommande de suivre cette méthode.

Étape 1 - Installer le plugin Toolbox

La première étape pour utiliser cette méthode sera d'installer le plugin ToolBox pour Bubble.

C'est un plugin très utile, et c'est essentiellement un incontournable pour toute application Bubble.

Alors allez-y et installez-le (c'est 100% gratuit).

Cliquez ici pour accéder au plugin Toolbox

Ce plugin nous permettra d'exécuter du Javascript personnalisé dans un workflow que nous déclencherons (parmi beaucoup d'autres choses utiles).

Étape 2 - Activer les attributs HTML ID

La deuxième étape sera d'activer l'option pour exposer les attributs HTML ID.

En bref, cette option nous permet de définir un ID personnalisé sur chaque élément Bubble, ce qui permet de les cibler dans notre code personnalisé.

Pour l'activer, allez dans : Settings --> General --> et cochez "Expose the option to add an ID Attribute to HTML Elements"

Une fois cela fait, vous verrez un nouvel input dans le panneau de propriétés de votre élément, comme celui-ci :

Étape 3 - Construire notre interface

Maintenant que votre application est configurée en conséquence, nous devons créer une interface de base.

Si la vôtre est déjà créée, vous pouvez passer à l'étape 4.

Comme vous pouvez le voir ci-dessous, j'ai créé une interface très basique avec un input et une icône que nous utiliserons pour afficher ou masquer le mot de passe.

IMPORTANT : Pour que ce tutoriel fonctionne, vous devez utiliser un input pour le mot de passe, et définir le content format de l'input sur "Password".

Étape 4 - Construire notre workflow

Étape 1 - Assigner un ID à l'input du mot de passe

Avant d'aller plus loin, nous devons définir un ID sur l'input qui contient le mot de passe que vous voulez révéler.

Pour ce faire, écrivez simplement un ID dans l'input ID Attribute de votre input, et assurez-vous de vous en souvenir (vous en aurez besoin plus tard).

Dans mon cas, je l'ai défini sur "input".

Étape 2 - Construire le workflow réel

Très bien, maintenant que tout est prêt, travaillons sur nos workflows.

Comme mentionné précédemment, je vais ajouter un workflow sur l'icône "œil" que vous pouvez voir dans la capture d'écran ci-dessus.

Lorsque cette icône sera cliquée, elle affichera ou masquera le contenu de mon input de mot de passe.

Pour ce faire, nous utiliserons une action du plugin Toolbox appelée : "Run Javascript"

Cette action, vous l'avez deviné, nous permet d'exécuter du javascript personnalisé dans notre application Bubble.

Et dans cette action, vous allez coller le code ci-dessous :

var passwordInput = document.getElementById('ENTER-YOUR-ID-HERE'); // Use the ID you set for your input
if (passwordInput.type === 'password') {
  passwordInput.type = 'text';
} else {
  passwordInput.type = 'password';
}

Vous devriez avoir quelque chose de similaire à la capture d'écran ci-dessus.

Et voilà !

Chaque fois que l'utilisateur déclenchera ce workflow, le mot de passe dans l'input sera affiché ou masqué en fonction de son état actuel !

Approche 2 : Utiliser un Plugin pour afficher le mot de passe

Maintenant que nous avons couvert l'approche avec du code personnalisé, voyons comment le faire avec un plugin gratuit.

Comme mentionné précédemment, je recommande vraiment d'utiliser du code personnalisé plutôt qu'un plugin pour ce cas d'usage.

Mais bon, vous pouvez avoir vos raisons, alors voici comment le faire avec un plugin !

Étape 1 - Installer un plugin reveal password

La première étape sera évidemment d'installer le plugin qui vous permettra d'afficher ou de masquer le mot de passe.

C'est quelque chose d'assez basique, donc vous pouvez aller de l'avant et sélectionner celui que vous voulez.

Dans mon cas, j'ai sélectionné ce plugin de Zeroqode :

Cliquez ici pour accéder au plugin Reveal and Hide password

Étape 2 - Construire notre workflow

Maintenant que vous avez installé le plugin, commencez par glisser un élément "Reveal" sur votre page et assurez-vous qu'il n'est pas masqué.

Maintenant que c'est fait, vous pouvez créer votre workflow et ajouter une action "Toggle Reveal".

Si vous avez plusieurs éléments reveal sur votre page, assurez-vous de sélectionner le bon.

Dans la section ID, tapez l'ID que vous voulez (dans mon cas j'ai écrit "input").

Maintenant, la dernière étape est de s'assurer que l'ID Attribute de l'input contenant le mot de passe que vous voulez afficher est exactement le même que l'ID que vous venez de remplir dans le workflow.

Si vous ne savez pas de quoi je parle, vous devez lire la 1ère approche de cet article.

Et voilà, lorsque vous déclencherez ce workflow, le contenu de votre input sera affiché à vos utilisateurs !

FAQ - Afficher Mot de Passe Bubble.io

Comment afficher un mot de passe dans Bubble ?

Il existe deux méthodes : utiliser le plugin Toolbox avec du Javascript personnalisé (recommandé), ou installer un plugin dédié comme Reveal and Hide Password de Zeroqode. Les deux nécessitent d'assigner un ID à votre input de mot de passe.

Pourquoi utiliser Javascript plutôt qu'un plugin pour afficher les mots de passe ?

Le Javascript avec Toolbox garde votre application plus légère et améliore la sécurité en limitant les dépendances externes. C'est une meilleure pratique de développement, même si les plugins sont plus rapides à mettre en place.

Comment activer les ID HTML dans Bubble ?

Allez dans Settings > General et cochez "Expose the option to add an ID Attribute to HTML Elements". Cela vous permettra d'ajouter des ID personnalisés à vos éléments Bubble pour les cibler en Javascript.

Quel plugin utiliser pour afficher un mot de passe sur Bubble ?

Le plugin "Reveal and Hide Password" de Zeroqode est une option gratuite et simple. Alternativement, vous pouvez utiliser Toolbox pour une solution en Javascript plus optimisée et sans plugin supplémentaire.

Comment basculer entre afficher et masquer un mot de passe ?

Avec Javascript et Toolbox, utilisez l'action "Run Javascript" sur un clic d'icône. Le code détecte automatiquement l'état actuel (affiché/masqué) et bascule entre les deux. Avec un plugin, utilisez l'action "Toggle Reveal".

Faut-il définir l'input en format Password sur Bubble ?

Oui, c'est essentiel. L'input doit avoir son "Content format" défini sur "Password" pour que le masquage fonctionne par défaut. Sans cela, le mot de passe sera visible en permanence, ce qui pose un problème de sécurité.