Start of API key modal.

5 years ago · 833312f7bd
4 changed files with 79 additions and 0 deletions
--- a/packages/builder/src/components/settings/UpdateAPIKeyModal.svelte
+++ b/packages/builder/src/components/settings/UpdateAPIKeyModal.svelte
@ -0,0 +1,36 @@
+<script>
+  import { ModalContent, Body, Input, notifications } from "@budibase/bbui"
+  import { auth } from "stores/portal"
+  import { onMount } from "svelte"
+
+  let apiKey = null
+  let loaded = false
+
+  async function generateAPIKey() {
+    try {
+      await auth.generateAPIKey()
+      notifications.success("New API key generated.")
+    } catch (err) {
+      notifications.error("Unable to generate new API key")
+    }
+  }
+
+  onMount(async () => {
+    apiKey = 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}
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@ -19,12 +19,14 @@
  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 {
@ -81,6 +83,12 @@
              <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()}
@ -155,6 +163,9 @@
  <Modal bind:this={changePasswordModal}>
    <ChangePasswordModal />
  </Modal>
+  <Modal bind:this={apiKeyModal}>
+    <UpdateAPIKeyModal />
+  </Modal>
 {/if}

 <style>
--- a/packages/builder/src/stores/portal/auth.js
+++ b/packages/builder/src/stores/portal/auth.js
@ -172,6 +172,17 @@ export function createAuthStore() {
        resetCode,
      })
    },
+    generateAPIKey: async () => {
+      return API.generateAPIKey()
+    },
+    fetchAPIKey: async () => {
+      const info = await API.fetchDeveloperInfo()
+      if (info?.apiKey) {
+        return info.apiKey
+      } else {
+        return null
+      }
+    },
  }

  return {
--- a/packages/frontend-core/src/api/user.js
+++ b/packages/frontend-core/src/api/user.js
@ -126,4 +126,25 @@ export const buildUserEndpoints = API => ({
      },
    })
  },
+
+  /**
+   * Using the logged in user, this will generate a new API key,
+   * assuming the user is a builder.
+   * @return {Promise<object>} returns the API response, including an API key.
+   */
+  generateAPIKey: async () => {
+    return await API.post({
+      url: "/api/global/users/api/key",
+    })
+  },
+
+  /**
+   * retrieves the API key for the logged in user.
+   * @return {Promise<object>} An object containing the user developer information.
+   */
+  fetchDeveloperInfo: async () => {
+    return await API.get({
+      url: "/api/global/users/api/key",
+    })
+  },
 })