‫So in this video, we're gonna use
‫the power of Pug to create a really nice email template
‫and then send a welcome email based on that template.
‫And that template is welcome.pug here.
‫Okay, now just as before, I already have a template
‫here in dev-data templates.
‫So email template and so it's all of this code here
‫with the CSS also in lined.
‫So a ton of CSS.
‫So let's copy all of that here into welcome.pug.
‫Okay, and here up in the bottom, you'll see this note
‫where I say that it actually adapted this email template
‫from this one.
‫So let's very quickly open that.
‫All right.
‫And so our email is going to look a bit like this one.
‫Now, of course, I adapted the design a bit to our brand.
‫So for this button here,
‫I used our green color, for example.
‫But kind of what I used is this HTML template.
‫Then I actually converted that HTML using this tool.
‫So HTML to Pug.
‫So again, let's take a quick look at that.
‫And so basically what this allows you to do
‫is to paste some HTML in here
‫then click Convert and it will output the Pug code for you.
‫So that can be very handy when you try to convert
‫some existing pages that you already have an HTML to Pug.
‫Anyway, when we're building an HTML email,
‫we always need to inline all the styles.
‫And so that's why you have this ton of CSS
‫right here inside this file.
‫But, of course, this makes this file a bit noisy
‫and so let's grab all of that and export it.
‫All right, so, yeah.
‫So that's it.
‫So cut it,
‫and here create a new file,
‫and then, just as before, with files that I'm gonna include,
‫I use the underscore then style.pug.
‫So paste that here.
‫And now we need to also adjust all this insetting here
‫and so again, Command + Shift + P
‫or probably on Windows, Ctrl + Shift + P.
‫And then just write pug for beautify pug.
‫And so that makes our code nice.
‫Close that one up here,
‫and now include_style.
‫Okay, and now you see all of these codes down here,
‫which looks really confusing and that's actually the reason
‫why I copied this template from that GitHub repo
‫that I showed you before.
‫So there's a lot of tables going on
‫and that's because many email clients
‫actually only understand tables for formatting.
‫So we have all these stuff here that's not really meaningful
‫with table rows inside of tables inside of tables.
‫Am I right?
‫But what matters here is this content area here.
‫And so this is the part of the template
‫where we're gonna put all our content.
‫Now, the thing is that we, of course,
‫will have many different templates.
‫In the case of this project,
‫we will actually only create two ourselves
‫but there might be many emails for many situations
‫and so, of course, we will need a way of reusing
‫all of these code that is outside of this content.
‫So, basically, all of these here should be reusable,
‫and actually, that's exactly what we did before
‫with our base template here.
‫All right.
‫So we put everything that is reusable for all the templates
‫inside of this base, then we have our block there
‫and all the other templates,
‫then simply extend this block.
‫And so that is exactly what we will do now.
‫So let's actually go ahead and cut all of these from here,
‫create a new template called baseEmail,
‫and then put that here.
‫And now, for the content itself, of course,
‫we remove that from the base.
‫So cut that one from here,
‫and here let's create then a block
‫called content, again.
‫All right.
‫And so now here, in our welcome template,
‫we then put that content
‫inside that content block.
‫Okay.
‫And now just to finish, we then need to say
‫that it extends, so that this template here
‫extends the baseEmail.
‫Let's format this again with this command
‫and that's beautiful.
‫Great.
‫Now, here in our base template,
‫we actually have now the subject as the title.
‫And so that is the reason why I passed that
‫into the template.
‫So that is right here, remember?
‫So into the template, we passed the subject,
‫the URL and the firstName.
‫And so let's now go ahead and use this in our template.
‫And so the subject we already used here in the base
‫but that's actually it for this file
‫so we're not going to touch it again.
‫And so now here is our real template.
‫So we have here the name and so let's actually replace that
‫with the first name variable.
‫So firstName here, then we have all these nice texts here.
‫So, welcome to the family, all that stuff.
‫And then down here we have that green button
‫that I talked about when I showed you the template on GitHub
‫and so on that button, we say upload user photo.
‫And so here we need to specify that URL that we passed in.
‫All right, so it's called URL, right.
‫And so, now we put that on this button here
‫and that's actually it.
‫All of the rest here is just static content
‫that we do not need to change at all, all right?
‫So this welcome template here will now get used
‫whenever we call sendWelcome.
‫And so let's now actually go ahead and do that.
‫So from where do we want to send the welcome email?
‫Well, that is in the authController
‫and to, I believe there's a sign up function
‫or register or something like that,
‫and it's right here.
‫So this sign up.
‫And so into this, we need to import the email
‫and then use it.
‫And, actually, already we have sendEmail,
‫but now remember that is called Email,
‫so with a capital E like this.
‫Now we used that variable before somewhere down here,
‫so let's go there.
‫All right, and so this code here at this point
‫is no longer working but we will fix that in the next video.
‫So for now, let's just comment it out
‫so that it doesn't do any damage.
‫But anyway, let's now use this email class right here.
‫So new Email, and then remember first up is the user
‫and actually VS code knows that and shows that here
‫and so user is the newUser that we have up here
‫and then the URL that we're gonna create here in a second.
‫So const url equals, let's put it to zero, for now.
‫Okay, and then sendWelcome.
‫And now all we need to do is to actually await
‫this sendWelcome function.
‫All right, so we do that, that we only move on here
‫to the next step after the email has actually been sent.
‫And we can do that, of course,
‫because sendWelcome is an async function, remember that.
‫And so when we actually use it,
‫we then wait until it finishes.
‫All right, and so this is all we need to do
‫in order to send emails now,
‫but we still need to specify our URL here.
‫Now, what URL do we actually want here?
‫Well, remember that here on the button,
‫it says Upload_user_photo, right?
‫And so basically, we want to point
‫to that user account page.
‫So, basically, right here.
‫So for now, let's copy it, but we will then change it.
‫And we could leave it like this
‫but then it would only work in development
‫and not production, 'cause, of course,
‫this here does not exist when we're in production.
‫And so instead of basically hard coding it like this,
‫we will get this data from the request.
‫So basically, we will get what protocol we're using,
‫if we're using HTTP or HTTPS, and then also this host.
‫Okay, and both of that we can get from the request.
‫So let's replace all of these here
‫and make this a template string
‫and then we can say request.protocol
‫then colon, slash, slash,
‫and then request.get.
‫So we need to use this getter function
‫and what we want to get is the host.
‫And so when we're in development,
‫then, of course, this here will be the local host
‫on port 3000.
‫Okay so let's just console it
‫just to make sure.
‫Okay, and now, let's actually then test it.
‫And all we need to do for that is to just create a new user.
‫So let's do that here in Postman.
‫So Sign Up,
‫and now in our Body, let's create a new name,
‫let's say Test User.
‫And here, all of these doesn't really matter,
‫so let's just say test@natours.io
‫and with the same standard password.
‫And so now when we create this new user,
‫then we should get a new email into our Mailtrap,
‫so that we can take a look at it.
‫So let's try that and we got some nice error down here.
‫So let's take a look at that.
‫And it says that it couldn't find this file.
‫So there's some error in our email handler here.
‫And so let's try to find where that is.
‫Ah, it's down here.
‫And so the problem is that the folder here
‫is called email and here I called it emails.
‫So let's just say email,
‫I prefer that one.
‫And so now it should work.
‫Oh, and now we get the next error,
‫because this email here already exists.
‫And that's because in the previous step,
‫we actually did create the error, the only problem
‫was then with sending the email.
‫So let's do that again here, test two.
‫And one more error.
‫This time coming directly from Pug.
‫So, only named blocks and mixins can appear at the top level
‫of an extending template.
‫And so something is wrong here,
‫and indeed it is.
‫So that's actually exactly the error
‫that it told us we had and that is we can only have extends
‫and block but here we have this paragraph
‫also at the top level.
‫So that's not allowed.
‫So let's put it where it belongs, which is right here.
‫Give that a save, try it one more time,
‫and of course now we get this error.
‫So let's say test three.
‫Okay, now we're good to go.
‫So we successfully created the new user,
‫he has logged in.
‫And now let's take a look at Mailtrap
‫to see if we actually got our email.
‫So Mailtrap.
‫Let me log in here real quick.
‫And here is our Natours inbox,
‫and indeed, here is this new email from a minute ago
‫saying welcome to the Natours family.
‫Great.
‫And it actually looks really nice, right?
‫So that's all the texts that we had in our template.
‫We can also see the complete HTML here.
‫Also here we have the text.
‫And so remember that we created this one here
‫from the HTML to text package
‫and so we can confirm that it works just fine as well.
‫And, uh, yeah.
‫Let's just try to click here on this button,
‫and indeed it takes us to our account page.
‫Now, right now we're actually logged in as Aarav
‫because we already were logged in as that user
‫but that's not really the point
‫because this email here kind of supposes
‫that you are signing up from the website, right?
‫Now, that doesn't work at this point,
‫so we don't have any sign up form on our website
‫but the really important part here
‫is that our email here now works just fine,
‫the button here also works.
‫And so that big email handler
‫that we created in the last lecture is doing its job
‫just as well as the email template
‫that we created in this video.
‫So, I'm really happy with this result.
‫Next up, let's do something similar
‫for the password reset emails.