From 85289889f47b4f6063a34de1a0a83f007f89b387 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 6 Apr 2020 15:53:32 +0200
Subject: [PATCH] convert createuser component to use new modal

---
 .../modals/CreateDatabase.svelte              |  1 +
 .../ModelDataTable/modals/CreateUser.svelte   | 30 ++++++++++---------
 .../src/components/nav/BackendNav.svelte      | 18 ++++++++---
 .../[application]/backend/_layout.svelte      |  8 -----
 4 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte
index 4255dbdd71..b9208b15a3 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte
@@ -35,5 +35,6 @@
   footer {
     padding: 20px;
     background: #fafafa;
+    border-radius: 0.5rem;
   }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
index b1502dd387..7a42fe05e1 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
@@ -29,16 +29,18 @@
 </script>
 
 <form class="uk-form-stacked">
-  <label class="uk-form-label" for="form-stacked-text">Username</label>
-  <input class="uk-input" type="text" bind:value={username} />
-  <label class="uk-form-label" for="form-stacked-text">Password</label>
-  <input class="uk-input" type="password" bind:value={password} />
-  <label class="uk-form-label" for="form-stacked-text">Access Levels</label>
-  <select multiple bind:value={accessLevels}>
-    {#each $store.accessLevels.levels as level}
-      <option value={level.name}>{level.name}</option>
-    {/each}
-  </select>
+  <div>
+    <label class="uk-form-label" for="form-stacked-text">Username</label>
+    <input class="uk-input" type="text" bind:value={username} />
+    <label class="uk-form-label" for="form-stacked-text">Password</label>
+    <input class="uk-input" type="password" bind:value={password} />
+    <label class="uk-form-label" for="form-stacked-text">Access Levels</label>
+    <select multiple bind:value={accessLevels}>
+      {#each $store.accessLevels.levels as level}
+        <option value={level.name}>{level.name}</option>
+      {/each}
+    </select>
+  </div>
   <footer>
     <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
     <ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
@@ -46,13 +48,13 @@
 </form>
 
 <style>
+  div {
+    padding: 30px;
+  }
   footer {
-    position: absolute;
     padding: 20px;
-    width: 100%;
-    bottom: 0;
-    left: 0;
     background: #fafafa;
+    border-radius: 0.5rem;
   }
   select {
     width: 100%;
diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte
index edd0586d94..84e1366f81 100644
--- a/packages/builder/src/components/nav/BackendNav.svelte
+++ b/packages/builder/src/components/nav/BackendNav.svelte
@@ -6,7 +6,10 @@
   import UsersList from "./UsersList.svelte"
   import NavItem from "./NavItem.svelte"
   import getIcon from "components/common/icon"
-  import { CreateDatabaseModal } from "components/database/ModelDataTable/modals"
+  import {
+    CreateDatabaseModal,
+    CreateUserModal,
+  } from "components/database/ModelDataTable/modals"
   const { open, close } = getContext("simple-modal")
 
   const openDatabaseCreator = () => {
@@ -18,6 +21,15 @@
       { styleContent: { padding: "0" } }
     )
   }
+  const openUserCreator = () => {
+    open(
+      CreateUserModal,
+      {
+        onClosed: close,
+      },
+      { styleContent: { padding: "0" } }
+    )
+  }
 </script>
 
 <div class="items-root">
@@ -39,9 +51,7 @@
       <div class="components-list-container">
         <div class="nav-group-header">
           <div class="hierarchy-title">Users</div>
-          <i
-            class="ri-add-line hoverable"
-            on:click={() => backendUiStore.actions.modals.show('USER')} />
+          <i class="ri-add-line hoverable" on:click={openUserCreator} />
         </div>
       </div>
 
diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte
index ce0cc9323e..9775ffbdf4 100644
--- a/packages/builder/src/pages/[application]/backend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/_layout.svelte
@@ -31,9 +31,7 @@
   $: recordOpen = $backendUiStore.visibleModal === "RECORD"
   $: modelOpen = $backendUiStore.visibleModal === "MODEL"
   $: viewOpen = $backendUiStore.visibleModal === "VIEW"
-  $: databaseOpen = $backendUiStore.visibleModal === "DATABASE"
   $: deleteRecordOpen = $backendUiStore.visibleModal === "DELETE_RECORD"
-  $: userOpen = $backendUiStore.visibleModal === "USER"
 </script>
 
 <!-- <Modal isOpen={!!$backendUiStore.visibleModal} {onClosed}>
@@ -46,15 +44,9 @@
   {#if viewOpen}
     <CreateEditViewModal {onClosed} />
   {/if}
-  {#if databaseOpen}
-    <CreateDatabaseModal {onClosed} />
-  {/if}
   {#if deleteRecordOpen}
     <DeleteRecordModal record={selectedRecord} {onClosed} />
   {/if}
-  {#if userOpen}
-    <CreateUserModal {onClosed} />
-  {/if}
 </Modal> -->
 
 <div class="root">