1 00:00:02,220 --> 00:00:04,270 So let's dive into this form 2 00:00:04,270 --> 00:00:07,960 and here we'll need a couple of form input elements. 3 00:00:07,960 --> 00:00:11,430 And of course we learned about a lot of form input elements 4 00:00:11,430 --> 00:00:14,183 early in the course in this forms section. 5 00:00:15,300 --> 00:00:17,940 Now, for example, we'll need a element for 6 00:00:17,940 --> 00:00:20,550 getting the email address of a user. 7 00:00:20,550 --> 00:00:23,480 For this, we can add an input of type email. 8 00:00:23,480 --> 00:00:25,740 That's a specific built-in type, 9 00:00:25,740 --> 00:00:29,360 which will also ensure that the right soft keyboard 10 00:00:29,360 --> 00:00:31,980 is presented on mobile devices. 11 00:00:31,980 --> 00:00:34,870 But of course, that's not all we need for this. 12 00:00:34,870 --> 00:00:37,820 Instead, you learned that you also want to add a label 13 00:00:37,820 --> 00:00:41,200 so that you have a text that describes 14 00:00:41,200 --> 00:00:43,270 which kind of value is expected. 15 00:00:43,270 --> 00:00:47,660 And this label should also be logically connected 16 00:00:47,660 --> 00:00:52,660 to the input with help of the for and id HTML attributes. 17 00:00:53,540 --> 00:00:58,220 Here, I'll name it email and hence give this an id of email, 18 00:00:58,220 --> 00:01:00,160 but this doesn't have to be email. 19 00:01:00,160 --> 00:01:02,600 The type does have to be email. 20 00:01:02,600 --> 00:01:04,300 This doesn't have to be email. 21 00:01:04,300 --> 00:01:07,443 Instead, this can be any identifier of your choice. 22 00:01:08,890 --> 00:01:13,890 And then here, I'll just say email like this, or like this. 23 00:01:15,300 --> 00:01:18,260 And that's the first input. 24 00:01:18,260 --> 00:01:21,940 Now to later be able to extract the email 25 00:01:21,940 --> 00:01:24,800 from the incoming request on the server, 26 00:01:24,800 --> 00:01:28,180 we also have to give this input the name attribute, 27 00:01:28,180 --> 00:01:32,834 which is another built in HTML attribute on input elements, 28 00:01:32,834 --> 00:01:36,850 because that name which we assign here will be the key 29 00:01:36,850 --> 00:01:39,520 which we can later use on the server side 30 00:01:39,520 --> 00:01:42,870 to extract the value entered by the user 31 00:01:42,870 --> 00:01:45,090 in that input field. 32 00:01:45,090 --> 00:01:47,460 So here I'll also choose email. 33 00:01:47,460 --> 00:01:48,680 And last but not least, 34 00:01:48,680 --> 00:01:51,200 I want to ensure that this is never empty, 35 00:01:51,200 --> 00:01:54,599 that it's not valid to submit this in an empty state. 36 00:01:54,599 --> 00:01:57,853 We can do that by adding the required attribute. 37 00:01:59,490 --> 00:02:02,270 Now we'll have a couple of label input combinations 38 00:02:02,270 --> 00:02:04,700 and therefore, I want to group them together 39 00:02:04,700 --> 00:02:07,481 so that we also have some space in between them. 40 00:02:07,481 --> 00:02:09,669 And we could use a div for that 41 00:02:09,669 --> 00:02:12,250 with a class that adds some spacing. 42 00:02:12,250 --> 00:02:15,280 That is what I did in various course sections before. 43 00:02:15,280 --> 00:02:16,760 And that is absolutely fine. 44 00:02:16,760 --> 00:02:18,910 You'll see it a lot out there. 45 00:02:18,910 --> 00:02:22,030 We could also use a paragraph instead, though. 46 00:02:22,030 --> 00:02:24,160 A paragraph might sound like it's only 47 00:02:24,160 --> 00:02:25,659 intended to be used on text, 48 00:02:25,659 --> 00:02:27,435 but actually it is also quite common 49 00:02:27,435 --> 00:02:31,175 and fine to use a paragraph instead of forms 50 00:02:31,175 --> 00:02:35,015 to basically mark and group your different 51 00:02:35,015 --> 00:02:38,013 form inputs and labels that belong together. 52 00:02:39,350 --> 00:02:41,470 And therefore, here, I'll add my paragraph 53 00:02:41,470 --> 00:02:43,643 for this first form input. 54 00:02:45,020 --> 00:02:48,100 Now we can, of course, copy that, 55 00:02:48,100 --> 00:02:50,910 this entire paragraph and add it below that 56 00:02:50,910 --> 00:02:55,910 to also add a second input for the confirm email field. 57 00:02:57,360 --> 00:03:01,880 For that, I'll give this an id of confirm-email 58 00:03:02,830 --> 00:03:04,730 also here 59 00:03:04,730 --> 00:03:08,310 and set the name to confirm-email. 60 00:03:08,310 --> 00:03:12,600 The type will stay email because it's still an email input. 61 00:03:12,600 --> 00:03:15,911 We just use it later to double check that 62 00:03:15,911 --> 00:03:19,790 the email address entered here doesn't have any typo, 63 00:03:19,790 --> 00:03:22,923 but instead matches the email address entered here. 64 00:03:23,980 --> 00:03:28,020 Then I'll copy and paste in this paragraph again. 65 00:03:28,020 --> 00:03:32,133 And now also add a password field here. 66 00:03:33,140 --> 00:03:37,560 Now I'll use password as an id and as a name, 67 00:03:37,560 --> 00:03:40,240 though, that's up to you, and also as a type 68 00:03:40,240 --> 00:03:43,100 and that's not up to you because this type 69 00:03:43,100 --> 00:03:46,140 will ensure that the characters are not visible 70 00:03:46,140 --> 00:03:49,920 whilst typing so that if someone is standing behind you, 71 00:03:49,920 --> 00:03:52,513 he or she can't see your password. 72 00:03:54,220 --> 00:03:56,020 Now on this password input, 73 00:03:56,020 --> 00:03:58,340 I also don't just want to require it. 74 00:03:58,340 --> 00:04:02,210 Instead, I'll also add a minlength attribute here 75 00:04:02,210 --> 00:04:04,470 and set this to six. 76 00:04:04,470 --> 00:04:08,026 That's another built-in official HTML attribute, 77 00:04:08,026 --> 00:04:12,540 which you can add on input elements to enforce a certain, 78 00:04:12,540 --> 00:04:14,710 guess what, minimum length. 79 00:04:14,710 --> 00:04:17,070 And therefore, now, we ensure that passwords 80 00:04:17,070 --> 00:04:20,563 that are entered here are at least six characters long. 81 00:04:22,630 --> 00:04:26,340 Now that's the main area of the signup form. 82 00:04:26,340 --> 00:04:28,200 It is not all though. 83 00:04:28,200 --> 00:04:31,780 Instead, I then also want to gather personal data 84 00:04:31,780 --> 00:04:36,390 about the user, the user's name, the address, and so on. 85 00:04:36,390 --> 00:04:38,790 Therefore, I'll add another element here. 86 00:04:38,790 --> 00:04:43,060 The hr element, which is basically just a horizontal line, 87 00:04:43,060 --> 00:04:44,700 a little divider. 88 00:04:44,700 --> 00:04:48,040 It's mostly a visual element which I use here 89 00:04:48,040 --> 00:04:51,240 to set the basic authentication information 90 00:04:51,240 --> 00:04:54,083 apart from the personal information. 91 00:04:54,970 --> 00:04:57,641 So below the hr element here, 92 00:04:57,641 --> 00:05:02,641 I'll then paste in my paragraph here again. 93 00:05:02,790 --> 00:05:07,790 And now I'm asking for the full name of the user, and hence, 94 00:05:07,870 --> 00:05:12,320 I'll give this an id of full name 95 00:05:12,320 --> 00:05:15,300 and a name of full name. 96 00:05:15,300 --> 00:05:17,300 I don't want to have a minlength here. 97 00:05:17,300 --> 00:05:20,405 I don't want to tell people how long their name has to be, 98 00:05:20,405 --> 00:05:24,760 but I do change the type and I will set it to text, 99 00:05:24,760 --> 00:05:28,113 which is just some standard text that I want here. 100 00:05:29,420 --> 00:05:32,990 Now, I'll copy it again because now I also want to get 101 00:05:32,990 --> 00:05:37,990 some address data like the street the user lives in 102 00:05:38,010 --> 00:05:42,110 and hence, street sounds like a fitting id and name. 103 00:05:42,110 --> 00:05:45,800 And the type will still be text here. 104 00:05:45,800 --> 00:05:48,930 Now you can erase that and place your cursor 105 00:05:48,930 --> 00:05:52,160 between the double quotes and then hit control space 106 00:05:52,160 --> 00:05:53,730 for some auto-completion. 107 00:05:53,730 --> 00:05:56,020 And here in the Visual Studio Code, 108 00:05:56,020 --> 00:05:59,227 you will then see the valid types you could use. 109 00:05:59,227 --> 00:06:02,640 Though, I will say that not all types are supported 110 00:06:02,640 --> 00:06:04,090 in all browsers. 111 00:06:04,090 --> 00:06:06,093 Text, however, definitely is. 112 00:06:07,500 --> 00:06:08,700 Now, that's not all though. 113 00:06:08,700 --> 00:06:11,330 The street is one thing and I will assume 114 00:06:11,330 --> 00:06:14,070 that the user enters the number of the house 115 00:06:14,070 --> 00:06:16,410 in the street in that street field. 116 00:06:16,410 --> 00:06:18,970 But I also want to get the postal code, 117 00:06:18,970 --> 00:06:21,453 so I'll accept this as well. 118 00:06:22,720 --> 00:06:27,720 And I give it an id of postal and the name of postal. 119 00:06:28,860 --> 00:06:31,880 And now there might be different postal codes 120 00:06:31,880 --> 00:06:33,110 all over the world. 121 00:06:33,110 --> 00:06:35,980 And there are definitely also are a lot of countries 122 00:06:35,980 --> 00:06:38,680 without any postal codes at all. 123 00:06:38,680 --> 00:06:41,526 But I will just assume that I'm building my shop here 124 00:06:41,526 --> 00:06:43,950 for Germany in my case. 125 00:06:43,950 --> 00:06:48,730 And here, I know that postal codes are five characters long. 126 00:06:48,730 --> 00:06:51,671 They used to be four characters long in the past. 127 00:06:51,671 --> 00:06:55,730 That's not in use anymore to my knowledge, at least. 128 00:06:55,730 --> 00:07:00,730 And therefore here I will expect a minlength of five 129 00:07:01,560 --> 00:07:04,300 and a maxlength of five 130 00:07:04,300 --> 00:07:07,940 so that this is exactly five characters long. 131 00:07:07,940 --> 00:07:11,440 And of course you can accept different lengths here. 132 00:07:11,440 --> 00:07:14,020 I will still use type text here, 133 00:07:14,020 --> 00:07:16,630 not number or anything like this, 134 00:07:16,630 --> 00:07:19,580 because this should not be a number 135 00:07:19,580 --> 00:07:21,160 which the user enters here. 136 00:07:21,160 --> 00:07:23,900 It should be text, which looks like a number, 137 00:07:23,900 --> 00:07:25,500 but it's not a number I'll use 138 00:07:25,500 --> 00:07:28,750 for mathematical calculations or anything like this. 139 00:07:28,750 --> 00:07:30,646 Instead, I'll use it as a raw text 140 00:07:30,646 --> 00:07:33,003 and hence I'll set this to type text. 141 00:07:33,930 --> 00:07:35,760 And to make this a bit easier to read, 142 00:07:35,760 --> 00:07:39,270 I will now actually split all these HTML attributes 143 00:07:39,270 --> 00:07:41,050 across multiple lines. 144 00:07:41,050 --> 00:07:43,600 That is something we can do because you learned 145 00:07:43,600 --> 00:07:48,180 that line breaks and line space like this is not a problem. 146 00:07:48,180 --> 00:07:49,750 The browser will ignore it 147 00:07:49,750 --> 00:07:52,410 and will still see this as one element, 148 00:07:52,410 --> 00:07:55,250 but it is a bit easier to read for us humans. 149 00:07:55,250 --> 00:07:57,310 And that's why I'm doing this for elements 150 00:07:57,310 --> 00:08:00,863 that have a lot of HTML attributes like this one does. 151 00:08:03,210 --> 00:08:07,483 And therefore now, it's time to add the last input here. 152 00:08:08,320 --> 00:08:12,460 And that will be the input for the city. 153 00:08:12,460 --> 00:08:16,910 So city sounds like a fitting id we can use here 154 00:08:16,910 --> 00:08:21,647 and it's still of type text so I don't have any minlength, 155 00:08:21,647 --> 00:08:23,383 maxlength rules. 156 00:08:25,490 --> 00:08:27,540 Now below all of that, we need a button 157 00:08:27,540 --> 00:08:30,710 for submitting the form and I'll give it a label, 158 00:08:30,710 --> 00:08:33,730 a caption of create account. 159 00:08:33,730 --> 00:08:36,320 And I will also give it a CSS class, 160 00:08:36,320 --> 00:08:38,289 which we haven't defined yet, 161 00:08:38,289 --> 00:08:40,919 but which I will add very soon. 162 00:08:40,919 --> 00:08:43,693 The class is btn, which will be a class 163 00:08:43,693 --> 00:08:47,860 that we write together that sets some base styles 164 00:08:47,860 --> 00:08:50,300 for buttons or for all the elements 165 00:08:50,300 --> 00:08:52,653 that have this class to be precise. 166 00:08:54,090 --> 00:08:57,860 And below this button, I'll add a paragraph 167 00:08:57,860 --> 00:09:00,481 with an anchor element inside. 168 00:09:00,481 --> 00:09:04,930 And the anchor element will point to /login 169 00:09:04,930 --> 00:09:06,940 and inside of the anchor element, 170 00:09:06,940 --> 00:09:09,600 I will say Login instead. 171 00:09:09,600 --> 00:09:13,670 And that should be a little utility link below this button, 172 00:09:13,670 --> 00:09:16,290 which allows us to switch to the login form 173 00:09:16,290 --> 00:09:18,283 in case we don't have an account yet. 174 00:09:20,510 --> 00:09:24,330 I'll give this paragraph an id of switch-form, 175 00:09:24,330 --> 00:09:27,000 because I want to use that for styling later 176 00:09:27,000 --> 00:09:29,570 to give this paragraph and this link in there 177 00:09:29,570 --> 00:09:31,520 a specific style. 178 00:09:31,520 --> 00:09:34,280 Of course, it's up to you whether you want to use IDs 179 00:09:34,280 --> 00:09:36,350 for selecting this paragraph later 180 00:09:36,350 --> 00:09:38,970 and whether you want to use this exact id. 181 00:09:38,970 --> 00:09:41,883 It's just the id I will use in this section. 182 00:09:43,070 --> 00:09:47,370 Now with that, we get this very basic markup finished 183 00:09:47,370 --> 00:09:48,630 for this signup page. 184 00:09:48,630 --> 00:09:52,060 We of course got no styling at all, but we got the markup. 185 00:09:52,060 --> 00:09:55,460 Now I want to see whether that all renders, 186 00:09:55,460 --> 00:09:57,660 at least in an ugly form. 187 00:09:57,660 --> 00:10:00,590 And for that, we can go to the auth.controller, again 188 00:10:00,590 --> 00:10:02,160 to the getSignup function. 189 00:10:02,160 --> 00:10:05,520 And now finally add some working logic here, 190 00:10:05,520 --> 00:10:08,300 and to be precise, we want to render a template 191 00:10:08,300 --> 00:10:10,720 for the response and to achieve this, 192 00:10:10,720 --> 00:10:12,677 we use the res object here, 193 00:10:12,677 --> 00:10:15,630 which is given to us by Express, 194 00:10:15,630 --> 00:10:17,780 and this will have a render method 195 00:10:17,780 --> 00:10:20,410 even though my auto-completion doesn't know it here. 196 00:10:20,410 --> 00:10:22,120 But we'll have a render method here 197 00:10:22,120 --> 00:10:25,690 and this will do multiple things in one step. 198 00:10:25,690 --> 00:10:27,300 It will render a template, 199 00:10:27,300 --> 00:10:29,130 which means it takes the template, 200 00:10:29,130 --> 00:10:32,100 parses it with the EJS language, 201 00:10:32,100 --> 00:10:36,200 and replaces all the dynamic parts with text. 202 00:10:36,200 --> 00:10:39,760 And then once the HTML code is finished, 203 00:10:39,760 --> 00:10:43,220 which doesn't have any dynamic segments in it anymore, 204 00:10:43,220 --> 00:10:47,826 this HTML code is sent to the visitor in the response. 205 00:10:47,826 --> 00:10:50,973 Render will do all these things for us. 206 00:10:52,030 --> 00:10:56,150 And all it wants for that is the name of our view 207 00:10:56,150 --> 00:10:59,930 or a path to our view seen relative 208 00:10:59,930 --> 00:11:01,900 from inside the views folder 209 00:11:01,900 --> 00:11:05,910 because that is the configuration we gave to Express earlier 210 00:11:05,910 --> 00:11:08,103 that our views live in that folder. 211 00:11:09,630 --> 00:11:11,283 So in my case here, I want to render 212 00:11:11,283 --> 00:11:14,970 this signup.ejs file here for getSignup. 213 00:11:14,970 --> 00:11:17,440 So in the views folder, I want to render the 214 00:11:17,440 --> 00:11:21,610 customer/auth/signup template. 215 00:11:21,610 --> 00:11:24,020 Dive into the customer folder, the auth folder, 216 00:11:24,020 --> 00:11:26,093 and then the signup file. 217 00:11:27,640 --> 00:11:29,780 And if we know save all of that, 218 00:11:29,780 --> 00:11:32,580 we should be able to give this a try. 219 00:11:32,580 --> 00:11:36,600 We can open up this integrated terminal here 220 00:11:36,600 --> 00:11:39,029 and then run npm start to run 221 00:11:39,029 --> 00:11:41,770 this start script we defined before, 222 00:11:41,770 --> 00:11:44,650 which uses nodemon for starting our web server 223 00:11:44,650 --> 00:11:46,840 and watching our project. 224 00:11:46,840 --> 00:11:49,540 And now this started up. 225 00:11:49,540 --> 00:11:53,130 We can now visit localhost:3000 but not like this, 226 00:11:53,130 --> 00:11:58,130 but instead /signup because that is the specific route 227 00:11:58,669 --> 00:12:02,953 we registered here for getting that signup page. 228 00:12:04,490 --> 00:12:08,750 So if I enter /signup, indeed here, I see my form 229 00:12:08,750 --> 00:12:12,340 and I'll zoom in a bit here, but that is my form. 230 00:12:12,340 --> 00:12:16,350 Of course, ugly, without any styling, but it is my form. 231 00:12:16,350 --> 00:12:18,710 And it would theoretically work. 232 00:12:18,710 --> 00:12:23,080 At least if we configured the form attributes to tell it 233 00:12:23,080 --> 00:12:25,750 where to send a request to 234 00:12:25,750 --> 00:12:27,830 and if we then add the backend logic 235 00:12:27,830 --> 00:12:29,920 for handling the request. 236 00:12:29,920 --> 00:12:33,030 But it works no matter if it's ugly or not. 237 00:12:33,030 --> 00:12:35,956 Nonetheless, of course, the goal is not to keep it ugly 238 00:12:35,956 --> 00:12:37,780 and therefore in the next step, 239 00:12:37,780 --> 00:12:40,240 we're going to work on some styling here 240 00:12:40,240 --> 00:12:42,140 and we're already going to work on it, 241 00:12:42,140 --> 00:12:46,440 such that we also can then use this styling for other forms, 242 00:12:46,440 --> 00:12:49,493 like the login form, which we'll add in the future.