How to use javascript method trigger to call vuejs method in laravel blade

I am using google oauth2 authorization in a pop-up window. I am trying to learn VueJS so the following code might have issues (if you spot them please be kind and point them)

How can I hide the Sign in with Google button using vue when the authorization is completed?

login.blade.php

<redirect-to-provider route="{{route('auth.scopes.redirect')}}" provider="google"></redirect-to-provider>

RedirectToProvider.vue

<template>
    <button v-on:click="popUpRedirect" class="btn btn-primary">
        Sign in with Google
    </button>

</template>
<script>
    export default {
        props: {
            route: {
                required: true,
            },
            provider: {
                required: true,
                default: "google"
            },
            scopes: {
                default: '',
            },
        },
        mounted() {
            console.log('Component mounted.')
        },
        methods: {
            popUpRedirect: function () {
                return window.open(
                    this.route+"?provider="+this.provider+'&scopes[]='+this.scopes, '_blank',
                    'toolbar=0,location=0,menubar=0'
                );
            }
        }
    }
</script>

callback.blade.php

                <script>
                    window.onunload = function() {
                        var win = window.opener;
                        if (!win.closed) {
                            win.console.log('signed in successfully');
                        }
                    };
                    window.close();
                </script>

So a the vue component renders a button. I click it and a pop-up window opens and redirects to google. I do the authorization flow and returns me to callback.blade.php. If user granted permissions I send to login.blade.php a console message with signed in successfully and then I do a window.close();

I could hide the button using a javascript method instead of console.log('signed in successfully'); but I cannot figure out how to use VueJS instead.

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.