<template>
    <div style="">
        <div class="header">
        </div>
        <v-container grid-list-md>
            <v-layout row wrap>
                <v-flex md4></v-flex>
                <v-flex md4 v-if="!$store.state.loggedIn">
                    <Login loginToService="true" serviceName="Jenkins" @loggedIn="getAppData();"></Login>
                </v-flex>
                <v-flex md4 v-if="$store.state.loggedIn && app != null">
                    <h1>Login to {{ app.name }}</h1>
                    <p>{{ app.description }}</p>
                    <hr>
                    <div style="margin-top:20px;margin-bottom:20px;">
                        This App get the following permissions:<br /><br />
                        <ul>
                            <li v-if="app.access.read_profile">Read your Profile information</li>
                            <li v-if="app.access.update_profile">>Update your Profile information</li>

                            <li v-if="app.access.read_apps">>Read your App information</li>
                            <li v-if="app.access.update_apps">>Update your App information</li>

                            <li v-if="app.access.read_access">>Read your Access information</li>
                            <li v-if="app.access.update_access">>Update your Access information</li>
                        </ul>
                    </div>

                    <v-btn color="success" @click="allowAccess()" :disabled="disabledLoginButton" style="width: 100%;">Login to {{ app.name }}</v-btn>
                    <br><br>

                    <a :href="app.url">Go to App-Webpage</a>
                </v-flex>

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


    </div>

</template>

<script>
    import ServerService from '../services/Server'
    import UserService from '../services/User'
    import LoginComponent from '../components/Login'
    import AppsService from '../services/Apps'

    export default {
        data () {
            return {
                nameBig: '',
                nameSmall: '',
                username: '',
                password: '',
                errorMessage: '',
                app: null,
                disabledLoginButton: true,
                appId: null
            }
        },
        components: {
            'Login': LoginComponent
        },
        methods: {
            getAppData: function () {
                AppsService.getAppByKey(this.$route.query.client_id).then((res) => {
                    this.appId = res.data.data[0].id
                    AppsService.getAccess(res.data.data[0].id).then((access) => {
                        if(access.data.data.status == "allowed") {
                            if(res.data.data[0].properties.stopAutoRedirect) {
                                this.disabledLoginButton = false;
                                console.log("Disabled Auto redirect");
                            } else {
                                this.allowAccess();
                            }
                            console.log("ALLOWED");
                        } else {
                            this.disabledLoginButton = false;
                        }
                       console.log("Access Data", res.data);
                    });
                    console.log("App Data", res.data);
                    this.app = res.data.data[0];
                });
            },
            allowAccess: function () {
                console.log(this.$route.query);
                AppsService.allowAccess(this.appId, this.$route.query.redirect_uri, this.$route.query.scope).then((res) => {
                   console.log("App Access", res);
                   location.href=res.data.data.redirectUrl
                });
            }

        },
        mounted: function() {

            this.nameBig = this.$store.getters.getSettingValue("name_big");
            this.nameSmall = this.$store.getters.getSettingValue("name_small");
            this.getAppData();

        }
    }
</script>

<style>
    .header {
        background-image: url('~@/assets/texture-1485529_1920.jpg');
        background-repeat: no-repeat;
        margin-top: -100px;
        height: 30vh;
        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>
