<template>
    <div>
        <b-card >
            <template slot="header">
                <h6 class="mb-0 left">Users and administrators</h6>
                <b-btn class="right btn-ssm ml-3" v-b-toggle="'collapse'" variant="success" size="sm"> Add new User </b-btn>
                <b-btn class="right btn-ssm" variant="primary" @click="loadUsers" size="sm"> Reaload list of Users </b-btn>
            </template>
        
        <!-- element to collapse -->
        <b-collapse id="collapse" v-model="showNewForm">
            <b-card>
           <b-form >

                    <b-form-group id="usernamegr"
                                label="Username "
                                label-for="usernameinput"
                                description="This string youll have to youse when you log-in.">
                        <b-form-input id="usernameinput"
                                    type="text"
                                    v-model="newUser.username"
                                    required
                                    placeholder="Enter username">
                        </b-form-input>
                    </b-form-group>
                    
                    <template v-if="newUser.type==`basic`">
                        <b-form-group id="passwordinputgr"
                                    label="Set up password."
                                    label-for="passwordinput"
                                    description="We do not care policies, its your bussiness.">
                            <b-form-input id="passwordinput"
                                        type="password"
                                        v-model="newUser.password"
                                        required
                                        placeholder="Enter password">
                            </b-form-input>
                        </b-form-group>

                        <b-form-group id="passwordinput2gr"
                                    label="Verify desired password."
                                    label-for="passwordinput2"
                                    description="Must match previous version :]">
                            <b-form-input id="passwordinput2"
                                        type="password"
                                        v-model="newUser.password2"
                                        required
                                        placeholder="Enter password again">
                            </b-form-input>
                        </b-form-group>
                    </template>
                    <template v-else>
                        <b-form-group id="domaingr"
                                label="Domain "
                                label-for="domaininput"
                                description="This domain we search this account under.">
                        <b-form-input id="domaininput"
                                    type="text"
                                    v-model="newUser.domain"
                                    required
                                    placeholder="Enter domain without backslash.">
                        </b-form-input>
                    </b-form-group>
                    </template>
                      <b-form-group id="displaynamegr"
                                label="Diaplay name "
                                label-for="displayname"
                                description="How we shlould welcome this guy ?">
                            <b-form-input id="displayname"
                                    type="text"
                                    v-model="newUser.displayname"
                                    required
                                    placeholder="Just whatever you wish.">
                            </b-form-input>
                      </b-form-group>
                      <b-form-group>
                        <b-form-checkbox class="mt-3" v-model="newUser.admin">Grant admin priviledges.</b-form-checkbox><br>
                        <b-form-checkbox class="mb-3" v-model="newUser.active">Activate account immediately.</b-form-checkbox>
                        </b-form-group>
                    <b-button variant="primary" @click="onNewUserSubmit">Submit</b-button>
                    <b-button variant="danger" @click="onNewUserReset">Cancel</b-button>
                </b-form>
            </b-card>
        </b-collapse>

            <b-table responsive striped hover :items="users" :fields="usersfields" :sort-by.sync="usersSortBy" :sort-desc.sync="usersSortDesc" :small="true">
                
                <template slot="actions" slot-scope="row">
                        <b-btn pill variant="danger" size="sm" class="btn-ssm" @click.stop="userDelete(row.item.id)">delete</b-btn>
                        <b-btn pill variant="primary" size="sm" class="btn-ssm" @click.stop="row.toggleDetails">edit</b-btn>
                </template>

                <template slot="row-details" slot-scope="row">
                    <b-card>
                        <b-form >

                                <b-form-group id="usernamegr"
                                            label="Username "
                                            label-for="usernameinput"
                                            description="This string youll have to youse when you log-in.">
                                    <b-form-input id="usernameinput"
                                                type="text"
                                                v-model="row.item.username"
                                                required
                                                placeholder="Enter username">
                                    </b-form-input>
                                </b-form-group>
                                
                                <template v-if="newUser.type==`basic`">
                                    <b-form-group id="passwordinputgr"
                                                label="Set up password."
                                                label-for="passwordinput"
                                                description="We do not care about policies, its your bussiness.">
                                        <b-form-input id="passwordinput"
                                                    type="password"
                                                    v-model="row.item.password"
                                                    required
                                                    placeholder="Enter password">
                                        </b-form-input>
                                    </b-form-group>

                                    <b-form-group id="passwordinput2gr"
                                                label="Verify desired password."
                                                label-for="passwordinput2"
                                                description="Must match previous version :]">
                                        <b-form-input id="passwordinput2"
                                                    type="password"
                                                    v-model="row.item.password2"
                                                    required
                                                    placeholder="Enter password again">
                                        </b-form-input>
                                    </b-form-group>
                                </template>
                                <template v-else>
                                    <b-form-group id="domaingr"
                                            label="Domain "
                                            label-for="domaininput"
                                            description="This domain we search this account under.">
                                    <b-form-input id="domaininput"
                                                type="text"
                                                v-model="row.item.domain"
                                                required
                                                placeholder="Enter domain without backslash.">
                                    </b-form-input>
                                </b-form-group>
                                </template>
                                <b-form-group id="displaynamegr"
                                            label="Diaplay name "
                                            label-for="displayname"
                                            description="How we shlould welcome this guy ?">
                                        <b-form-input id="displayname"
                                                type="text"
                                                v-model="row.item.displayname"
                                                required
                                                placeholder="Just whatever you wish.">
                                        </b-form-input>
                                </b-form-group>
                                <b-form-group>
                                    <b-form-checkbox class="mt-3" v-model="row.item.admin">Grant admin priviledges.</b-form-checkbox><br>
                                    <b-form-checkbox class="mb-3" v-model="row.item.active">Activate account immediately.</b-form-checkbox>
                                    </b-form-group>
                                <b-button variant="primary" @click="onEditSubmit(row)">Submit edit</b-button>
                                <b-button variant="danger" @click="row.toggleDetails">Cancel</b-button>
                            </b-form>
                    </b-card>
                </template>
            </b-table>
        </b-card>
    </div>
</template>

<script>
module.exports = {
    data: function()
        { 
            return {
                users:[],
                usersfields:[
                    {   key: "username",    sortable: true, label: "Username"},
                    {   key: "type",        sortable: true, label: "Auth type"},
                    {   key: "domain",     sortable: true, label: "Domain (if NTLM account)"},
                    {   key: "displayname",     sortable: true, label: "Display name"},
                    {   key: "admin",     sortable: true, label: "Admin rights"},
                    {   key: "active",     sortable: true, label: "Active account"},
                    {   key: "actions",     sortable: false, label: "Actions"}
                          ],
                newUser:{
                        username:"",
                        type:"basic",
                        password:"",
                        password2:"",
                        domain:"",
                        active:true,
                        admin:false,
                        displayname:""     
                        },
                typeOptions:[
                            {value:"basic",text:"Basic authentication"},
                            {value:"ntlm",text:"NTLM authentication with ldap verification"}
                                    ],
                showNewForm: false,
                usersSortBy:"username",
                usersSortDesc:false
                }
        },
    created:function()
        { 
            this.loadUsers();
        },
    methods:
    {
        onEditSubmit:function(row)
        {
            data=row.item;
            if(data.password!=data.password2)
            {
                alert("Both passwords must match");
            }
            else
            {
               
             var vm = this
                axios.put(apiPath+"admin/users/"+data.id,JSON.stringify(data))
                 .then(function (response) {
                    if(response.data.data !==null)
                    {  
                        if(response.data.data)
                            row.toggleDetails();
                    }
                    })
                    .catch(function (error) {
                        console.log(error);
                        //vm.messages.push('Could not reach the API. ' + error);
                    })
            }
        },
        userDelete:function(u)
        {
            var vm = this
                axios.delete(apiPath+"admin/users/"+u)
                 .then(function (response) {
                    if(response.data.data !==null)
                    {  
                        //console.log(response.data.data);
                       vm.loadUsers();
                    }
                    })
                    .catch(function (error) {
                        console.log(error);
                        //vm.messages.push('Could not reach the API. ' + error);
                    })
        },
        onNewUserReset:function()
        {
            this.newUser={
                        username:"",
                        type:"basic",
                        password:"",
                        password2:"",
                        domain:"",
                        active:true,
                        admin:false,
                        displayname:""     
                        }
            this.showNewForm=false;
        },
        onNewUserSubmit:function(){
            if(this.newUser.password!=this.newUser.password2)
            {
                alert("Both passwords must match");
            }
            else
            {
                this.postNewUser();
            }
        },
        loadUsers:function()
        {
            var vm = this
                axios.get(apiPath+"admin/users")
                 .then(function (response) {
                    if(response.data.data !==null)
                    {  //console.log(response.data.data);
                        vm.users=response.data.data;
                    }
                    })
                    .catch(function (error) {
                        console.log(error);
                        //vm.messages.push('Could not reach the API. ' + error);
                    })
        },
        postNewUser:function()
        {
            var vm = this
                axios.post(apiPath+"admin/users","newUser="+JSON.stringify(this.newUser))
                 .then(function (response) {
                    if(response.data.data !==null)
                    {  
                        vm.loadUsers();
                        vm.onNewUserReset();
                    }
                    })
                    .catch(function (error) {
                        console.log(error);
                        //vm.messages.push('Could not reach the API. ' + error);
                    })
        }
    }
    
}
</script>