PHP Classes

File: resources/js/components/Tool.vue

Recommend this page to a friend!
  Classes of Naif Alshaye  >  Laravel Nova PHP MySQL Manager  >  resources/js/components/Tool.vue  >  Download  
File: resources/js/components/Tool.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Laravel Nova PHP MySQL Manager
Web interface for MySQL server management
Author: By
Last change:
Date: 2 years ago
Size: 20,500 bytes
 

Contents

Class file image Download
<template>
    <div>
        <card class="flex flex-col items-center justify-center" style="min-height: 300px">
            <div align="center">
                <img src="https://www.mysql.com/common/logos/logo-mysql-170x115.png">
            </div>
            <hr style="margin-top:10px; margin-bottom: 10px;">

            <div style="margin-top: 20px; width: 500px;">
                <div style="color:#5D8BB9; font-size:18px; font-weight: bold; margin-bottom:10px;">Create New Database </div>
                <label class="inline-block" for="database_name">
                    <span style="color:#5D8BB9; font-size:16px; font-weight: bold;">New Database:</span>
                    <input v-model="database_name" type="text" id="database_name" class="w-full form-control form-input form-input-bordered">
                </label>
                <br><br>
                <button class="ml-auto btn btn-default btn-primary mr-3" @click="createDatabase()">Create Database</button>
            </div>


            <div align="left" style="margin-bottom: 20px; margin-top: 30px;">
                <div style="color:#5D8BB9; font-size:18px; font-weight: bold; margin-bottom:10px; text-align: left;">Current Databases</div>

                <table class="table" >
                    <tr>
                        <td style="height: 45px; font-size:14px; color:#5D8BB9; text-align: left; font-weight: bold; width: 20px !important;">Database</td>
                        <td style="height: 45px; font-size:14px; color:#5D8BB9; text-align: center; font-weight: bold;">Users</td>
                        <td style="height: 45px; font-size:14px; color:#5D8BB9; text-align: center; font-weight: bold; width:40px !important;">Repair</td>
                        <td style="height: 45px; font-size:14px; color:#5D8BB9; text-align: center; font-weight: bold; width:40px !important;">Delete</td>
                    </tr>
                    <tr v-for="database in this.databases">
                        <td style="height:45px; text-align: left;  width: 20px !important;">{{database.db}}</td>
                        <td style="text-align: center;">
                            <ul style="list-style: none;">
                                <li v-for="user in database.userlist">
                                    <div>
                                        <span style="font-size:20px; font-weight: bold; color:red; cursor: pointer;" v-on:click="revokeDatabaseUser(database.db, user.user)">x</span>  {{user.user}}
                                    </div>
                                </li>
                            </ul>
                        </td>
                        <td style="height:45px; text-align: center;"><button v-on:click="repairDB(database.db)" style=" color:#5D8BB9 !important; width:40px !important;">Repair</button></td>
                        <td style="height:45px; text-align: center;"><button v-on:click="deleteDB(database.db)" style=" color:#5D8BB9 !important; width:40px !important;">Delete</button></td>
                    </tr>
                </table>
            </div>

            <hr>

            <div style="margin-top:20px; margin-left:-60px; width:440px;">
                <div style="color:#5D8BB9; font-size:18px; font-weight: bold; margin-bottom:10px;">MySQL Users</div>
                <label class="inline-block" for="username">
                    <span style="color:#5D8BB9; font-size:16px; font-weight: bold;">Username:</span>
                    <input v-model="username" type="text" id="username" class="w-full form-control form-input form-input-bordered">
                </label>
                <br><br>
                <label class="inline-block" for="password">
                    <span style="color:#5D8BB9; font-size:16px; font-weight: bold;">Password:</span>
                    <input v-model="password" type="text" id="password" class="w-full form-control form-input form-input-bordered">
                </label>
                <br><br>
                <button class="ml-auto btn btn-default btn-primary mr-3" @click="addUser()">Create User</button>
            </div>

            <div align="left" style="margin-bottom: 10px; margin-top: 30px;">
                <div style="color:#5D8BB9; font-size:18px; font-weight: bold; margin-bottom:10px; text-align: left;">Current Users</div>

                <table class="table" width="500">
                    <tr>
                        <td style="height: 45px; font-size:14px; color:#5D8BB9; text-align: left; font-weight: bold;">User</td>
                        <td style="height: 45px; font-size:14px; color:#5D8BB9; text-align: center; font-weight: bold;">Change Password</td>
                        <td style="height: 45px; font-size:14px; color:#5D8BB9; text-align: center; font-weight: bold;">Delete</td>
                    </tr>
                    <tr v-for="dbuser in this.dbusers">
                        <td style="height:45px; text-align: left;">{{dbuser.user}}</td>
                        <td style="height:45px; text-align: center;"><button v-on:click="changePassword(dbuser.user)" style=" color:#5D8BB9 !important;">Change Password</button></td>
                        <td style="height:45px; text-align: center;"><button v-on:click="deleteUser(dbuser.user)" style=" color:#5D8BB9 !important;">Delete</button></td>
                    </tr>
                </table>
            </div>

            <hr style="margin-top:20px; margin-bottom: 10px;">

            <div style="margin-top:20px; margin-bottom: 30px; margin-left:-60px; width:430px;">
                <div style="color:#5D8BB9; font-size:18px; font-weight: bold; margin-bottom:10px;">Add User To Database</div>
                <label class="inline-block" for="addto_user">
                    <span style="color:#5D8BB9; font-size:16px; font-weight: bold;">User:</span><br>
                    <select v-model="addto_user" id="addto_user" class="w-full form-control form-input form-input-bordered" style="width:220px;">
                        <option value="" v-for="dbuser in this.dbusers">{{dbuser.user}}</option>
                    </select>

                </label>
                <br><br>
                <label class="inline-block" for="addto_database">
                    <span style="color:#5D8BB9; font-size:16px; font-weight: bold;">Database:</span><br>
                    <select v-model="addto_database" id="addto_database" class="w-full form-control form-input form-input-bordered" style="width:220px;">
                        <option value="" v-for="database in this.databases">{{database.db}}</option>
                    </select>
                </label>
                <br><br>
                <button class="ml-auto btn btn-default btn-primary mr-3" @click="addtoModal()">Add</button>
            </div>

            <sweet-modal ref="addto_modal">
                <div style="color:#5D8BB9; font-size:18px; font-weight: bold; text-align: left;">Select User Privileges</div>
                <div>
                    <table class="table">
                        <tr>
                            <td align="left"><input type="checkbox" value="ALTER" name="selected_privileges[]" /> ALTER</td>
                            <td align="left"><input type="checkbox" value="ALTER ROUTINE" name="selected_privileges[]" /> ALTER ROUTINE</td>
                        </tr>
                        <tr>
                            <td align="left"><input type="checkbox" value="CREATE" name="selected_privileges[]" /> CREATE</td>
                            <td align="left"><input type="checkbox" value="CREATE ROUTINE" name="selected_privileges[]" /> CREATE ROUTINE</td>
                        </tr>
                        <tr>
                            <td align="left"><input type="checkbox" value="CREATE TEMPORARY TABLES" name="selected_privileges[]" /> CREATE TEMPORARY TABLES</td>
                            <td align="left"><input type="checkbox" value="CREATE VIEW" name="selected_privileges[]" /> CREATE VIEW</td>
                        </tr>
                        <tr>
                            <td align="left"><input type="checkbox" value="DELETE" name="selected_privileges[]" /> DELETE</td>
                            <td align="left"><input type="checkbox" value="DROP" name="selected_privileges[]" /> DROP</td>
                        </tr>
                        <tr>
                            <td align="left"><input type="checkbox" value="EVENT" name="selected_privileges[]" /> EVENT</td>
                            <td align="left"><input type="checkbox" value="EXECUTE" name="selected_privileges[]" /> EXECUTE</td>
                        </tr>
                        <tr>
                            <td align="left"><input type="checkbox" value="INDEX" name="selected_privileges[]" /> INDEX</td>
                            <td align="left"><input type="checkbox" value="INSERT" name="selected_privileges[]" /> INSERT</td>
                        </tr>
                        <tr>
                            <td align="left"><input type="checkbox" value="LOCK TABLES" name="selected_privileges[]" /> LOCK TABLES</td>
                            <td align="left"><input type="checkbox" value="REFERENCES" name="selected_privileges[]" /> REFERENCES</td>
                        </tr>
                        <tr>
                            <td align="left"><input type="checkbox" value="SELECT" name="selected_privileges[]" /> SELECT</td>
                            <td align="left"><input type="checkbox" value="SHOW VIEW" name="selected_privileges[]" /> SHOW VIEW</td>
                        </tr>
                        <tr>
                            <td align="left"><input type="checkbox" value="TRIGGER" name="selected_privileges[]" /> TRIGGER</td>
                            <td align="left"><input type="checkbox" value="UPDATE" name="selected_privileges[]" /> UPDATE</td>
                        </tr>
                    </table>
                    <div align="center" style="margin-top:20px;">
                        <button class="ml-auto btn btn-default btn-primary mr-3" @click="addUserToDB()">Make Changes</button>
                    </div>
                </div>

            </sweet-modal>


            <sweet-modal ref="change_password">
                <div>
                    <div style="color:#5D8BB9; font-size:18px; font-weight: bold; text-align: left;">Set MySQL User Password</div>
                    <div align="left" style="color:#5D8BB9; font-size:16px; font-weight: bold; text-align: left; margin-top:20px;">Username:</div>
                    <div align="left">{{this.username}}</div>

                    <div align="left" style="margin-top:20px; margin-bottom:20px;">
                        <label class="inline-block" for="change_password_pass">
                            <span style="color:#5D8BB9; font-size:16px; font-weight: bold;">Password</span>
                            <input v-model="change_password_pass" type="text" id="change_password_pass" class="w-full form-control form-input form-input-bordered">
                        </label>
                        <br><br>
                        <label class="inline-block" for="change_password_again">
                            <span style="color:#5D8BB9; font-size:16px; font-weight: bold;">Password (Again)</span>
                            <input v-model="change_password_again" type="text" id="change_password_again" class="w-full form-control form-input form-input-bordered">
                        </label>
                    </div>
                    <button class="ml-auto btn btn-default btn-primary mr-3" @click="changePass()">Change Password</button>

                </div>
            </sweet-modal>

            <sweet-modal icon="success" ref="success_modal">
                {{this.success_msg}}
            </sweet-modal>

            <sweet-modal icon="error" ref="error_modal">
                {{this.error_msg}}
            </sweet-modal>

        </card>
    </div>
</template>

<script>
    import { SweetModal, SweetModalTab } from 'sweet-modal-vue'

    export default {

        components: {
            SweetModal,
            SweetModalTab,
        },

        data() {
            return {
                databases: [],
                dbusers: [],
                success_msg: '',
                error_msg: '',
                username: '',
            }
        },
        mounted() {
            this.init();

        },
        methods: {
            init(){
                //get databases
                Nova.request().get('/nova-vendor/nova-mysql/get_databases')
                    .then(response => {
                    this.databases = response.data.databases;
            })
            .catch(response => {
                    this.error('Failed to get databases')
            });

                //get users
                Nova.request().get('/nova-vendor/nova-mysql/get_users')
                    .then(response => {
                    this.dbusers = response.data.dbusers;
            })
            .catch(response => {
                    this.error('Failed to get users')
            });

            },
            createDatabase(){
                var db_name = document.getElementById('database_name').value;
                Nova.request().post('/nova-vendor/nova-mysql/create_database', {
                    name: db_name
                }).then(response => {
                    if (response.data.error){
                    this.error(response.data.error)
                } else{
                    this.success(response.data.success);
                    this.init();
                }
            })
            .catch(response => {
                    this.error('Failed to create database');
            });
            },
            deleteDB(database){
                if (confirm("Are you sure you want to delete this database? All data will be wiped!")){
                    Nova.request().post('/nova-vendor/nova-mysql/delete_database', {
                        name: database
                    }).then(response => {
                        if (response.data.error){
                        this.error(response.data.error)
                    } else{
                        this.success(response.data.success);
                        this.init();
                    }
                })
                .catch(response => {
                        this.error('Failed to delete database');
                });
                }
            },
            repairDB(database){
                if (confirm("Are you sure you want to repair this database?")){
                    Nova.request().post('/nova-vendor/nova-mysql/repair_database', {
                        name: database
                    }).then(response => {
                        if (response.data.error){
                        this.error(response.data.error)
                    } else{
                        this.success(response.data.success);
                        this.init();
                    }
                })
                .catch(response => {
                        this.error('Failed to delete database');
                });
                }
            },
            addUser(){
                var username = document.getElementById('username').value;
                var password = document.getElementById('password').value;
                Nova.request().post('/nova-vendor/nova-mysql/add_user', {
                    username: username,
                    password: password,
                }).then(response => {
                    if (response.data.error){
                    this.error(response.data.error)
                } else{
                    this.success(response.data.success);
                    this.init();
                }
            })
            .catch(response => {
                    this.error('Failed to create user')

            });
            },
            deleteUser(username){
                if (confirm("Are you sure you want to delete this user?")){
                    Nova.request().post('/nova-vendor/nova-mysql/delete_user', {
                        username: username
                    }).then(response => {
                        if (response.data.error){
                        this.error(response.data.error)
                    } else{
                        this.success(response.data.success);
                        this.init();
                    }
                })
                .catch(response => {
                        this.error('Failed to create user')

                });
                }
            },
            addUserToDB(){
                var selected_privileges = [];
                var checkboxes = document.getElementsByName('selected_privileges[]');
                for (var i=0, n=checkboxes.length;i<n;i++) {
                    if (checkboxes[i].checked) {
                        selected_privileges.push(checkboxes[i].value);
                    }
                }
                var addto_user = document.getElementById('addto_user');
                var addto_user = addto_user.options[addto_user.selectedIndex].text;
                var addto_database = document.getElementById('addto_database');
                var addto_database = addto_database.options[addto_database.selectedIndex].text;

                Nova.request().post('/nova-vendor/nova-mysql/add_user_to_database', {
                    user: addto_user,
                    database: addto_database,
                    privileges: selected_privileges,
                }).then(response => {
                    if (response.data.error){
                    this.error(response.data.error)
                } else{
                    this.success(response.data.success);
                    this.init();
                }
            })
            .catch(response => {
                    this.error('Failed to add user to database')
            });
            },
            revokeDatabaseUser(database, user){
                if (confirm("Are you sure you want to revoke access from this user from this database?")){
                    Nova.request().post('/nova-vendor/nova-mysql/revoke_database_user', {
                        user: user,
                        database: database
                    }).then(response => {
                        if (response.data.error){
                        this.error(response.data.error)
                    } else{
                        this.success(response.data.success);
                        this.init();
                    }
                })
                .catch(response => {
                        this.error('Failed to revoke user from this database')

                });
                }
            },
            changePass(){
                var username = this.username;
                var change_password_pass = document.getElementById('change_password_pass').value;
                var change_password_again = document.getElementById('change_password_again').value;
                if (change_password_pass != change_password_again){
                    this.error('Password confirmation does not match!');
                } else{
                    Nova.request().post('/nova-vendor/nova-mysql/change_password', {
                        user: username,
                        password: change_password_pass
                    }).then(response => {
                        if (response.data.error){
                        this.error(response.data.error)
                    } else{
                        this.success(response.data.success);
                        this.init();
                    }
                })
                .catch(response => {
                        this.error('Failed to change password!')

                });
                }
            },
            addtoModal(){
                this.$refs.addto_modal.open('tab1')
            },
            changePassword(user){
                this.username = user;
                this.$refs.change_password.open('tab1');
            },
            success(msg){
                this.success_msg = msg;
                this.$refs.success_modal.open('tab1')
            },
            error(msg){
                this.error_msg = msg;
                this.$refs.error_modal.open('tab1');
            },
        }
    }
</script>

For more information send a message to info at phpclasses dot org.