1 00:00:02,090 --> 00:00:05,670 So let's tackle the problem of missing 2 00:00:05,670 --> 00:00:07,097 error feedback on the 3 00:00:07,097 --> 00:00:10,080 signup and log-in pages now, because at the moment, 4 00:00:10,080 --> 00:00:11,920 of course, if we, for example, 5 00:00:11,920 --> 00:00:16,010 try to sign up with an email address that exists already. 6 00:00:16,010 --> 00:00:18,370 We do catch this problem. 7 00:00:18,370 --> 00:00:20,840 We check for that on the service side. 8 00:00:20,840 --> 00:00:24,700 But if the user tried to sign up with an email address that 9 00:00:24,700 --> 00:00:25,950 exists already, 10 00:00:25,950 --> 00:00:29,360 we just redirect back to sign up and we don't share any 11 00:00:29,360 --> 00:00:32,229 feedback with the user. And in addition, 12 00:00:32,229 --> 00:00:36,030 anything that was entered in those input fields will be lost 13 00:00:36,030 --> 00:00:37,780 after redirecting. 14 00:00:37,780 --> 00:00:41,007 And that's of course not a great user experience. 15 00:00:41,007 --> 00:00:43,180 Now, throughout this course, 16 00:00:43,180 --> 00:00:46,170 we learned how we can tackle this problem. 17 00:00:46,170 --> 00:00:49,840 We can actually use sessions as a solution for this as well, 18 00:00:49,840 --> 00:00:53,660 and not just use sessions for authentication, 19 00:00:53,660 --> 00:00:58,550 but also for temporarily storing data like that user input 20 00:00:58,550 --> 00:01:00,053 and error data. 21 00:01:01,840 --> 00:01:06,340 Now, I will say that an alternative would be to not redirect 22 00:01:06,340 --> 00:01:10,920 here, but to instead render the signup template here. 23 00:01:10,920 --> 00:01:13,990 If we would do that instead of redirecting, 24 00:01:13,990 --> 00:01:18,990 then we would not generate an extra request response cycle 25 00:01:19,080 --> 00:01:21,300 because with redirecting, we do, 26 00:01:21,300 --> 00:01:24,980 we tell the browser to please make another request. 27 00:01:24,980 --> 00:01:28,870 And therefore we generate a new request and a new response. 28 00:01:28,870 --> 00:01:32,370 If we directly render and return a template. So day of, 29 00:01:32,370 --> 00:01:35,550 for some HTML code, we don't do that. 30 00:01:35,550 --> 00:01:37,560 And in that rendered template, 31 00:01:37,560 --> 00:01:40,510 we could then pre-populate the forum. 32 00:01:40,510 --> 00:01:42,840 But the downside of doing that, 33 00:01:42,840 --> 00:01:47,000 what beat that we rendered as template in response to a post 34 00:01:47,000 --> 00:01:49,490 request, because I'm in a function here, 35 00:01:49,490 --> 00:01:53,520 the signup function that will be triggered upon an incoming 36 00:01:53,520 --> 00:01:55,890 post request. 37 00:01:55,890 --> 00:02:00,890 And we typically don't want to return HTML as a response for 38 00:02:01,896 --> 00:02:02,729 post requests, 39 00:02:02,729 --> 00:02:06,910 because if the user would then press the reload button on 40 00:02:06,910 --> 00:02:11,570 that loaded page that was served for a post request that 41 00:02:11,570 --> 00:02:13,470 would in the end, bring up that ugly. 42 00:02:13,470 --> 00:02:15,150 Pop-up asking the user, 43 00:02:15,150 --> 00:02:19,252 if he or she wants to resubmit the post data and if the user 44 00:02:19,252 --> 00:02:20,670 chooses, yes, 45 00:02:20,670 --> 00:02:24,820 and now we're post request with potentially problematic or 46 00:02:24,820 --> 00:02:27,850 erroneous data would be generated. 47 00:02:27,850 --> 00:02:31,550 Therefore it is more common to instead redirect to a get 48 00:02:31,550 --> 00:02:34,730 route as a response for a post request. 49 00:02:34,730 --> 00:02:37,300 And that is where we lose the user input. 50 00:02:37,300 --> 00:02:41,520 Normally that's now where sessions can help us because with 51 00:02:41,520 --> 00:02:43,600 sessions, we can avoid this. 52 00:02:43,600 --> 00:02:45,750 So we don't want to render a template here. 53 00:02:45,750 --> 00:02:47,740 We want to redirect instead. 54 00:02:47,740 --> 00:02:50,520 And I did talk about that early in the course already. 55 00:02:50,520 --> 00:02:53,930 Of course, I just wanted to bring it back to your mind. 56 00:02:53,930 --> 00:02:57,880 I guess that's the ideal is overall core section after all 57 00:02:57,880 --> 00:02:59,126 so long story, 58 00:02:59,126 --> 00:03:04,126 we now need to flash as it's called some data onto the 59 00:03:04,170 --> 00:03:07,515 session it's called flashing because it will only be there 60 00:03:07,515 --> 00:03:10,780 for the next request response cycle, 61 00:03:10,780 --> 00:03:14,770 where we serve that sign up page with a get request. 62 00:03:14,770 --> 00:03:16,760 That's where we want to redirect here. 63 00:03:16,760 --> 00:03:18,100 After all and thereafter, 64 00:03:18,100 --> 00:03:20,790 the data should be erased from the session. 65 00:03:20,790 --> 00:03:22,490 Now we did learn how that works. 66 00:03:22,490 --> 00:03:24,870 And just as before in this course, 67 00:03:24,870 --> 00:03:28,280 I will create new utility methods that help us with debt in 68 00:03:28,280 --> 00:03:32,030 a separate utility file in the util folder. 69 00:03:32,030 --> 00:03:35,508 And I'll name the file session flash dot JS, 70 00:03:35,508 --> 00:03:37,740 because that's what we'll do in there. 71 00:03:37,740 --> 00:03:40,734 We'll handle flashing data onto the session. 72 00:03:40,734 --> 00:03:45,734 And here I want to create two functions that help us flash 73 00:03:45,817 --> 00:03:48,883 data to session function, 74 00:03:51,145 --> 00:03:54,480 and then also a function for retrieving that flash to data. 75 00:03:54,480 --> 00:03:57,660 I'll name it, get session data. 76 00:03:57,660 --> 00:04:00,252 Of course the function names are up to you. 77 00:04:00,252 --> 00:04:04,340 Now we'll populate those functions with more life in a 78 00:04:04,340 --> 00:04:05,890 second for the moment, 79 00:04:05,890 --> 00:04:09,385 I'll just export them grouped together in an object. 80 00:04:09,385 --> 00:04:14,210 And I will use the function names as keys and then point at 81 00:04:14,210 --> 00:04:17,623 those functions like this. 82 00:04:18,930 --> 00:04:20,700 So now we have these two functions, 83 00:04:20,700 --> 00:04:22,063 which are being exported. 84 00:04:23,300 --> 00:04:26,970 Now let's start with flash data to session because after 85 00:04:26,970 --> 00:04:27,803 all, 86 00:04:27,803 --> 00:04:30,180 we first need to have some data in the session before we can 87 00:04:30,180 --> 00:04:34,273 retrieve it here. I expect to get a couple of parameters. 88 00:04:35,210 --> 00:04:38,600 I need the request object because I need that to access the 89 00:04:38,600 --> 00:04:39,433 session. 90 00:04:40,320 --> 00:04:43,490 I need the data that should be flashed, 91 00:04:43,490 --> 00:04:45,510 and I want to get an action, 92 00:04:45,510 --> 00:04:49,640 a function that should be executed after the data was stored 93 00:04:49,640 --> 00:04:51,200 on the session, 94 00:04:51,200 --> 00:04:54,420 because I will explicitly call the safe method on the 95 00:04:54,420 --> 00:04:57,410 session and ensure that we then only perform a certain 96 00:04:57,410 --> 00:05:01,470 actual, like redirecting after the session data was saved 97 00:05:01,470 --> 00:05:03,060 successfully. 98 00:05:03,060 --> 00:05:06,590 Otherwise we have the danger of redirecting or performing 99 00:05:06,590 --> 00:05:10,440 whichever actually want to perform before the data was 100 00:05:10,440 --> 00:05:12,800 actually saved in the session database. 101 00:05:12,800 --> 00:05:14,390 And they offered a new page, 102 00:05:14,390 --> 00:05:17,880 might be loaded without debt data being ready, 103 00:05:17,880 --> 00:05:22,880 which would defeat the purpose of this utility function. 104 00:05:22,960 --> 00:05:26,600 So here in this function, I will then access dot session. 105 00:05:26,600 --> 00:05:30,160 And now we can add arbitrary data by simply using the dock 106 00:05:30,160 --> 00:05:34,760 notation. And I'll add flash data as a key here. 107 00:05:34,760 --> 00:05:38,220 The key name is up to you though. It's your session object. 108 00:05:38,220 --> 00:05:40,250 You can add any data you want. 109 00:05:40,250 --> 00:05:44,600 And here I'll just add the data under that flash to data key 110 00:05:44,600 --> 00:05:48,410 today's session and thereafter on the session. 111 00:05:48,410 --> 00:05:50,360 Still all calls save, 112 00:05:50,360 --> 00:05:54,000 which has a built in method and I'll pass action to save 113 00:05:54,000 --> 00:05:57,915 because save takes a function as a parameter value and save, 114 00:05:57,915 --> 00:06:02,320 or the session package we'll then execute that action once 115 00:06:02,320 --> 00:06:03,573 saving succeeded. 116 00:06:04,530 --> 00:06:08,560 And that's already all I want to do here now in get session 117 00:06:08,560 --> 00:06:11,700 data. It's not that much more complex here. 118 00:06:11,700 --> 00:06:15,106 I just want to retrieve the data. So I'll add a session, 119 00:06:15,106 --> 00:06:20,106 data, constant and access rec dot session dot flashed data. 120 00:06:21,520 --> 00:06:23,200 And for this to work, of course, 121 00:06:23,200 --> 00:06:27,300 I need to get the rec value, the rec object, 122 00:06:27,300 --> 00:06:30,463 the request object as a parameter value. 123 00:06:31,560 --> 00:06:34,999 Then after I retrieved the data here in line two, 124 00:06:34,999 --> 00:06:39,999 I want to set flashed data to Knoll to clear that data. 125 00:06:40,796 --> 00:06:43,863 And then I'll just return session data. 126 00:06:44,740 --> 00:06:46,480 I don't call a rec session, 127 00:06:46,480 --> 00:06:50,470 save explicitly myself here because it will be saved 128 00:06:50,470 --> 00:06:54,260 automatically. Whenever a request response cycle is done, 129 00:06:54,260 --> 00:06:56,390 we just need to call it ourselves. 130 00:06:56,390 --> 00:07:00,060 If we want to ensure that saving finished before we perform 131 00:07:00,060 --> 00:07:03,530 a certain action here for getting the data and clearing the 132 00:07:03,530 --> 00:07:06,270 data thereafter, that's not that important. 133 00:07:06,270 --> 00:07:09,453 And therefore I don't need to call safe explicitly here. 134 00:07:11,510 --> 00:07:14,070 Now with these utility methods added, 135 00:07:14,070 --> 00:07:16,637 we can use them in the auth controller. 136 00:07:16,637 --> 00:07:20,010 So if we go back to the auth controller here, 137 00:07:20,010 --> 00:07:25,010 I want to import those utility functions and I'll import it 138 00:07:26,230 --> 00:07:31,230 as session flash by requiring.dot util session flash. 139 00:07:34,660 --> 00:07:38,843 So that we now have access to these two functions that we do 140 00:07:38,843 --> 00:07:40,710 export and in the signup function, 141 00:07:40,710 --> 00:07:44,040 which is that function that is triggered upon a post request 142 00:07:45,784 --> 00:07:47,630 there. I want to now flash data, 143 00:07:47,630 --> 00:07:50,910 if validation failed and we redirect to sign up, 144 00:07:50,910 --> 00:07:54,460 or if you already have a user with that email address, 145 00:07:54,460 --> 00:07:57,610 let's start with the validation case here, 146 00:07:57,610 --> 00:08:01,930 I'll then access session flash and call flash data to 147 00:08:01,930 --> 00:08:03,150 session. 148 00:08:03,150 --> 00:08:05,220 Now we need to forward the request object here, 149 00:08:05,220 --> 00:08:09,500 as I mentioned, and then the data which you want to flash. 150 00:08:09,500 --> 00:08:10,463 Now, 151 00:08:10,463 --> 00:08:12,480 it's totally up to you how this data should look like and 152 00:08:12,480 --> 00:08:13,780 how it's structured, 153 00:08:13,780 --> 00:08:17,750 but here all pass an object as data to my session. 154 00:08:17,750 --> 00:08:18,980 And then that object, 155 00:08:18,980 --> 00:08:23,980 I want to provide the error message and then also the user 156 00:08:24,090 --> 00:08:27,217 input so that we saved that for the future. 157 00:08:27,217 --> 00:08:30,660 Last but not least, I'll add an anonymous function, 158 00:08:30,660 --> 00:08:33,659 which is that action that should be executed after saving 159 00:08:33,659 --> 00:08:36,350 succeeded. And in this anonymous function, 160 00:08:36,350 --> 00:08:39,950 I want to redirect. So this is this action, 161 00:08:39,950 --> 00:08:42,363 which we pass to flash data to session. 162 00:08:43,840 --> 00:08:47,660 Now here for D data, which be passed to the session, 163 00:08:47,660 --> 00:08:51,490 I'll start with an error message and it's totally up to you, 164 00:08:51,490 --> 00:08:55,140 which key you use here. It's your data, your object. 165 00:08:55,140 --> 00:08:58,930 I'll go with error message and set the error message too. 166 00:08:58,930 --> 00:09:03,930 Please check your input. Whoops, please check your input. 167 00:09:06,330 --> 00:09:10,460 Password must be at least six characters. 168 00:09:10,460 --> 00:09:15,460 Long postal code must be five characters long. 169 00:09:16,310 --> 00:09:19,330 Now it's totally up to you. What your error message is. 170 00:09:19,330 --> 00:09:22,180 This is a error message that describes which kind of input 171 00:09:22,180 --> 00:09:25,065 I'm expecting and tells the user that something's wrong with 172 00:09:25,065 --> 00:09:26,033 that input. 173 00:09:27,550 --> 00:09:30,180 Now, speaking off that input, we want to preserve that. 174 00:09:30,180 --> 00:09:32,400 And therefore, besides the error message, 175 00:09:32,400 --> 00:09:36,010 I want to pass all the entered data back into the error 176 00:09:36,010 --> 00:09:37,380 message. And for that, 177 00:09:37,380 --> 00:09:41,500 we can of course copy all the data we're extracting up 178 00:09:41,500 --> 00:09:42,470 there. 179 00:09:42,470 --> 00:09:46,130 And I will actually add a new constant here, 180 00:09:46,130 --> 00:09:51,130 entered data where I paste in that copied 181 00:09:52,840 --> 00:09:57,560 extraction and where I will save all that data under certain 182 00:09:57,560 --> 00:10:02,560 keys so that I have one object does entered data object with 183 00:10:03,420 --> 00:10:05,110 all that entered data. 184 00:10:05,110 --> 00:10:08,409 And they can then use that later for flashing it onto my 185 00:10:08,409 --> 00:10:10,213 session. 186 00:10:12,110 --> 00:10:16,869 So that's the enter data constant here and now you're in 187 00:10:16,869 --> 00:10:21,110 flash data. Two session after the error message here, 188 00:10:21,110 --> 00:10:23,410 I will actually use the spread operator, 189 00:10:23,410 --> 00:10:27,140 the free dots you learned about to spread the enter data 190 00:10:27,140 --> 00:10:28,433 into this object. 191 00:10:29,290 --> 00:10:31,700 And you learned that the spread operator, 192 00:10:31,700 --> 00:10:34,550 when used on an object, like enter to data, 193 00:10:34,550 --> 00:10:37,217 we'll take all the key value pairs we have in there. 194 00:10:37,217 --> 00:10:42,080 So email and the value that's stored in it and password and 195 00:10:42,080 --> 00:10:43,670 the value that's stored in it. 196 00:10:43,670 --> 00:10:47,360 And all those key value pairs will be added as key value 197 00:10:47,360 --> 00:10:52,240 pairs in this object, into which you're spreading with that. 198 00:10:52,240 --> 00:10:56,160 We are providing that enter data in that object, 199 00:10:56,160 --> 00:10:58,043 which has flashed onto the session. 200 00:10:59,410 --> 00:11:01,120 Now that was the first step. 201 00:11:01,120 --> 00:11:04,920 I also want to flash data onto the session here in a case 202 00:11:04,920 --> 00:11:09,060 stat, we have an email address that's in use already. 203 00:11:09,060 --> 00:11:09,893 So for this, 204 00:11:09,893 --> 00:11:13,300 I'll also access session flash here and flash some data to, 205 00:11:13,300 --> 00:11:16,890 to session. And that's my request object again, 206 00:11:16,890 --> 00:11:17,760 a data object, 207 00:11:17,760 --> 00:11:21,480 which will populate in a second and then an anonymous 208 00:11:21,480 --> 00:11:25,100 function that should be executed after we saved data to, 209 00:11:25,100 --> 00:11:25,933 to session. 210 00:11:25,933 --> 00:11:29,480 And that's the same function as before where I redirect to 211 00:11:29,480 --> 00:11:30,313 sign up. 212 00:11:31,523 --> 00:11:34,890 And then here, the data that should be flashed. 213 00:11:34,890 --> 00:11:37,370 I still want to have an error message here, 214 00:11:37,370 --> 00:11:42,260 but the error message is user exists already try logging in, 215 00:11:42,260 --> 00:11:43,883 in stat, for example. 216 00:11:46,435 --> 00:11:48,850 And then again, with the spread operator, 217 00:11:48,850 --> 00:11:51,770 all just spread the error, 218 00:11:51,770 --> 00:11:55,373 add the entered data into this object. 219 00:11:56,440 --> 00:11:57,860 So same logic as before, 220 00:11:57,860 --> 00:11:59,823 just with a different error message. 221 00:12:01,190 --> 00:12:02,850 Now that's the signup case. 222 00:12:02,850 --> 00:12:05,970 Since we're already working with that utility method, 223 00:12:05,970 --> 00:12:09,270 we can continue with the log-in case before we then go to 224 00:12:09,270 --> 00:12:11,760 the get log in and get sign up actions. 225 00:12:11,760 --> 00:12:14,554 And we retrieve that entered the data. 226 00:12:14,554 --> 00:12:18,890 So here for log-in. 227 00:12:18,890 --> 00:12:22,960 I also have a couple of checks and specifically here, 228 00:12:22,960 --> 00:12:25,860 I'm checking if the user exists and if it doesn't exist, 229 00:12:25,860 --> 00:12:29,700 we redirect. And we also check the password. 230 00:12:29,700 --> 00:12:32,140 And in these two cases I redirect to log in. 231 00:12:32,140 --> 00:12:36,300 And of course we want to flash the entered data and an 232 00:12:36,300 --> 00:12:38,000 error message to, to session. 233 00:12:38,000 --> 00:12:40,846 So that on that log in page two, which we redirect back, 234 00:12:40,846 --> 00:12:42,383 we can show that. 235 00:12:43,440 --> 00:12:47,110 So again, with Sashen flash flash data to session, 236 00:12:47,110 --> 00:12:51,100 we can pass the request object or a data object. 237 00:12:51,100 --> 00:12:55,540 And then there's a anonymous function where I do want to 238 00:12:55,540 --> 00:12:59,313 redirect in the end and forward is data object here. 239 00:12:59,313 --> 00:13:02,580 I still want to have an error message, 240 00:13:02,580 --> 00:13:05,770 which in this case is invalid credentials. 241 00:13:05,770 --> 00:13:10,770 Please double check your email and password. 242 00:13:12,743 --> 00:13:16,177 And then I want to provide the entered the data. 243 00:13:16,177 --> 00:13:18,560 And the my case needs to email, 244 00:13:18,560 --> 00:13:20,880 which I can get from this user object. 245 00:13:20,880 --> 00:13:24,650 I'm creating here because there I am storing the email and 246 00:13:24,650 --> 00:13:28,262 the entered password. So I can access user.email. 247 00:13:28,262 --> 00:13:31,600 And the password is user dot password. 248 00:13:31,600 --> 00:13:34,300 That's the enter data because that's what we're storing in 249 00:13:34,300 --> 00:13:37,743 this user object up there. Hence we can access it down here. 250 00:13:39,600 --> 00:13:42,780 No, actually it will be the exact same data, 251 00:13:42,780 --> 00:13:46,550 which I want to flash onto my session if the password is 252 00:13:46,550 --> 00:13:47,383 incorrect. 253 00:13:48,320 --> 00:13:53,090 So therefore I will actually cut this object here and create 254 00:13:53,090 --> 00:13:56,370 it as a standalone new constant, which will name, session, 255 00:13:56,370 --> 00:13:58,260 error data. 256 00:13:58,260 --> 00:14:02,110 And that's my object. And then it says session error data, 257 00:14:02,110 --> 00:14:05,370 which I want to flash onto the session here. 258 00:14:05,370 --> 00:14:09,100 And I can now copy that line and do exactly the same here. 259 00:14:09,100 --> 00:14:11,600 If the password was incorrect, 260 00:14:11,600 --> 00:14:13,930 because I want to show you the same error message and I have 261 00:14:13,930 --> 00:14:16,373 to same enter data and the same action. 262 00:14:18,680 --> 00:14:22,750 And now with that, we're flashing data in this case as well. 263 00:14:22,750 --> 00:14:26,160 Now, flashing data is only part of the solution. 264 00:14:26,160 --> 00:14:29,910 We also need to extract the data on the get actions here on 265 00:14:29,910 --> 00:14:30,790 the get routes, 266 00:14:30,790 --> 00:14:33,880 like get logged in and of course get sign up and that's 267 00:14:33,880 --> 00:14:35,730 there for the next step I want to do.