#115 - Générer un mot de passe aléatoire

Inscription sans friction. Exiger ou permettre aux membres de définir un mot de passe à l'avenir.

Video Tutorial

Loom

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

44 lines

Paste this into Webflow

<!-- 💙 MEMBERSCRIPT #115 v0.1 💙 - GENERATE PASSWORD-->
<script>
document.addEventListener('DOMContentLoaded', function() {
    var passwordInput = document.querySelector('[data-ms-member="password"]');
    
    if (passwordInput) {
        // Function to generate random password
        function generatePassword() {
            var timestamp = Date.now().toString(36);
            var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+{}[]|:;<>,.?/~';
            var randomChars = '';
            for (var i = 0; i < 16; i++) {
                randomChars += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return (timestamp + randomChars).slice(0, 32);
        }

        // Generate and set password
        passwordInput.value = generatePassword();

        // Block password managers and prevent editing
        passwordInput.setAttribute('autocomplete', 'off');
        passwordInput.setAttribute('readonly', 'readonly');

        // Prevent copy and paste
        passwordInput.addEventListener('copy', function(e) {
            e.preventDefault();
        });
        passwordInput.addEventListener('paste', function(e) {
            e.preventDefault();
        });

        // Prevent dragging
        passwordInput.addEventListener('dragstart', function(e) {
            e.preventDefault();
        });

        // Prevent context menu
        passwordInput.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        });
    }
});
</script>

Tutoriel

Ce MemberScript effectue les opérations suivantes :

It selects the password input field using the attribute data-ms-member="password".

The generatePassword() function creates a 32-character password by combining:

L'heure actuelle convertie en base 36

16 caractères aléatoires (lettres, chiffres et symboles)

Il définit le mot de passe généré comme valeur du champ de saisie.

It blocks password managers by setting autocomplete="off".

It prevents editing by setting the input field as readonly.

Des récepteurs d'événements supplémentaires sont ajoutés pour empêcher le copier, coller, glisser et ouvrir le menu contextuel sur le champ du mot de passe.

To use this script, include it in your HTML file and ensure you have an input field with the attribute data-ms-member="password" where you want the password to be generated.