upccrt/resources/js/components/credential-form-modal.vue

<template>
    <modal :id="id" tabindex="-1" role="dialog" :aria-labelledby="id+'Label'">
        <h5 slot="header" class="modal-title" :id="id+'Label'">
            Edit Credential
        </h5>
        <div slot="body">
            <div class="form">
                <autocomplete-custom-dropdown :options="descriptions" :value="creddesc" v-model="creddesc" :allow-custom="true"></autocomplete-custom-dropdown>
            </div>
            <div class="form-group">
                <label for="newusername">Username</label>
                <input type="text" :name="'newusername'+data.credid" :id="'newusername'+data.credid" class="form-control credential" v-model="data.creduser">
            </div>
            <div class="form-group">
                <label for="newpassword">Password</label>
                <input type="text" :name="'newpassword'+data.credid" :id="'newpassword'+data.credid" class="form-control credential" v-model="data.credpass">
                <button type="button" class="btn btn-secondary" @click="getRandomPassword(data.credid)">Generate Random</button>
            </div>
            <div class="form-group"></div>
        </div>
        <div slot="footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" @click="updateCredential()">Save</button>
        </div>
    </modal>
</template>
<script>
export default {
    props: {
        populateWith: {
            type: Object,
            default () {
                return {
                    creddesc: null,
                    creduser: null,
                    credpass: null,
                    groupid: null,
                    pcid: null,
                    credtype: null,
                }
            }
        },
        modalId: {
            type: String,
            required: true
        },
        descriptions: {
            type: Object,
            required: true
        },
        create: {
            type: Boolean
        },
        pcid: {
            type: Number
        },
        groupid: {
            type: Number
        }
    },
    data() {
        return {
            data: JSON.parse(JSON.stringify(this.populateWith)),
            creddesc: {},
            id: this.modalId,
            errors: []
        }
    },
    mounted () {
        this.creddesc = {
            'id': this.data.credtype,
            'name': this.data.creddesc
        }
    },
    methods: {
        rndStr(len) {
            let text = ""
            let chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%"
        
            for( let i=0; i < len; i++ ) {
                text += chars.charAt(Math.floor(Math.random() * chars.length))
            }
            return text
        },
        getRandomPassword(id) {
            this.data.credpass = this.rndStr(16);
        },
        updateCredential() {
            if (this.creddesc.id === "custom") {
                this.data.credtype = 1
                this.data.creddesc = this.creddesc.name
            }
            else {
                this.data.credtype = this.creddesc.id
                this.data.creddesc = this.creddesc.name
            }

            if (this.create) {
                if(this.pcid) {
                    this.data.pcid = this.pcid
                }
                if(this.groupid) {
                    this.data.groupid = this.groupid
                }
                axios.post('/api/credentials/', this.data)
                    .then(response => {
                        $('#'+this.id).modal('hide');
                    })
            } else {
                axios.put('/api/credentials/' + this.data.credid, this.data)
                    .then(response => {
                        $('#'+this.id).modal('hide');
                    }).catch(error =>{console.error(error)});
            }
        }
    }
    
}
</script>