<!--
  - Copyright (c) 2022.
  - Author Peter Placzek (tada5hi)
  - For the full copyright and license information,
  - view the LICENSE file that was distributed with this source code.
  -->

<script lang="ts">
    import Vue from 'vue';
    import { mapGetters, mapActions } from 'vuex'
    import {maxLength, minLength, required} from "vuelidate/lib/validators";

    export default Vue.extend({
        meta: {
            requireGuestState: true
        },
        data () {
            const data : {
                error: string | null,
                form: {
                    name: string,
                    password: string,
                    provider: string
                }
            } = {
                error: '',
                    form: {
                    name: '',
                        password: '',
                        provider: ''
                }
            }

            return data;

        },
        validations() {
            return {
                form: {
                    name: {
                        required,
                        minLength: minLength(3),
                        maxLength: maxLength(100)
                    },
                    password: {
                        required,
                        minLength: minLength(3),
                        maxLength: maxLength(100)
                    }
                }
            }
        },
        computed: {
            ...mapGetters('auth', [
                'loggedIn'
            ]),
        },
        methods: {
            ...mapActions('auth', [
                'triggerLogin'
            ]),

            async handleSubmit () {
                if (this.form.name === '' && this.form.password === '') {
                    this.error = 'Es muss ein Benutzername und ein Passwort angegeben werden.';
                    return;
                }

                this.error = null;

                try {
                    await this.triggerLogin(this.form);

                    let redirectURL : string = typeof this.$nuxt.$route.query?.redirect === 'string' ? this.$nuxt.$route.query?.redirect : '/';
                    await this.$nuxt.$router.push(redirectURL);
                } catch (e) {
                    console.log(e);
                    this.error = e.message;
                }
            }
        }
    });
</script>
<template>
    <div class="container">
        <div class="hero-image mb-2">
            <div class="hero-text">

            </div>
        </div>
        <h4 class="title">
            Login
        </h4>

        <hr />

        <transition name="slide-fade">
            <div v-if="error" class="alert alert-danger alert-sm">
                {{ error }}
            </div>
        </transition>

        <form @submit.prevent="handleSubmit">
            <div class="form-group">
                <label for="name">Name</label>
                <input
                    id="name"
                    v-model="$v.form.name.$model"
                    class="form-control"
                    type="text"
                    placeholder="Benutzername"
                    required
                    autofocus
                >
            </div>
            <div v-if="!$v.form.name.required && !$v.form.name.$model" class="form-group-hint group-required">
                Bitte geben Sie einen Benutzernamen an.
            </div>
            <div v-if="!$v.form.name.minLength" class="form-group-hint group-required">
                Der Benutzername muss mindestens <strong>{{ $v.form.name.$params.minLength.min }}</strong> Zeichen lang sein.
            </div>
            <div v-if="!$v.form.name.maxLength" class="form-group-hint group-required">
                Der Benutzername darf maximal <strong>{{ $v.form.name.$params.maxLength.max }}</strong> Zeichen lang sein.
            </div>

            <div class="form-group">
                <label for="password">Passwort</label>
                <input
                    id="password"
                    v-model="$v.form.password.$model"
                    class="form-control"
                    type="password"
                    placeholder="Passwort"
                    required
                >
            </div>
            <div v-if="!$v.form.password.required && !$v.form.password.$model" class="form-group-hint group-required">
                Bitte geben Sie ein Passwort an.
            </div>
            <div v-if="!$v.form.password.minLength" class="form-group-hint group-required">
                Das Passwort muss mindestens <strong>{{ $v.form.name.$params.minLength.min }}</strong> Zeichen lang sein.
            </div>
            <div v-if="!$v.form.password.maxLength" class="form-group-hint group-required">
                Das Passwort darf maximal <strong>{{ $v.form.name.$params.maxLength.max }}</strong> Zeichen lang sein.
            </div>
            <div>
                <button type="submit" class="btn btn-outline-primary btn-sm" @click.prevent="handleSubmit" :disabled="$v.form.$invalid">
                    Login
                </button>
            </div>
        </form>
    </div>
</template>
<style>
.slide-fade-enter-active {
    transition: all .6s ease;
}
.slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
}
</style>
