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",
    })
  },
 })