Nodemailer Integration

[h0ethan04]

Instructions

We’re going to use nodeMailer to notify the admins of Center Stage when someone has created an account and is waiting for approval. In this task, you’re going to…

backend:

• Set up the nodeMailer route, using the transporter provided in server/common

frontend:

• Note:

  • When working on the frontend, we want to work from making sure the site is responsive starting from a mobile device (this will make it easier when we modifying the styling for bigger screens)
  • When checking how the frontend looks on a mobile device through chrome's inspect element, be sure to select iPhone SE for test!!!

• Heads up:

  • Feel free to utilize client/src/components/playground/Playground.jsx to test out anything before putting it in their respective pages, or if there currently is no respective page
  • When prompted to log in, you can sign in with the account (if needed, in your case you'll be testing with new accounts):
    • email: [email protected]
    • password: 123456

• Create a temporary email template to send (this could be a simple component with some text).

• Create a temporary component to test out the email functionality. Add format validation for the email input.

• Use the react-html-email library to render the email template.

  • Note: you need to yarn install this dependency (commit the updated package.json as well)

• Call the backend route to send the email.

Notes

• The credentials for the account to send emails from are now in the backend .env in the drive.
  • The password on the .env is an App password to give nodeMailer access to the account, not the actual Google password.
• As a sanity check, log into the email account to see if it sent the email. Login credentials:
  • email: [email protected]
  • password: Center$tage!!

Acceptance Criteria

backend

• The route is able to receive the email template and send the email to the email passed through the payload.
• The route is accessible in server/routes/nodeMailer.js

frontend

• An email can be triggered (ex: by clicking a button) to send to a specific email address.
• Component should be able to receive different email templates to send.
• Emailing a non-existent should display an error message.

Resources

backend:

• Nodemailer Documentation
• PNP Nodemailer Example
• AISS Nodemailer Example

frontend:

• PNP sendEmail
• React HTML Email docs
• AISS Email templates

[Priyansh4444]

The route is able to receive the email template and send the email to the email passed through the payload.

So will the email we are sending to aka the admins email also be provided when making the request?
I thought the admins email would be like pre-configured

[h0ethan04]

The admin's email will be pre-configured but I still need to talk to them about it; for now, have the component send the email to [email protected]. Login using CTCcse!!. I'll also update the frontend environmental variables file after this sprint so we can do that.

[Priyansh4444]

I was looking at the figma to try and get a better idea, but does the sign up page also have to include name and last name and role which i add to the html template potentially and send to the back end?

[Priyansh4444]

This is my current thought process:
First Name, Last Name, Role, Email taken from front end -> template is used to make the structure of the email -> email is sent as html to the backend via a post request -> email is sent to the admin using nodemailer (this email for now is the one you specified)

And Do I have to use the current sign-in page or make my own sign in page, because the current one is only Email and password
Just want to clarify before implementing

[h0ethan04]

Creation of the sign in page is implemented by another team during this sprint, feel free to use hardcoded dummy values for now until we connect the sign in page to the nodemailer flow.

[Priyansh4444]

It seems I need a security key to log in,

and also when I try to create the transporter i get the error that:

from the reddit thread, docs and speculation Im guessing we need to make the mail less secure to use it as a transporter

I am kind of stuck on what to do, because the link also redirects to the something into a more "secure service"

[Priyansh4444]

Help here would be appreciated we are kinda stuck 😅especially for testing, though the code is complete and "looks right" just needs a bit of review as far as i can tell, because we aren't sure why the error is showing up

[h0ethan04]

There should be an application password in the .env file on the drive, are you using that? There's two emails -- the one in this thread, and the one in the backend .env doc.

[Priyansh4444]

I am using the one on the drive, yep!

[h0ethan04]

I just tested it and was able to send the email; there's a couple of changes that need to be made to do this.

[h0ethan04]

I was having a reactDOMServer.renderToPipeableStream is not a function error on submission of the form.

There's a bit of dependency hell involved in adding the react-email-html library, but I just manually added it to the client package.json then used yarn install in the client dir to install the deps. From there you'll have access to renderEmail via import and you can use that instead of render from react-email/components.

[Priyansh4444]

I did those things, can you see what I am doing wrong in my branch? The problem is arriving at the transporter still for me 😔

[bowenwang0815]

im having the same issue as priyansh when login with google :(