#115 - Generar una contraseña aleatoria

Registro sin fricciones. Exigir o permitir que los miembros establezcan una contraseña en el futuro.

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>

Tutorial

Este MemberScript hace lo siguiente:

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

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

La marca de tiempo actual convertida a base 36

16 caracteres aleatorios (letras, números y símbolos)

Establece la contraseña generada como valor del campo de entrada.

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

It prevents editing by setting the input field as readonly.

Se añaden escuchadores de eventos adicionales para evitar copiar, pegar, arrastrar y abrir el menú contextual en el campo de contraseña.

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.