From f78e816f203f372b4a3e2baa8d404d5ef8a8ce2e Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 31 Jul 2020 10:46:23 +0200
Subject: [PATCH 1/5] setup sidebar

---
 packages/builder/package.json                 |   4 +-
 .../components/start/CreateAppModal.svelte    | 126 ++++-----
 .../src/components/start/Indicator.svelte     |  80 ++++++
 .../src/components/start/Steps/API.svelte     |   0
 .../src/components/start/Steps/Info.svelte    |   0
 .../src/components/start/Steps/User.svelte    |   0
 .../src/components/start/Steps/index.js       |   3 +
 packages/server/yarn.lock                     | 244 +-----------------
 8 files changed, 151 insertions(+), 306 deletions(-)
 create mode 100644 packages/builder/src/components/start/Indicator.svelte
 create mode 100644 packages/builder/src/components/start/Steps/API.svelte
 create mode 100644 packages/builder/src/components/start/Steps/Info.svelte
 create mode 100644 packages/builder/src/components/start/Steps/User.svelte
 create mode 100644 packages/builder/src/components/start/Steps/index.js

diff --git a/packages/builder/package.json b/packages/builder/package.json
index a93609b4ed..33a3e55b6a 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -55,7 +55,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.16.0",
+    "@budibase/bbui": "^1.17.0",
     "@budibase/client": "^0.1.1",
     "@budibase/colorpicker": "^1.0.1",
     "@nx-js/compiler-util": "^2.0.0",
@@ -112,4 +112,4 @@
     "svelte-jester": "^1.0.6"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
-}
+}
\ No newline at end of file
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 23cbc82bc9..20fbaba402 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,5 +1,7 @@
 <script>
   import Spinner from "components/common/Spinner.svelte"
+  import { API, Info, User } from "./Steps"
+  import Indicator from "./Indicator.svelte"
   import { Input, TextArea, Button } from "@budibase/bbui"
   import { goto } from "@sveltech/routify"
   import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
@@ -8,6 +10,8 @@
   import { post } from "builderStore/api"
   import analytics from "../../analytics"
 
+  export let hasAPIKey = false
+
   const { open, close } = getContext("simple-modal")
 
   let name = ""
@@ -61,43 +65,56 @@
   async function _onOkay() {
     await createNewApp()
   }
+
+  let currentStep = 0
+  let steps = [
+    { title: "Setup your API Key" },
+    { title: "Create your first web app" },
+    { title: "Create new user" },
+  ]
 </script>
 
 <div class="container">
+  <div class="sidebar">
+    {#each steps as { active, done }, i}
+      <Indicator
+        active={currentStep === i}
+        done={i < currentStep}
+        step={i + 1} />
+    {/each}
+  </div>
   <div class="body">
     <div class="heading">
-      <span class="icon">
-        <AppsIcon />
-      </span>
-      <h3 class="header">Create new web app</h3>
+      <h3 class="header">Get Started with Budibase</h3>
+    </div>
+    <div class="step">
+      <Input
+        error={error.name}
+        name="name"
+        label="Name"
+        placeholder="Enter application name"
+        on:change={e => (name = e.target.value)}
+        on:input={e => (name = e.target.value)} />
+      <TextArea
+        bind:value={description}
+        name="description"
+        label="Description"
+        placeholder="Describe your application" />
+      {#if error.description}
+        <span class="error">
+          Please enter a short description of your application
+        </span>
+      {/if}
+    </div>
+    <div class="footer">
+      {#if currentStep !== 0}
+        <Button primary thin on:click={_onOkay}>Back</Button>
+      {/if}
+      <Button primary thin on:click={_onOkay}>Next</Button>
+      {#if currentStep + 1 === steps.length}
+        <Button primary thin on:click={_onOkay}>Launch</Button>
+      {/if}
     </div>
-    <Input
-      name="name"
-      label="Name"
-      placeholder="Enter application name"
-      on:change={e => (name = e.target.value)}
-      on:input={e => (name = e.target.value)} />
-    {#if error.name}
-      <span class="error">You need to enter a name for your application.</span>
-    {/if}
-    <TextArea
-      bind:value={description}
-      name="description"
-      label="Description"
-      placeholder="Describe your application" />
-    {#if error.description}
-      <span class="error">
-        Please enter a short description of your application
-      </span>
-    {/if}
-  </div>
-  <div class="footer">
-    <a href="./#" class="info">
-      <InfoIcon />
-      How to get started
-    </a>
-    <Button secondary thin on:click={_onCancel}>Cancel</Button>
-    <Button primary thin on:click={_onOkay}>Save</Button>
   </div>
   <div class="close-button" on:click={_onCancel}>
     <CloseIcon />
@@ -112,9 +129,18 @@
 
 <style>
   .container {
+    display: grid;
+    grid-template-columns: 80px 1fr;
     position: relative;
   }
-
+  .sidebar {
+    display: grid;
+    border-bottom-left-radius: 0.5rem;
+    border-top-left-radius: 0.5rem;
+    grid-gap: 30px;
+    align-content: center;
+    background: #f5f5f5;
+  }
   .close-button {
     cursor: pointer;
     position: absolute;
@@ -135,43 +161,17 @@
     margin: 0;
     font-size: 24px;
     font-weight: 600;
-    font-family: inter;
-  }
-  .icon {
-    display: grid;
-    border-radius: 3px;
-    align-content: center;
-    justify-content: center;
-    margin-right: 12px;
-    height: 20px;
-    width: 20px;
-    padding: 10px;
-    background-color: var(--blue-light);
-  }
-  .info {
-    color: var(--blue);
-    text-decoration-color: var(--blue);
-  }
-  .info :global(svg) {
-    fill: var(--blue);
-    margin-right: 8px;
-    width: 24px;
-    height: 24px;
   }
   .body {
-    padding: 40px 40px 80px 40px;
+    padding: 40px 60px 60px 60px;
     display: grid;
-    grid-gap: 20px;
+    grid-template-rows: auto 1fr auto;
   }
   .footer {
     display: grid;
-    grid-gap: 20px;
-    align-items: center;
-    grid-template-columns: 1fr auto auto;
-    padding: 30px 40px;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 50px;
-    background-color: var(--grey-1);
+    grid-gap: 15px;
+    grid-template-columns: auto auto;
+    justify-content: end;
   }
   .spinner-container {
     background: white;
diff --git a/packages/builder/src/components/start/Indicator.svelte b/packages/builder/src/components/start/Indicator.svelte
new file mode 100644
index 0000000000..cde2d62e67
--- /dev/null
+++ b/packages/builder/src/components/start/Indicator.svelte
@@ -0,0 +1,80 @@
+<script>
+  export let step, done, active
+</script>
+
+<div class="container" class:active class:done>
+  <div class="circle" class:active class:done>
+    {#if done}
+      <svg
+        width="12"
+        height="10"
+        viewBox="0 0 12 10"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M10.1212 0.319527C10.327 0.115582 10.6047 0.000803464 10.8944
+          4.20219e-06C11.1841 -0.00079506 11.4624 0.11245 11.6693
+          0.315256C11.8762 0.518062 11.9949 0.794134 11.9998 1.08379C12.0048
+          1.37344 11.8955 1.65339 11.6957 1.86313L5.82705 9.19893C5.72619
+          9.30757 5.60445 9.39475 5.46913 9.45527C5.3338 9.51578 5.18766 9.54839
+          5.03944 9.55113C4.89123 9.55388 4.74398 9.52671 4.60651
+          9.47124C4.46903 9.41578 4.34416 9.33316 4.23934 9.22833L0.350925
+          5.33845C0.242598 5.23751 0.155712 5.11578 0.0954499 4.98054C0.0351876
+          4.84529 0.00278364 4.69929 0.00017159 4.55124C-0.00244046 4.4032
+          0.024793 4.25615 0.0802466 4.11886C0.1357 3.98157 0.218238 3.85685
+          0.322937 3.75215C0.427636 3.64746 0.55235 3.56492 0.68964
+          3.50946C0.82693 3.45401 0.973983 3.42678 1.12203 3.42939C1.27007 3.432
+          1.41607 3.46441 1.55132 3.52467C1.68657 3.58493 1.80829 3.67182
+          1.90923 3.78014L4.98762 6.85706L10.0933 0.35187C10.1024 0.340482
+          10.1122 0.329679 10.1227 0.319527H10.1212Z"
+          fill="white" />
+      </svg>
+    {:else}{step}{/if}
+  </div>
+</div>
+
+<style>
+  .container::before {
+    content: "";
+    position: absolute;
+    top: -30px;
+    width: 1px;
+    height: 30px;
+    background: #bdbdbd;
+  }
+  .container:first-child::before {
+    display: none;
+  }
+  .container {
+    position: relative;
+    height: 45px;
+    display: grid;
+    place-items: center;
+  }
+  .container.active {
+    box-shadow: inset 3px 0 0 0 #4285f4;
+  }
+  .circle.active {
+    background: #4285f4;
+    color: white;
+    border: none;
+  }
+  .circle.done {
+    background: #bdbdbd;
+    color: white;
+    border: none;
+  }
+  .circle {
+    color: #bdbdbd;
+    font-size: 14px;
+    display: grid;
+    place-items: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: 1px solid #bdbdbd;
+    box-sizing: border-box;
+  }
+</style>
diff --git a/packages/builder/src/components/start/Steps/API.svelte b/packages/builder/src/components/start/Steps/API.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/builder/src/components/start/Steps/Info.svelte b/packages/builder/src/components/start/Steps/Info.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/builder/src/components/start/Steps/User.svelte b/packages/builder/src/components/start/Steps/User.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/builder/src/components/start/Steps/index.js b/packages/builder/src/components/start/Steps/index.js
new file mode 100644
index 0000000000..45b9a7649c
--- /dev/null
+++ b/packages/builder/src/components/start/Steps/index.js
@@ -0,0 +1,3 @@
+export { default as API } from './API.svelte'
+export { default as Info } from './Info.svelte'
+export { default as User } from './User.svelte'
\ No newline at end of file
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 062563a881..d0bd25a5e8 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -172,21 +172,6 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/client@^0.1.1":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.1.tgz#6df65bef641d956dea6d648e5dcd7e95622a24fc"
-  integrity sha512-z5CYj/4wahV9Kg7GwYi1knRZdm60uspkjOX7b3GXy85Zam1+m4ObSQ1aT6857WCXgl2+CQ3hIb2QGqSZfOTFuA==
-  dependencies:
-    "@nx-js/compiler-util" "^2.0.0"
-    bcryptjs "^2.4.3"
-    deep-equal "^2.0.1"
-    lodash "^4.17.15"
-    lunr "^2.3.5"
-    mustache "^4.0.1"
-    regexparam "^1.3.0"
-    shortid "^2.2.8"
-    svelte "^3.9.2"
-
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -369,11 +354,6 @@
     path-to-regexp "1.x"
     urijs "^1.19.2"
 
-"@nx-js/compiler-util@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297"
-  integrity sha512-AxSQbwj9zqt8DYPZ6LwZdytqnwfiOEdcFdq4l8sdjkZmU2clTht7RDLCI8xvkp7KqgcNaOGlTeCM55TULWruyQ==
-
 "@sendgrid/client@^7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@sendgrid/client/-/client-7.1.1.tgz#09a25e58ac7e5321d66807e7110ff0fb61bb534f"
@@ -842,11 +822,6 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
-array-filter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
-  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
-
 array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@@ -906,13 +881,6 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
-available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
-  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
-  dependencies:
-    array-filter "^1.0.0"
-
 aws-sdk@^2.706.0:
   version "2.706.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.706.0.tgz#09f65e9a91ecac5a635daf934082abae30eca953"
@@ -1584,26 +1552,6 @@ decompress-response@^3.3.0:
   dependencies:
     mimic-response "^1.0.0"
 
-deep-equal@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
-  integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
-  dependencies:
-    es-abstract "^1.17.5"
-    es-get-iterator "^1.1.0"
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.0.5"
-    isarray "^2.0.5"
-    object-is "^1.1.2"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.2"
-    which-boxed-primitive "^1.0.1"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.2"
-
 deep-equal@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -1932,36 +1880,6 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
-es-abstract@^1.17.4:
-  version "1.17.6"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
-  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.2.0"
-    is-regex "^1.1.0"
-    object-inspect "^1.7.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
-
-es-get-iterator@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
-  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
-  dependencies:
-    es-abstract "^1.17.4"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -2856,32 +2774,17 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-arguments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
-is-bigint@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
-  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
-  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
-
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -2891,11 +2794,6 @@ is-callable@^1.1.4, is-callable@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
   integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
 
-is-callable@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
-  integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
-
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -2918,7 +2816,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1, is-date-object@^1.0.2:
+is-date-object@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
 
@@ -2981,21 +2879,11 @@ is-installed-globally@^0.3.1:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
-is-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
-
 is-npm@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
   integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
 
-is-number-object@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
-
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -3026,28 +2914,11 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
-is-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.0.tgz#ece38e389e490df0dc21caea2bd596f987f767ff"
-  integrity sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==
-  dependencies:
-    has-symbols "^1.0.1"
-
-is-set@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
-
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
-is-string@^1.0.4, is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@@ -3062,31 +2933,11 @@ is-type-of@^1.0.0:
     is-class-hotfix "~0.0.6"
     isstream "~0.1.2"
 
-is-typed-array@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
-  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
-  dependencies:
-    available-typed-arrays "^1.0.0"
-    es-abstract "^1.17.4"
-    foreach "^2.0.5"
-    has-symbols "^1.0.1"
-
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
-is-weakmap@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
-  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
-
-is-weakset@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
-  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
-
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -3108,11 +2959,6 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isbinaryfile@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@@ -4058,11 +3904,6 @@ ltgt@~2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.1.3.tgz#10851a06d9964b971178441c23c9e52698eece34"
 
-lunr@^2.3.5:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.8.tgz#a8b89c31f30b5a044b97d2d28e2da191b6ba2072"
-  integrity sha512-oxMeX/Y35PNFuZoHp+jUj5OSEmLCaIH4KTFJh7a93cHBoFmpw2IoPs22VIz7vyO2YUnx2Tn9dzIwO2P/4quIRg==
-
 make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -4227,11 +4068,6 @@ nan@^2.12.1:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
 
-nanoid@^2.1.0:
-  version "2.1.11"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
-  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
-
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -4381,14 +4217,6 @@ object-inspect@^1.7.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
   integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
 
-object-is@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
-  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
-
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5038,19 +4866,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
-  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
-regexparam@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
-
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@@ -5344,21 +5159,6 @@ shellwords@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
 
-shortid@^2.2.8:
-  version "2.2.15"
-  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
-  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
-  dependencies:
-    nanoid "^2.1.0"
-
-side-channel@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
-  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
-  dependencies:
-    es-abstract "^1.17.0-next.1"
-    object-inspect "^1.7.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -5575,7 +5375,7 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
+string.prototype.trimend@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
   dependencies:
@@ -5598,7 +5398,7 @@ string.prototype.trimright@^2.1.1:
     es-abstract "^1.17.5"
     string.prototype.trimend "^1.0.0"
 
-string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
+string.prototype.trimstart@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
   dependencies:
@@ -5717,11 +5517,6 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-svelte@^3.9.2:
-  version "3.24.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.0.tgz#6565a42c9705796fa66c6abb4fedc09f4323a4a8"
-  integrity sha512-VFXom6EP2DK83kxy4ZlBbaZklSbZIrpNH3oNXlPYHJUuW4q1OuAr3ZoYbfIVTVYPDgrI7Yq0gQcOhDlAtO4qfw==
-
 symbol-tree@^3.2.2:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -6156,44 +5951,11 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
-which-boxed-primitive@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
-  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
-  dependencies:
-    is-bigint "^1.0.0"
-    is-boolean-object "^1.0.0"
-    is-number-object "^1.0.3"
-    is-string "^1.0.4"
-    is-symbol "^1.0.2"
-
-which-collection@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
-  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
-  dependencies:
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-weakmap "^2.0.1"
-    is-weakset "^2.0.1"
-
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which-typed-array@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
-  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
-  dependencies:
-    available-typed-arrays "^1.0.2"
-    es-abstract "^1.17.5"
-    foreach "^2.0.5"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.1"
-    is-typed-array "^1.1.3"
-
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"

From 9b7adf9d8ca3c979a95b66e6aff46643b64cc377 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 3 Aug 2020 15:59:50 +0200
Subject: [PATCH 2/5] api key logic works correctly

---
 packages/builder/package.json                 |   6 +-
 .../components/start/CreateAppModal.svelte    | 239 ++++++++++++------
 .../src/components/start/Steps/API.svelte     |  25 ++
 .../src/components/start/Steps/Info.svelte    |  24 ++
 .../src/components/start/Steps/User.svelte    |  35 +++
 packages/builder/src/pages/index.svelte       |  24 +-
 6 files changed, 275 insertions(+), 78 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 33a3e55b6a..61a4dfa1f5 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -55,11 +55,12 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.17.0",
+    "@budibase/bbui": "^1.18.0",
     "@budibase/client": "^0.1.1",
     "@budibase/colorpicker": "^1.0.1",
     "@nx-js/compiler-util": "^2.0.0",
     "@sentry/browser": "5.19.1",
+    "@svelteschool/svelte-forms": "^0.7.0",
     "codemirror": "^5.51.0",
     "date-fns": "^1.29.0",
     "deepmerge": "^4.2.2",
@@ -74,7 +75,8 @@
     "string_decoder": "^1.2.0",
     "svelte-portal": "^0.1.0",
     "svelte-simple-modal": "^0.4.2",
-    "uikit": "^3.1.7"
+    "uikit": "^3.1.7",
+    "yup": "^0.29.2"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 20fbaba402..cb97209b28 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,4 +1,14 @@
+<script context="module">
+  // Init store here so that it doesn't get destroyed and removed when the component instance is destroyed. This is to make sure no data is lost if the user closes the model
+  import { writable } from "svelte/store"
+
+  export const createAppStore = writable({ currentStep: 0, values: {} })
+</script>
+
 <script>
+  import { string, object } from "yup"
+  import api from "builderStore/api"
+  import Form from "@svelteschool/svelte-forms"
   import Spinner from "components/common/Spinner.svelte"
   import { API, Info, User } from "./Steps"
   import Indicator from "./Indicator.svelte"
@@ -10,52 +20,136 @@
   import { post } from "builderStore/api"
   import analytics from "../../analytics"
 
-  export let hasAPIKey = false
-
   const { open, close } = getContext("simple-modal")
 
-  let name = ""
-  let description = ""
-  let loading = false
-  let error = {}
+  export let hasKey
 
-  const createNewApp = async () => {
-    if ((name.length > 100 || name.length < 1) && description.length < 1) {
-      error = {
-        name: true,
-        description: true,
-      }
-    } else if (description.length < 1) {
-      error = {
-        name: false,
-        description: true,
-      }
-    } else if (name.length > 100 || name.length < 1) {
-      error = {
-        name: true,
-      }
-    } else {
-      error = {}
-      const data = { name, description }
-      loading = true
-      try {
-        const response = await post("/api/applications", data)
+  let submitting = false
+  let errors = {}
+  let validationErrors = {}
+  let validationSchemas = [
+    {
+      apiKey: string().required("Please enter your API key."),
+    },
+    {
+      applicationName: string().required("Your application must have a name."),
+    },
+    {
+      username: string().required("Your application needs a first user."),
+      password: string().required(
+        "Please enter a password for your first user."
+      ),
+      accessLevelId: string().required(
+        "You need to select an access level for your user."
+      ),
+    },
+  ]
 
-        const res = await response.json()
+  let steps = [
+    {
+      component: API,
+      errors,
+    },
+    {
+      component: Info,
+      errors,
+    },
+    {
+      component: User,
+      errors,
+    },
+  ]
 
-        analytics.captureEvent("web_app_created", {
-          name,
-          description,
-          appId: res._id,
-        })
-        $goto(`./${res._id}`)
-      } catch (error) {
-        console.error(error)
-      }
+  if (hasKey) {
+    validationSchemas.shift()
+    validationSchemas = validationSchemas
+    steps.shift()
+    steps = steps
+  }
+
+  // Handles form navigation
+  const back = () => {
+    if ($createAppStore.currentStep > 0) {
+      $createAppStore.currentStep -= 1
+    }
+  }
+  const next = () => {
+    $createAppStore.currentStep += 1
+  }
+
+  // $: errors = validationSchemas.validate(values);
+  $: getErrors(
+    $createAppStore.values,
+    validationSchemas[$createAppStore.currentStep]
+  )
+
+  async function getErrors(values, schema) {
+    try {
+      validationErrors = {}
+      await object(schema).validate(values, { abortEarly: false })
+    } catch (error) {
+      validationErrors = extractErrors(error)
     }
   }
 
-  let value
+  const checkValidity = async (values, currentStep) => {
+    const validity = await object()
+      .shape(validationSchemas[currentStep])
+      .isValid(values)
+    currentStepIsValid = validity
+
+    // Check full form on last step
+    if (currentStep === steps.length - 1) {
+      // Make one big schema from all the small ones
+      const fullSchema = Object.assign({}, ...validationSchemas)
+
+      // Check full form schema
+      const formIsValid = await object()
+        .shape(fullSchema)
+        .isValid(values)
+      fullFormIsValid = formIsValid
+    }
+  }
+
+  async function signUp() {
+    submitting = true
+    try {
+      if (!hasKey) {
+        await updateKey(["budibase", $createAppStore.values.apiKey])
+      }
+      const response = await post("/api/applications", {
+        name: $createAppStore.values.applicationName,
+      })
+      const res = await response.json()
+      analytics.captureEvent("web_app_created", {
+        name,
+        description,
+        appId: res._id,
+      })
+      console.log("App created!")
+      // $goto(`./${res._id}`)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  async function updateKey([key, value]) {
+    console.log("Saving API Key")
+    const response = await api.put(`/api/keys/${key}`, { value })
+    const res = await response.json()
+    return res
+  }
+
+  function extractErrors({ inner }) {
+    return inner.reduce((acc, err) => {
+      return { ...acc, [err.path]: err.message }
+    }, {})
+  }
+
+  let currentStepIsValid = false
+  let fullFormIsValid = false
+  $: checkValidity($createAppStore.values, $createAppStore.currentStep)
+
   let onChange = () => {}
 
   function _onCancel() {
@@ -65,21 +159,14 @@
   async function _onOkay() {
     await createNewApp()
   }
-
-  let currentStep = 0
-  let steps = [
-    { title: "Setup your API Key" },
-    { title: "Create your first web app" },
-    { title: "Create new user" },
-  ]
 </script>
 
 <div class="container">
   <div class="sidebar">
     {#each steps as { active, done }, i}
       <Indicator
-        active={currentStep === i}
-        done={i < currentStep}
+        active={$createAppStore.currentStep === i}
+        done={i < $createAppStore.currentStep}
         step={i + 1} />
     {/each}
   </div>
@@ -88,38 +175,41 @@
       <h3 class="header">Get Started with Budibase</h3>
     </div>
     <div class="step">
-      <Input
-        error={error.name}
-        name="name"
-        label="Name"
-        placeholder="Enter application name"
-        on:change={e => (name = e.target.value)}
-        on:input={e => (name = e.target.value)} />
-      <TextArea
-        bind:value={description}
-        name="description"
-        label="Description"
-        placeholder="Describe your application" />
-      {#if error.description}
-        <span class="error">
-          Please enter a short description of your application
-        </span>
-      {/if}
+      <Form bind:values={$createAppStore.values}>
+        {#each steps as step, i (i)}
+          <div class:hidden={$createAppStore.currentStep !== i}>
+            <svelte:component
+              this={step.component}
+              {validationErrors}
+              options={step.options}
+              name={step.name} />
+          </div>
+        {/each}
+      </Form>
     </div>
     <div class="footer">
-      {#if currentStep !== 0}
-        <Button primary thin on:click={_onOkay}>Back</Button>
+      {#if $createAppStore.currentStep > 0}
+        <Button secondary on:click={back}>Back</Button>
       {/if}
-      <Button primary thin on:click={_onOkay}>Next</Button>
-      {#if currentStep + 1 === steps.length}
-        <Button primary thin on:click={_onOkay}>Launch</Button>
+      {#if $createAppStore.currentStep < steps.length - 1}
+        <Button secondary on:click={next} disabled={!currentStepIsValid}>
+          Next
+        </Button>
+      {/if}
+      {#if $createAppStore.currentStep === steps.length - 1}
+        <Button
+          secondary
+          on:click={signUp}
+          disabled={!fullFormIsValid || submitting}>
+          {submitting ? 'Loading...' : 'Submit'}
+        </Button>
       {/if}
     </div>
   </div>
   <div class="close-button" on:click={_onCancel}>
     <CloseIcon />
   </div>
-  {#if loading}
+  {#if submitting}
     <div in:fade class="spinner-container">
       <Spinner />
       <span class="spinner-text">Creating your app...</span>
@@ -129,6 +219,7 @@
 
 <style>
   .container {
+    min-height: 600px;
     display: grid;
     grid-template-columns: 80px 1fr;
     position: relative;
@@ -165,6 +256,7 @@
   .body {
     padding: 40px 60px 60px 60px;
     display: grid;
+    align-items: center;
     grid-template-rows: auto 1fr auto;
   }
   .footer {
@@ -189,9 +281,8 @@
   .spinner-text {
     font-size: 2em;
   }
-  .error {
-    color: var(--red);
-    font-weight: bold;
-    font-size: 0.8em;
+
+  .hidden {
+    display: none;
   }
 </style>
diff --git a/packages/builder/src/components/start/Steps/API.svelte b/packages/builder/src/components/start/Steps/API.svelte
index e69de29bb2..5f7a6d71f8 100644
--- a/packages/builder/src/components/start/Steps/API.svelte
+++ b/packages/builder/src/components/start/Steps/API.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { Input } from "@budibase/bbui"
+  export let validationErrors
+
+  let blurred = { api: false }
+</script>
+
+<h2>Setup your API Key</h2>
+<div class="container">
+  <Input
+    on:input={() => (blurred.api = true)}
+    label="API Key"
+    name="apiKey"
+    placeholder="Enter your API Key"
+    type="password"
+    error={blurred.api && validationErrors.apiKey} />
+  <a target="_blank" href="https://portal.budi.live/">Get API Key</a>
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-gap: 40px;
+  }
+</style>
diff --git a/packages/builder/src/components/start/Steps/Info.svelte b/packages/builder/src/components/start/Steps/Info.svelte
index e69de29bb2..25dcf39be8 100644
--- a/packages/builder/src/components/start/Steps/Info.svelte
+++ b/packages/builder/src/components/start/Steps/Info.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { Input } from "@budibase/bbui"
+  export let validationErrors
+
+  let blurred = { appName: false }
+</script>
+
+<h2>Create your first web app</h2>
+<div class="container">
+  <Input
+    on:input={() => (blurred.appName = true)}
+    label="Web app name"
+    name="applicationName"
+    placeholder="Enter name of your web application"
+    type="name"
+    error={blurred.appName && validationErrors.applicationName} />
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-gap: 40px;
+  }
+</style>
diff --git a/packages/builder/src/components/start/Steps/User.svelte b/packages/builder/src/components/start/Steps/User.svelte
index e69de29bb2..acbfbbe7cc 100644
--- a/packages/builder/src/components/start/Steps/User.svelte
+++ b/packages/builder/src/components/start/Steps/User.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { Input, Select } from "@budibase/bbui"
+  export let validationErrors
+
+  let blurred = { username: false, password: false }
+</script>
+
+<h2>Create new user</h2>
+<div class="container">
+  <Input
+    on:input={() => (blurred.username = true)}
+    label="Username"
+    name="username"
+    placeholder="Username"
+    type="name"
+    error={blurred.username && validationErrors.username} />
+  <Input
+    on:input={() => (blurred.password = true)}
+    label="Password"
+    name="password"
+    placeholder="Password"
+    type="pasword"
+    error={blurred.password && validationErrors.password} />
+  <Select name="accessLevelId">
+    <option value="ADMIN">Admin</option>
+    <option value="POWER_USER">Power User</option>
+  </Select>
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-gap: 40px;
+  }
+</style>
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index b0cd341c2d..5058d9e74b 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -1,6 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import { store } from "builderStore"
+  import api from "builderStore/api"
   import AppList from "components/start/AppList.svelte"
   import { onMount } from "svelte"
   import ActionButton from "components/common/ActionButton.svelte"
@@ -23,6 +24,24 @@
     }
   }
 
+  let hasKey
+
+  async function fetchKeys() {
+    const response = await api.get(`/api/keys/`)
+    const res = await response.json()
+    return res.budibase
+  }
+
+  async function checkIfKeysAndApps() {
+    const key = await fetchKeys()
+    const apps = await getApps()
+    if (key) {
+      hasKey = true
+    } else {
+      showCreateAppModal()
+    }
+  }
+
   // Handle create app modal
   const { open } = getContext("simple-modal")
 
@@ -30,8 +49,7 @@
     open(
       CreateAppModal,
       {
-        message: "What is your name?",
-        hasForm: true,
+        hasKey,
       },
       {
         closeButton: false,
@@ -42,6 +60,8 @@
       }
     )
   }
+
+  checkIfKeysAndApps()
 </script>
 
 <div class="header">

From 7ef4f2b2ac06e46b91711454b955d2ceb0978432 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 3 Aug 2020 16:26:28 +0200
Subject: [PATCH 3/5] signup flow now works correctly

---
 .../src/components/start/AppCard.svelte       |  6 +--
 .../components/start/CreateAppModal.svelte    | 38 +++++++++++++++----
 .../src/components/start/Steps/index.js       |  6 +--
 .../server/src/api/controllers/application.js |  1 -
 4 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 7cee45104a..39ee948b98 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -1,14 +1,10 @@
 <script>
   import Button from "components/common/Button.svelte"
-  export let name,
-    description = `A minimalist CRM which removes the noise and allows you to focus
-              on your business.`,
-    _id
+  export let name, _id
 </script>
 
 <div class="apps-card">
   <h3 class="app-title">{name}</h3>
-  <p class="app-desc">{description}</p>
   <div class="card-footer">
     <a href={`/_builder/${_id}`} class="app-button">Open {name}</a>
   </div>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index cb97209b28..755ed358a5 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -6,8 +6,9 @@
 </script>
 
 <script>
+  import { store, workflowStore, backendUiStore } from "builderStore"
   import { string, object } from "yup"
-  import api from "builderStore/api"
+  import api, { get } from "builderStore/api"
   import Form from "@svelteschool/svelte-forms"
   import Spinner from "components/common/Spinner.svelte"
   import { API, Info, User } from "./Steps"
@@ -114,27 +115,48 @@
   async function signUp() {
     submitting = true
     try {
+      // Add API key if there is none.
       if (!hasKey) {
         await updateKey(["budibase", $createAppStore.values.apiKey])
       }
-      const response = await post("/api/applications", {
+
+      // Create App
+      const appResp = await post("/api/applications", {
         name: $createAppStore.values.applicationName,
       })
-      const res = await response.json()
+      const appJson = await appResp.json()
       analytics.captureEvent("web_app_created", {
         name,
-        description,
-        appId: res._id,
+        appId: appJson._id,
       })
-      console.log("App created!")
-      // $goto(`./${res._id}`)
+
+      // Select Correct Application/DB in prep for creating user
+      const applicationPkg = await get(`/api/${appJson._id}/appPackage`)
+      const pkg = await applicationPkg.json()
+      if (applicationPkg.ok) {
+        backendUiStore.actions.reset()
+        await store.setPackage(pkg)
+        workflowStore.actions.fetch()
+      } else {
+        throw new Error(pkg)
+      }
+
+      // Create user
+      const user = {
+        name: $createAppStore.values.username,
+        username: $createAppStore.values.username,
+        password: $createAppStore.values.password,
+        accessLevelId: $createAppStore.values.accessLevelId,
+      }
+      const userResp = await api.post(`/api/users`, user)
+      const json = await userResp.json()
+      $goto(`./${appJson._id}`)
     } catch (error) {
       console.error(error)
     }
   }
 
   async function updateKey([key, value]) {
-    console.log("Saving API Key")
     const response = await api.put(`/api/keys/${key}`, { value })
     const res = await response.json()
     return res
diff --git a/packages/builder/src/components/start/Steps/index.js b/packages/builder/src/components/start/Steps/index.js
index 45b9a7649c..e59018eda7 100644
--- a/packages/builder/src/components/start/Steps/index.js
+++ b/packages/builder/src/components/start/Steps/index.js
@@ -1,3 +1,3 @@
-export { default as API } from './API.svelte'
-export { default as Info } from './Info.svelte'
-export { default as User } from './User.svelte'
\ No newline at end of file
+export { default as API } from "./API.svelte"
+export { default as Info } from "./Info.svelte"
+export { default as User } from "./User.svelte"
diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index fcc3bc0579..9619a973c9 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -69,7 +69,6 @@ exports.create = async function(ctx) {
       "@budibase/materialdesign-components",
     ],
     name: ctx.request.body.name,
-    description: ctx.request.body.description,
   }
 
   const { rev } = await db.put(newApplication)

From b2d93c16ec68e01fe0a02a922d640dc7c90690a0 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 3 Aug 2020 16:30:26 +0200
Subject: [PATCH 4/5] adds missing bb logo

---
 .../builder/src/components/start/CreateAppModal.svelte     | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 755ed358a5..6175d29546 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -231,6 +231,7 @@
   <div class="close-button" on:click={_onCancel}>
     <CloseIcon />
   </div>
+  <img src="/_builder/assets/bb-logo.svg" alt="budibase icon" />
   {#if submitting}
     <div in:fade class="spinner-container">
       <Spinner />
@@ -307,4 +308,10 @@
   .hidden {
     display: none;
   }
+  img {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    height: 40px;
+  }
 </style>

From 8762cbb218cda60f0d56c05c4da7a1a6dbfa1008 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 3 Aug 2020 17:08:54 +0200
Subject: [PATCH 5/5] move store init to component instance, svelte-forms need
 to be updated before it can use the store correctly in the context module
 script tag

---
 .../builder/src/components/start/CreateAppModal.svelte   | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 6175d29546..2ce4909f48 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,11 +1,6 @@
-<script context="module">
-  // Init store here so that it doesn't get destroyed and removed when the component instance is destroyed. This is to make sure no data is lost if the user closes the model
+<script>
   import { writable } from "svelte/store"
 
-  export const createAppStore = writable({ currentStep: 0, values: {} })
-</script>
-
-<script>
   import { store, workflowStore, backendUiStore } from "builderStore"
   import { string, object } from "yup"
   import api, { get } from "builderStore/api"
@@ -22,6 +17,8 @@
   import analytics from "../../analytics"
 
   const { open, close } = getContext("simple-modal")
+  //Move this to context="module" once svelte-forms is updated so that it can bind to stores correctly
+  const createAppStore = writable({ currentStep: 0, values: {} })
 
   export let hasKey