Full-Stack Web Development with Vue.js and Node

Building OAuth Strategies with passport.js Chapter 7

In Login.vue, add the following code:

<template>

<div>

<div class="login">

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

FACEBOOK</a>

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

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

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

LINKEDIN</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>

<script>

import axios from 'axios';

import bus from "./../bus.js";

export default {

data: () => ({

valid: true,

email: '',

password: '',

emailRules: [

(v) => !!v || 'E-mail is required',

(v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) ||