<template>
  <div>
    <button class="button f-signin-btn" @click="logInWithFacebook">
      Login with Facebook
    </button>
  </div>
</template>
<script>
export default {
  head() {
    return {
      script: [
        {
          src: 'https://connect.facebook.net/es_ES/sdk.js',
          defer: true,
          async: true,
        },
      ],
    }
  },

  mounted() {
    window.fbAsyncInit = async function () {
      await window.FB.init({
        appId: process.env.facebookId,
        cookie: true,
        version: 'v13.0',
      })
    }
  },

  methods: {
    async logInWithFacebook() {
      await window.FB.login(function (response) {
        if (response.authResponse) {
          console.log(response)
          alert('You are logged in &amp; cookie set!')
          // Now you can redirect the user or do an AJAX request to
          // a PHP script that grabs the signed request from the cookie.
        } else {
          alert('User cancelled login or did not fully authorize.')
        }
      })
      return false
    },
  },
}
</script>
<style lang="scss" scooped>
.f-signin-btn {
  align-self: center;
  background-color: $color-facebook;
  color: $color-light;
  border: none;
  border-radius: 5px;
  text-transform: uppercase;
  padding: 15px 20px;
  margin-top: 15px;
}
</style>
