From d5b85ba8d799f6c22bc41f30a964cc57e98a266c Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 2 Jul 2020 17:28:33 +0200
Subject: [PATCH] adds tab to settings modal on front-end to display API Keys

---
 .../src/components/settings/Modal.svelte      |  7 ++-
 .../src/components/settings/tabs/API.svelte   | 55 +++++++++++++++++++
 .../src/components/settings/tabs/index.js     |  1 +
 3 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 packages/builder/src/components/settings/tabs/API.svelte

diff --git a/packages/builder/src/components/settings/Modal.svelte b/packages/builder/src/components/settings/Modal.svelte
index 2d832481c3..dc6809f488 100644
--- a/packages/builder/src/components/settings/Modal.svelte
+++ b/packages/builder/src/components/settings/Modal.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { General, Users, DangerZone } from "./tabs"
+  import { General, Users, DangerZone, APIKeys } from "./tabs"
 
   import { Input, TextArea, Button, Switcher } from "@budibase/bbui"
   import { SettingsIcon, CloseIcon } from "components/common/Icons/"
@@ -20,6 +20,11 @@
       key: "USERS",
       component: Users,
     },
+    {
+      title: "API Keys",
+      key: "API_KEYS",
+      component: APIKeys,
+    },
     {
       title: "Danger Zone",
       key: "DANGERZONE",
diff --git a/packages/builder/src/components/settings/tabs/API.svelte b/packages/builder/src/components/settings/tabs/API.svelte
new file mode 100644
index 0000000000..fe3fe142ce
--- /dev/null
+++ b/packages/builder/src/components/settings/tabs/API.svelte
@@ -0,0 +1,55 @@
+<script>
+  import { Input, Button } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import api from "builderStore/api"
+  import Title from "../TabTitle.svelte"
+
+  let keys = { budibase: "", sendGrid: "" }
+
+  async function updateKey(e) {
+    console.log("Event Key: ", e.detail)
+    // Send to endpoint when it exists
+    // const response = await api.put(`/api/${$store.appId}`, data)
+    // const res = await response.json()
+  }
+
+  // Get Keys
+  async function fetchKeys() {
+    // fetch keys from endpoint
+    // return keys
+  }
+
+  let fetchKeysPromise = fetchKeys()
+</script>
+
+<Title>API Keys</Title>
+<div class="container">
+  <div class="background">
+    <Input
+      on:save={updateKey}
+      thin
+      edit
+      value={keys.budibase}
+      label="Budibase" />
+  </div>
+  <div class="background">
+    <Input
+      on:save={updateKey}
+      thin
+      edit
+      value={keys.sendgrid}
+      label="Sendgrid" />
+  </div>
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-gap: var(--space);
+  }
+  .background {
+    border-radius: 5px;
+    background-color: var(--light-grey);
+    padding: 12px 12px 18px 12px;
+  }
+</style>
diff --git a/packages/builder/src/components/settings/tabs/index.js b/packages/builder/src/components/settings/tabs/index.js
index a1d1df38e4..67f79b536c 100644
--- a/packages/builder/src/components/settings/tabs/index.js
+++ b/packages/builder/src/components/settings/tabs/index.js
@@ -2,4 +2,5 @@ export { default as General } from "./General.svelte"
 export { default as Integrations } from "./Integrations.svelte"
 export { default as Permissions } from "./Permissions.svelte"
 export { default as Users } from "./Users.svelte"
+export { default as APIKeys } from "./Api.svelte"
 export { default as DangerZone } from "./DangerZone.svelte"