GithubHelp home page GithubHelp logo

lab-nodemailer's Introduction

Ironhack logo

PP | Sign up Confirmation Email

Requirements

Submission

Upon completion, run the following commands:

$ git add .
$ git commit -m"done"
$ git push origin master

Navigate to your repo and create a Pull Request -from your master branch to the original repository master branch.

In the Pull Request name, add your Campus, name, and last name separated by a dash "-".

Introduction

image

Almost every time we register on a web app, the platform asks us to confirm our account by clicking on a link they send to our email. This is a great way to avoid people who complete the registration with fake info. In this lab, we will create an application where a user can signup and then clicks on a link he will receive at our email. We will use Nodemailer for this!

Our gift ๐ŸŽ - Auth Flag

The ironhack_generator is pretty awesome, and with this new feature, you will love it even more. When running the irongenerate nameOfYourProject command on the terminal you get a pretty cool express application ready to start working, but if you add the --auth flag, you will get the same application with PassportJS's signup and login already set up.

So inside the folder you just clone, go ahead and run the following command:

$ irongenerate lab-nodemailer --auth
$ cd lab-nodemailer
$ npm install

Awesome huh? Let's start!

Deliverables

Iteration 1 - User Model

First, we need to modify the User model. Inside the models folder, you will find a user.js file. We already have the username and password fields, so we need to add the followings:

  • status. Will be a string, and you should add an enum because the only possibles values are: "Pending Confirmation" or "Active". By default, when a new user is created, it will be set to "Pending Confirmation".
  • confirmationCode. Here we will store a confirmation code you will attach to the URL. It will be unique for each user.
  • email. The user will complete the signup form with the email they will use to confirm the account.

Iteration 2 - Signup Process

Adding the new fields

On the auth/signup.hbs file you need to add an input tag for the email. When the user clicks on the signup button, you should store the following values in the database:

  • username. From the req.body.
  • password. After hashing the value of the password field from the req.body.
  • email. From the req.body.
  • confirmationCode. For creating a confirmation code, we will hash the username value, the same way we do with password field. After hashing the value, we store it on the confirmationCode value.

image

Sending the email

After creating the user, you should send the email to the address the user put on the email field. Remember to use Nodemailer for this. You should include the following URL in the email:

http://localhost:3000/auth/confirm/THE-CONFIRMATION-CODE-OF-THE-USER

Iteration 3 - Confirmation Route

When the user clicks on the URL we included in the email; we should make a comparison of the comparationCode on the URL and the one on the database. You should create a route: /confirm/:confirmCode inside the routes/auth.js file.

Inside the route, after comparing the confirmation code, you have to set to 'Active' the status field of the user, and then render a confirmation.hbs view, letting know to the user that everything goes perfect, or showing the error.

image

Iteration 4 - Profile View

Finally, you have to create a profile.hbs view, where you have to render the username and the status of the user.

Bonus! Styling the Email

Sending the email, only with the URL is super boring! Feel free to give some sugar to the design, at the end is HTML.

image

lab-nodemailer's People

Contributors

dmarinsa avatar papuarza avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.