#115 - Generate a Random Password

Zero friction sign up. Require or allow members to set a password in the future.

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

This MemberScript does the following:

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

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

The current timestamp converted to base 36

16 random characters (including letters, numbers, and symbols)

It sets the generated password as the value of the input field.

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

It prevents editing by setting the input field as readonly.

Additional event listeners are added to prevent copying, pasting, dragging, and opening the context menu on the password field.

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.