<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>Register</v-card-title>
                            <v-card-text v-if="success">
                                Your account is register, you can now login to your Account.<br><br>
                                <hr><br>
                                <login-component></login-component>

                            </v-card-text>
                            <v-card-text v-if="!success">
                                <p>Register a new Account</p>

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

                                <v-text-field
                                        label="Username"
                                        value=""
                                        v-model="username"
                                        :disabled=usernameForced
                                        :error-messages=usernameError
                                        :error=usernameErrorFlage
                                ></v-text-field>
                                <v-text-field
                                        label="Password"
                                        value=""
                                        v-model="password"
                                        type="password"
                                        :error-messages=passwordError
                                        :error=passwordErrorFlag
                                ></v-text-field>
                                <v-text-field
                                        label="E-Mail"
                                        value=""
                                        v-model="mail"
                                        :error-messages=mailError
                                        :error=mailErrorFlag
                                ></v-text-field>

                                <div v-if="recaptcha"><vue-recaptcha @verify="onCaptchaVerified" :sitekey="captchaCode"></vue-recaptcha></div>

                                <v-btn
                                        color="success"
                                        @click="register"
                                >Register</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'
    import VueRecaptcha from 'vue-recaptcha';
    import LoginComponent from '../components/Login'

    export default {
        data () {
            return {
                success: true,
                inviteCode: '',
                errorMsg: '',
                username: '',
                usernameForced: false,
                password: '',
                mail: '',
                recaptcha: false,
                captchaCode: '',
                recaptchaToken: '',
                usernameErrorFlag: false,
                usernameError: "",
                passwordErrorFlag: false,
                passwordError: "",
                mailErrorFlag: false,
                mailError: ""

            }
        },
        components: {
            VueRecaptcha,
            LoginComponent
        },
        methods: {
            onCaptchaVerified: function (recaptchaToken) {
                this.recaptchaToken = recaptchaToken;
            },
            register: function () {
                UserService.register(this.username, this.password, this.mail, this.$route.query.code, this.recaptchaToken).then((res) => {
                   this.success = true;
                }).catch((error) => {
                    if(error.response.status == 422){
                        this.usernameErrorFlag = false;
                        this.usernameError = "";
                        this.passwordErrorFlag = false;
                        this.passwordError = "";
                        this.mailErrorFlag = false;
                        this.mailError = "";
                        if(error.response.data.data.username != undefined) {
                            this.usernameErrorFlag = true;
                            this.usernameError = error.response.data.data.username[0]
                        }
                        if(error.response.data.data.password != undefined) {
                            this.passwordErrorFlag = true;
                            this.passwordError = error.response.data.data.password[0]
                        }
                        if(error.response.data.data.mail != undefined) {
                            this.mailErrorFlag = true;
                            this.mailError = error.response.data.data.mail[0]
                        }
                        console.log(error.response.data.data);
                    } else {
                        this.errorMsg = error.response.data.msg;
                    }
                });
            }
        },
        mounted: function() {
            this.nameBig = this.$store.getters.getSettingValue("name_big");
            this.nameSmall = this.$store.getters.getSettingValue("name_small");
            if(this.$route.query.code) {
                UserService.getInviteCodeInfo(this.$route.query.code).then((res) => {
                    if(res.data.data.usable == false) {
                        this.errorMsg="Invite code not valide";
                    } else {
                        if(res.data.data.username != "") {
                            this.usernameForced = true;
                            this.username = res.data.data.username;
                        }
                    }
                }).catch((res) => {
                   this.errorMsg="Invite code not valide";
                });
            }
            UserService.getCaptchaSettings().then((res) => {
                this.captchaCode = res.data.data.key;
                this.recaptcha = res.data.data.register;
            });
        }
    }
</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>
