<template lang="html">
    <div class="sign-in-body d-flex justify-content-center align-items-center">
        <div class="sign-in-container" :class="shakeClass">

            <div class="sign-in-segment sin-bg-window">
                <img src="@/assets/img/logov2.png" alt="Anime Lista" class="img-logo">
            </div>

            <div class="sign-in-segment p-4">
                <LoginWindow @shakeScr="ShakeScreen" @recoverScr="ChangeView('RECOVERY')" />
            </div>

        </div>
    </div>
</template>
<script>
import LoginWindow from '@/components/login_window.vue';

import '@/assets/css/login.css';

export default {
    name: 'LoginPage',
    components: {
        LoginWindow,
    },

    data() {
        return {
            //Błąd shake
            shakeClass: "",
            shakeTimer: false,
        }
    },

    watch: {
        shakeTimer(value) {
                if (value) {
                    setTimeout(() => {
                        this.shakeClass = '';
                        this.shakeTimer = false;
                    }, 1000);
                }
            },
    },

    methods: {
        GoToAnimeDashboard() {
            this.$router.push('/anime');
        },

        ShakeScreen() {
            this.shakeClass = '';
            this.shakeTimer = true;
            this.shakeClass = 'shake-horizontal';
        },
    }
}
</script>