DEV Community

Cornea Florin
Cornea Florin

Posted on

2

Vue Js 2 - password generator (vue04)

Vue Js 2 password generator

The codepen result

I developed a small app for generating random strings in vuejs

I wanted to keep it as simple as possible so the most complex part is the algorithm for generating the "random" string

Let's explain the password generator code

The idea was to generate dynamic passwords based on some options like the length of the generated password and the characters it includes

First i declared what was needed

data: function() { return { characters: [ { name: "Lowercase", value: "abcdefghijklmnopqrstuvwxyz", checked: false, }, { name: "Uppercase", value: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", checked: true, }, { name: "Numbers", value: "0123456789", checked: true, }, { name: "Special Characters", value: "_-+=)(*&^%$#@!`~", checked: false, }, ], password: "", gLength: 9, } }

After that i made a method that fires when the "Generate" button is clicked. Inside that function i added a loop where i concatenated the values of the checked options for characters

Now that we have our custom options, let's begin the magic :))

The idea is to loop and find a new random character until the length option is acquired

This being said, let's loop as many times as we setted up our generator length

for ( var i = 0; i < this.gLength; i++ ) { }

At each pass we need to add a new "random" character to the result, for this we are going to pick up a character from a specific location using the charAt() function. This function accepts an integer so we need to make sure we are selecting a random one

To make sure we are getting an integer, we are going to use the Math.floor() function, so now we have smth like this: ourString.charAt(Math.floor())

Now let's create the random number and for that we are going to use the Math.random() and also we need to multiply it to to the our characters string length to make sure we not get a position that doesn't exist

The code looks like this

for ( var i = 0; i < this.gLength; i++ ) { result += charactersVal.charAt(Math.floor(Math.random() * charactersVal.length)); } this.password = result;

Different design approach

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more