Course Banner

Account: Deliver Login

Introduction

From the very beginning of the project, you included a "My Account" item in the site header. It has remained unused, until now. The purpose of this activity is to implement the link, route, controller and views to get started with implementing account functionality within the project.

Video Overview

The video provides a general overview of the activity, but does not contain the detail needed to complete each process. Watch the video to obtain a general idea, but follow the written steps to complete the activity. This is the Transcript of the video.

The Login View Route

If you open the header.ejs partial and closely look at the path for the "My Account" link, you will see the value that will be sent through the Request object to the application. The request expects to get back a login view. So, step one is to build an "accounts" router file that will handle the request.

  1. Using the inventoryRoute file as an example, build a new accountRoute.js file in the routes folder.
  2. The file will need access to the following external resources:
    • the express package.
    • the express.Router() function.
    • the utilities > index file.
    • an accounts controller (which you will build later in this activity).
  3. Add a "GET" route for the path that will be sent when the "My Account" link is clicked. Note: within this router file, the route should reflect only the part of the path that follows "account". The account part of the path should be placed in the server.js file, when this router is required.
  4. The "GET" route must use a function from the account controller, to handle the request.
  5. Add the error handler middleware to the route to deal with any errors.
  6. Make sure the route(s) are exported for use elsewhere.
  7. Ensure no warnings or errors are displayed by VSC.
  8. Save the file.

Enable the Account Route

You will recall that the server.js file is the initial operating document for the project. If a route handler is unknown, then the route doesn't do anything.

  1. Open the server.js file.
  2. In the "Require Statements" section, require the account route file you just created.
  3. In the "Routes" section, add the "account" route, using the Inventory route as an example.
  4. As mentioned earlier, make sure that the "/account" element from the path is placed in the app.use() function as the first element.
  5. Ensure no warnings or errors are displayed by VSC.
  6. Save the file.

Account Controller

With the route in place, the account controller needs to be built in order to process the request and return a view to the browser.

  1. In the controllers folder, create a new accountController.js file. This name, follows the convention of the other controller files.
  2. Once created, return to the account router file and make sure the name of the controller matches what you are requiring.
  3. For now, the only item that must be "required" by the controller is the utilities > index.js file.
  4. Leaving a few empty lines below the require statement, add a comment and a function that will deliver a login view (you'll build it when the controller is done).
  5. The login function is shown below: 
    /* ****************************************
*  Deliver login view
* *************************************** */
async function buildLogin(req, res, next) {
  let nav = await utilities.getNav()
  res.render("account/login", {
    title: "Login",
    nav,
  })
}

module.exports = { buildLogin }

  6. An Explanation

    • Lines 1 - 3 - a multi-line comment introducing the function.
    • Line 4 - begins the function, declaring it as asynchronous, and passing in request, response and next as parameters.
    • Line 5 - retrieves and stores the navigation bar string for use in the view.
    • Line 6 - calls the render function and indicates the view to be returned to the client and opens the object that will carry data to the view. Note: the view is inside a folder, which should be within the "views" folder. This folder doesn't exist and must be created.
    • Lines 7 - 8 - the data items to be sent to the view.
    • Line 9 - closes the data object and the render function (opened on line 6).
    • Line 10 - closes the function.
    • Line 11 - left intentionally blank.
    • Line 12 - exports the function for use elsewhere.
  7. Ensure no warnings or errors are displayed by VSC.
  8. Save the file.

Data Trail

One of the most difficult tasks is being consistent with data as it moves around within an application. While there are many ways of doing so, a simple, easy to remember, method is to use the database table names for data throughout the application. For example, in the login view is a form that asks the user to supply an email address and password.

If you look in the accounts table of the database, you'll see that the email is stored in the account_email field, while the password is stored in the account_password field.

To apply this to the form, you would name the email input as name="account_email". By using this method, the form and database table locations match. The same idea applies to all form fields.

Login View

With everything else done, it is time to build the login view. As with the other views built, it should meet the following specifications:

  1. Created inside a new folder, within the views folder. The new folder name should match the name in the render function of the controller.
  2. Be named according to the name in the render function of the controller.
  3. Use the title data value for both the title and h1 elements.
  4. Have the ability to display a flash message, if one is sent.
  5. Display a login HTML form that accepts an email address (this will be the username) and password.
  6. The form should include a button to submit the login credentials.
  7. Enforcement of the input data does not have to be done at this time.
  8. Beneath the form should be a link that allows the user to send a URL that would request delivery of a registration view, if they do not yet have an account. Refer to this example:
    Image of an example login form.
  9. Add appropriate CSS to render the view and form professionally.
  10. Ensure no warnings or errors are displayed by VSC.
  11. Save the file.

Test Time

Before going any further, it is important to test the functionality that has just been added.

  1. Ensure that all the file names are correct, particularly those that are being required by other files.
  2. Open a VSC terminal and start the development server - pnpm run dev.
  3. Open a browser to "localhost:5500".
  4. Click the "My Account" link in the header.
  5. The view should be delivered, and the form is in place and styled.
  6. Test the view against the Frontend checklist.
  7. If everything worked, do a happy dance with someone you love. If not, review the terminal logs to see if an error is reported, get help from your learning team, the TA, or the professor.
  8. Stop the server when done testing!

Conclusion

The process of using routes, controllers and views is fundamental to modern web development. In this instance, it was as much review as new content, but soon, you'll be getting serious with saving incoming information to the database.