user creation

packages/builder/src/common/CodeArea.svelte

@@ -11,20 +11,11 @@
     padding: 10px;
     margin-top: 5px;
     margin-bottom: 10px;
-    background: var(--primary100);
+    background: var(--secondary80);
     color: var(--white);
     font-family: "Courier New", Courier, monospace;
     width: 95%;
     height: 100px;
     border-radius: 5px;
   }
-
-  span {
-    margin-left: 5px;
-  }
-
-  .header {
-    display: flex;
-    align-items: center;
-  }
 </style>

packages/builder/src/database/ModelDataTable/api.js

@@ -1,6 +1,12 @@
 import api from "../../builderStore/api"
 import { getNewRecord, getNewInstance } from "../../common/core"
 
+export async function createUser(user, { appname, instanceId }) {
+  const CREATE_USER_URL = `/_builder/instance/${appname}/${instanceId}/api/createUser`
+  const response = await api.post(CREATE_USER_URL, user)
+  return await response.json()
+}
+
 export async function createDatabase(appname, instanceName) {
   const CREATE_DATABASE_URL = `/_builder/instance/_master/0/api/record/`
   const database = getNewInstance(appname, instanceName)

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

@@ -1,30 +1,51 @@
 <script>
   import Modal from "../../../common/Modal.svelte"
-  import { store } from "../../../builderStore"
+  import { store, backendUiStore } from "../../../builderStore"
   import ActionButton from "../../../common/ActionButton.svelte"
-  // import * as api from "../api"
+  import * as api from "../api"
 
   export let onClosed
 
-  let userName
+  let username
+  let password
+  let accessLevels = []
+
+  $: valid = username && password && accessLevels.length
+  $: currentAppInfo = {
+    appname: $store.appname,
+    instanceId: $backendUiStore.selectedDatabase.id,
+  }
 
   async function createUser() {
-    // const response = await api.createUser($store.appname, userName)
-    // store.createUserForInstance(response)
+    const response = await api.createUser(
+      {
+        username,
+        password,
+        accessLevels,
+        enabled: true,
+      },
+      currentAppInfo
+    )
     onClosed()
   }
 </script>
 
-<section>
-  User Name
-  <input class="uk-input" type="text" bind:value={userName} />
+<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>
   <footer>
     <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
-    <ActionButton disabled={!userName} on:click={createUser}>
-      Save
-    </ActionButton>
+    <ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
   </footer>
-</section>
+</form>
 
 <style>
   footer {

packages/builder/src/nav/BackendNav.svelte

@@ -30,7 +30,10 @@
       <div class="components-list-container">
         <div class="nav-group-header">
           <div class="hierarchy-title">Users</div>
-          <i class="ri-add-line" />
+          <i 
+            class="ri-add-line hoverable" 
+            on:click={() => backendUiStore.actions.modals.show('USER')} 
+          />
         </div>
       </div>