<!-- components/Login.vue -->
<template>
    <div>
        <div v-if="!authenticated">
            <section class="hero is-primary">
                <div class="hero-body">
                    <div class="container has-text-centered">
                        <h2 class="title">Login or Register</h2>
                        <p class="subtitle error-msg">{{ errorMsg }}</p>
                    </div>
                </div>
                <ul>
                    <li v-for="(provider, index) in loginProviders" v-bind:id="index">
                        <a :href="provider.url">{{ index }} ({{provider.type}})</a>
                    </li>
                </ul>

                <h3>Users</h3>
                <ul>
                    <li v-for="(user) in users">
                        <a href="#">({{user.id}}) {{user.first_name}}</a>
                    </li>
                </ul>
                <button v-on:click="oidc_login">Login via OIDC</button>
                <a href="http://localhost:5443/api/auth/oidc?redirect_url=/login">OIDC with redirect</a>
            </section>
            <section class="section">
                <div class="container">
                    <div class="field">
                        <label class="label  is-large" for="email">Email:</label>
                        <div class="control">
                            <input type="email" class="input is-large" id="email" v-model="email">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label  is-large" for="password">Password:</label>
                        <div class="control">
                            <input type="password" class="input is-large" id="password" v-model="password">
                        </div>
                    </div>

                    <div class="control">
                        <a class="button is-large is-primary" @click="authenticate">Login</a>
                        <a class="button is-large is-success" @click="register">Register</a>
                    </div>

                </div>
            </section>
        </div>
        <div v-else>
            <h1>{{ $t('You are already logged in!') }}</h1>
            <h2>{{$t('Redirecting you to')}} <router-link :to="{name: redirectTarget}">{{redirectTarget}}</router-link> {{$t('in')}} {{redirectTime}} {{$t('seconds')}}.</h2>
            <p><a href="" @click.prevent="logout()">{{$t('logout')}}</a></p>
        </div>
    </div>
</template>

<script>
    import {EventBus} from '@/utils';

    export default {

        data() {
            return {
                email: '',
                password: '',
                errorMsg: '',
                redirectMsg: '',
                redirectTarget: 'profile',
                redirectTime: 5,
                loginProviders: [],
                redirect_interval: null,
            };
        },
        methods: {
            authenticate() {
                this.$store.dispatch('login', {email: this.email, password: this.password})
                    .then(() => this.$router.push('/'));
            },
            register() {
                this.$store.dispatch('register', {email: this.email, password: this.password})
                    .then(() => this.$router.push('/'));
            },
            oidc_login() {
                this.$store.dispatch('oidc_login', '\\oidc_login_redirection');
            },
            logout() {
                this.$store.dispatch('logout', {revokeRefreshToken: true});
                this.$router.push({name: 'home'});
            },
        },
        mounted() {
            // this.$parent.$data.isLoading = true;
            EventBus.$on('failedRegistering', (msg) => {
                this.errorMsg = msg;
            });
            EventBus.$on('failedAuthentication', (msg) => {
                this.errorMsg = msg;
            });
            EventBus.$on('loginProvidersLoaded', (providers) => {
                this.loginProviders = providers;
            });
            EventBus.$on('storedTokens', () => {
                this.$store.dispatch('loadUsers');
                this.$store.dispatch('loadProfile');
            });

            this.$store.dispatch('loadLoginProviders');

            // get tokens
            if (this.$cookies.isKey('tokens')) {
                this.$store.dispatch('storeTokens', JSON.parse(atob(this.$cookies.get('tokens'))));
                this.$cookies.remove('tokens');
            }
            this.$log.debug(this.$cookies.keys());

            this.$nextTick(() => {
                if (this.authenticated) {
                    if (this.$route.query.redirectionTarget) {
                        this.redirectTarget = this.$route.query.redirectionTarget;
                    }
                    this.redirect_interval = window.setInterval(() => {
                        console.log(this.redirectTime);
                        this.redirectTime = this.redirectTime - 1;
                        if (this.redirectTime < 0) {
                            clearInterval(this.redirect_interval);
                            this.$router.push({name: this.redirectTarget});
                        }
                    }, 1000);
                }
            });
        },
        beforeDestroy() {
            clearInterval(this.redirect_interval);
            EventBus.$off('failedRegistering');
            EventBus.$off('failedAuthentication');
        },
        computed: {
            users() {
                return this.$store.state.users;
            },
            authenticated() {
                return this.$store.getters.isAuthenticated;
            }

        },
    };
</script>

<style lang="scss">
    .error-msg {
        color: red;
        font-weight: bold;
    }
</style>
