Better handling when deleting a database

app/Http/Controllers/Api/Client/Servers/DatabaseController.php

@@ -4,6 +4,7 @@ namespace Pterodactyl\Http\Controllers\Api\Client\Servers;
 
 use Illuminate\Http\Response;
 use Pterodactyl\Models\Server;
+use Pterodactyl\Models\Database;
 use Pterodactyl\Transformers\Api\Client\DatabaseTransformer;
 use Pterodactyl\Services\Databases\DatabaseManagementService;
 use Pterodactyl\Services\Databases\DeployServerDatabaseService;
@@ -88,7 +89,8 @@ class DatabaseController extends ClientApiController
      */
     public function delete(DeleteDatabaseRequest $request): Response
     {
+        $this->managementService->delete($request->getModel(Database::class)->id);
+
         return Response::create('', Response::HTTP_NO_CONTENT);
-//        $this->managementService->delete($request->input('database'));
     }
 }

resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script>
-    import MessageBox from '../../MessageBox';
+    import MessageBox from '../../../MessageBox';
     import get from 'lodash/get';
 
     export default {

resources/assets/scripts/components/server/components/database/DatabaseRow.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="content-box mb-6 hover:border-grey">
+        <div class="flex items-center text-grey-darker">
+            <database-icon class="flex-none text-green"></database-icon>
+            <div class="flex-1 px-4">
+                <p class="uppercase text-xs text-grey pb-1 select-none">Database Name</p>
+                <p>{{database.name}}</p>
+            </div>
+            <div class="flex-1 px-4">
+                <p class="uppercase text-xs text-grey pb-1 select-none">Username</p>
+                <p>{{database.username}}</p>
+            </div>
+            <div class="flex-1 px-4">
+                <p class="uppercase text-xs text-grey pb-1 select-none">Password</p>
+                <p>
+                    <code class="text-sm cursor-pointer" v-on:click="revealPassword">
+                        <span class="select-none" v-if="!database.showPassword">
+                            <lock-icon class="h-3"/> &bull;&bull;&bull;&bull;&bull;&bull;
+                        </span>
+                        <span v-else>{{database.password}}</span>
+                    </code>
+                </p>
+            </div>
+            <div class="flex-1 px-4">
+                <p class="uppercase text-xs text-grey pb-1 select-none">Server</p>
+                <p><code class="text-sm">{{database.host.address}}:{{database.host.port}}</code></p>
+            </div>
+            <div class="flex-none px-4">
+                <button class="btn btn-xs btn-secondary btn-red" v-on:click="showDeleteModal = true">
+                    <trash2-icon class="w-3 h-3 mx-1"/>
+                </button>
+            </div>
+        </div>
+        <modal :show="showDeleteModal" v-on:close="showDeleteModal = false">
+            <delete-database-modal
+                    :database="database"
+                    v-on:close="showDeleteModal = false"
+                    v-if="showDeleteModal"
+            />
+        </modal>
+    </div>
+</template>
+
+<script>
+    import { LockIcon, Trash2Icon, DatabaseIcon } from 'vue-feather-icons';
+    import Modal from '../../../core/Modal';
+    import DeleteDatabaseModal from './DeleteDatabaseModal';
+
+    export default {
+        name: 'database-row',
+        components: {DeleteDatabaseModal, Modal, LockIcon, Trash2Icon, DatabaseIcon},
+        props: {
+            database: {type: Object, required: true}
+        },
+
+        data: function () {
+            return {
+                showDeleteModal: false,
+            };
+        },
+
+        methods: {
+            revealPassword: function () {
+                this.database.showPassword = !this.database.showPassword;
+            },
+        },
+    };
+</script>

resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue

@@ -0,0 +1,81 @@
+<template>
+    <div>
+        <h2 class="font-medium text-grey-darkest mb-6">Delete this database?</h2>
+        <p class="text-grey-darkest text-sm">This action <strong>cannot</strong> be undone. This will permanetly delete the <strong>{{database.name}}</strong> database and remove all associated data.</p>
+        <div class="mt-6">
+            <label class="input-label">Confirm database name</label>
+            <input type="text" class="input" v-model="nameConfirmation"/>
+        </div>
+        <div class="mt-6 text-right">
+            <button class="btn btn-sm btn-secondary mr-2" v-on:click="$emit('close')">Cancel</button>
+            <button class="btn btn-sm btn-red" :disabled="disabled" v-on:click="deleteDatabase">
+                <span class="spinner white" v-bind:class="{ hidden: !showSpinner }">&nbsp;</span>
+                <span :class="{ hidden: showSpinner }">
+                    Confirm Deletion
+                </span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'delete-database-modal',
+        props: {
+            database: { type: Object, required: true },
+        },
+
+        data: function () {
+            return {
+                showSpinner: false,
+                nameConfirmation: '',
+            };
+        },
+
+        computed: {
+            /**
+             * Determine if the 'Delete' button should be enabled or not. This requires the user
+             * to enter the database name before actually deleting the DB.
+             */
+            disabled: function () {
+                return (
+                    this.nameConfirmation !== this.database.name
+                    && this.nameConfirmation !== this.database.name.split('_', 2)[1]
+                );
+            }
+        },
+
+        methods: {
+            /**
+             * Handle deleting the database for the server instance.
+             */
+            deleteDatabase: function () {
+                this.nameConfirmation = '';
+                this.showSpinner = true;
+
+                window.axios.delete(this.route('api.client.servers.databases.delete', {
+                    server: this.$route.params.id,
+                    database: this.database.id,
+                }))
+                    .then(() => {
+                        window.events.$emit('server:deleted-database', this.database.id);
+                    })
+                    .catch(err => {
+                        this.clearFlashes();
+                        console.error({ err });
+
+                        const response = err.response;
+                        if (response.data && typeof response.data.errors === 'object') {
+                            response.data.errors.forEach((error) => {
+                                this.error(error.detail);
+                            });
+                        }
+                    })
+                    .then(() => {
+                        this.$emit('close');
+                    })
+            },
+        }
+    };
+</script>
+

resources/assets/scripts/components/server/subpages/Databases.vue

@@ -12,39 +12,7 @@
             </div>
         </div>
         <div v-else>
-            <div class="content-box mb-6 hover:border-grey" v-for="database in databases" :key="database.name">
+            <database-row v-for="database in databases" :database="database" :key="database.name"/>
-                <div class="flex items-center text-grey-darker">
-                    <database-icon class="flex-none text-green"></database-icon>
-                    <div class="flex-1 px-4">
-                        <p class="uppercase text-xs text-grey pb-1 select-none">Database Name</p>
-                        <p>{{database.name}}</p>
-                    </div>
-                    <div class="flex-1 px-4">
-                        <p class="uppercase text-xs text-grey pb-1 select-none">Username</p>
-                        <p>{{database.username}}</p>
-                    </div>
-                    <div class="flex-1 px-4">
-                        <p class="uppercase text-xs text-grey pb-1 select-none">Password</p>
-                        <p>
-                            <code class="text-sm cursor-pointer" v-on:click="revealPassword(database)">
-                                <span class="select-none" v-if="!database.showPassword">
-                                    <lock-icon class="h-3"/> &bull;&bull;&bull;&bull;&bull;&bull;
-                                </span>
-                                <span v-else>{{database.password}}</span>
-                            </code>
-                        </p>
-                    </div>
-                    <div class="flex-1 px-4">
-                        <p class="uppercase text-xs text-grey pb-1 select-none">Server</p>
-                        <p><code class="text-sm">{{database.host.address}}:{{database.host.port}}</code></p>
-                    </div>
-                    <div class="flex-none px-4">
-                        <button class="btn btn-xs btn-secondary btn-red" v-on:click="deleteDatabase(database)">
-                            <trash2-icon class="w-3 h-3 mx-1"/>
-                        </button>
-                    </div>
-                </div>
-            </div>
         </div>
         <div>
             <button class="btn btn-blue btn-lg" v-on:click="showCreateModal = true">Create new database</button>
@@ -62,12 +30,14 @@
 <script>
     import { DatabaseIcon, LockIcon, Trash2Icon } from 'vue-feather-icons';
     import map from 'lodash/map';
+    import filter from 'lodash/filter';
     import Modal from '../../core/Modal';
-    import CreateDatabaseModal from '../components/CreateDatabaseModal';
+    import CreateDatabaseModal from '../components/database/CreateDatabaseModal';
+    import DatabaseRow from '../components/database/DatabaseRow';
 
     export default {
         name: 'databases-page',
-        components: {CreateDatabaseModal, Modal, DatabaseIcon, LockIcon, Trash2Icon },
+        components: {DatabaseRow, CreateDatabaseModal, Modal, DatabaseIcon, LockIcon, Trash2Icon },
 
         data: function () {
             return {
@@ -79,6 +49,8 @@
 
         mounted: function () {
             this.getDatabases();
+
+            window.events.$on('server:deleted-database', this.removeDatabase);
         },
 
         methods: {
@@ -130,26 +102,15 @@
             },
 
             /**
-             * Show the password for a given database object.
+             * Handle event that is removing a database.
              *
-             * @param {Object} database
+             * @param databaseId
              */
-            revealPassword: function (database) {
+            removeDatabase: function (databaseId) {
-                this.databases.forEach((d) => {
+                this.databases = filter(this.databases, (database) => {
-                    d.showPassword = d === database ? d.showPassword : false;
+                    return database.id !== databaseId;
                 });
-
+            }
-                database.showPassword = !database.showPassword;
-            },
-
-            deleteDatabase: function (database) {
-                window.axios.delete(this.route('api.client.servers.databases.delete', {
-                    server: this.$route.params.id,
-                    database: database.id,
-                }))
-                    .then(response => console.log(response))
-                    .catch(err => console.error(err.response));
-            },
         }
     };
 </script>