Tutoriel Bubble.io - Créer un nom d'utilisateur (unique, sensible à la casse, pas de caractères spéciaux)

Dans cette vidéo, je vous montre comment créer des noms d'utilisateur uniques dans Bubble. Il est important que les noms d'utilisateur ne soient pas réutilisables et que nous validions également les caractères spéciaux et autres.

Voici le modèle de regex :  

([A-Za-z0-9_]+)

Source : https://forum.bubble.io/t/ensuring-case-sensitive-unique-usernames-with-only-specific-characters/46541/4 de mebeingken.

Transcription vidéo :

Bonjour, je m'appelle Chris Strobl et je vous montre aujourd'hui comment créer facilement des noms d'utilisateurs uniques dans la bulle. Nous avons ici deux dimensions : d'une part, le nom d'utilisateur ne peut contenir que certains caractères et, d'autre part, le nom d'utilisateur ne doit pas déjà être utilisé. Commençons tout de suite.

Nous installons un plugin appelé Instant Text. Cela permet de valider immédiatement le texte sans attendre, c'est donc facultatif, mais cela améliore considérablement l'expérience utilisateur. Ensuite, nous allons dans la base de données et là, nous avons deux domaines chez l'utilisateur : une fois l'utilisateur prend qu'un texte manque et une fois l'utilisateur prend Lorcas. Nous avons maintenant besoin de ces deux feutres de base de données lorsque nous allons sur le bouton enregistrer Start/edit workflow et là nous faisons Account, soyez les User up Impuls E-Mails, value, input A's value value et nous ajoutons encore le champ Username et nous ajoutons le champ User au Lorcas. Ici nous faisons un utilisateur d'entrée nommé Value et pour les utilisateurs dans Lower Keys nous faisons un utilisateur d'entrée nommé Value et nous formatons cela avec Lorcas.

Cela nous aide lorsque les utilisateurs créent un nom d'utilisateur en utilisant des majuscules ou des minuscules, que celui-ci n'est naturellement pas occupé. Ensuite, nous effectuons un rafraîchissement de la page dans ce flux de travail et notre objectif est maintenant que l'enregistrement ne soit possible que si le nom d'utilisateur est encore disponible. Pour cela, nous utilisons l'élément Live Text du plugin, nous le glissons une fois dans notre champ, puis nous allons dans Settings General.

Et sélectionner s'il n'est pas encore sélectionné. Ex Post l'option Adonai les attributs aux éléments html, pour ensuite indiquer dans l'élément lui-mêmel'élément id dans lequel ces utilisateurs prennent. Nous les relions maintenant à notre importation Prendre l'utilisateur et les appelons également Prendre l'utilisateur comme attributs. Ensuite, nous allons la zone de texte nom d'utilisateur est disponible et ajouter une conditionnelle. Faire une recherche pour l'utilisateur et dire le nom de l'utilisateur Lover Keys est égal. Texte défilant As well you. Formater Lower Keys et nous disons Ici le compte doit être supérieur à zéro. Cela signifie que nous avons au moins un User Name qui est identique. Ensuite, nous changeons le champ de texte à de sont nom d'utilisateur est déjà utilisé et nous changeons également le de Color. Faire sur un no code. Nous copions ici une fois l'expression, nous l'ajoutons et la rendons égale à zéro. Et . Livesex a value. Est No Code Mutti, puis nous changeons le texte.

Sur le nom d'utilisateur est disponible avec un fond de l'icône au début et celui de l'appelant. Sur le vert. Enfin, nous travaillons encore sur le formatage Regex pour les noms d'utilisateur. Nous voulons qu'ils ne contiennent que des lettres majuscules de a à z, des lettres minuscules de a à Z et un tiret bas tiède. Pour cela, nous avons à nouveau des conditions. Nous disons live text as well you. Extraire la regex. Et nous ajoutons ici un modèle de regex. Je l'ai également adapté dans les notes et nous disons ici First Item is No Code. Le Texas en direct s'est déroulé. Si c'est le cas, c'est-à-dire si le modèle de regex ne correspond pas à une valeur dans le texte en direct, il y a un message d'erreur. Et nous ajoutons aussi celle de Carlo, qui correspond à son tour au rouge.

Ensuite, nous copions encore une fois l'expression, nous l'ajoutons et nous disons si cela correspond à la Live Text Value et si Livesex a value n'est pas vide. Ensuite, nous changeons le texte. Et aussi celui de Kohler sur le vert. Enfin, nous voulons maintenant aussi signaler à l'utilisateur que le bouton n'est quickbook que si toutes les conditions sont remplies. Pour cela, nous prenons d'abord l'expression ici, nous la copions, nous allons dans le conditionnel du bouton. Nous l'ajoutons et avons une fois Live Text Value, une fois No Code live Text Value avec le pattern Regex. Ce que nous avons ici en haut. Ensuite, nous disons ou Do Search for User Users dans Lower Keys est égal. Live Text a value. Clés inférieures.

Et ici, le compte est supérieur à zéro. Ou le texte défilant comme Beaulieu est mti exactement alors. Si le bouton n'est pas cliqué bar et nous voulons aussi changer la couleur de l'ensemble en modifiant la Background Color. En gris.

Et aussi adapter celle de Koller. Si cette condition n'est pas remplie, le bouton fonctionne tout à fait normalement et est aussi tout à fait quickbook. Allons maintenant dans l'aperçu et testons le tout. Nous voyons ici que les deux conditions sont remplies et que nous pouvons donc cliquer sur le bouton enregistrer. Nous avons maintenant une liste d'utilisateurs et nous pouvons tester le tout une nouvelle fois. Nous prenons encore une fois le test 1 et nous voyons que le nom d'utilisateur est déjà utilisé et que nous pouvons aussi faire un caractère spécial, où nous voyons alors que le nom d'utilisateur est disponible, mais que les utilisateurs ne peuvent pas utiliser de caractères spéciaux. Et le bouton s'enregistrer ne fonctionne pas.

Mais si nous faisons le test 2, les deux conditions sont remplies et nous pouvons cliquer sur "enregistrer". Nous avons ainsi pu voir comment travailler dans Bubble avec des noms d'utilisateur qui sont propres à chaque utilisateur. Cela peut être parfaitement utilisé pour des sous-domaines, des profils ou d'autres situations.

Si vous avez aimé cette vidéo, n'hésitez pas à cliquer sur le bouton "J'aime" et à vous abonner à la chaîne si vous avez des questions, écrivez-nous dans les commentaires. Je vous souhaite beaucoup de succès avec Bubble et vous dis à bientôt.