Adding basic endpoints for API keys.

packages/bbui/src/Modal/ModalContent.svelte

@@ -165,4 +165,8 @@
   .secondary-action {
     margin-right: auto;
   }
+
+  .spectrum-Dialog-buttonGroup {
+    padding-left: 0;
+  }
 </style>

packages/builder/src/components/settings/UpdateAPIKeyModal.svelte

@@ -4,7 +4,6 @@
   import { onMount } from "svelte"
 
   let apiKey = null
-  let loaded = false
 
   async function generateAPIKey() {
     try {
@@ -16,21 +15,20 @@
   }
 
   onMount(async () => {
-    apiKey = auth.fetchAPIKey()
+    apiKey = await auth.fetchAPIKey()
   })
 </script>
 
-{#if loaded}
-  <ModalContent
-    title="Developer information"
-    showSecondaryButton
-    secondaryButtonText="Re-generate key"
-    secondaryButtonAction={generateAPIKey}
-  >
-    <Body size="S">
-      You can find information about your developer account here, such as the
-      API key used to access the Budibase API.
-    </Body>
-    <Input disabled bind:value={apiKey} label="API key" />
-  </ModalContent>
-{/if}
+<ModalContent
+  title="Developer information"
+  showConfirmButton={false}
+  showSecondaryButton={true}
+  secondaryButtonText="Re-generate key"
+  secondaryAction={generateAPIKey}
+>
+  <Body size="S">
+    You can find information about your developer account here, such as the API
+    key used to access the Budibase API.
+  </Body>
+  <Input disabled bind:value={apiKey} label="API key" />
+</ModalContent>

packages/builder/src/pages/builder/apps/index.svelte

@@ -19,14 +19,12 @@
   import { gradient } from "actions"
   import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
   import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
-  import UpdateAPIKeyModal from "components/settings/UpdateAPIKeyModal.svelte"
   import { processStringSync } from "@budibase/string-templates"
   import Logo from "assets/bb-emblem.svg"
 
   let loaded = false
   let userInfoModal
   let changePasswordModal
-  let apiKeyModal
 
   onMount(async () => {
     try {
@@ -83,12 +81,6 @@
               <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>
                 Update user information
               </MenuItem>
-              <MenuItem
-                icon="UserDeveloper"
-                on:click={() => apiKeyModal.show()}
-              >
-                View developer information
-              </MenuItem>
               <MenuItem
                 icon="LockClosed"
                 on:click={() => changePasswordModal.show()}
@@ -163,9 +155,6 @@
   <Modal bind:this={changePasswordModal}>
     <ChangePasswordModal />
   </Modal>
-  <Modal bind:this={apiKeyModal}>
-    <UpdateAPIKeyModal />
-  </Modal>
 {/if}
 
 <style>

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -18,11 +18,13 @@
   import { onMount } from "svelte"
   import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
   import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
+  import UpdateAPIKeyModal from "components/settings/UpdateAPIKeyModal.svelte"
   import Logo from "assets/bb-emblem.svg"
 
   let loaded = false
   let userInfoModal
   let changePasswordModal
+  let apiKeyModal
   let mobileMenuVisible = false
 
   $: menu = buildMenu($auth.isAdmin)
@@ -162,6 +164,11 @@
             <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>
               Update user information
             </MenuItem>
+            {#if $auth.isBuilder}
+              <MenuItem icon="Key" on:click={() => apiKeyModal.show()}>
+                View developer information
+              </MenuItem>
+            {/if}
             <MenuItem
               icon="LockClosed"
               on:click={() => changePasswordModal.show()}
@@ -186,6 +193,9 @@
   <Modal bind:this={changePasswordModal}>
     <ChangePasswordModal />
   </Modal>
+  <Modal bind:this={apiKeyModal}>
+    <UpdateAPIKeyModal />
+  </Modal>
 {/if}
 
 <style>

packages/worker/src/api/controllers/global/users.js

@@ -280,3 +280,15 @@ exports.inviteAccept = async ctx => {
     ctx.throw(400, "Unable to create new user, invitation invalid.")
   }
 }
+
+exports.generateAPIKey = async ctx => {
+  ctx.body = {
+    apiKey: "a175402a-89fc-11ec-a8a3-0242ac120002",
+  }
+}
+
+exports.fetchAPIKey = async ctx => {
+  ctx.body = {
+    apiKey: "a175402a-89fc-11ec-a8a3-0242ac120002",
+  }
+}

packages/worker/src/api/routes/global/users.js

@@ -4,6 +4,7 @@ const joiValidator = require("../../../middleware/joi-validator")
 const adminOnly = require("../../../middleware/adminOnly")
 const Joi = require("joi")
 const cloudRestricted = require("../../../middleware/cloudRestricted")
+const builderOnly = require("../../../middleware/builderOnly")
 
 const router = Router()
 
@@ -95,6 +96,8 @@ router
     buildAdminInitValidation(),
     controller.adminUser
   )
+  .post("/api/global/users/api/key", builderOnly, controller.generateAPIKey)
+  .get("/api/global/users/api/key", builderOnly, controller.fetchAPIKey)
   .get("/api/global/users/self", controller.getSelf)
   .get("/api/global/users/tenant/:id", controller.tenantUserLookup)
   // global endpoint but needs to come at end (blocks other endpoints otherwise)

packages/worker/src/middleware/builderOnly.js

@@ -0,0 +1,9 @@
+module.exports = async (ctx, next) => {
+  if (
+    !ctx.internal &&
+    (!ctx.user || !ctx.user.builder || !ctx.user.builder.global)
+  ) {
+    ctx.throw(403, "Builder user only endpoint.")
+  }
+  return next()
+}