1 00:00:00,930 --> 00:00:06,210 In the last section we finished up the input component and we also do this smaller factor on our blog 2 00:00:06,210 --> 00:00:06,860 and form. 3 00:00:06,870 --> 00:00:12,300 So now we make reference to this dot state DOT email to get the current e-mail address that's in that 4 00:00:12,300 --> 00:00:13,230 input. 5 00:00:13,620 --> 00:00:19,170 We could have again just as easily let this thing as text and we could text here absolutely no issue. 6 00:00:19,380 --> 00:00:25,320 However I find it a lot more clear to make sure that my property names match up to the actual meaning 7 00:00:25,320 --> 00:00:26,790 of the property as well. 8 00:00:26,790 --> 00:00:33,150 So in this case this piece of state right here contains the e-mail address so this does state that e-mail 9 00:00:33,180 --> 00:00:37,170 makes a lot more sense than this start state text. 10 00:00:37,910 --> 00:00:38,150 OK. 11 00:00:38,160 --> 00:00:43,150 We're going to move forward now and we are going to focus on hooking up the password input. 12 00:00:43,260 --> 00:00:47,660 So we've already got her e-mail but we also need to receive a password as well. 13 00:00:47,790 --> 00:00:50,790 And that's the purpose of this card section component that we placed right here. 14 00:00:50,790 --> 00:00:57,850 It was going to wrap the password input so we're going to use the same strategy as we did with the e-mail. 15 00:00:57,880 --> 00:01:03,860 We're going to initialize a piece of state called password that is going to hold the password that's 16 00:01:03,870 --> 00:01:06,110 sitting inside the input. 17 00:01:06,240 --> 00:01:11,400 We will then create a new input tag and place it inside of this existing card section. 18 00:01:11,400 --> 00:01:13,740 So let's go ahead and get started. 19 00:01:13,950 --> 00:01:20,420 First we will start off by initializing another piece of state called Password. 20 00:01:20,820 --> 00:01:22,620 And it's just that easy. 21 00:01:22,620 --> 00:01:28,680 Next we'll go on down to the dangling card section that we've got and I'm going to turn this into a 22 00:01:28,680 --> 00:01:34,260 expanded tag and then side if you will place the input. 23 00:01:34,610 --> 00:01:40,200 So we'll say input and then I will make it a multi line tag like so I know that we're gonna need to 24 00:01:40,200 --> 00:01:42,280 pass a lot of props. 25 00:01:42,300 --> 00:01:46,750 I'll give it a placeholder of lower case password again. 26 00:01:46,800 --> 00:01:51,630 I'd like to make sure that the placeholders that I have for my inputs kind of look like what the user 27 00:01:51,630 --> 00:01:53,450 might enter into that field. 28 00:01:53,460 --> 00:01:59,670 So in the case of the e-mail having a placeholder like user ID email that makes sense for the password. 29 00:01:59,900 --> 00:02:04,170 And you know the password is different for every one song and put lowercase password. 30 00:02:04,170 --> 00:02:08,240 Just to kind of make people think OK you know this is my password whatever. 31 00:02:09,820 --> 00:02:13,450 Next we will tell this input what its value is supposed to be. 32 00:02:13,490 --> 00:02:18,000 So we'll say hey your value is going to be this state DOT password. 33 00:02:18,580 --> 00:02:25,420 And then we will add on the onchange text event handler so on change text and remember we pass this 34 00:02:25,420 --> 00:02:30,860 thing a function and whatever we pass to it will be text that the user just entered. 35 00:02:31,240 --> 00:02:39,860 So enter in password as the argument whenever the thing gets called We will update our password piece 36 00:02:39,910 --> 00:02:40,710 of state. 37 00:02:40,870 --> 00:02:46,870 So again I want to point out and I know that I point this out all the time but honestly it leads to 38 00:02:46,870 --> 00:02:48,130 a lot of confusion. 39 00:02:48,130 --> 00:02:54,160 Just remember that the argument that I receive here I'm I'm calling it password but it is the text that 40 00:02:54,160 --> 00:02:55,780 the user just entered. 41 00:02:55,780 --> 00:03:01,730 So I can call this password I can call it text I can call it new update whatever I want to call it. 42 00:03:01,960 --> 00:03:03,370 I choose to call it password. 43 00:03:03,370 --> 00:03:09,620 Just make sure that it's really clear hey this is the password that the user just typed in. 44 00:03:09,700 --> 00:03:14,300 Now the very last thing that we need to do is make sure we pass in a label as well. 45 00:03:14,500 --> 00:03:19,950 So I'm going to add in a label property and for this I'll just say keep it nice and simple just say 46 00:03:19,960 --> 00:03:20,570 password. 47 00:03:20,620 --> 00:03:23,630 That's all we really need here. 48 00:03:23,650 --> 00:03:23,980 All right. 49 00:03:23,980 --> 00:03:25,900 So let's test out the simulator. 50 00:03:25,930 --> 00:03:31,330 I will refresh and all right here's our password field. 51 00:03:31,380 --> 00:03:36,430 So let's now test it out and click in and start typing out my secret. 52 00:03:36,450 --> 00:03:37,890 Oh wait a minute. 53 00:03:38,360 --> 00:03:39,120 Oh. 54 00:03:39,510 --> 00:03:44,910 Our password is being answered in plain text right here which is definitely not the intent. 55 00:03:45,090 --> 00:03:49,710 We definitely don't want to make sure we don't want our password to be available in plain text where 56 00:03:49,980 --> 00:03:54,570 say anyone looking over this person's shoulder is going to be able to see that the entered password 57 00:03:54,570 --> 00:03:55,260 here. 58 00:03:55,290 --> 00:03:59,790 So we need to make sure instead that the paths are going to show up as like stars or something to the 59 00:03:59,790 --> 00:04:02,630 user after they enter. 60 00:04:02,940 --> 00:04:09,270 Fortunately that text input tag that we've been using as kind of the primitive behind the input component 61 00:04:09,630 --> 00:04:14,050 supports secure text entry or kind of password input. 62 00:04:14,160 --> 00:04:17,730 All we have to do is pass a prop to our text input tag. 63 00:04:17,760 --> 00:04:23,640 By the way I'm in my input component right now so I'll pass an additional proc to the textbook input 64 00:04:23,670 --> 00:04:27,880 here and tell it hey you are made for showing a password please. 65 00:04:27,880 --> 00:04:33,060 Surely your characters with an asterisk or something like that just to obstruct anyone from looking 66 00:04:33,060 --> 00:04:35,130 over this person's shoulder. 67 00:04:35,670 --> 00:04:43,420 So to do so all we have to do is add in a nother property called Secure text entry. 68 00:04:43,650 --> 00:04:53,880 If we pass in secure text entry of true then the password will be basically the input is going to be 69 00:04:53,880 --> 00:04:57,180 obstructed or it's the obfuscated. 70 00:04:57,180 --> 00:04:59,330 Now you'll notice that yes Lintas complain here. 71 00:04:59,340 --> 00:05:02,520 It says value must be omitted for boolean attributes. 72 00:05:02,670 --> 00:05:08,410 So what this means to say is you'll notice that I am passing in a prompt secure a text entry of true. 73 00:05:08,640 --> 00:05:10,800 This is a little bit of a gotcha with GSX. 74 00:05:10,820 --> 00:05:12,470 Now let me love you very clear. 75 00:05:12,540 --> 00:05:13,320 This is valid. 76 00:05:13,320 --> 00:05:19,650 GSX that we have right here but by convention whenever we have a boolean property so we're just passing 77 00:05:19,680 --> 00:05:21,020 something as true. 78 00:05:21,060 --> 00:05:22,910 In this case you are just flat out true. 79 00:05:23,160 --> 00:05:28,310 We can take a little bit of a shortcut by just listing the property. 80 00:05:28,530 --> 00:05:35,160 So just by listing secure text entry This means that we're going to pass in true or false whatever it 81 00:05:35,160 --> 00:05:37,160 might be. 82 00:05:37,170 --> 00:05:42,960 Now we do want to make sure that our input is not always showing a secure Test century. 83 00:05:43,080 --> 00:05:46,200 We want to be able to be customized by the parent component. 84 00:05:46,200 --> 00:05:54,390 So the parents decide you know what yes I do want this thing to be hidden or I want it to be or not 85 00:05:54,390 --> 00:05:58,180 hidden by want this to be a secure Test century or do you not want it to be. 86 00:05:58,410 --> 00:06:06,410 So to make sure that's the case we will add in another prop short and put it will take secure text entry. 87 00:06:06,420 --> 00:06:12,450 So we're asking it the exact same thing now that we are going to use some prop here. 88 00:06:12,480 --> 00:06:12,750 OK. 89 00:06:12,750 --> 00:06:19,620 Now we do in fact have to you assign this to a prop so I'm going to assign it the proper security next 90 00:06:19,620 --> 00:06:20,530 century. 91 00:06:20,940 --> 00:06:28,620 So now if inside of our component when we create an input tag if we pass in secure text entry of True 92 00:06:29,000 --> 00:06:32,010 that will be passed to our tag as true. 93 00:06:32,010 --> 00:06:38,040 And if we pass false or undefined first security next century the thing is not going to consider itself 94 00:06:38,040 --> 00:06:39,740 to be a password input. 95 00:06:40,230 --> 00:06:45,890 So now all we have to do is flip back over to our blog and forum and we're going to decide of our two 96 00:06:45,900 --> 00:06:49,630 inputs which one needs to be secure next century. 97 00:06:49,650 --> 00:06:54,210 So the email one probably doesn't need security next century like we just want the user to see what 98 00:06:54,210 --> 00:06:57,570 that thing looks like or you know what the actual value is that they've entered. 99 00:06:57,570 --> 00:07:01,690 So on this one we will not enter in any property whatsoever. 100 00:07:01,980 --> 00:07:08,200 So when the input is created it's going to consider secure text entry to be undefined. 101 00:07:08,460 --> 00:07:14,400 So we're going to pass undefined to this product right here and undefine with GSX is basically the same 102 00:07:14,400 --> 00:07:15,350 thing is false. 103 00:07:15,360 --> 00:07:17,090 So it's going to think that OK. 104 00:07:17,130 --> 00:07:19,410 Must not want secure text entry. 105 00:07:19,950 --> 00:07:25,860 But in the case of our password field we do want that secure text entry want to pass in secure text 106 00:07:25,890 --> 00:07:26,420 entry. 107 00:07:26,430 --> 00:07:27,310 True. 108 00:07:27,420 --> 00:07:36,450 So to do that we can just say secure text entry and again by just listing this prop it will show up 109 00:07:36,450 --> 00:07:39,090 inside of the input as being a value. 110 00:07:39,090 --> 00:07:44,450 True like just listing it means it's going to show up as the value true inside of this component. 111 00:07:44,730 --> 00:07:51,090 So now when we render this input input secure text entry is going to come in as true. 112 00:07:51,330 --> 00:07:55,390 We're going to pass true to the text input and boom there you go. 113 00:07:55,990 --> 00:07:57,890 OK let's test something a simulator. 114 00:07:57,890 --> 00:08:03,690 Now I'll refresh and I'll put in my user G-mail dot com. 115 00:08:03,870 --> 00:08:10,320 OK it looks good and my password and perfect so it's nicely obfuscated. 116 00:08:10,380 --> 00:08:11,220 Nice round dot. 117 00:08:11,220 --> 00:08:15,560 So anyone looking over our user shoulder is not going to be able to see this person's password in plain 118 00:08:15,560 --> 00:08:16,610 text. 119 00:08:17,070 --> 00:08:17,540 OK. 120 00:08:17,580 --> 00:08:19,130 This looks fantastic. 121 00:08:19,140 --> 00:08:21,000 I think we're just about done with the form. 122 00:08:21,000 --> 00:08:26,050 The last thing we need to do is check to see whether or not the users email and passer is correct. 123 00:08:26,070 --> 00:08:29,820 Like you know whether or not they actually entered the correct logon information. 124 00:08:29,910 --> 00:08:32,170 So let's continue the next section and start. 125 00:08:32,170 --> 00:08:35,820 Focus on doing the actual authentication part of our application.