Fix the logic on database modals

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

@@ -1,10 +1,11 @@
 <template>
-    <div>
+    <Modal :isVisible="isVisible" :dismissable="!showSpinner" v-on:close="closeModal">
         <MessageBox class="alert error mb-6" :message="errorMessage" v-show="errorMessage.length"/>
         <h2 class="font-medium text-neutral-900 mb-6">Create a new database</h2>
         <div class="mb-6">
             <label class="input-label" for="grid-database-name">Database name</label>
-            <input id="grid-database-name" type="text" class="input" name="database_name" required
+            <input
+                id="grid-database-name" type="text" class="input" name="database_name" required
                 v-model="database"
                 v-validate="{ alpha_dash: true, max: 100 }"
                 :class="{ error: errors.has('database_name') }"
@@ -13,7 +14,8 @@
         </div>
         <div class="mb-6">
             <label class="input-label" for="grid-database-remote">Allow connections from</label>
-            <input id="grid-database-remote" type="text" class="input" name="remote" required
+            <input
+                id="grid-database-remote" type="text" class="input" name="remote" required
                 v-model="remote"
                 v-validate="{ regex: /^[0-9%.]{1,15}$/ }"
                 :class="{ error: errors.has('remote') }"
@@ -21,8 +23,9 @@
             <p class="input-help error" v-show="errors.has('remote')">{{ errors.first('remote') }}</p>
         </div>
         <div class="text-right">
-            <button class="btn btn-secondary btn-sm mr-2" v-on:click.once="$emit('close')">Cancel</button>
+            <button class="btn btn-secondary btn-sm mr-2" v-on:click.once="closeModal">Cancel</button>
-            <button class="btn btn-primary btn-sm"
+            <button
+                class="btn btn-primary btn-sm"
                 :disabled="errors.any() || !canSubmit || showSpinner"
                 v-on:click="submit"
             >
@@ -32,17 +35,22 @@
                 </span>
             </button>
         </div>
-    </div>
+    </Modal>
 </template>
 
 <script lang="ts">
     import Vue from 'vue';
     import MessageBox from "@/components/MessageBox.vue";
     import {createDatabase} from "@/api/server/createDatabase";
+    import Modal from "@/components/core/Modal.vue";
 
     export default Vue.extend({
         name: 'CreateDatabaseModal',
-        components: {MessageBox},
+        components: {Modal, MessageBox},
+
+        props: {
+            isVisible: { type: Boolean, default: false },
+        },
 
         data: function () {
             return {
@@ -83,6 +91,14 @@
                         this.loading = false;
                         this.showSpinner = false;
                     });
+            },
+
+            /**
+             * Closes the modal and resets the entry field.
+             */
+            closeModal: function () {
+                this.showSpinner = false;
+                this.$emit('close');
             }
         },
     });

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

@@ -33,7 +33,7 @@
         </div>
         <DeleteDatabaseModal
             :database="database"
-                :show="showDeleteModal"
+            :isVisible="showDeleteModal"
             v-on:close="showDeleteModal = false"
         />
     </div>

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

@@ -1,7 +1,5 @@
 <template>
-    <Modal v-on:close="closeModal" :show="show" :dismissable="!showSpinner">
+    <Modal v-on:close="closeModal" :isVisible="isVisible" :dismissable="!showSpinner">
-        <transition name="modal">
-            <div>
         <h2 class="font-medium text-neutral-900 mb-6">Delete this database?</h2>
         <p class="text-neutral-900 text-sm">This action
             <strong>cannot</strong> be undone. This will permanetly delete the
@@ -19,8 +17,6 @@
                 </span>
             </button>
         </div>
-            </div>
-        </transition>
     </Modal>
 </template>
 
@@ -33,14 +29,8 @@
         name: 'DeleteDatabaseModal',
         components: {Modal},
         props: {
-            show: {
+            isVisible: {type: Boolean, default: false },
-                type: Boolean,
+            database: { type: Object as () => ServerDatabase, required: true },
-                default: false,
-            },
-            database: {
-                type: Object as () => ServerDatabase,
-                required: true
-            },
         },
 
         data: function () {

resources/assets/scripts/components/server/components/filemanager/modals/CreateFolderModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <Modal :isVisible="visible" v-on:close="onModalClose" :showCloseIcon="false" :dismissable="!isLoading">
+    <Modal :isVisible="visible" v-on:close="onModalClose" :isVisibleCloseIcon="false" :dismissable="!isLoading">
         <div>
             <label class="input-label">
                 Directory Name

resources/assets/scripts/components/server/components/filemanager/modals/RenameModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <Modal :isVisible="isVisible" v-on:close="closeModal" :showCloseIcon="false" :dismissable="!isLoading">
+    <Modal :isVisible="isVisible" v-on:close="closeModal" :isVisibleCloseIcon="false" :dismissable="!isLoading">
         <MessageBox
                 class="alert error mb-8"
                 title="Error"

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

@@ -18,13 +18,11 @@
             <div>
                 <button class="btn btn-primary btn-lg" v-on:click="showCreateModal = true">Create new database</button>
             </div>
-            <Modal :isVisible="showCreateModal" v-on:close="showCreateModal = false">
             <CreateDatabaseModal
-                        v-on:close="showCreateModal = false"
+                :isVisible="showCreateModal"
                 v-on:database="handleModalCallback"
-                        v-if="showCreateModal"
+                v-on:close="showCreateModal = false"
             />
-            </modal>
         </div>
     </div>
 </template>
@@ -32,7 +30,6 @@
 <script lang="ts">
     import Vue from 'vue';
     import {filter, map} from 'lodash';
-    import Modal from '@/components/core/Modal.vue';
     import CreateDatabaseModal from './../components/database/CreateDatabaseModal.vue';
     import Icon from "@/components/core/Icon.vue";
     import {ServerDatabase} from "@/api/server/types";
@@ -46,7 +43,7 @@
 
     export default Vue.extend({
         name: 'ServerDatabases',
-        components: {DatabaseRow, CreateDatabaseModal, Modal, Icon},
+        components: {DatabaseRow, CreateDatabaseModal, Icon},
 
         data: function (): DataStructure {
             return {