All language subtitles for 11. Generating a Random Password

We now have all the information we need a recorded inside of our class component to actually generate

a password.

We know the length and whether or not to include numbers letters and symbols.

Now we can go down to our generate password function or the function that gets called anytime a user

clicks on that generate password button to make sure that we use this data to generate a password and

it will use the password we generate to update the password property right here.

Remember anytime that we update this password property that is going to cause angular to spring into

action it's going to take that updated property and use it to update the value of the input.

Down here let's get to it.

I'm going to first go down to the very bottom this file where we defined our on button click function.

But once again our goal is pretty much this right here.

We want to eventually assign a new string to the this dot password property.

And as soon as we do that is going to show up inside of that input right there OK.

So I got to delete everything inside of the on button click function.

Now watch you know right away that there are many different ways to generate a random password.

I'm just going to show you a pretty simple and straightforward way of doing it.

We're going to go through this implementation kind of quickly because this is kind of like some general

programming stuff.

It's not really specific to angular and I really want to focus on angular as much as possible in the

first part of this course.

OK.

So inside of on button click we're going to first list out inside of three different variables all of

the possible characters that can be used inside of a password.

Going to say const numbers is going to be a string.

It has all the possible numbers.

So 1 2 3 4 5 6 7 8 9 0.

Well then do the same thing for letters that will be ABC TFG H I J K element O P R S T U R STV and Y

Z.

Close enough.

There we go.

And finally symbols as well.

I'm going to say that.

Valid symbols instead of a password will be.

Exclamation at count basically just right across the top row of my keyboard.

So.

All right.

So we've now got all the possible valid characters that can go into a password.

Well then create a new string called valid chars short for valid characters and I'll assign it an empty

string for now.

Right after that we're going to take a look at what value we have or include letters numbers and symbols.

If any of these are true then we're going to take the appropriate character set.

So in other words these different character sets right here and add them in to the valid char string.

Let me show you what I mean right after valid chars will say if this dot include letters then I want

to take the entire set of letters and add them into the pool of puzzle valid characters for the password.

I'm about to generate let's say valid chars let's equals which just means take all of the letters right

here and add them to the end of this string plus equals letters like so I'll then repeat that process

for the other two flags we have as well.

So say if this dot include numbers

valid chars plus equals numbers.

And then finally if this start include symbols Valot chars plus equals symbols

the now valid chars is a string that has all the valid characters that we can possibly add into a password.

Now the last step we're going to set up a little for loop we're going to iterate from zero all the way

up to whatever our length of password is then for every step of our for loop we're going to select a

character at random out of this valid chars array and use that randomly selected character to form up

our password though the last step after that if statement right there are going to create a little local

variable called generated password and I'll default it to be an empty string and I'll set up my for

loop we'll say for let I journey at zero going all the way up to less than this length I plus plus then

inside of here we will pick out a random character from the valid char string to do so we need to calculate

really a random index inside there.

So to find a random index will say constant X is math dot law and we'll pick a random number and multiply

it by valid chars not link I'll zoom out for just a second so you can see it that whole line again this

is going to take a look at the length of the valid characters array it's going to multiply it by a random

number to give us a random number between 0 and that length then we're just going to round down to the

nearest integer then we'll take that index and use it to look up a random character or I should say

a specific character inside the valid chars array and we'll add again to the end of the generated password

variable we'll say generated password plus equals valid chars at that particular index and that's it

that's how we generate a random password now remember the end goal of this entire function right here

on button click the very end goal whatever password we generate inside of here you have to assign back

to the password property because that is what is going to actually get our H to mail display to be updated

automatically by angular though right after that for loop I'm going to take the generated password and

we'll assign it to the this stop password property we'll say this dot password sign it 2 generated password

and that is it let's save this and we'll do a quick test we're gonna flip back over to enter in a length

of ten and then I'll select use letters and click on generate now I can see a random string of characters

if I also select use numbers now I've got a password with numbers and if I also add in symbols.

Yep got some symbols in there as well if I start to remove things like let's say numbers.

Okay now I've got only letters and symbols.

Let's say this works out pretty well and there are one or two things about this little tool that are

still a little bit awkward.

Let's take a quick pause right here and fix up one or two very quick things inside the next video.