So far, users can now signup with our app. The next thing we want them to be able to do is login into our app. To acheive that, we'll create a new component and call it LogInForm
. Within the src/components/Auth
, create a LogInForm.vue
file, then paste the code below into it:
// src/components/Auth/LogInForm.vue
<template>
<div class="ui stackable three column centered grid container">
<div class="column">
<h2 class="ui dividing header">Log In</h2>
<Notification
:message="notification.message"
:type="notification.type"
v-if="notification.message"
/>
<form class="ui form" @submit.prevent="login">
<div class="field">
<label>Email</label>
<input type="email" name="email" v-model="email" placeholder="Email" required>
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password" v-model="password" placeholder="Password" required>
</div>
<button class="fluid ui primary button">LOG IN</button>
<div class="ui hidden divider"></div>
</form>
<div class="ui divider"></div>
<div class="ui column grid">
<div class="center aligned column">
<p>
Don't have an account? <router-link to="/signup">Sign Up</router-link>
</p>
</div>
</div>
</div>
</div>
</template>
Within the login form use the Notification
component. Once the form is submitted, the login
method will be called.
Next, let's add the corresponding JavaScript to the component. Still within src/components/Auth/LogInForm.vue
, add the code below just after the template
section:
Table of Contents
// src/components/Auth/LogInForm.vue
<script>
import Notification from '@/components/Notification'
export default {
name: 'LogInForm',
components: {
Notification
},
data () {
return {
email: '',
password: '',
notification: {
message: '',
type: ''
}
}
},
beforeRouteEnter (to, from, next) {
const token = localStorage.getItem('tweetr-token')
return token ? next('/') : next()
},
methods: {
login () {
axios
.post('/login', {
email: this.email,
password: this.password,
})
.then(response => {
// save token in localstorage
localStorage.setItem('tweetr-token', response.data.data.token)
// redirect to user home
this.$router.push('/')
})
.catch(error => {
// clear form inputs
this.email = this.password = ''
// display error notification
this.notification = Object.assign({}, this.notification, {
message: error.response.data.message,
type: error.response.data.status
})
})
}
}
}
</script>
This is identical to the SignUpForm
component. Once the form is submitted, a POST
request is made to the /login
endpoint of our API passing along the user's email address and password. If the authentication was made successfully, we save the token returned in localstorage then redirect to the user homepage. If there was an error, we display the error returned by passing it to the Notification
component.
Adding Login Route
Just as we did with the SignUpForm
component, we also need to define a /login
route. Open src/router/index.js
, and add the code below to it:
// src/router/index.js
import LogInForm from '@/components/Auth/LogInForm'
// add these inside the `routes` array
{
path: '/login',
component: LogInForm
},
Now when we visit the /login
route, we should see our login form as in the image below: