wip busqueda page

components/GoogleSignIn.vue

@@ -0,0 +1,92 @@
+<template>
+  <button class="g-signin-btn" id="googleSignIn" type="button">
+    Login with Google
+  </button>
+  <!-- id="google-signin-button"
+    class="g-signin2"
+    data-onsuccess="onGoogleSignIn" -->
+</template>
+<script>
+/* eslint-disable */
+// function onGoogleSignIn(googleUser) {
+//   // Useful data for your client-side scripts:
+//   var profile = googleUser.getBasicProfile()
+//   console.log('ID: ' + profile.getId()) // Don't send this directly to your server!
+//   console.log('Full Name: ' + profile.getName())
+//   console.log('Given Name: ' + profile.getGivenName())
+//   console.log('Family Name: ' + profile.getFamilyName())
+//   console.log('Image URL: ' + profile.getImageUrl())
+//   console.log('Email: ' + profile.getEmail())
+
+//   // The ID token you need to pass to your backend:
+//   var id_token = googleUser.getAuthResponse().id_token
+//   console.log('ID Token: ' + id_token)
+// }
+
+function onLoadGoogleCallback() {
+  gapi.load('auth2', function () {
+    const auth2 = gapi.auth2.init({
+      client_id: process.env.googleId,
+      cookiepolicy: 'single_host_origin',
+      scope: 'profile',
+    })
+
+    const element = document.getElementById('googleSignIn')
+    auth2.attachClickHandler(
+      element,
+      {},
+      function (googleUser) {
+        console.log('Signed in: ' + googleUser.getBasicProfile().getName())
+      },
+      function (error) {
+        console.log('Sign-in error', error)
+      }
+    )
+  })
+}
+
+export default {
+  head() {
+    return {
+      meta: [
+        {
+          name: 'google-signin-scope',
+          content: 'profile email',
+        },
+        {
+          name: 'google-signin-client_id',
+          content: process.env.googleId,
+        },
+      ],
+      script: [
+        {
+          src: 'https://apis.google.com/js/platform.js',
+          defer: true,
+          async: true,
+        },
+        // {
+        //   src: 'https://apis.google.com/js/api:client.js',
+        // },
+      ],
+    }
+  },
+  mounted() {
+    window.onload = onLoadGoogleCallback
+  },
+
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+.g-signin-btn {
+  align-self: center;
+  background-color: $color-google;
+  color: $color-light;
+  border: none;
+  border-radius: 5px;
+  text-transform: uppercase;
+  padding: 15px 20px;
+  margin-top: 15px;
+}
+</style>