<template>
    <div style="min-height: 100pc;" class="bg">
        <div class="header2">
        </div>
        <v-container grid-list-md>
            <v-layout row wrap>
                <v-flex md4></v-flex>
                <v-flex md4 v-if="!$store.state.loggedIn" style="">
                    <template>
                        <v-card
                                class="mx-auto"
                        >
                            <v-card-title>Invite</v-card-title>
                            <v-card-text>
                                <p>If you have an invite code, enter it here to register a new account.</p>

                                <v-alert type="error" v-if="errorMsg">
                                   {{ errorMsg }}
                                </v-alert>

                                <v-text-field
                                        label="Invite Code"
                                        value=""
                                        v-model="code"
                                ></v-text-field>

                                <v-btn
                                        color="success"
                                        @click="checkInviteCode"
                                >Check Invite Code</v-btn>
                            </v-card-text>
                        </v-card>
                    </template>

                </v-flex>
                <v-flex md4 v-if="$store.state.loggedIn">
                    <template>
                        <v-card
                                class="mx-auto"
                        >
                            <v-card-title>Login</v-card-title>
                            <v-card-text><p>Hallo {{$store.getters.getMe["username"]}}, du bist bereits eingeloggt.</p></v-card-text>
                        </v-card>
                    </template>

                </v-flex>



            </v-layout>
        </v-container>


    </div>

</template>

<script>
    import ServerService from '../services/Server'
    import UserService from '../services/User'

    export default {
        data () {
            return {
                code: '',
                errorMsg: ''
            }
        },
        components: {
        },
        methods: {
            checkInviteCode: function () {
                UserService.getInviteCodeInfo(this.code).then((res) => {
                    if(res.data.data.usable) {
                        this.errorMsg = "";
                        this.$router.push({name: 'Register', query: {code: this.code}});
                    } else {
                        this.errorMsg = "Invite code not valide";
                    }
                   console.log(res.data);
                }).catch((res) => {
                    if(res.response.data.msg == "Resource not Found") {
                        this.errorMsg = "Invite code not found";
                    }
                });
            }
        },
        mounted: function() {
            this.nameBig = this.$store.getters.getSettingValue("name_big");
            this.nameSmall = this.$store.getters.getSettingValue("name_small");
        }
    }
</script>

<style>
    .bg {
        background-image: url('~@/assets/texture-1485529_1920.jpg');
    }
    .header2 {
        background-image: url('~@/assets/texture-1485529_1920.jpg');
        background-repeat: no-repeat;
        margin-top: -100px;
        height: 50vh;
        text-align: center;
    }
    .header h1{
        padding-top: 200px;
        font-size: 56px !important;
        font-weight: 400;
        line-height: 32px !important;
        letter-spacing: normal !important;
    }
    .header h1 .small{
        font-weight: 300 !important;
    }
    .header h2{
        padding-top: 30px;
        font-size: 34px !important;
        font-weight: 300;
        line-height: 32px !important;
        letter-spacing: normal !important;
    }
    h1{
        font-weight: 300;
        line-height: 32px !important;
        letter-spacing: normal !important;
    }
    h2{
        font-weight: 300;
        line-height: 32px !important;
        letter-spacing: normal !important;
    }
</style>
