<script
    setup
    lang="ts"
>
    import { onMounted } from 'vue';

    onMounted(() => {
        if (window.opener) {
            setTimeout(() => {
                window.opener.postMessage({ type: 'authSuccess' });
                window.close();
            }, 2000);
        }
    });
</script>

<template>
    <q-layout class="bg-secondary">
        <q-page-container>
            <q-page class="column items-center justify-center q-pa-xl">
                <transition
                    appear
                    enter-active-class="animated flipInX"
                >
                    <q-card class="col-3 items-center rounded-10 q-px-lg">
                        <q-card-section class="row justify-center ">
                            <q-icon
                                name="check_circle"
                                color="accent"
                                size="xl"
                            />
                        </q-card-section>
                        <q-separator
                            inset
                            color="accent"
                        />
                        <q-card-section class="column items-center">
                            <span class="col-auto text-h4 text-uppercase">{{ $t('login.connected') }}</span>
                            <span class="col-auto text-h6 text-uppercase">{{ $t('login.redirecting') }}</span>
                            <q-spinner
                                color="accent"
                                size="5em"
                                :thickness="4"
                                class="col-auto"
                            />
                        </q-card-section>
                    </q-card>
                </transition>
            </q-page>
        </q-page-container>
    </q-layout>
</template>