top of page

Building a Robust Password Generator with Wix Velo


This guide delves into the development of a Wix Velo Password Generator, showcasing how to enhance website security through Wix's robust platform. We'll specifically focus on the Velo code that drives its functionality. While Wix is known for its user-friendly interface for non-coders, the integration of Velo empowers developers to harness the power of JavaScript within Wix's versatile infrastructure.


See this functionality in action! Try out our password generator demo at https://www.codemastersinc.com/password-generator.



Designing the UI


The user interface for our password generator, as seen in the attached graphic, is straightforward and user-friendly. It contains the following elements:

  • Password Length Input: Users can specify the length of the generated password.

  • Options Checkboxes: Users can include numbers, lowercase letters, symbols, and uppercase letters in the password.

  • Generate Button: Triggers the password generation process.

  • Result Field: Displays the generated password.

  • Copy Button: Allows users to easily copy the generated password.


UI Password Generator Page of CodeMasters Agency



Implementing the Functionality with Wix Velo


// Import Wix Window Frontend module
import wixWindowFrontend from 'wix-window-frontend';

// Event handler for when the page is ready
$w.onReady(function () {
    // Generate password button click event
    $w('#generateButton').onClick(() => {
        // Gather options from the UI
        const options = {
            length: parseInt($w('#lengthInput').value, 10) || 12,
            includeSymbols: $w('#includeSymbols').checked,
            includeNumbers: $w('#includeNumbers').checked,
            includeLower: $w('#includeLower').checked,
            includeUpper: $w('#includeUpper').checked,
        };

        // Generate the password
        const password = generatePassword(options);
        $w('#passwordOutput').value = password;
    });

    // Copy password button click event
    $w('#copyButton').onClick(() => {
        const password = $w('#passwordOutput').value;

        // Use Wix's built-in function to copy the password
        wixWindowFrontend.copyToClipboard(password)
            .then(() => {
                // Confirmation message
                $w('#copyButton').label = "Copied!";
                // Revert the label after 5 seconds
                setTimeout(() => {
                    $w('#copyButton').label = "Copy";
                }, 5000);
            })
            .catch((err) => {
                console.error('Failed to copy password: ', err);
            });
    });
});

// Password generation function
function generatePassword(options) {
    // Character sets
    const symbolChars = "!@#$%^&*()_+{}:<>?[];,./~";
    const numberChars = "0123456789";
    const lowerChars = "abcdefghijklmnopqrstuvwxyz";
    const upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

    let validChars = "";

    // Append character sets based on options
    if (options.includeSymbols) validChars += symbolChars;
    if (options.includeNumbers) validChars += numberChars;
    if (options.includeLower) validChars += lowerChars;
    if (options.includeUpper) validChars += upperChars;

    // Generate password
    let password = "";
    for (let i = 0; i < options.length; i++) {
        const randomIndex = Math.floor(Math.random() * validChars.length);
        password += validChars[randomIndex];
    }

    return password;
}



Code Explanation


Customizable Length

Users can choose the desired password length, enhancing the flexibility and security of their passwords.

const options = {
    length: parseInt($w('#lengthInput').value, 10) || 12, 
// Default length is 12
};

In this snippet, the password length is taken from an input field, with a default fallback to 12 if no input is provided.


Character Variety

The generator allows users to include numbers, uppercase and lowercase letters, and symbols to create a strong password.

let validChars = "";
if (options.includeSymbols) validChars += symbolChars;
if (options.includeNumbers) validChars += numberChars;
if (options.includeLower) validChars += lowerChars;
if (options.includeUpper) validChars += upperChars;

This code concatenates different character sets into validChars based on user selections.


Clipboard Integration

The generated password can be copied to the clipboard with a single click, making it convenient for users to use the password immediately.

wixWindowFrontend.copyToClipboard(password)
    .then(() => {
        $w('#copyButton').label = "Copied!";
    })
    .catch((err) => {
        console.error('Failed to copy password: ', err);
    });

This function attempts to copy the password and provides visual feedback by changing the button label.


User Feedback

The UI updates to inform users of the actions taken, such as successful copying of the password.

setTimeout(() => {
    $w('#copyButton').label = "Copy";
}, 5000);

After changing the label to "Copied!", this sets a delay to revert it back to "Copy", indicating the action is complete.


Random Password Generation

The password is generated using a random selection of characters from the valid character set.

let password = "";
for (let i = 0; i < options.length; i++) {
    const randomIndex = Math.floor(Math.random() * validChars.length);
    password += validChars[randomIndex];
}

A loop runs for the specified password length, randomly picking characters from the validChars string to form the password.


Real-Time UI Interactivity

The generator responds to user input without needing to reload the page, providing a seamless experience.

$w('#generateButton').onClick(() => {
    // ... Generate password logic ...
});

The onClick event for the 'Generate' button is set to run the password generation logic without page refresh.


Security Enhancement

Although not directly shown in the code, excluding similar characters can enhance password security by avoiding confusion between similar-looking characters.

if (options.excludeSimilar) {
    validChars = validChars.split('').filter(char => !similarChars.includes(char)).join('');
}

This would filter out characters like 'l' and '1', or 'O' and '0', if the option is enabled.


By combining these features with an intuitive UI, the password generator becomes a powerful tool for users to create secure passwords with ease.



Conclusion: Password Generator with Wix Velo

This guide has provided a comprehensive overview of constructing a password generator using Wix's development capabilities. By leveraging Wix Velo and the provided code examples, you can readily implement this functionality into your own Wix projects. Remember to prioritize security best practices by storing passwords securely and never transmitting them in plain text.


Furthermore, consider incorporating additional features to enhance the user experience, such as password strength indicators or the ability to specify character classes beyond the basic options covered here. With a bit of creativity and customization, you can craft a robust and user-friendly password generator that empowers your users to create strong and secure passwords.


Ready to take your Wix development skills to the next level? CodeMasters Agency can help. Our team of experienced Wix developers specializes in crafting custom solutions that elevate your online presence. Contact us today for a free consultation and discuss how we can help you bring your vision to life.


Visit CodeMasters Agency: https://www.codemastersinc.com/



Comments


bottom of page