1 00:00:01,070 --> 00:00:02,870 ‫So in this video, we're gonna use 2 00:00:02,870 --> 00:00:07,100 ‫the power of Pug to create a really nice email template 3 00:00:07,100 --> 00:00:10,893 ‫and then send a welcome email based on that template. 4 00:00:12,680 --> 00:00:16,710 ‫And that template is welcome.pug here. 5 00:00:16,710 --> 00:00:21,410 ‫Okay, now just as before, I already have a template 6 00:00:21,410 --> 00:00:23,973 ‫here in dev-data templates. 7 00:00:25,050 --> 00:00:29,240 ‫So email template and so it's all of this code here 8 00:00:29,240 --> 00:00:32,990 ‫with the CSS also in lined. 9 00:00:32,990 --> 00:00:34,403 ‫So a ton of CSS. 10 00:00:36,140 --> 00:00:40,563 ‫So let's copy all of that here into welcome.pug. 11 00:00:41,570 --> 00:00:45,200 ‫Okay, and here up in the bottom, you'll see this note 12 00:00:45,200 --> 00:00:48,850 ‫where I say that it actually adapted this email template 13 00:00:48,850 --> 00:00:50,053 ‫from this one. 14 00:00:51,780 --> 00:00:53,483 ‫So let's very quickly open that. 15 00:00:54,511 --> 00:00:55,344 ‫All right. 16 00:00:55,344 --> 00:00:58,813 ‫And so our email is going to look a bit like this one. 17 00:00:59,990 --> 00:01:03,590 ‫Now, of course, I adapted the design a bit to our brand. 18 00:01:03,590 --> 00:01:05,430 ‫So for this button here, 19 00:01:05,430 --> 00:01:07,783 ‫I used our green color, for example. 20 00:01:09,848 --> 00:01:13,600 ‫But kind of what I used is this HTML template. 21 00:01:16,210 --> 00:01:20,820 ‫Then I actually converted that HTML using this tool. 22 00:01:20,820 --> 00:01:22,763 ‫So HTML to Pug. 23 00:01:23,640 --> 00:01:25,950 ‫So again, let's take a quick look at that. 24 00:01:25,950 --> 00:01:28,260 ‫And so basically what this allows you to do 25 00:01:28,260 --> 00:01:31,030 ‫is to paste some HTML in here 26 00:01:31,030 --> 00:01:35,660 ‫then click Convert and it will output the Pug code for you. 27 00:01:35,660 --> 00:01:38,170 ‫So that can be very handy when you try to convert 28 00:01:38,170 --> 00:01:42,263 ‫some existing pages that you already have an HTML to Pug. 29 00:01:45,010 --> 00:01:47,810 ‫Anyway, when we're building an HTML email, 30 00:01:47,810 --> 00:01:50,350 ‫we always need to inline all the styles. 31 00:01:50,350 --> 00:01:53,290 ‫And so that's why you have this ton of CSS 32 00:01:53,290 --> 00:01:55,240 ‫right here inside this file. 33 00:01:55,240 --> 00:01:58,000 ‫But, of course, this makes this file a bit noisy 34 00:01:58,000 --> 00:02:01,213 ‫and so let's grab all of that and export it. 35 00:02:02,350 --> 00:02:04,810 ‫All right, so, yeah. 36 00:02:04,810 --> 00:02:05,703 ‫So that's it. 37 00:02:06,610 --> 00:02:07,443 ‫So cut it, 38 00:02:08,380 --> 00:02:10,720 ‫and here create a new file, 39 00:02:10,720 --> 00:02:14,520 ‫and then, just as before, with files that I'm gonna include, 40 00:02:14,520 --> 00:02:17,827 ‫I use the underscore then style.pug. 41 00:02:20,980 --> 00:02:22,710 ‫So paste that here. 42 00:02:22,710 --> 00:02:26,450 ‫And now we need to also adjust all this insetting here 43 00:02:26,450 --> 00:02:29,210 ‫and so again, Command + Shift + P 44 00:02:29,210 --> 00:02:32,820 ‫or probably on Windows, Ctrl + Shift + P. 45 00:02:32,820 --> 00:02:35,823 ‫And then just write pug for beautify pug. 46 00:02:36,890 --> 00:02:39,053 ‫And so that makes our code nice. 47 00:02:40,090 --> 00:02:41,623 ‫Close that one up here, 48 00:02:42,770 --> 00:02:43,973 ‫and now include_style. 49 00:02:49,060 --> 00:02:52,730 ‫Okay, and now you see all of these codes down here, 50 00:02:52,730 --> 00:02:55,750 ‫which looks really confusing and that's actually the reason 51 00:02:55,750 --> 00:02:59,400 ‫why I copied this template from that GitHub repo 52 00:02:59,400 --> 00:03:00,680 ‫that I showed you before. 53 00:03:00,680 --> 00:03:03,160 ‫So there's a lot of tables going on 54 00:03:03,160 --> 00:03:05,080 ‫and that's because many email clients 55 00:03:05,080 --> 00:03:08,410 ‫actually only understand tables for formatting. 56 00:03:08,410 --> 00:03:11,800 ‫So we have all these stuff here that's not really meaningful 57 00:03:11,800 --> 00:03:15,350 ‫with table rows inside of tables inside of tables. 58 00:03:15,350 --> 00:03:16,600 ‫Am I right? 59 00:03:16,600 --> 00:03:20,720 ‫But what matters here is this content area here. 60 00:03:20,720 --> 00:03:22,440 ‫And so this is the part of the template 61 00:03:22,440 --> 00:03:25,340 ‫where we're gonna put all our content. 62 00:03:25,340 --> 00:03:27,370 ‫Now, the thing is that we, of course, 63 00:03:27,370 --> 00:03:29,370 ‫will have many different templates. 64 00:03:29,370 --> 00:03:30,600 ‫In the case of this project, 65 00:03:30,600 --> 00:03:32,930 ‫we will actually only create two ourselves 66 00:03:32,930 --> 00:03:36,410 ‫but there might be many emails for many situations 67 00:03:36,410 --> 00:03:39,610 ‫and so, of course, we will need a way of reusing 68 00:03:39,610 --> 00:03:42,840 ‫all of these code that is outside of this content. 69 00:03:42,840 --> 00:03:46,200 ‫So, basically, all of these here should be reusable, 70 00:03:46,200 --> 00:03:49,050 ‫and actually, that's exactly what we did before 71 00:03:49,050 --> 00:03:50,853 ‫with our base template here. 72 00:03:52,352 --> 00:03:53,185 ‫All right. 73 00:03:53,185 --> 00:03:56,450 ‫So we put everything that is reusable for all the templates 74 00:03:56,450 --> 00:04:00,540 ‫inside of this base, then we have our block there 75 00:04:00,540 --> 00:04:02,150 ‫and all the other templates, 76 00:04:02,150 --> 00:04:04,200 ‫then simply extend this block. 77 00:04:04,200 --> 00:04:07,280 ‫And so that is exactly what we will do now. 78 00:04:07,280 --> 00:04:12,240 ‫So let's actually go ahead and cut all of these from here, 79 00:04:12,240 --> 00:04:15,517 ‫create a new template called baseEmail, 80 00:04:20,400 --> 00:04:21,623 ‫and then put that here. 81 00:04:23,530 --> 00:04:27,550 ‫And now, for the content itself, of course, 82 00:04:27,550 --> 00:04:30,100 ‫we remove that from the base. 83 00:04:30,100 --> 00:04:31,773 ‫So cut that one from here, 84 00:04:32,760 --> 00:04:34,550 ‫and here let's create then a block 85 00:04:35,920 --> 00:04:37,423 ‫called content, again. 86 00:04:39,101 --> 00:04:39,934 ‫All right. 87 00:04:39,934 --> 00:04:43,900 ‫And so now here, in our welcome template, 88 00:04:43,900 --> 00:04:45,600 ‫we then put that content 89 00:04:48,260 --> 00:04:49,883 ‫inside that content block. 90 00:04:50,880 --> 00:04:51,870 ‫Okay. 91 00:04:51,870 --> 00:04:54,750 ‫And now just to finish, we then need to say 92 00:04:54,750 --> 00:04:57,190 ‫that it extends, so that this template here 93 00:04:58,070 --> 00:05:00,187 ‫extends the baseEmail. 94 00:05:04,160 --> 00:05:08,470 ‫Let's format this again with this command 95 00:05:08,470 --> 00:05:10,670 ‫and that's beautiful. 96 00:05:10,670 --> 00:05:11,503 ‫Great. 97 00:05:12,450 --> 00:05:14,830 ‫Now, here in our base template, 98 00:05:14,830 --> 00:05:18,620 ‫we actually have now the subject as the title. 99 00:05:18,620 --> 00:05:20,780 ‫And so that is the reason why I passed that 100 00:05:20,780 --> 00:05:23,023 ‫into the template. 101 00:05:23,920 --> 00:05:27,030 ‫So that is right here, remember? 102 00:05:27,030 --> 00:05:29,829 ‫So into the template, we passed the subject, 103 00:05:29,829 --> 00:05:32,140 ‫the URL and the firstName. 104 00:05:32,140 --> 00:05:35,980 ‫And so let's now go ahead and use this in our template. 105 00:05:35,980 --> 00:05:39,470 ‫And so the subject we already used here in the base 106 00:05:39,470 --> 00:05:42,120 ‫but that's actually it for this file 107 00:05:42,120 --> 00:05:44,363 ‫so we're not going to touch it again. 108 00:05:45,230 --> 00:05:48,540 ‫And so now here is our real template. 109 00:05:48,540 --> 00:05:53,540 ‫So we have here the name and so let's actually replace that 110 00:05:53,670 --> 00:05:55,893 ‫with the first name variable. 111 00:05:59,210 --> 00:06:03,840 ‫So firstName here, then we have all these nice texts here. 112 00:06:03,840 --> 00:06:07,550 ‫So, welcome to the family, all that stuff. 113 00:06:07,550 --> 00:06:10,150 ‫And then down here we have that green button 114 00:06:10,150 --> 00:06:13,370 ‫that I talked about when I showed you the template on GitHub 115 00:06:13,370 --> 00:06:17,220 ‫and so on that button, we say upload user photo. 116 00:06:17,220 --> 00:06:22,043 ‫And so here we need to specify that URL that we passed in. 117 00:06:27,760 --> 00:06:31,380 ‫All right, so it's called URL, right. 118 00:06:31,380 --> 00:06:35,290 ‫And so, now we put that on this button here 119 00:06:35,290 --> 00:06:36,720 ‫and that's actually it. 120 00:06:36,720 --> 00:06:39,440 ‫All of the rest here is just static content 121 00:06:39,440 --> 00:06:43,130 ‫that we do not need to change at all, all right? 122 00:06:43,130 --> 00:06:47,470 ‫So this welcome template here will now get used 123 00:06:47,470 --> 00:06:49,790 ‫whenever we call sendWelcome. 124 00:06:49,790 --> 00:06:53,130 ‫And so let's now actually go ahead and do that. 125 00:06:53,130 --> 00:06:57,190 ‫So from where do we want to send the welcome email? 126 00:06:57,190 --> 00:07:00,540 ‫Well, that is in the authController 127 00:07:00,540 --> 00:07:03,800 ‫and to, I believe there's a sign up function 128 00:07:03,800 --> 00:07:05,663 ‫or register or something like that, 129 00:07:07,140 --> 00:07:08,430 ‫and it's right here. 130 00:07:08,430 --> 00:07:10,240 ‫So this sign up. 131 00:07:10,240 --> 00:07:13,130 ‫And so into this, we need to import the email 132 00:07:13,130 --> 00:07:14,093 ‫and then use it. 133 00:07:15,000 --> 00:07:18,760 ‫And, actually, already we have sendEmail, 134 00:07:18,760 --> 00:07:21,990 ‫but now remember that is called Email, 135 00:07:21,990 --> 00:07:24,533 ‫so with a capital E like this. 136 00:07:26,400 --> 00:07:29,980 ‫Now we used that variable before somewhere down here, 137 00:07:29,980 --> 00:07:30,973 ‫so let's go there. 138 00:07:33,438 --> 00:07:35,750 ‫All right, and so this code here at this point 139 00:07:35,750 --> 00:07:39,520 ‫is no longer working but we will fix that in the next video. 140 00:07:39,520 --> 00:07:41,440 ‫So for now, let's just comment it out 141 00:07:44,030 --> 00:07:45,983 ‫so that it doesn't do any damage. 142 00:07:48,409 --> 00:07:51,960 ‫But anyway, let's now use this email class right here. 143 00:07:59,060 --> 00:08:04,060 ‫So new Email, and then remember first up is the user 144 00:08:05,260 --> 00:08:08,700 ‫and actually VS code knows that and shows that here 145 00:08:08,700 --> 00:08:12,890 ‫and so user is the newUser that we have up here 146 00:08:15,810 --> 00:08:19,803 ‫and then the URL that we're gonna create here in a second. 147 00:08:22,150 --> 00:08:27,150 ‫So const url equals, let's put it to zero, for now. 148 00:08:30,315 --> 00:08:32,565 ‫Okay, and then sendWelcome. 149 00:08:36,230 --> 00:08:39,050 ‫And now all we need to do is to actually await 150 00:08:39,050 --> 00:08:40,783 ‫this sendWelcome function. 151 00:08:42,860 --> 00:08:45,980 ‫All right, so we do that, that we only move on here 152 00:08:45,980 --> 00:08:49,923 ‫to the next step after the email has actually been sent. 153 00:08:50,880 --> 00:08:52,910 ‫And we can do that, of course, 154 00:08:52,910 --> 00:08:57,233 ‫because sendWelcome is an async function, remember that. 155 00:08:58,100 --> 00:08:59,750 ‫And so when we actually use it, 156 00:08:59,750 --> 00:09:02,163 ‫we then wait until it finishes. 157 00:09:03,580 --> 00:09:05,960 ‫All right, and so this is all we need to do 158 00:09:05,960 --> 00:09:08,170 ‫in order to send emails now, 159 00:09:08,170 --> 00:09:12,270 ‫but we still need to specify our URL here. 160 00:09:12,270 --> 00:09:15,110 ‫Now, what URL do we actually want here? 161 00:09:15,110 --> 00:09:17,200 ‫Well, remember that here on the button, 162 00:09:17,200 --> 00:09:20,910 ‫it says Upload_user_photo, right? 163 00:09:20,910 --> 00:09:22,540 ‫And so basically, we want to point 164 00:09:22,540 --> 00:09:24,603 ‫to that user account page. 165 00:09:25,600 --> 00:09:29,600 ‫So, basically, right here. 166 00:09:29,600 --> 00:09:33,833 ‫So for now, let's copy it, but we will then change it. 167 00:09:35,630 --> 00:09:37,100 ‫And we could leave it like this 168 00:09:37,100 --> 00:09:39,640 ‫but then it would only work in development 169 00:09:39,640 --> 00:09:42,510 ‫and not production, 'cause, of course, 170 00:09:42,510 --> 00:09:45,720 ‫this here does not exist when we're in production. 171 00:09:45,720 --> 00:09:49,140 ‫And so instead of basically hard coding it like this, 172 00:09:49,140 --> 00:09:51,373 ‫we will get this data from the request. 173 00:09:53,050 --> 00:09:56,830 ‫So basically, we will get what protocol we're using, 174 00:09:56,830 --> 00:10:01,830 ‫if we're using HTTP or HTTPS, and then also this host. 175 00:10:03,440 --> 00:10:06,920 ‫Okay, and both of that we can get from the request. 176 00:10:06,920 --> 00:10:09,350 ‫So let's replace all of these here 177 00:10:11,237 --> 00:10:12,830 ‫and make this a template string 178 00:10:14,310 --> 00:10:18,590 ‫and then we can say request.protocol 179 00:10:22,000 --> 00:10:24,193 ‫then colon, slash, slash, 180 00:10:26,850 --> 00:10:30,580 ‫and then request.get. 181 00:10:30,580 --> 00:10:32,710 ‫So we need to use this getter function 182 00:10:32,710 --> 00:10:35,653 ‫and what we want to get is the host. 183 00:10:36,710 --> 00:10:38,670 ‫And so when we're in development, 184 00:10:38,670 --> 00:10:41,750 ‫then, of course, this here will be the local host 185 00:10:41,750 --> 00:10:43,263 ‫on port 3000. 186 00:10:46,160 --> 00:10:47,790 ‫Okay so let's just console it 187 00:10:51,700 --> 00:10:52,703 ‫just to make sure. 188 00:10:54,020 --> 00:10:57,460 ‫Okay, and now, let's actually then test it. 189 00:10:57,460 --> 00:11:00,723 ‫And all we need to do for that is to just create a new user. 190 00:11:02,170 --> 00:11:04,543 ‫So let's do that here in Postman. 191 00:11:06,550 --> 00:11:07,943 ‫So Sign Up, 192 00:11:09,980 --> 00:11:13,860 ‫and now in our Body, let's create a new name, 193 00:11:13,860 --> 00:11:15,223 ‫let's say Test User. 194 00:11:17,700 --> 00:11:20,280 ‫And here, all of these doesn't really matter, 195 00:11:20,280 --> 00:11:22,767 ‫so let's just say test@natours.io 196 00:11:26,310 --> 00:11:28,110 ‫and with the same standard password. 197 00:11:28,990 --> 00:11:31,600 ‫And so now when we create this new user, 198 00:11:31,600 --> 00:11:34,850 ‫then we should get a new email into our Mailtrap, 199 00:11:34,850 --> 00:11:36,513 ‫so that we can take a look at it. 200 00:11:37,470 --> 00:11:41,583 ‫So let's try that and we got some nice error down here. 201 00:11:42,420 --> 00:11:44,560 ‫So let's take a look at that. 202 00:11:44,560 --> 00:11:48,200 ‫And it says that it couldn't find this file. 203 00:11:48,200 --> 00:11:52,373 ‫So there's some error in our email handler here. 204 00:11:53,460 --> 00:11:56,353 ‫And so let's try to find where that is. 205 00:11:57,794 --> 00:11:59,003 ‫Ah, it's down here. 206 00:11:59,910 --> 00:12:02,160 ‫And so the problem is that the folder here 207 00:12:02,160 --> 00:12:05,113 ‫is called email and here I called it emails. 208 00:12:07,130 --> 00:12:09,340 ‫So let's just say email, 209 00:12:09,340 --> 00:12:10,850 ‫I prefer that one. 210 00:12:10,850 --> 00:12:12,263 ‫And so now it should work. 211 00:12:13,480 --> 00:12:15,400 ‫Oh, and now we get the next error, 212 00:12:15,400 --> 00:12:18,160 ‫because this email here already exists. 213 00:12:18,160 --> 00:12:20,210 ‫And that's because in the previous step, 214 00:12:20,210 --> 00:12:22,900 ‫we actually did create the error, the only problem 215 00:12:22,900 --> 00:12:24,740 ‫was then with sending the email. 216 00:12:24,740 --> 00:12:27,303 ‫So let's do that again here, test two. 217 00:12:30,100 --> 00:12:31,500 ‫And one more error. 218 00:12:31,500 --> 00:12:35,220 ‫This time coming directly from Pug. 219 00:12:35,220 --> 00:12:39,320 ‫So, only named blocks and mixins can appear at the top level 220 00:12:39,320 --> 00:12:40,763 ‫of an extending template. 221 00:12:42,440 --> 00:12:44,203 ‫And so something is wrong here, 222 00:12:45,170 --> 00:12:47,490 ‫and indeed it is. 223 00:12:47,490 --> 00:12:49,573 ‫So that's actually exactly the error 224 00:12:49,573 --> 00:12:53,630 ‫that it told us we had and that is we can only have extends 225 00:12:53,630 --> 00:12:56,020 ‫and block but here we have this paragraph 226 00:12:56,020 --> 00:12:58,540 ‫also at the top level. 227 00:12:58,540 --> 00:12:59,920 ‫So that's not allowed. 228 00:12:59,920 --> 00:13:03,503 ‫So let's put it where it belongs, which is right here. 229 00:13:05,300 --> 00:13:09,020 ‫Give that a save, try it one more time, 230 00:13:09,020 --> 00:13:11,300 ‫and of course now we get this error. 231 00:13:11,300 --> 00:13:12,873 ‫So let's say test three. 232 00:13:18,011 --> 00:13:20,310 ‫Okay, now we're good to go. 233 00:13:20,310 --> 00:13:22,670 ‫So we successfully created the new user, 234 00:13:22,670 --> 00:13:23,980 ‫he has logged in. 235 00:13:23,980 --> 00:13:26,480 ‫And now let's take a look at Mailtrap 236 00:13:26,480 --> 00:13:28,823 ‫to see if we actually got our email. 237 00:13:30,460 --> 00:13:31,473 ‫So Mailtrap. 238 00:13:34,310 --> 00:13:35,963 ‫Let me log in here real quick. 239 00:13:37,320 --> 00:13:40,030 ‫And here is our Natours inbox, 240 00:13:40,030 --> 00:13:43,450 ‫and indeed, here is this new email from a minute ago 241 00:13:43,450 --> 00:13:46,300 ‫saying welcome to the Natours family. 242 00:13:46,300 --> 00:13:47,170 ‫Great. 243 00:13:47,170 --> 00:13:50,560 ‫And it actually looks really nice, right? 244 00:13:50,560 --> 00:13:53,630 ‫So that's all the texts that we had in our template. 245 00:13:53,630 --> 00:13:56,313 ‫We can also see the complete HTML here. 246 00:13:59,160 --> 00:14:01,330 ‫Also here we have the text. 247 00:14:01,330 --> 00:14:03,940 ‫And so remember that we created this one here 248 00:14:03,940 --> 00:14:06,130 ‫from the HTML to text package 249 00:14:06,130 --> 00:14:09,443 ‫and so we can confirm that it works just fine as well. 250 00:14:10,330 --> 00:14:12,850 ‫And, uh, yeah. 251 00:14:12,850 --> 00:14:15,333 ‫Let's just try to click here on this button, 252 00:14:16,590 --> 00:14:20,450 ‫and indeed it takes us to our account page. 253 00:14:20,450 --> 00:14:23,740 ‫Now, right now we're actually logged in as Aarav 254 00:14:23,740 --> 00:14:27,010 ‫because we already were logged in as that user 255 00:14:27,010 --> 00:14:28,680 ‫but that's not really the point 256 00:14:28,680 --> 00:14:31,200 ‫because this email here kind of supposes 257 00:14:31,200 --> 00:14:34,560 ‫that you are signing up from the website, right? 258 00:14:34,560 --> 00:14:36,420 ‫Now, that doesn't work at this point, 259 00:14:36,420 --> 00:14:39,510 ‫so we don't have any sign up form on our website 260 00:14:39,510 --> 00:14:41,850 ‫but the really important part here 261 00:14:41,850 --> 00:14:45,980 ‫is that our email here now works just fine, 262 00:14:45,980 --> 00:14:47,800 ‫the button here also works. 263 00:14:47,800 --> 00:14:49,620 ‫And so that big email handler 264 00:14:49,620 --> 00:14:52,710 ‫that we created in the last lecture is doing its job 265 00:14:52,710 --> 00:14:54,860 ‫just as well as the email template 266 00:14:54,860 --> 00:14:56,660 ‫that we created in this video. 267 00:14:56,660 --> 00:14:59,090 ‫So, I'm really happy with this result. 268 00:14:59,090 --> 00:15:01,300 ‫Next up, let's do something similar 269 00:15:01,300 --> 00:15:03,223 ‫for the password reset emails.