upccrt/resources/js/components/credential.vue

<template>
<div class="bg-lightgray m-1 p-2 border rounded container-fluid">
    <modal :id="'credential'+this.data.credid+'editModal'" tabindex="-1" role="dialog" :aria-labelledby="'credential'+data.credid+'editModalLabel'">
        <h5 slot="header" class="modal-title" id="credentialeditModalLabel">
            Edit Credential
        </h5>
        <div slot="body">
            <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.lazy="data.creduser">
            </div>
            <div class="form-group">
                <label for="newpassword">Password</label>
                <input :ref="'newpassword'+data.credid" type="text" :name="'newpassword'+data.credid" :id="'newpassword'+data.credid" class="form-control credential" v-model.lazy="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>
    <div class="row no-gutters">
        <div class="h5 col-3 text-left">{{this.data.creddesc}}</div>
        <div class="col-9 text-right">{{this.data.creddate}}</div>
    </div>
    <div class="row">
        <div class="col-lg-9">
            <div>
                <label for="username"><i class="fas fa-fw fa-user"></i></label>
                <input type="text" v-bind:id="'username' + this.data.credid" class="border-0 credential" v-bind:value=this.data.creduser readonly/>
                <button v-bind:id="'btn-username' + this.data.credid" class="btn-clip btn btn-sm btn-primary rounded-pill" v-bind:data-clipboard-target="'#username' + this.data.credid">
                    <i class="far fa-clone"></i>
                </button>
            </div>
            <div>
                <label for="password"><i class="fas fa-fw fa-key"></i></label>
                <input type="text" v-bind:id="'password' + this.data.credid" class="border-0 credential" v-bind:value=this.data.credpass readonly/>
                <button v-bind:id="'btn-password' + this.data.credid" class="btn-clip btn btn-sm btn-primary rounded-pill" v-bind:data-clipboard-target="'#password' + this.data.credid">
                    <i class="far fa-clone"></i>
                </button>
            </div>
        </div>
        <div class="btn-group col-lg-2 align-self-end w-25 w-lg-auto" role="group" aria-label="Edit and Delete">
            <button type="button" class="btn btn-sm btn-secondary p-lg-1" data-toggle="modal" :data-target="'#credential'+this.data.credid+'editModal'"><i class="fas fa-fw fa-edit"></i></button>
            <button type="button" class="btn btn-sm btn-danger p-lg-1"><i class="fas fa-fw fa-trash-alt"></i></button>
        </div>
    </div>
</div>
</template>
<script>
export default {
    props: ['credential'],
    data() {
        return {
            data: JSON.parse(this.credential),
        }
    },
    mounted() {
        console.log(this.$refs);
        Echo.channel('credentials')
            .listen('CredentialUpdated', (e) => {
                // This part could potentially use a refactor.
                // Probably needs a credential list component to listen for this
                // even and update the corresponding credential. Currently every
                // credential on the page receives this event and checks whether it was intended
                // for its credential or not. I would imagine this could cause a problem
                // on the group page, which will potentially have a lot more credentials from
                // various assets. Better solution may be to have a credentials list component
                // That listens for credential update events and updates the appropriate credential.
                // There would still be multiples of those on the group credentials page, but an
                // order of magnitude less of those than of individual credentials.
                // It also may not be a big deal performance wise to do it like this, not sure.
                let eData = JSON.parse(e.data);
                if (this.data.credid === eData.credid) {
                    this.data = eData;
                }
            });
    },
    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.$refs['newpassword'+id].value = this.rndStr(16);
        },
        updateCredential() {
            this.data.credpass = this.$refs['newpassword'+this.data.credid].value;
            axios.put('/api/credentials/' + this.data.credid, this.data).then(response => {}).catch(error =>{console.error(error)});
            $('#credential'+this.data.credid+'editModal').modal('hide');
        }
    }
}
</script>