Step 6: Login

Let's add a login form to our Web application. To keep things simple, we only ask for username!

Update index.html by adding the following form element to it:

<form action="/dashboard">
  <label for="uname">username:</label>
  <input type="text" id="username" name="uname"><br><br>
  <input type="submit" value="Login">
</form>

Notice the action attribute of the form.

Save index.html and refresh http://localhost:5000/.

Go ahead an key in a username and then hit on the login button. What does happen?

The browser is directed to the http://localhost:5000/dashboard?uname=ali. There is no route in our Express app to serve this endpoint however.

Add the following to index.js

app.get("/dashboard", (req, res) => {
  res.send(`Welcome ${req.query.uname}`);
});

Reload the Express app. Go to http://localhost:5000/. Enter a username and press login. You will be redirected to the "dashboard" endpoint where a welcome message awaits you!