further tidy up

packages/builder/src/database/DatabaseRoot.svelte

@@ -14,6 +14,7 @@
     CreateEditViewModal,
     CreateDatabaseModal,
     DeleteRecordModal,
+    CreateUserModal
   } from "./ModelDataTable/modals"
 
   let selectedRecord
@@ -31,6 +32,7 @@
   $: viewOpen = $backendUiStore.visibleModal === "VIEW"
   $: databaseOpen = $backendUiStore.visibleModal === "DATABASE"
   $: deleteRecordOpen = $backendUiStore.visibleModal === "DELETE_RECORD"
+  $: userOpen = $backendUiStore.visibleModal === "USER"
   $: breadcrumbs = $store.currentNode
 </script>
 
@@ -50,6 +52,9 @@
   {#if deleteRecordOpen}
     <DeleteRecordModal record={selectedRecord} {onClosed} />
   {/if}
+  {#if userOpen}
+    <CreateUserModal {onClosed} />
+  {/if}
 </Modal>
 
 <div class="root">

packages/builder/src/database/ModelDataTable/modals/CreateEditField.svelte

@@ -1,23 +0,0 @@
-<script>
-  import Modal from "../../common/Modal.svelte"
-  import ActionButton from "../../common/ActionButton.svelte"
-  import * as api from "./api"
-
-  export let modalOpen = false
-
-  let recordInfo = {}
-
-  const onClosed = () => (modalOpen = false)
-</script>
-
-<Modal {onClosed} isOpen={modalOpen}>
-
-  <div class="actions">
-    <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
-    <ActionButton
-      disabled={false}
-      on:click={() => api.createNewRecord(recordInfo)}>
-      Save
-    </ActionButton>
-  </div>
-</Modal>

packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte

@@ -15,13 +15,28 @@
 
   $: currentAppInfo = {
     appname: $store.appname,
-    instanceId: $backendUiStore.selectedDatabase.id
+    instanceId: $backendUiStore.selectedDatabase.id,
   }
   $: recordFields = record ? Object.keys(record) : []
   $: models = $store.hierarchy.children
   $: modelFields = selectedModel
     ? selectedModel.fields.map(({ name }) => name)
     : []
+
+  async function saveRecord() {
+    const recordResponse = await api.saveRecord(
+      record || selectedModel,
+      currentAppInfo
+    )
+    backendUiStore.update(state => {
+      const idx = findIndex(state.selectedView.records, {
+        id: recordResponse.id,
+      })
+      state.selectedView.records.splice(idx, 1, recordResponse)
+      return state
+    })
+    onClosed()
+  }
 </script>
 
 <div>
@@ -66,17 +81,7 @@
     <footer>
       <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
       <ActionButton
-        on:click={async () => {
+        on:click={saveRecord}>
-          const recordResponse = await api.saveRecord(record || selectedModel, currentAppInfo)
-          backendUiStore.update(state => {
-            const idx = findIndex(state.selectedView.records, {
-              id: recordResponse.id
-            })
-            state.selectedView.records.splice(idx, 1, recordResponse)
-            return state
-          })
-          onClosed()
-        }}>
         Save
       </ActionButton>
     </footer>
@@ -92,4 +97,4 @@
     left: 0;
     background: #fafafa;
   }
-</style>
+</style>

packages/builder/src/database/ModelDataTable/modals/CreateEditView.svelte

@@ -1,12 +1,7 @@
 <script>
-  import Modal from "../../../common/Modal.svelte"
-  import ActionButton from "../../../common/ActionButton.svelte"
   import IndexView from "../../IndexView.svelte"
   import ActionsHeader from "../../ActionsHeader.svelte"
   import * as api from "../api"
-
-  let recordInfo = {}
-
 </script>
 
 <section>

packages/builder/src/database/ModelDataTable/modals/CreateUser.svelte

@@ -4,12 +4,10 @@
   import ActionButton from "../../../common/ActionButton.svelte"
   import * as api from "../api"
 
-  export let modalOpen = false
+  export let onClosed
 
   let userName
 
-  const onClosed = () => (modalOpen = false)
-
   async function createUser() {
     const response = await api.createUser($store.appname, userName)
     store.createUserForInstance(response)
@@ -17,11 +15,24 @@
   }
 </script>
 
-<Modal {onClosed} isOpen={modalOpen}>
+<section>
-  CREATE A NEW user FROM HERE
+  User Name
-  <input type="text" bind:value={userName} />
+  <input class="uk-input" type="text" bind:value={userName} />
-  <div class="actions">
+  <footer>
     <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
-    <ActionButton disabled={!userName} on:click={createUser}>Save</ActionButton>
+    <ActionButton disabled={!userName} on:click={createUser}>
-  </div>
+      Save
-</Modal>
+    </ActionButton>
+  </footer>
+</section>
+
+<style>
+  footer {
+    position: absolute;
+    padding: 20px;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background: #fafafa;
+  }
+</style>

packages/builder/src/database/ModelDataTable/modals/index.js

@@ -2,4 +2,5 @@ export { default as DeleteRecordModal } from "./DeleteRecord.svelte";
 export { default as CreateEditRecordModal } from "./CreateEditRecord.svelte";
 export { default as CreateEditModelModal } from "./CreateEditModel.svelte";
 export { default as CreateEditViewModal } from "./CreateEditView.svelte";
-export { default as CreateDatabaseModal } from "./CreateDatabase.svelte";
+export { default as CreateDatabaseModal } from "./CreateDatabase.svelte";
+export { default as CreateUserModal } from "./CreateUser.svelte";

packages/server/middleware/routers.js

@@ -237,7 +237,6 @@ module.exports = (config, app) => {
       } else {
         ctx.response.status = StatusCodes.UNAUTHORIZED
       }
-      next()
     })
     .post("/:appname/api/changeMyPassword", routeHandlers.changeMyPassword)
     .post(