1 00:00:02,040 --> 00:00:04,040 Let's start here and get sign up. 2 00:00:04,040 --> 00:00:07,950 Here I want to get my session data and I'll store it in a 3 00:00:07,950 --> 00:00:12,020 variable, in a variable because I might overwrite it as you 4 00:00:12,020 --> 00:00:13,123 will see in a second, 5 00:00:13,990 --> 00:00:17,480 and here we can then use sessionFlash dot 6 00:00:17,480 --> 00:00:21,100 get session data and passing the request object, 7 00:00:21,100 --> 00:00:24,003 since we use that in the get session data function. 8 00:00:24,930 --> 00:00:26,420 And now to think just this, 9 00:00:26,420 --> 00:00:30,240 that session data could be null or undefined. 10 00:00:30,240 --> 00:00:31,610 That would be the case 11 00:00:31,610 --> 00:00:34,210 if we haven't flashed any data before. 12 00:00:34,210 --> 00:00:37,120 Here I'm just extracting it from the session object 13 00:00:37,120 --> 00:00:39,810 but if I didn't flash and data onto it, 14 00:00:39,810 --> 00:00:41,440 which for example would be the case 15 00:00:41,440 --> 00:00:43,970 when we first visit the sign up page, 16 00:00:43,970 --> 00:00:46,803 then of course this would be null or undefined. 17 00:00:47,780 --> 00:00:48,870 Therefore, in this case, 18 00:00:48,870 --> 00:00:52,400 I want to have some default data so that I populate the 19 00:00:52,400 --> 00:00:56,460 input fields with some default data in the rendered 20 00:00:56,460 --> 00:00:57,550 template. 21 00:00:57,550 --> 00:01:02,550 So if not session data, if that is null or undefined, 22 00:01:02,640 --> 00:01:04,550 if it's faulty therefore, 23 00:01:04,550 --> 00:01:08,040 I want to set it equal to an object where 24 00:01:10,660 --> 00:01:13,070 I won't have an error message, 25 00:01:13,070 --> 00:01:16,860 but where I do have some default data like an e-mail, 26 00:01:16,860 --> 00:01:19,990 which initially should be empty in that case, a password, 27 00:01:19,990 --> 00:01:23,740 which is an empty string and basically a bunch of empty 28 00:01:23,740 --> 00:01:25,310 strings. 29 00:01:25,310 --> 00:01:28,113 Also the confirm password here 30 00:01:28,113 --> 00:01:32,350 that should be an empty string and we need a comma after 31 00:01:33,262 --> 00:01:36,840 this here and also full name 32 00:01:36,840 --> 00:01:40,500 which should be an empty string and straight 33 00:01:40,500 --> 00:01:42,290 which should be an empty string 34 00:01:42,290 --> 00:01:45,750 same for postal and for city. 35 00:01:45,750 --> 00:01:49,210 So basically, a bunch of empty values 36 00:01:49,210 --> 00:01:50,910 and it's now the session data 37 00:01:50,910 --> 00:01:55,610 which is either this object full of default empty values or 38 00:01:55,610 --> 00:01:57,970 the data we flashed onto the session before 39 00:01:57,970 --> 00:02:00,053 which contains the real user input. 40 00:02:01,370 --> 00:02:05,010 Just a little thing I just remembered. 41 00:02:05,010 --> 00:02:08,810 I have a tiny error in the signup function where we do flash 42 00:02:08,810 --> 00:02:12,350 data onto the session there, the enter data comprises, 43 00:02:12,350 --> 00:02:14,180 email password and so on, 44 00:02:14,180 --> 00:02:16,410 what's missing here is to confirm email. 45 00:02:16,410 --> 00:02:20,770 Now, I am setting it here and here in get signup 46 00:02:20,770 --> 00:02:22,900 I do have it but it should be confirmed email 47 00:02:22,900 --> 00:02:24,123 not confirm password. 48 00:02:24,960 --> 00:02:28,490 Now I should also have that in my entered data down here in 49 00:02:28,490 --> 00:02:29,650 the signup function 50 00:02:29,650 --> 00:02:33,560 because of course that was all the data entered by the user 51 00:02:33,560 --> 00:02:36,573 on rec.body confirm email. 52 00:02:37,590 --> 00:02:40,300 So we should also make sure that this is part of entered 53 00:02:40,300 --> 00:02:44,190 data here in the sign up function so that it is flashed onto 54 00:02:44,190 --> 00:02:48,020 the session so that we don't lose that entered email. 55 00:02:48,020 --> 00:02:52,000 We don't validate it here explicitly because we do that here 56 00:02:52,000 --> 00:02:52,910 in this step 57 00:02:52,910 --> 00:02:55,310 but we should of course flash it to the session. 58 00:02:56,270 --> 00:02:59,190 So flashing confirmed e-mail is an important step. 59 00:02:59,190 --> 00:03:02,130 Having a default value for it is as well. 60 00:03:02,130 --> 00:03:04,900 You should also make sure that all the key names here for 61 00:03:04,900 --> 00:03:08,340 your default values match to key names you have here for 62 00:03:08,340 --> 00:03:11,140 flashing data onto the session 63 00:03:11,140 --> 00:03:15,310 And once you did all of that here in get sign up where we do 64 00:03:15,310 --> 00:03:17,470 render this sign up template. 65 00:03:17,470 --> 00:03:22,220 We can now pass in a second value, 66 00:03:22,220 --> 00:03:26,511 a second parameter value to the render method to provide 67 00:03:26,511 --> 00:03:29,290 some data to the template when it's being rendered. 68 00:03:29,290 --> 00:03:33,330 Because here I will now pass in a input data key, 69 00:03:33,330 --> 00:03:36,440 key name is up to you. This is the name of the variable, 70 00:03:36,440 --> 00:03:39,740 which you will be able to use in the template later. 71 00:03:39,740 --> 00:03:42,570 And the value is my session data. 72 00:03:42,570 --> 00:03:43,690 So this object, 73 00:03:43,690 --> 00:03:46,630 which has either a bunch of default values or which is 74 00:03:46,630 --> 00:03:47,930 extracted from the session 75 00:03:49,480 --> 00:03:53,420 and we can now apply the same strategy to the get log 76 00:03:53,420 --> 00:03:56,350 in action Of course, here, 77 00:03:56,350 --> 00:04:01,350 we also will get some session data by looking into our 78 00:04:01,510 --> 00:04:03,583 flashed data which we might have. 79 00:04:04,883 --> 00:04:06,370 So, by using session flash dot, 80 00:04:06,370 --> 00:04:08,763 get session data and passing req to it, 81 00:04:09,890 --> 00:04:13,330 but just as before this might be null or undefined. 82 00:04:13,330 --> 00:04:15,203 So if not session data, 83 00:04:16,060 --> 00:04:20,100 same logic as before with get signup, if not session data, 84 00:04:20,100 --> 00:04:24,170 then I want to set some default data. So here in get log in, 85 00:04:24,170 --> 00:04:29,140 in that case, I will set session data to an object. 86 00:04:29,140 --> 00:04:31,920 And in that object, we don't have an error message 87 00:04:31,920 --> 00:04:34,740 but I have an email which is initially empty and the 88 00:04:34,740 --> 00:04:36,700 password, which is initially empty. 89 00:04:36,700 --> 00:04:39,710 These are my default values for the two fields that we have 90 00:04:39,710 --> 00:04:40,883 on the login page. 91 00:04:42,484 --> 00:04:43,317 And then with that, 92 00:04:43,317 --> 00:04:46,310 we can also pass a second parameter value to this render 93 00:04:46,310 --> 00:04:51,260 method and provide the input data 94 00:04:51,260 --> 00:04:54,663 which is the session data we got here. 95 00:04:56,860 --> 00:04:58,060 And now with that, 96 00:04:58,060 --> 00:05:01,113 we are ensuring that we got this in the login page as well. 97 00:05:02,480 --> 00:05:05,020 Now that's all right, but to see an effect, 98 00:05:05,020 --> 00:05:06,680 we now need to use that data 99 00:05:06,680 --> 00:05:09,100 which we are passing through the templates, 100 00:05:09,100 --> 00:05:10,253 in the templates. 101 00:05:11,270 --> 00:05:14,290 So therefore, we need to go to the views and there to the 102 00:05:14,290 --> 00:05:17,470 sign up EJS and log in EJS files. 103 00:05:17,470 --> 00:05:20,470 And there, we now got a couple of things to do. 104 00:05:20,470 --> 00:05:23,190 Let's start on signup EJS. 105 00:05:23,190 --> 00:05:25,440 Here, I want to show an error message 106 00:05:25,440 --> 00:05:27,483 if we do have a erroneous data. 107 00:05:28,370 --> 00:05:31,270 For that, maybe below the H1 tag, 108 00:05:31,270 --> 00:05:35,770 we can use EJS tax to add a "if" check here and check if the 109 00:05:35,770 --> 00:05:40,770 input data field keep in mind input data here simply is that 110 00:05:41,610 --> 00:05:44,160 name off that property 111 00:05:44,160 --> 00:05:47,030 which was setting in this object that we pass through the 112 00:05:47,030 --> 00:05:50,400 render method. So if you chose a different name here, 113 00:05:50,400 --> 00:05:51,790 instead of input data, 114 00:05:51,790 --> 00:05:54,840 you have to use that different key here. But in my case, 115 00:05:54,840 --> 00:05:59,401 it is input data and input data dot error message is a 116 00:05:59,401 --> 00:06:02,610 thing. If that is true, see if it exists. 117 00:06:02,610 --> 00:06:05,670 If it's not an empty string or a null or undefined, 118 00:06:05,670 --> 00:06:08,350 then I want to show that error message. 119 00:06:08,350 --> 00:06:13,350 So therefore, here I am, then opening my curly braces. 120 00:06:13,830 --> 00:06:16,650 And then here, of course, we're closing that. 121 00:06:16,650 --> 00:06:20,810 And now between that here in this IF check in the template, 122 00:06:20,810 --> 00:06:24,693 I want to then show my error message. 123 00:06:25,530 --> 00:06:30,110 But for that here, I will add a little section in that case, 124 00:06:30,110 --> 00:06:32,480 a little extra section you could say, 125 00:06:32,480 --> 00:06:35,690 which I'll give a class of alert, 126 00:06:35,690 --> 00:06:39,580 which I'll use for styling soon to gift us a specific style 127 00:06:39,580 --> 00:06:42,110 that highlights this error message. 128 00:06:42,110 --> 00:06:45,690 And in there I'll have an H2 tag with a title and the 129 00:06:45,690 --> 00:06:50,050 title simply is invalid input 130 00:06:52,280 --> 00:06:53,725 and below that 131 00:06:53,725 --> 00:06:56,920 I have a paragraph where I want to output the error message, 132 00:06:56,920 --> 00:07:01,123 which I get by accessing input data dot error message. 133 00:07:02,720 --> 00:07:05,130 We'll work on this styling in a second. First of all, 134 00:07:05,130 --> 00:07:08,360 we'll just verify that it works. So for the moment, 135 00:07:08,360 --> 00:07:10,840 I'll not do anything with that. Instead, 136 00:07:10,840 --> 00:07:14,510 we just output it like this and before we see if it works, 137 00:07:14,510 --> 00:07:19,010 I also want to ensure that we restore the entered values to 138 00:07:19,010 --> 00:07:22,910 use reminder provided. For this trick, 139 00:07:22,910 --> 00:07:24,650 go to all these input fields. 140 00:07:24,650 --> 00:07:27,460 And we add the value attribute, 141 00:07:27,460 --> 00:07:28,890 which is a built in attribute 142 00:07:28,890 --> 00:07:31,290 you can set on input elements, 143 00:07:31,290 --> 00:07:35,270 and this attribute allows you to set well values, 144 00:07:35,270 --> 00:07:38,040 which are pre-entered into those inputs. 145 00:07:38,040 --> 00:07:40,200 The user will still be able to change them, 146 00:07:40,200 --> 00:07:43,580 but they are there right from the start and here 147 00:07:43,580 --> 00:07:44,780 for example, for the e-mail 148 00:07:44,780 --> 00:07:48,050 I want to access input data dot e-mail. 149 00:07:48,050 --> 00:07:50,250 Now I can access dot e-mail 150 00:07:51,416 --> 00:07:52,870 because I make sure that I have e-mail 151 00:07:52,870 --> 00:07:55,380 field here if we had no session data, 152 00:07:55,380 --> 00:07:58,590 then I set it to an empty string in this object 153 00:07:58,590 --> 00:08:00,490 which I passed with the template, 154 00:08:00,490 --> 00:08:03,520 or if we did flash data to the session, then of course, 155 00:08:03,520 --> 00:08:06,380 we also have an email field because we have it here in this 156 00:08:06,380 --> 00:08:09,350 enter data with the real data the user provided 157 00:08:09,350 --> 00:08:13,230 and that is the data we flashed onto our session because 158 00:08:13,230 --> 00:08:16,660 we're spreading that object into the data object that's 159 00:08:16,660 --> 00:08:17,913 stored into session. 160 00:08:19,080 --> 00:08:22,670 So I e-mailed field and then also confirm e-mail password 161 00:08:22,670 --> 00:08:26,940 and so on all these fields will be available here. 162 00:08:26,940 --> 00:08:30,510 So we can repeat that for confirm e-mail then, 163 00:08:30,510 --> 00:08:32,030 written like this in my case 164 00:08:33,130 --> 00:08:35,730 and then do the same here for the password, 165 00:08:35,730 --> 00:08:38,409 which we of course also want to preserve so that the user 166 00:08:38,409 --> 00:08:42,750 doesn't have to re-enter it and then do this forward a full 167 00:08:42,750 --> 00:08:45,350 name, whoops, full name 168 00:08:45,350 --> 00:08:50,210 and of course also here for the street and then for the 169 00:08:50,210 --> 00:08:55,210 postal code there I want to restore it as well. 170 00:08:55,270 --> 00:08:58,480 And last but not the least also for the city 171 00:09:01,550 --> 00:09:04,890 Now that should do the trick and therefore, let's quickly 172 00:09:04,890 --> 00:09:07,570 re-load and see if it works. 173 00:09:07,570 --> 00:09:08,403 First of all, 174 00:09:08,403 --> 00:09:12,510 I'll try to sign up with a user that exists already. 175 00:09:12,510 --> 00:09:15,670 So I'll enter some correct data here, 176 00:09:15,670 --> 00:09:20,670 but data for a user that's already stored in the database. 177 00:09:21,280 --> 00:09:23,950 So therefore, this should actually fail. 178 00:09:23,950 --> 00:09:27,850 And it does. This is not style the way I want but you see 179 00:09:27,850 --> 00:09:31,060 I get the error message and the entered data is preserved, 180 00:09:31,060 --> 00:09:34,290 except for the street we'll have to look into that, 181 00:09:34,290 --> 00:09:36,250 but the rest is preserved. 182 00:09:36,250 --> 00:09:38,180 If I now also try doing that 183 00:09:40,390 --> 00:09:45,210 by opening the dev tools and removing the required 184 00:09:45,210 --> 00:09:49,640 attribute here from the e-mail field so that the front-end 185 00:09:49,640 --> 00:09:54,360 validation is disabled and every user could do that. 186 00:09:54,360 --> 00:09:57,100 Of course, you have to know that you can use the dev tools 187 00:09:57,100 --> 00:09:59,300 but a lot of users do. 188 00:09:59,300 --> 00:10:01,620 So they offered that is something that could happen. 189 00:10:01,620 --> 00:10:04,410 So now I did disabled this, re-entered a street, 190 00:10:04,410 --> 00:10:06,240 but remove to email. Now, 191 00:10:06,240 --> 00:10:08,400 since front and validation is disabled, 192 00:10:08,400 --> 00:10:10,170 this would be Submittable 193 00:10:10,170 --> 00:10:13,570 but thankfully I now get my error message that, this is not 194 00:10:13,570 --> 00:10:17,330 valid because I do have the backend validation as well 195 00:10:18,824 --> 00:10:21,190 and we are now flashing that data and that message 196 00:10:21,190 --> 00:10:24,073 so the data is preserved and that messages shown. 197 00:10:25,200 --> 00:10:27,610 Except for the street data that's missing. 198 00:10:27,610 --> 00:10:32,420 So let's see what's wrong there in off controller, 199 00:10:32,420 --> 00:10:34,380 I'm extracting rec bodies street, 200 00:10:34,380 --> 00:10:37,150 and I have it here on the entered data, 201 00:10:37,150 --> 00:10:40,000 but I have a typo here. I have steet here 202 00:10:40,000 --> 00:10:44,020 This should be street when I flashed the data. 203 00:10:44,020 --> 00:10:48,520 So I shouldn't have a typo if I save that now and I re-load 204 00:10:48,520 --> 00:10:52,590 and I try this again with the user that already exists 205 00:10:55,810 --> 00:10:58,253 like this, 206 00:10:59,100 --> 00:11:01,653 then I got the error and all the data's preserved. 207 00:11:02,650 --> 00:11:03,977 Of course, 208 00:11:03,977 --> 00:11:05,750 if I create a new user with an email address that is not 209 00:11:05,750 --> 00:11:10,270 taken yet, and I named this user, Julie Anders 210 00:11:12,290 --> 00:11:15,840 testing Plaza 5, 211 00:11:15,840 --> 00:11:20,040 In 5 5 8 8 1. 212 00:11:20,040 --> 00:11:24,263 Test city. Then this succeeds. 213 00:11:25,700 --> 00:11:27,390 Now we're on the log-in page. 214 00:11:27,390 --> 00:11:28,930 Let's now work on that. 215 00:11:28,930 --> 00:11:31,900 And I want to show an error message there as well. 216 00:11:31,900 --> 00:11:33,550 If we have invalid input, 217 00:11:33,550 --> 00:11:36,430 so I'll copy that code snippet 218 00:11:36,430 --> 00:11:39,173 and add it to log in EJS as well. 219 00:11:40,260 --> 00:11:41,120 Alternatively, 220 00:11:41,120 --> 00:11:44,690 we could also turn it into a includable code snippet and 221 00:11:44,690 --> 00:11:47,400 just included that would be fine as well. 222 00:11:47,400 --> 00:11:48,383 It's up to you. 223 00:11:50,380 --> 00:11:52,160 I'll change the title here to invalid 224 00:11:52,160 --> 00:11:56,920 credentials on log-in EJS and then I'll put the error 225 00:11:56,920 --> 00:11:58,890 message just as before. 226 00:11:58,890 --> 00:11:59,723 And of course, 227 00:11:59,723 --> 00:12:02,700 I also wanna output the preserved user input. 228 00:12:02,700 --> 00:12:07,700 So here, I output the VLU by accessing input data, 229 00:12:09,416 --> 00:12:12,350 Since that's the key, we pass to the template.e-mail 230 00:12:15,338 --> 00:12:19,233 and then copy that and do the same here for the password. 231 00:12:20,890 --> 00:12:23,450 As a side note here on the log-in page, 232 00:12:23,450 --> 00:12:27,220 we could also remove to min length front end validation 233 00:12:27,220 --> 00:12:30,200 because we're comparing for password equality on the back 234 00:12:30,200 --> 00:12:31,240 end anyways. 235 00:12:31,240 --> 00:12:34,740 So we don't really need to validate on the front-end. 236 00:12:34,740 --> 00:12:37,300 Hence, I remove it here. You could also leave it. 237 00:12:37,300 --> 00:12:38,500 Doesn't matter too much. 238 00:12:39,660 --> 00:12:42,870 If you now save this and re-load for one, 239 00:12:42,870 --> 00:12:47,870 if I do remove this required thing here, 240 00:12:48,320 --> 00:12:52,400 and I just enter a password and submit this, I get an error. 241 00:12:52,400 --> 00:12:55,450 And if I do enter a correct email, 242 00:12:55,450 --> 00:12:58,560 but an incorrect password, I get an error. 243 00:12:58,560 --> 00:13:02,120 And the same if I enter some random email, 244 00:13:02,120 --> 00:13:03,943 which wasn't registered before. 245 00:13:04,850 --> 00:13:08,963 So here, input value is preserved. Error message has shown. 246 00:13:10,007 --> 00:13:11,290 This is working. 247 00:13:11,290 --> 00:13:13,100 The last step now is that I want to have 248 00:13:13,100 --> 00:13:15,043 some styling for this alert. 249 00:13:16,847 --> 00:13:17,680 And for that, 250 00:13:17,680 --> 00:13:20,110 we will use the fact that we added an alert class to this 251 00:13:20,110 --> 00:13:22,630 section here, which holds that alert. 252 00:13:22,630 --> 00:13:26,930 And we can now add some styling in our public folder in the 253 00:13:26,930 --> 00:13:29,980 base.css file, base.css 254 00:13:29,980 --> 00:13:33,750 because that's a general base.css component, 255 00:13:33,750 --> 00:13:37,880 which we are using on different pages off this site. 256 00:13:37,880 --> 00:13:42,080 It would make sense to use this alert box on various parts 257 00:13:42,080 --> 00:13:43,750 of the website later as well. 258 00:13:43,750 --> 00:13:46,700 And therefore, I'll make it a base style just as my button 259 00:13:46,700 --> 00:13:48,363 here is a base style. 260 00:13:49,887 --> 00:13:51,393 Hence here in base.css, 261 00:13:52,500 --> 00:13:57,500 I will add the alert class selector so that we can add some 262 00:13:58,350 --> 00:14:02,330 styling to the overall alert section, to the alert box. 263 00:14:02,330 --> 00:14:06,950 And here I want to give to some border radius where I will 264 00:14:06,950 --> 00:14:10,860 use my variable that was defined before the border radius, 265 00:14:10,860 --> 00:14:12,503 small variable. 266 00:14:13,870 --> 00:14:17,210 Give it a background color where I will use another 267 00:14:17,210 --> 00:14:22,210 variable, the color error, 100 variable. 268 00:14:23,580 --> 00:14:26,530 And you can see all those variables a little bit further up 269 00:14:26,530 --> 00:14:28,140 into his file here. 270 00:14:28,140 --> 00:14:32,734 These are the error variables I defined with some reddish 271 00:14:32,734 --> 00:14:33,600 colors. 272 00:14:33,600 --> 00:14:37,160 100 is a very light red 500 is a dark red. 273 00:14:37,160 --> 00:14:39,770 I used a light red as a background here 274 00:14:40,920 --> 00:14:43,950 and I will now also add some text color, 275 00:14:43,950 --> 00:14:47,470 which as you might guess is that dark red. 276 00:14:47,470 --> 00:14:50,983 So color error, 500 in this case. 277 00:14:52,326 --> 00:14:54,810 That's the background color at the text color. 278 00:14:54,810 --> 00:14:59,710 And then also add some padding, which could be a space-4, 279 00:15:00,670 --> 00:15:03,143 for some nice padding in all directions. 280 00:15:05,420 --> 00:15:09,870 Now, I also want to give my h2 element in there, 281 00:15:09,870 --> 00:15:13,310 a specific style. So to title in that box, 282 00:15:13,310 --> 00:15:15,490 I'll set the font size to one rim. 283 00:15:15,490 --> 00:15:17,760 The default would be a bit bigger and I want to make it 284 00:15:17,760 --> 00:15:20,940 smaller and I'll the set 285 00:15:20,940 --> 00:15:25,810 the margin to VAR space 2 top and bottom and zero left and 286 00:15:25,810 --> 00:15:26,760 right, 287 00:15:26,760 --> 00:15:30,240 so that it doesn't have as much margin to the top and bottom 288 00:15:30,240 --> 00:15:31,980 as it would normally have. 289 00:15:31,980 --> 00:15:35,900 And I will add text transform upper case. 290 00:15:35,900 --> 00:15:40,150 This is a CSS property, which as the name kind of implies, 291 00:15:40,150 --> 00:15:43,220 we'll take any text that's in this element, 292 00:15:43,220 --> 00:15:46,400 which you are selecting and it will turn all the characters 293 00:15:46,400 --> 00:15:48,790 into upper case characters, 294 00:15:48,790 --> 00:15:51,623 which is a look I like in this place here. 295 00:15:53,920 --> 00:15:56,730 Now we can also select the paragraph which is in there. 296 00:15:56,730 --> 00:15:57,563 And here, 297 00:15:58,445 --> 00:16:01,070 I want to add the same margin as I have on the H2 298 00:16:01,070 --> 00:16:02,410 element. 299 00:16:02,410 --> 00:16:05,320 We could have also grouped parts of these styles together 300 00:16:05,320 --> 00:16:08,240 therefor, but I'll just set it up like this, 301 00:16:08,240 --> 00:16:10,300 then save everything 302 00:16:10,300 --> 00:16:15,300 and now if I re-load and I try logging in with a correct 303 00:16:16,270 --> 00:16:19,530 email address, but an incorrect password, for example, 304 00:16:19,530 --> 00:16:21,253 I get this error box. 305 00:16:22,160 --> 00:16:25,010 Now feel free to find installing here 306 00:16:25,010 --> 00:16:26,273 however you want. 307 00:16:27,285 --> 00:16:28,630 But that's the style I will go with. 308 00:16:28,630 --> 00:16:31,650 That's the error style I will go with, And with that, 309 00:16:31,650 --> 00:16:36,650 we added this session-based error messaging where we also 310 00:16:36,740 --> 00:16:38,173 keep the user input.