Full-Stack Web Development with Vue.js and Node

Building OAuth Strategies with passport.js Chapter 7

Adding a button to our login page that allows users to log in via Facebook

The next step is to add a LOGIN WITH FACEBOOK button in your login page, which you

will be linking to your Facebook application. Replace the contents of Login.vue, with the

following:

<template>

<div>

<div class="login">

<a class="btn facebook" href="/login/facebook"> LOGIN WITH

FACEBOOK</a>

</div>

<v-form v-model="valid" ref="form" lazy-validation>

<v-text-field

label="Email"

v-model="email"

:rules="emailRules"

required

></v-text-field>

<v-text-field

label="Password"

v-model="password"

:rules="passwordRules"

required

></v-text-field>

<v-btn

@click="submit"

:disabled="!valid"

>

submit

</v-btn>

<v-btn @click="clear">clear</v-btn><br/>

</v-form>

</div>

</template>

...

Let's also add some styling to these buttons. In src/assets/stylesheets/home.css,

add the following code:

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;