Vue Final Project - Part 4 - The Login component

Create a file named Login.vue in the views folder and put this code in it:

<template>
    <div class="login">
        <form @submit.prevent="onSubmit">
            <div>
                <label>Email:</label>
                <input v-model="email" />
            </div>
            <div>
                <label>Password:</label>
                <input type="password" v-model="password" />
            </div>
            <div>
                <input type="submit" id="btnSubmit" name="submit button">
            </div>
        </form>
    </div>
</template>

<script>
export default {
    data(){
        return {
            email: "",
            password: ""
        }
    },
    methods: {
        onSubmit(){ 
            if(this.validate()){
                alert("TODO: Authenticate the user")
            }
        },
        validate(){
            if(!this.email || !this.password){
                alert("Invalid Input");
                return false;
            }
            return true;
        }
    }
}
</script>

<style scoped>
    label{ display: block; }
</style>

Notes:

  1. The email and password data members are bound to textboxes in the UI with the v-model directive.
  2. The validation is crude and not acceptable. You'll have to clean it up for your final project.
  3. We will replace the alert() in the onSubmit() method in just a moment.

You will have to Bootstrap the Login component for your final project

We don't have a way to navigate to the Login compoent, so let's confgure a route for it now. Add this route to the router file (router/index.js):

{ path: '/login', name: 'Login', component: Login }

And add this import statement to the top of the router file:

import Login from '../views/Login.vue'

Now add this router-link to the NAV element in App.vue:

<router-link :to="{name: 'Login'}">Login</router-link>

Go ahead and run the app and try out the Login component. When you press the submit button you should see one of two alerts, depending on whether or not you entered an email and password.

Now let's add a function to the api.js file that will allow us to simulate user authentication with our JSON server. Add this function (to api.js):

export function login(email, password) {
    return ax.get(`users/?email=${email}&password=${password}`).then(resp => {
		if(resp.data.length == 1){
			return resp.data[0] // we want to get the first, and hopefully only, user from the resp.data array
		}else{
			return null
		}
	});
}

When this request is made to the JSON server, it will attempt to find all records that match the email and password query string parameters that are appended to the URL (so it sends and array in the response). We should expect that only one user should be returned when logging in (if we have multiple users with the same email and password then we don't know who is logging in).

Remember that using the JSON Server is only for prototyping and development, it should never be used for a live site! Here are just some of the limitations that we have run into:

  1. Anyone can make a request to /users and see all the user passwords. In otherwords, JSON server does not provide a way for you to protect its resources.
  2. The passwords are not encrypted, and they really should be (we'll be addressing this in the Adv Topics class)
  3. The JSON server doesn't care if two users have the same email address. When we create a real API in the Adv Topics class, the database will force email addresses for users to be unique.

Now let's connect some of the parts we have been working.

In the Login.vue file, import the login() function from the api.js file by adding this line inside the SCRIPT element (before the options object):

import {login} from '../api.js'

Now we'll call the login() function when the form has passed validation. Update the onSubmit() method to look like this:

onSubmit(){ 
    if(this.validate()){
        login(this.email, this.password).then(user => {
            if(user){
                alert("AUTHENTICATED!");
                console.log(user);
            }else{
                alert("LOGIN FAILED!");
            }
        })
    }
}

Note that we are passing the email and password into the login() method, which will then send them to the JSON server to see if we have a matching user.

Make sure the JSON server is running (npx json-server --watch db.json --port 8888 or npm run json) and then try out the Login component. You may have to look inside the db.json file to find a valid email and password to enter. Hopefully you can authenticate. But make sure to see what happens if you enter an email and password that does not exist in db.json.

In the next step, we'll figure out what to do when a user successsfully authenticates.