From 2965c2338d7f43026ad9c1c033103c58906dc72b Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 20 May 2020 17:02:46 +0100
Subject: [PATCH 01/14] workflow CRUD complete

---
 packages/server/package.json                  |   2 +-
 .../server/src/api/controllers/workflow.js    |  68 +++++++++++
 packages/server/src/api/index.js              |   4 +
 packages/server/src/api/routes/index.js       |   2 +
 .../src/api/routes/tests/couchTestUtils.js    |  13 +-
 .../src/api/routes/tests/workflow.spec.js     | 114 ++++++++++++++++++
 packages/server/src/api/routes/workflow.js    |  13 ++
 packages/server/src/schemas/index.js          |  38 ++++++
 8 files changed, 244 insertions(+), 10 deletions(-)
 create mode 100644 packages/server/src/api/controllers/workflow.js
 create mode 100644 packages/server/src/api/routes/tests/workflow.spec.js
 create mode 100644 packages/server/src/api/routes/workflow.js
 create mode 100644 packages/server/src/schemas/index.js

diff --git a/packages/server/package.json b/packages/server/package.json
index 95990ac88f..156a25aa0b 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -24,7 +24,7 @@
   },
   "scripts": {
     "test": "jest routes --runInBand",
-    "test:integration": "jest routes --runInBand",
+    "test:integration": "jest workflow --runInBand",
     "test:watch": "jest -w",
     "initialise": "node ../cli/bin/budi init -b local -q",
     "budi": "node ../cli/bin/budi",
diff --git a/packages/server/src/api/controllers/workflow.js b/packages/server/src/api/controllers/workflow.js
new file mode 100644
index 0000000000..216ca6afd2
--- /dev/null
+++ b/packages/server/src/api/controllers/workflow.js
@@ -0,0 +1,68 @@
+const CouchDB = require("../../db")
+const Ajv = require("ajv")
+const newid = require("../../db/newid")
+
+const ajv = new Ajv()
+
+exports.create = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  const workflow = ctx.request.body
+
+  workflow._id = newid()
+
+  // TODO: Possibly validate the workflow against a schema
+
+  // // validation with ajv
+  // const model = await db.get(record.modelId)
+  // const validate = ajv.compile({
+  //   properties: model.schema,
+  // })
+  // const valid = validate(record)
+
+  // if (!valid) {
+  //   ctx.status = 400
+  //   ctx.body = {
+  //     status: 400,
+  //     errors: validate.errors,
+  //   }
+  //   return
+  // }
+
+
+  workflow.type = "workflow"
+  const response = await db.post(workflow)
+  workflow._rev = response.rev
+
+  ctx.status = 200
+  ctx.body = {
+    message: "Workflow created successfully",
+    workflow: {
+      ...workflow,
+      ...response
+    }
+  };
+}
+
+exports.update = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  ctx.body = await db.get(ctx.params.recordId)
+}
+
+exports.fetch = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  const response = await db.query(`database/by_type`, {
+    type: "workflow",
+    include_docs: true,
+  })
+  ctx.body = response.rows.map(row => row.doc)
+}
+
+exports.find = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  ctx.body = await db.get(ctx.params.id)
+}
+
+exports.destroy = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  ctx.body = await db.remove(ctx.params.id, ctx.params.rev)
+}
diff --git a/packages/server/src/api/index.js b/packages/server/src/api/index.js
index 176eaaff96..360cf8f827 100644
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@@ -15,6 +15,7 @@ const {
   viewRoutes,
   staticRoutes,
   componentRoutes,
+  workflowRoutes
 } = require("./routes")
 
 const router = new Router()
@@ -75,6 +76,9 @@ router.use(recordRoutes.allowedMethods())
 
 router.use(instanceRoutes.routes())
 router.use(instanceRoutes.allowedMethods())
+
+router.use(workflowRoutes.routes())
+router.use(workflowRoutes.allowedMethods())
 // end auth routes
 
 router.use(pageRoutes.routes())
diff --git a/packages/server/src/api/routes/index.js b/packages/server/src/api/routes/index.js
index a8f57c0e14..e0737ffa6c 100644
--- a/packages/server/src/api/routes/index.js
+++ b/packages/server/src/api/routes/index.js
@@ -9,6 +9,7 @@ const modelRoutes = require("./model")
 const viewRoutes = require("./view")
 const staticRoutes = require("./static")
 const componentRoutes = require("./component")
+const workflowRoutes = require("./workflow");
 
 module.exports = {
   authRoutes,
@@ -22,4 +23,5 @@ module.exports = {
   viewRoutes,
   staticRoutes,
   componentRoutes,
+  workflowRoutes
 }
diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js
index 7018ec24b2..85674e11d5 100644
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@@ -76,14 +76,9 @@ exports.createUser = async (
 
 exports.insertDocument = async (databaseId, document) => {
   const { id, ...documentFields } = document
-  await new CouchDB(databaseId).put({ _id: id, ...documentFields })
+  return await new CouchDB(databaseId).put({ _id: id, ...documentFields })
 }
 
-exports.createSchema = async (request, instanceId, schema) => {
-  for (let model of schema.models) {
-    await request.post(`/api/${instanceId}/models`).send(model)
-  }
-  for (let view of schema.views) {
-    await request.post(`/api/${instanceId}/views`).send(view)
-  }
-}
+exports.destroyDocument = async (databaseId, documentId) => {
+  return await new CouchDB(databaseId).destroy(documentId);
+}
\ No newline at end of file
diff --git a/packages/server/src/api/routes/tests/workflow.spec.js b/packages/server/src/api/routes/tests/workflow.spec.js
new file mode 100644
index 0000000000..5b09009479
--- /dev/null
+++ b/packages/server/src/api/routes/tests/workflow.spec.js
@@ -0,0 +1,114 @@
+const { 
+  createClientDatabase,
+  createApplication,
+  createInstance,
+  defaultHeaders,
+  supertest,
+  insertDocument,
+  destroyDocument
+} = require("./couchTestUtils")
+
+const TEST_WORKFLOW = {
+  _id: "Test Workflow",
+  name: "My Workflow",
+  pageId: "123123123",
+  screenId: "kasdkfldsafkl",
+  live: true,
+  uiTree: {
+
+  },
+  definition: {
+    triggers: [
+
+    ],
+    next: {
+      actionId: "abc123",
+      type: "SERVER",
+      conditions: {
+      }
+    }
+  }
+}
+
+describe("/workflows", () => {
+  let request
+  let server
+  let app
+  let instance
+  let workflow
+
+  beforeAll(async () => {
+    ({ request, server } = await supertest())
+    await createClientDatabase(request)
+    app = await createApplication(request)
+  })
+
+  beforeEach(async () => {
+    instance = await createInstance(request, app._id)
+    if (workflow) await destroyDocument(workflow.id);
+  })
+
+  afterAll(async () => {
+    server.close()
+  })
+
+  const createWorkflow = async () => {
+    workflow = await insertDocument(instance._id, {
+      type: "workflow",
+      ...TEST_WORKFLOW
+    });
+  }
+
+  describe("create", () => {
+    it("returns a success message when the workflow is successfully created", async () => {
+      const res = await request
+        .post(`/api/${instance._id}/workflows`)
+        .set(defaultHeaders)
+        .send(TEST_WORKFLOW)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+        expect(res.body.message).toEqual("Workflow created successfully");
+        expect(res.body.workflow.name).toEqual("My Workflow");
+    })
+  })
+
+  describe("fetch", () => {
+    it("return all the workflows for an instance", async () => {
+      await createWorkflow();
+      const res = await request
+        .get(`/api/${instance._id}/workflows`)
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+        expect(res.body[0]).toEqual(expect.objectContaining(TEST_WORKFLOW));
+    })
+  })
+
+  describe("find", () => {
+    it("returns a workflow when queried by ID", async () => {
+      await createWorkflow();
+      const res = await request
+        .get(`/api/${instance._id}/workflows/${workflow.id}`)
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+        expect(res.body).toEqual(expect.objectContaining(TEST_WORKFLOW));
+    })
+  })
+
+  describe("destroy", () => {
+    it("deletes a workflow by its ID", async () => {
+      await createWorkflow();
+      const res = await request
+        .delete(`/api/${instance._id}/workflows/${workflow.id}/${workflow.rev}`)
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+        expect(res.body.id).toEqual(TEST_WORKFLOW._id);
+    })
+  })
+});
diff --git a/packages/server/src/api/routes/workflow.js b/packages/server/src/api/routes/workflow.js
new file mode 100644
index 0000000000..86332e89aa
--- /dev/null
+++ b/packages/server/src/api/routes/workflow.js
@@ -0,0 +1,13 @@
+const Router = require("@koa/router")
+const controller = require("../controllers/workflow")
+
+const router = Router()
+
+router
+  .get("/api/:instanceId/workflows", controller.fetch)
+  .get("/api/:instanceId/workflows/:id", controller.find)
+  .post("/api/:instanceId/workflows", controller.create)
+  .put("/api/:instanceId/workflows/:id", controller.update)
+  .delete("/api/:instanceId/workflows/:id/:rev", controller.destroy)
+
+module.exports = router
diff --git a/packages/server/src/schemas/index.js b/packages/server/src/schemas/index.js
new file mode 100644
index 0000000000..23a839bf97
--- /dev/null
+++ b/packages/server/src/schemas/index.js
@@ -0,0 +1,38 @@
+const WORKFLOW_SCHEMA = {
+  properties: {
+    type: "workflow",
+    pageId: {
+      type: "string"
+    },
+    screenId: {
+      type: "string"
+    },
+    live: {
+      type: "boolean"
+    },
+    uiTree: {
+      type: "object"
+    },
+    definition: {
+      type: "object",
+      properties: {
+        triggers: { type: "array" },
+        next: { 
+          type: "object",
+          properties: {
+            type: { type: "string" },
+            actionId: { type: "string" },
+            args: { type: "object" },
+            conditions: { type: "array" },
+            errorHandling: { type: "object" },
+            next: { type: "object" }
+          }
+        },
+      }
+    }
+  }
+};
+
+module.exports = {
+  WORKFLOW_SCHEMA
+};
\ No newline at end of file

From 35ceb7e01dd2c07f2eda4ca63224993086e749f9 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 21 May 2020 11:55:56 +0100
Subject: [PATCH 02/14] budi init - removing unnecessary argument

---
 packages/cli/src/commands/init/index.js       |  9 +------
 packages/cli/src/commands/init/initHandler.js | 26 +++----------------
 2 files changed, 4 insertions(+), 31 deletions(-)

diff --git a/packages/cli/src/commands/init/index.js b/packages/cli/src/commands/init/index.js
index 4a25fbd8b2..f387a8d203 100644
--- a/packages/cli/src/commands/init/index.js
+++ b/packages/cli/src/commands/init/index.js
@@ -11,13 +11,6 @@ module.exports = {
       default: "~/.budibase",
       alias: "d",
     })
-    yargs.positional("database", {
-      type: "string",
-      describe: "use a local (PouchDB) or remote (CouchDB) database",
-      alias: "b",
-      default: "local",
-      choices: ["local", "remote"],
-    })
     yargs.positional("clientId", {
       type: "string",
       describe: "used to determine the name of the global databse",
@@ -28,7 +21,7 @@ module.exports = {
       type: "string",
       describe:
         "connection string for couch db, format: https://username:password@localhost:5984",
-      alias: "x",
+      alias: "u",
       default: "",
     })
     yargs.positional("quiet", {
diff --git a/packages/cli/src/commands/init/initHandler.js b/packages/cli/src/commands/init/initHandler.js
index 0467633ee8..c0c4ad1b9e 100644
--- a/packages/cli/src/commands/init/initHandler.js
+++ b/packages/cli/src/commands/init/initHandler.js
@@ -14,7 +14,6 @@ const run = async opts => {
   try {
     await ensureAppDir(opts)
     await setEnvironmentVariables(opts)
-    await prompts(opts)
     await createClientDatabase(opts)
     await createDevEnvFile(opts)
     console.log(chalk.green("Budibase successfully initialised."))
@@ -24,13 +23,13 @@ const run = async opts => {
 }
 
 const setEnvironmentVariables = async opts => {
-  if (opts.database === "local") {
+  if (opts.couchDbUrl) {
+    process.env.COUCH_DB_URL = opts.couchDbUrl
+  } else {
     const dataDir = join(opts.dir, ".data")
     await ensureDir(dataDir)
     process.env.COUCH_DB_URL =
       dataDir + (dataDir.endsWith("/") || dataDir.endsWith("\\") ? "" : "/")
-  } else {
-    process.env.COUCH_DB_URL = opts.couchDbUrl
   }
 }
 
@@ -39,25 +38,6 @@ const ensureAppDir = async opts => {
   await ensureDir(opts.dir)
 }
 
-const prompts = async opts => {
-  const questions = [
-    {
-      type: "input",
-      name: "couchDbUrl",
-      message:
-        "CouchDB Connection String (e.g. https://user:password@localhost:5984): ",
-      validate: function(value) {
-        return !!value || "Please enter connection string"
-      },
-    },
-  ]
-
-  if (opts.database === "remote" && !opts.couchDbUrl) {
-    const answers = await inquirer.prompt(questions)
-    opts.couchDbUrl = answers.couchDbUrl
-  }
-}
-
 const createClientDatabase = async opts => {
   // cannot be a top level require as it
   // will cause environment module to be loaded prematurely

From aa66598e4c535326703aad69692d5aa6aa539ccc Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 21 May 2020 14:31:23 +0100
Subject: [PATCH 03/14] auth, first version, needing tested

---
 packages/server/.vscode/launch.json           |  13 ++
 .../server/src/api/controllers/accesslevel.js | 108 ++++++++++
 packages/server/src/api/controllers/auth.js   |   2 +-
 packages/server/src/api/controllers/record.js |  30 ++-
 packages/server/src/api/controllers/user.js   |  39 +++-
 packages/server/src/api/index.js              |   8 +-
 packages/server/src/api/routes/accesslevel.js |  14 ++
 packages/server/src/api/routes/application.js |  12 +-
 packages/server/src/api/routes/client.js      |   4 +-
 packages/server/src/api/routes/component.js   |   3 +
 packages/server/src/api/routes/index.js       |   4 +-
 packages/server/src/api/routes/instance.js    |   6 +-
 packages/server/src/api/routes/model.js       |  45 ++++-
 packages/server/src/api/routes/pages.js       | 120 ++++++-----
 packages/server/src/api/routes/record.js      |  12 --
 packages/server/src/api/routes/screen.js      |  12 +-
 .../src/api/routes/tests/accesslevel.spec.js  | 184 +++++++++++++++++
 .../src/api/routes/tests/couchTestUtils.js    |  22 +-
 .../server/src/api/routes/tests/model.spec.js |   9 +-
 .../src/api/routes/tests/record.spec.js       |  23 ++-
 .../server/src/api/routes/tests/user.spec.js  |   3 +-
 packages/server/src/api/routes/user.js        |  22 +-
 packages/server/src/api/routes/view.js        |  14 +-
 .../server/src/middleware/authenticated.js    |  34 +++-
 packages/server/src/middleware/authorized.js  |  58 ++++++
 packages/server/src/utilities/accessLevels.js |  64 ++++++
 packages/server/yarn.lock                     | 190 +-----------------
 27 files changed, 746 insertions(+), 309 deletions(-)
 create mode 100644 packages/server/src/api/controllers/accesslevel.js
 create mode 100644 packages/server/src/api/routes/accesslevel.js
 delete mode 100644 packages/server/src/api/routes/record.js
 create mode 100644 packages/server/src/api/routes/tests/accesslevel.spec.js
 create mode 100644 packages/server/src/middleware/authorized.js
 create mode 100644 packages/server/src/utilities/accessLevels.js

diff --git a/packages/server/.vscode/launch.json b/packages/server/.vscode/launch.json
index 964e9297f4..4dc6b653cb 100644
--- a/packages/server/.vscode/launch.json
+++ b/packages/server/.vscode/launch.json
@@ -49,6 +49,19 @@
             "program": "${workspaceFolder}/node_modules/jest-cli/bin/jest",
         }
       },
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "Jest - Access Levels",
+        "program": "${workspaceFolder}/node_modules/.bin/jest",
+        "args": ["accesslevel.spec", "--runInBand"],
+        "console": "integratedTerminal",
+        "internalConsoleOptions": "neverOpen",
+        "disableOptimisticBPs": true,
+        "windows": {
+            "program": "${workspaceFolder}/node_modules/jest-cli/bin/jest",
+        }
+      },
       {
         "type": "node",
         "request": "launch",
diff --git a/packages/server/src/api/controllers/accesslevel.js b/packages/server/src/api/controllers/accesslevel.js
new file mode 100644
index 0000000000..9c9c7ff727
--- /dev/null
+++ b/packages/server/src/api/controllers/accesslevel.js
@@ -0,0 +1,108 @@
+const CouchDB = require("../../db")
+const newid = require("../../db/newid")
+const {
+  generateAdminPermissions,
+  generatePowerUserPermissions,
+  POWERUSER_LEVEL_ID,
+  ADMIN_LEVEL_ID,
+} = require("../../utilities/accessLevels")
+
+exports.fetch = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  const body = await db.query("database/by_type", {
+    include_docs: true,
+    key: ["accesslevel"],
+  })
+  const customAccessLevels = body.rows.map(row => row.doc)
+
+  const staticAccessLevels = [
+    {
+      _id: ADMIN_LEVEL_ID,
+      name: "Admin",
+      permissions: await generateAdminPermissions(ctx.params.instanceId),
+    },
+    {
+      _id: POWERUSER_LEVEL_ID,
+      name: "Power User",
+      permissions: await generatePowerUserPermissions(ctx.params.instanceId),
+    },
+  ]
+
+  ctx.body = [...staticAccessLevels, ...customAccessLevels]
+}
+
+exports.find = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  ctx.body = await db.get(ctx.params.levelId)
+}
+
+exports.update = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  const level = await db.get(ctx.params.levelId)
+  level.name = ctx.body.name
+  level.permissions = ctx.request.body.permissions
+  const result = await db.put(level)
+  level._rev = result.rev
+  ctx.body = level
+  ctx.message = `Level ${level.name} updated successfully.`
+}
+
+exports.patch = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  const level = await db.get(ctx.params.levelId)
+  const { removedPermissions, addedPermissions, _rev } = ctx.request.body
+
+  if (!_rev) throw new Error("Must supply a _rev to update an access level")
+
+  level._rev = _rev
+
+  if (removedPermissions) {
+    level.permissions = level.permissions.filter(
+      p =>
+        !removedPermissions.some(
+          rem => rem.name === p.name && rem.itemId === p.itemId
+        )
+    )
+  }
+
+  if (addedPermissions) {
+    level.permissions = [
+      ...level.permissions.filter(
+        p =>
+          !addedPermissions.some(
+            add => add.name === p.name && add.itemId === p.itemId
+          )
+      ),
+      ...addedPermissions,
+    ]
+  }
+
+  const result = await db.put(level)
+  level._rev = result.rev
+  ctx.body = level
+  ctx.message = `Access Level ${level.name} updated successfully.`
+}
+
+exports.create = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+
+  const level = {
+    name: ctx.request.body.name,
+    _rev: ctx.request.body._rev,
+    permissions: ctx.request.body.permissions || [],
+    _id: newid(),
+    type: "accesslevel",
+  }
+
+  const result = await db.put(level)
+  level._rev = result.rev
+  ctx.body = level
+  ctx.message = `Access Level '${level.name}' created successfully.`
+}
+
+exports.destroy = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  await db.remove(ctx.params.levelId, ctx.params.rev)
+  ctx.message = `Access Level ${ctx.params.id} deleted successfully`
+  ctx.status = 200
+}
diff --git a/packages/server/src/api/controllers/auth.js b/packages/server/src/api/controllers/auth.js
index 4cfc2f438a..b9e1150648 100644
--- a/packages/server/src/api/controllers/auth.js
+++ b/packages/server/src/api/controllers/auth.js
@@ -37,7 +37,7 @@ exports.authenticate = async ctx => {
   if (await bcrypt.compare(password, dbUser.password)) {
     const payload = {
       userId: dbUser._id,
-      accessLevel: "",
+      accessLevelId: dbUser.accessLevelId,
       instanceId: instanceId,
     }
 
diff --git a/packages/server/src/api/controllers/record.js b/packages/server/src/api/controllers/record.js
index 2cd648b6c3..7a5b045136 100644
--- a/packages/server/src/api/controllers/record.js
+++ b/packages/server/src/api/controllers/record.js
@@ -7,6 +7,7 @@ const ajv = new Ajv()
 exports.save = async function(ctx) {
   const db = new CouchDB(ctx.params.instanceId)
   const record = ctx.request.body
+  record.modelId = ctx.params.modelId
 
   if (!record._rev && !record._id) {
     record._id = newid()
@@ -43,16 +44,12 @@ exports.save = async function(ctx) {
   record.type = "record"
   const response = await db.post(record)
   record._rev = response.rev
-  // await ctx.publish(events.recordApi.save.onRecordCreated, {
-  //   record: record,
-  // })
-
   ctx.body = record
   ctx.status = 200
   ctx.message = `${model.name} created successfully`
 }
 
-exports.fetch = async function(ctx) {
+exports.fetchView = async function(ctx) {
   const db = new CouchDB(ctx.params.instanceId)
   const response = await db.query(`database/${ctx.params.viewName}`, {
     include_docs: true,
@@ -60,13 +57,30 @@ exports.fetch = async function(ctx) {
   ctx.body = response.rows.map(row => row.doc)
 }
 
+exports.fetchModel = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  const response = await db.query(`database/all_${ctx.params.modelId}`, {
+    include_docs: true,
+  })
+  ctx.body = response.rows.map(row => row.doc)
+}
+
 exports.find = async function(ctx) {
   const db = new CouchDB(ctx.params.instanceId)
-  ctx.body = await db.get(ctx.params.recordId)
+  const record = await db.get(ctx.params.recordId)
+  if (record.modelId !== ctx.params.modelId) {
+    ctx.throw(400, "Supplied modelId doe not match the record's modelId")
+    return
+  }
+  ctx.body = record
 }
 
 exports.destroy = async function(ctx) {
-  const databaseId = ctx.params.instanceId
-  const db = new CouchDB(databaseId)
+  const db = new CouchDB(ctx.params.instanceId)
+  const record = await db.get(ctx.params.recordId)
+  if (record.modelId !== ctx.params.modelId) {
+    ctx.throw(400, "Supplied modelId doe not match the record's modelId")
+    return
+  }
   ctx.body = await db.remove(ctx.params.recordId, ctx.params.revId)
 }
diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index 2be0132a47..f654caa4c0 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -2,8 +2,11 @@ const CouchDB = require("../../db")
 const clientDb = require("../../db/clientDb")
 const bcrypt = require("../../utilities/bcrypt")
 const env = require("../../environment")
-
 const getUserId = userName => `user_${userName}`
+const {
+  POWERUSER_LEVEL_ID,
+  ADMIN_LEVEL_ID,
+} = require("../../utilities/accessLevels")
 
 exports.fetch = async function(ctx) {
   const database = new CouchDB(ctx.params.instanceId)
@@ -18,17 +21,26 @@ exports.fetch = async function(ctx) {
 exports.create = async function(ctx) {
   const database = new CouchDB(ctx.params.instanceId)
   const appId = (await database.get("_design/database")).metadata.applicationId
-  const { username, password, name } = ctx.request.body
+  const { username, password, name, accessLevelId } = ctx.request.body
 
-  if (!username || !password) ctx.throw(400, "Username and Password Required.")
+  if (!username || !password) {
+    ctx.throw(400, "Username and Password Required.")
+  }
 
-  const response = await database.post({
+  const accessLevel = await checkAccessLevel(database, accessLevelId)
+
+  if (!accessLevel) ctx.throw(400, "Invalid Access Level")
+
+  const user = {
     _id: getUserId(username),
     username,
     password: await bcrypt.hash(password),
     name: name || username,
     type: "user",
-  })
+    accessLevelId,
+  }
+
+  const response = await database.post(user)
 
   // the clientDB needs to store a map of users against the app
   const db = new CouchDB(clientDb.name(env.CLIENT_ID))
@@ -49,6 +61,8 @@ exports.create = async function(ctx) {
   }
 }
 
+exports.update = async function(ctx) {}
+
 exports.destroy = async function(ctx) {
   const database = new CouchDB(ctx.params.instanceId)
   await database.destroy(getUserId(ctx.params.username))
@@ -65,3 +79,18 @@ exports.find = async function(ctx) {
     _rev: user._rev,
   }
 }
+
+const checkAccessLevel = async (db, accessLevelId) => {
+  if (!accessLevelId) return
+  if (
+    accessLevelId === POWERUSER_LEVEL_ID ||
+    accessLevelId === ADMIN_LEVEL_ID
+  ) {
+    return {
+      _id: accessLevelId,
+      name: accessLevelId,
+      permissions: [],
+    }
+  }
+  return await db.get(accessLevelId)
+}
diff --git a/packages/server/src/api/index.js b/packages/server/src/api/index.js
index 176eaaff96..d8f3bde76b 100644
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@@ -7,7 +7,6 @@ const {
   authRoutes,
   pageRoutes,
   userRoutes,
-  recordRoutes,
   instanceRoutes,
   clientRoutes,
   applicationRoutes,
@@ -15,6 +14,7 @@ const {
   viewRoutes,
   staticRoutes,
   componentRoutes,
+  accesslevelRoutes,
 } = require("./routes")
 
 const router = new Router()
@@ -70,9 +70,6 @@ router.use(modelRoutes.allowedMethods())
 router.use(userRoutes.routes())
 router.use(userRoutes.allowedMethods())
 
-router.use(recordRoutes.routes())
-router.use(recordRoutes.allowedMethods())
-
 router.use(instanceRoutes.routes())
 router.use(instanceRoutes.allowedMethods())
 // end auth routes
@@ -89,6 +86,9 @@ router.use(componentRoutes.allowedMethods())
 router.use(clientRoutes.routes())
 router.use(clientRoutes.allowedMethods())
 
+router.use(accesslevelRoutes.routes())
+router.use(accesslevelRoutes.allowedMethods())
+
 router.use(staticRoutes.routes())
 router.use(staticRoutes.allowedMethods())
 
diff --git a/packages/server/src/api/routes/accesslevel.js b/packages/server/src/api/routes/accesslevel.js
new file mode 100644
index 0000000000..d34acab02c
--- /dev/null
+++ b/packages/server/src/api/routes/accesslevel.js
@@ -0,0 +1,14 @@
+const Router = require("@koa/router")
+const controller = require("../controllers/accesslevel")
+
+const router = Router()
+
+router
+  .post("/api/:instanceId/accesslevels", controller.create)
+  .put("/api/:instanceId/accesslevels", controller.update)
+  .get("/api/:instanceId/accesslevels", controller.fetch)
+  .get("/api/:instanceId/accesslevels/:levelId", controller.find)
+  .delete("/api/:instanceId/accesslevels/:levelId/:rev", controller.destroy)
+  .patch("/api/:instanceId/accesslevels/:levelId", controller.patch)
+
+module.exports = router
diff --git a/packages/server/src/api/routes/application.js b/packages/server/src/api/routes/application.js
index dddf64a710..60cc781ac6 100644
--- a/packages/server/src/api/routes/application.js
+++ b/packages/server/src/api/routes/application.js
@@ -1,11 +1,17 @@
 const Router = require("@koa/router")
 const controller = require("../controllers/application")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/accessLevels")
 
 const router = Router()
 
 router
-  .get("/api/applications", controller.fetch)
-  .get("/api/:applicationId/appPackage", controller.fetchAppPackage)
-  .post("/api/applications", controller.create)
+  .get("/api/applications", authorized(BUILDER), controller.fetch)
+  .get(
+    "/api/:applicationId/appPackage",
+    authorized(BUILDER),
+    controller.fetchAppPackage
+  )
+  .post("/api/applications", authorized(BUILDER), controller.create)
 
 module.exports = router
diff --git a/packages/server/src/api/routes/client.js b/packages/server/src/api/routes/client.js
index ff87b82e22..16acf1b7a3 100644
--- a/packages/server/src/api/routes/client.js
+++ b/packages/server/src/api/routes/client.js
@@ -1,8 +1,10 @@
 const Router = require("@koa/router")
 const controller = require("../controllers/client")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/accessLevels")
 
 const router = Router()
 
-router.get("/api/client/id", controller.getClientId)
+router.get("/api/client/id", authorized(BUILDER), controller.getClientId)
 
 module.exports = router
diff --git a/packages/server/src/api/routes/component.js b/packages/server/src/api/routes/component.js
index 5df34381fa..8fbe7ac41a 100644
--- a/packages/server/src/api/routes/component.js
+++ b/packages/server/src/api/routes/component.js
@@ -1,10 +1,13 @@
 const Router = require("@koa/router")
 const controller = require("../controllers/component")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/accessLevels")
 
 const router = Router()
 
 router.get(
   "/:appId/components/definitions",
+  authorized(BUILDER),
   controller.fetchAppComponentDefinitions
 )
 
diff --git a/packages/server/src/api/routes/index.js b/packages/server/src/api/routes/index.js
index a8f57c0e14..6a299f8351 100644
--- a/packages/server/src/api/routes/index.js
+++ b/packages/server/src/api/routes/index.js
@@ -1,7 +1,6 @@
 const authRoutes = require("./auth")
 const pageRoutes = require("./pages")
 const userRoutes = require("./user")
-const recordRoutes = require("./record")
 const instanceRoutes = require("./instance")
 const clientRoutes = require("./client")
 const applicationRoutes = require("./application")
@@ -9,12 +8,12 @@ const modelRoutes = require("./model")
 const viewRoutes = require("./view")
 const staticRoutes = require("./static")
 const componentRoutes = require("./component")
+const accesslevelRoutes = require("./accesslevel")
 
 module.exports = {
   authRoutes,
   pageRoutes,
   userRoutes,
-  recordRoutes,
   instanceRoutes,
   clientRoutes,
   applicationRoutes,
@@ -22,4 +21,5 @@ module.exports = {
   viewRoutes,
   staticRoutes,
   componentRoutes,
+  accesslevelRoutes,
 }
diff --git a/packages/server/src/api/routes/instance.js b/packages/server/src/api/routes/instance.js
index fd74a98bf1..9b7b3db511 100644
--- a/packages/server/src/api/routes/instance.js
+++ b/packages/server/src/api/routes/instance.js
@@ -1,10 +1,12 @@
 const Router = require("@koa/router")
 const controller = require("../controllers/instance")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/accessLevels")
 
 const router = Router()
 
 router
-  .post("/api/:applicationId/instances", controller.create)
-  .delete("/api/instances/:instanceId", controller.destroy)
+  .post("/api/:applicationId/instances", authorized(BUILDER), controller.create)
+  .delete("/api/instances/:instanceId", authorized(BUILDER), controller.destroy)
 
 module.exports = router
diff --git a/packages/server/src/api/routes/model.js b/packages/server/src/api/routes/model.js
index d25d0d17cb..d9eb5cf798 100644
--- a/packages/server/src/api/routes/model.js
+++ b/packages/server/src/api/routes/model.js
@@ -1,12 +1,49 @@
 const Router = require("@koa/router")
-const controller = require("../controllers/model")
+const modelController = require("../controllers/model")
+const recordController = require("../controllers/record")
+const authorized = require("../../middleware/authorized")
+const {
+  READ_MODEL,
+  WRITE_MODEL,
+  BUILDER,
+} = require("../../utilities/accessLevels")
 
 const router = Router()
 
+// records
+
 router
-  .get("/api/:instanceId/models", controller.fetch)
-  .post("/api/:instanceId/models", controller.create)
+  .get(
+    "/api/:instanceId/:modelId/records",
+    authorized(READ_MODEL, ctx => ctx.params.modelId),
+    recordController.fetchModel
+  )
+  .get(
+    "/api/:instanceId/:modelId/records/:recordId",
+    authorized(READ_MODEL, ctx => ctx.params.modelId),
+    recordController.find
+  )
+  .post(
+    "/api/:instanceId/:modelId/records",
+    authorized(WRITE_MODEL, ctx => ctx.params.modelId),
+    recordController.save
+  )
+  .delete(
+    "/api/:instanceId/:modelId/records/:recordId/:revId",
+    authorized(WRITE_MODEL, ctx => ctx.params.modelId),
+    recordController.destroy
+  )
+
+// models
+
+router
+  .get("/api/:instanceId/models", authorized(BUILDER), modelController.fetch)
+  .post("/api/:instanceId/models", authorized(BUILDER), modelController.create)
   // .patch("/api/:instanceId/models", controller.update)
-  .delete("/api/:instanceId/models/:modelId/:revId", controller.destroy)
+  .delete(
+    "/api/:instanceId/models/:modelId/:revId",
+    authorized(BUILDER),
+    modelController.destroy
+  )
 
 module.exports = router
diff --git a/packages/server/src/api/routes/pages.js b/packages/server/src/api/routes/pages.js
index 88fd1239f4..98f0f08b92 100644
--- a/packages/server/src/api/routes/pages.js
+++ b/packages/server/src/api/routes/pages.js
@@ -7,63 +7,85 @@ const {
   renameScreen,
   deleteScreen,
 } = require("../../utilities/builder")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/accessLevels")
 
 const router = Router()
 
-router.post("/_builder/api/:appId/pages/:pageName", async ctx => {
-  await buildPage(
-    ctx.config,
-    ctx.params.appId,
-    ctx.params.pageName,
-    ctx.request.body
-  )
-  ctx.response.status = StatusCodes.OK
-})
+router.post(
+  "/_builder/api/:appId/pages/:pageName",
+  authorized(BUILDER),
+  async ctx => {
+    await buildPage(
+      ctx.config,
+      ctx.params.appId,
+      ctx.params.pageName,
+      ctx.request.body
+    )
+    ctx.response.status = StatusCodes.OK
+  }
+)
 
-router.get("/_builder/api/:appId/pages/:pagename/screens", async ctx => {
-  ctx.body = await listScreens(
-    ctx.config,
-    ctx.params.appId,
-    ctx.params.pagename
-  )
-  ctx.response.status = StatusCodes.OK
-})
+router.get(
+  "/_builder/api/:appId/pages/:pagename/screens",
+  authorized(BUILDER),
+  async ctx => {
+    ctx.body = await listScreens(
+      ctx.config,
+      ctx.params.appId,
+      ctx.params.pagename
+    )
+    ctx.response.status = StatusCodes.OK
+  }
+)
 
-router.post("/_builder/api/:appId/pages/:pagename/screen", async ctx => {
-  ctx.body = await saveScreen(
-    ctx.config,
-    ctx.params.appId,
-    ctx.params.pagename,
-    ctx.request.body
-  )
-  ctx.response.status = StatusCodes.OK
-})
+router.post(
+  "/_builder/api/:appId/pages/:pagename/screen",
+  authorized(BUILDER),
+  async ctx => {
+    ctx.body = await saveScreen(
+      ctx.config,
+      ctx.params.appId,
+      ctx.params.pagename,
+      ctx.request.body
+    )
+    ctx.response.status = StatusCodes.OK
+  }
+)
 
-router.patch("/_builder/api/:appname/pages/:pagename/screen", async ctx => {
-  await renameScreen(
-    ctx.config,
-    ctx.params.appname,
-    ctx.params.pagename,
-    ctx.request.body.oldname,
-    ctx.request.body.newname
-  )
-  ctx.response.status = StatusCodes.OK
-})
+router.patch(
+  "/_builder/api/:appname/pages/:pagename/screen",
+  authorized(BUILDER),
+  async ctx => {
+    await renameScreen(
+      ctx.config,
+      ctx.params.appname,
+      ctx.params.pagename,
+      ctx.request.body.oldname,
+      ctx.request.body.newname
+    )
+    ctx.response.status = StatusCodes.OK
+  }
+)
 
-router.delete("/_builder/api/:appname/pages/:pagename/screen/*", async ctx => {
-  const name = ctx.request.path.replace(
-    `/_builder/api/${ctx.params.appname}/pages/${ctx.params.pagename}/screen/`,
-    ""
-  )
+router.delete(
+  "/_builder/api/:appname/pages/:pagename/screen/*",
+  authorized(BUILDER),
+  async ctx => {
+    const name = ctx.request.path.replace(
+      `/_builder/api/${ctx.params.appname}/pages/${ctx.params.pagename}/screen/`,
+      ""
+    )
 
-  await deleteScreen(
-    ctx.config,
-    ctx.params.appname,
-    ctx.params.pagename,
-    decodeURI(name)
-  )
+    await deleteScreen(
+      ctx.config,
+      ctx.params.appname,
+      ctx.params.pagename,
+      decodeURI(name)
+    )
 
-  ctx.response.status = StatusCodes.OK
-})
+    ctx.response.status = StatusCodes.OK
+  }
+)
 
 module.exports = router
diff --git a/packages/server/src/api/routes/record.js b/packages/server/src/api/routes/record.js
deleted file mode 100644
index fb0b543dc1..0000000000
--- a/packages/server/src/api/routes/record.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const Router = require("@koa/router")
-const controller = require("../controllers/record")
-
-const router = Router()
-
-router
-  .get("/api/:instanceId/:viewName/records", controller.fetch)
-  .get("/api/:instanceId/records/:recordId", controller.find)
-  .post("/api/:instanceId/records", controller.save)
-  .delete("/api/:instanceId/records/:recordId/:revId", controller.destroy)
-
-module.exports = router
diff --git a/packages/server/src/api/routes/screen.js b/packages/server/src/api/routes/screen.js
index 3a167b6ef6..19823aab68 100644
--- a/packages/server/src/api/routes/screen.js
+++ b/packages/server/src/api/routes/screen.js
@@ -1,11 +1,17 @@
 const Router = require("@koa/router")
 const controller = require("../controllers/screen")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/accessLevels")
 
 const router = Router()
 
 router
-  .get("/api/:instanceId/screens", controller.fetch)
-  .post("/api/:instanceId/screens", controller.save)
-  .delete("/api/:instanceId/:screenId/:revId", controller.destroy)
+  .get("/api/:instanceId/screens", authorized(BUILDER), controller.fetch)
+  .post("/api/:instanceId/screens", authorized(BUILDER), controller.save)
+  .delete(
+    "/api/:instanceId/:screenId/:revId",
+    authorized(BUILDER),
+    controller.destroy
+  )
 
 module.exports = router
diff --git a/packages/server/src/api/routes/tests/accesslevel.spec.js b/packages/server/src/api/routes/tests/accesslevel.spec.js
new file mode 100644
index 0000000000..ef2d1575cd
--- /dev/null
+++ b/packages/server/src/api/routes/tests/accesslevel.spec.js
@@ -0,0 +1,184 @@
+const { 
+  createInstance, 
+  createClientDatabase,
+  createApplication,
+  createModel,
+  createView,
+  supertest,
+  defaultHeaders
+} = require("./couchTestUtils")
+const {
+  generateAdminPermissions,
+  generatePowerUserPermissions,
+  POWERUSER_LEVEL_ID,
+  ADMIN_LEVEL_ID,
+  READ_MODEL,
+  WRITE_MODEL,
+} = require("../../../utilities/accessLevels")
+
+describe("/accesslevels", () => {
+  let appId
+  let server
+  let request
+  let instanceId
+  let model
+  let view
+
+  beforeAll(async () => {
+    ({ request, server } = await supertest())
+    await createClientDatabase(request);
+    appId = (await createApplication(request))._id
+  });
+
+  afterAll(async () => {
+    server.close();
+  })
+
+  beforeEach(async () => {
+    instanceId = (await createInstance(request, appId))._id
+    model = await createModel(request, instanceId)
+    view = await createView(request, instanceId)
+  })
+
+  describe("create", () => {
+
+    it("returns a success message when level is successfully created", async () => {
+      const res = await request
+        .post(`/api/${instanceId}/accesslevels`)
+        .send({ name: "user" })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      expect(res.res.statusMessage).toEqual("Access Level 'user' created successfully.")
+      expect(res.body._id).toBeDefined()
+      expect(res.body._rev).toBeDefined()
+      expect(res.body.permissions).toEqual([])
+    })
+
+  });
+
+  describe("fetch", () => {
+
+    it("should list custom levels, plus 2 default levels", async () => {
+      const createRes = await request
+        .post(`/api/${instanceId}/accesslevels`)
+        .send({ name: "user", permissions: [ { itemId: model._id, name: READ_MODEL }] })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      const customLevel = createRes.body
+
+      const res = await request
+        .get(`/api/${instanceId}/accesslevels`)
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      expect(res.body.length).toBe(3)
+
+      const adminLevel = res.body.find(r => r._id === ADMIN_LEVEL_ID)
+      expect(adminLevel).toBeDefined()
+      expect(adminLevel.permissions).toEqual(await generateAdminPermissions(instanceId))
+
+      const powerUserLevel = res.body.find(r => r._id === POWERUSER_LEVEL_ID)
+      expect(powerUserLevel).toBeDefined()
+      expect(powerUserLevel.permissions).toEqual(await generatePowerUserPermissions(instanceId))
+
+      const customLevelFetched = res.body.find(r => r._id === customLevel._id)
+      expect(customLevelFetched.permissions).toEqual(customLevel.permissions)
+    })
+    
+  });
+
+  describe("destroy", () => {
+    it("should delete custom access level", async () => {
+      const createRes = await request
+        .post(`/api/${instanceId}/accesslevels`)
+        .send({ name: "user", permissions: [ { itemId: model._id, name: READ_MODEL } ] })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      const customLevel = createRes.body
+
+      await request
+        .delete(`/api/${instanceId}/accesslevels/${customLevel._id}/${customLevel._rev}`)
+        .set(defaultHeaders)
+        .expect(200)
+
+      await request
+        .get(`/api/${instanceId}/accesslevels/${customLevel._id}`)
+        .set(defaultHeaders)
+        .expect(404)      
+    })
+  })
+
+  describe("patch", () => {
+    it("should add given permissions", async () => {
+      const createRes = await request
+        .post(`/api/${instanceId}/accesslevels`)
+        .send({ name: "user", permissions: [ { itemId: model._id, name: READ_MODEL }] })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      const customLevel = createRes.body
+
+      await request
+        .patch(`/api/${instanceId}/accesslevels/${customLevel._id}`)
+        .send({
+          _rev: customLevel._rev,
+          addedPermissions:  [ { itemId: model._id, name: WRITE_MODEL } ] 
+        })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      const finalRes = await request
+        .get(`/api/${instanceId}/accesslevels/${customLevel._id}`)
+        .set(defaultHeaders)
+        .expect(200) 
+
+      expect(finalRes.body.permissions.length).toBe(2)
+      expect(finalRes.body.permissions.some(p => p.name === WRITE_MODEL)).toBe(true)
+      expect(finalRes.body.permissions.some(p => p.name === READ_MODEL)).toBe(true)
+    })
+
+    it("should remove given permissions", async () => {
+      const createRes = await request
+        .post(`/api/${instanceId}/accesslevels`)
+        .send({ 
+          name: "user", 
+          permissions: [ 
+            { itemId: model._id, name: READ_MODEL },
+            { itemId: model._id, name: WRITE_MODEL },
+          ] 
+        })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      const customLevel = createRes.body
+
+      await request
+        .patch(`/api/${instanceId}/accesslevels/${customLevel._id}`)
+        .send({
+          _rev: customLevel._rev,
+          removedPermissions:  [ { itemId: model._id, name: WRITE_MODEL }] 
+        })
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+      const finalRes = await request
+        .get(`/api/${instanceId}/accesslevels/${customLevel._id}`)
+        .set(defaultHeaders)
+        .expect(200) 
+
+      expect(finalRes.body.permissions.length).toBe(1)
+      expect(finalRes.body.permissions.some(p => p.name === READ_MODEL)).toBe(true)
+    })
+  })
+});
diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js
index 7018ec24b2..841d46ca46 100644
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@@ -2,6 +2,7 @@ const CouchDB = require("../../../db")
 const { create, destroy } = require("../../../db/clientDb")
 const supertest = require("supertest")
 const app = require("../../../app")
+const { POWERUSER_LEVEL_ID } = require("../../../utilities/accessLevels")
 
 const TEST_CLIENT_ID = "test-client-id"
 
@@ -17,7 +18,7 @@ exports.supertest = async () => {
 
 exports.defaultHeaders = {
   Accept: "application/json",
-  Authorization: "Basic test-admin-secret",
+  Cookie: ["builder:token=test-admin-secret"],
 }
 
 exports.createModel = async (request, instanceId, model) => {
@@ -37,6 +38,18 @@ exports.createModel = async (request, instanceId, model) => {
   return res.body
 }
 
+exports.createView = async (request, instanceId, view) => {
+  view = view || {
+    map: "function(doc) { emit(doc[doc.key], doc._id); } ",
+  }
+
+  const res = await request
+    .post(`/api/${instanceId}/views`)
+    .set(exports.defaultHeaders)
+    .send(view)
+  return res.body
+}
+
 exports.createClientDatabase = async () => await create(TEST_CLIENT_ID)
 
 exports.createApplication = async (request, name = "test_application") => {
@@ -70,7 +83,12 @@ exports.createUser = async (
   const res = await request
     .post(`/api/${instanceId}/users`)
     .set(exports.defaultHeaders)
-    .send({ name: "Bill", username, password })
+    .send({
+      name: "Bill",
+      username,
+      password,
+      accessLevelId: POWERUSER_LEVEL_ID,
+    })
   return res.body
 }
 
diff --git a/packages/server/src/api/routes/tests/model.spec.js b/packages/server/src/api/routes/tests/model.spec.js
index e32c94224f..3e224536ed 100644
--- a/packages/server/src/api/routes/tests/model.spec.js
+++ b/packages/server/src/api/routes/tests/model.spec.js
@@ -3,7 +3,8 @@ const {
   createModel, 
   supertest, 
   createClientDatabase, 
-  createApplication 
+  createApplication ,
+  defaultHeaders
 } = require("./couchTestUtils")
 
 describe("/models", () => {
@@ -38,7 +39,7 @@ describe("/models", () => {
             name: { type: "string" }
           }
         })
-        .set("Accept", "application/json")
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(200)
         .end(async (err, res) => {
@@ -60,7 +61,7 @@ describe("/models", () => {
     it("returns all the models for that instance in the response body", done => {
       request
         .get(`/api/${instance._id}/models`)
-        .set("Accept", "application/json")
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(200)
         .end(async (_, res) => {
@@ -83,7 +84,7 @@ describe("/models", () => {
     it("returns a success response when a model is deleted.", done => {
       request
         .delete(`/api/${instance._id}/models/${testModel._id}/${testModel._rev}`)
-        .set("Accept", "application/json")
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(200)
         .end(async (_, res) => {
diff --git a/packages/server/src/api/routes/tests/record.spec.js b/packages/server/src/api/routes/tests/record.spec.js
index b75b245135..16af0b6031 100644
--- a/packages/server/src/api/routes/tests/record.spec.js
+++ b/packages/server/src/api/routes/tests/record.spec.js
@@ -3,7 +3,8 @@ const {
   createClientDatabase,
   createInstance, 
   createModel,
-  supertest
+  supertest,
+  defaultHeaders,
 } = require("./couchTestUtils");
 
 describe("/records", () => {
@@ -38,9 +39,9 @@ describe("/records", () => {
 
     const createRecord = async r => 
       await request
-        .post(`/api/${instance._id}/records`)
+        .post(`/api/${instance._id}/${model._id}/records`)
         .send(r || record)
-        .set("Accept", "application/json")
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -56,14 +57,14 @@ describe("/records", () => {
       const existing = rec.body
 
       const res = await request
-        .post(`/api/${instance._id}/records`)
+        .post(`/api/${instance._id}/${model._id}/records`)
         .send({
           _id: existing._id,
           _rev: existing._rev,
           modelId: model._id,
           name: "Updated Name",
         })
-        .set("Accept", "application/json")
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(200)
       
@@ -76,8 +77,8 @@ describe("/records", () => {
       const existing = rec.body
 
       const res = await request
-        .get(`/api/${instance._id}/records/${existing._id}`)
-        .set("Accept", "application/json")
+        .get(`/api/${instance._id}/${model._id}/records/${existing._id}`)
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -99,8 +100,8 @@ describe("/records", () => {
       await createRecord(newRecord)
 
       const res = await request
-        .get(`/api/${instance._id}/all_${newRecord.modelId}/records`)
-        .set("Accept", "application/json")
+        .get(`/api/${instance._id}/${model._id}/records`)
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(200)
 
@@ -112,8 +113,8 @@ describe("/records", () => {
     it("load should return 404 when record does not exist", async () => {
       await createRecord()
       await request
-        .get(`/api/${instance._id}/records/not-a-valid-id`)
-        .set("Accept", "application/json")
+        .get(`/api/${instance._id}/${model._id}/records/not-a-valid-id`)
+        .set(defaultHeaders)
         .expect('Content-Type', /json/)
         .expect(404)
     })
diff --git a/packages/server/src/api/routes/tests/user.spec.js b/packages/server/src/api/routes/tests/user.spec.js
index bba748daff..f994798c2e 100644
--- a/packages/server/src/api/routes/tests/user.spec.js
+++ b/packages/server/src/api/routes/tests/user.spec.js
@@ -6,6 +6,7 @@ const {
   defaultHeaders,
   createUser,
 } = require("./couchTestUtils")
+const { POWERUSER_LEVEL_ID } = require("../../../utilities/accessLevels")
 
 describe("/users", () => {
   let request
@@ -51,7 +52,7 @@ describe("/users", () => {
       const res = await request
         .post(`/api/${instance._id}/users`)
         .set(defaultHeaders)
-        .send({ name: "Bill", username: "bill", password: "bills_password" })
+        .send({ name: "Bill", username: "bill", password: "bills_password", accessLevelId: POWERUSER_LEVEL_ID })
         .expect(200)
         .expect('Content-Type', /json/)
 
diff --git a/packages/server/src/api/routes/user.js b/packages/server/src/api/routes/user.js
index 61f4a096fb..20e17c7473 100644
--- a/packages/server/src/api/routes/user.js
+++ b/packages/server/src/api/routes/user.js
@@ -1,12 +1,26 @@
 const Router = require("@koa/router")
 const controller = require("../controllers/user")
+const authorized = require("../../middleware/authorized")
+const { USER_MANAGEMENT, LIST_USERS } = require("../../utilities/accessLevels")
 
 const router = Router()
 
 router
-  .get("/api/:instanceId/users", controller.fetch)
-  .get("/api/:instanceId/users/:username", controller.find)
-  .post("/api/:instanceId/users", controller.create)
-  .delete("/api/:instanceId/users/:username", controller.destroy)
+  .get("/api/:instanceId/users", authorized(LIST_USERS), controller.fetch)
+  .get(
+    "/api/:instanceId/users/:username",
+    authorized(USER_MANAGEMENT),
+    controller.find
+  )
+  .post(
+    "/api/:instanceId/users",
+    authorized(USER_MANAGEMENT),
+    controller.create
+  )
+  .delete(
+    "/api/:instanceId/users/:username",
+    authorized(USER_MANAGEMENT),
+    controller.destroy
+  )
 
 module.exports = router
diff --git a/packages/server/src/api/routes/view.js b/packages/server/src/api/routes/view.js
index f7ce9b41b5..3bae02c4b3 100644
--- a/packages/server/src/api/routes/view.js
+++ b/packages/server/src/api/routes/view.js
@@ -1,12 +1,20 @@
 const Router = require("@koa/router")
-const controller = require("../controllers/view")
+const viewController = require("../controllers/view")
+const recordController = require("../controllers/record")
+const authorized = require("../../middleware/authorized")
+const { BUILDER, READ_VIEW } = require("../../utilities/accessLevels")
 
 const router = Router()
 
 router
-  .get("/api/:instanceId/views", controller.fetch)
+  .get(
+    "/api/:instanceId/view/:viewName",
+    authorized(READ_VIEW, ctx => ctx.params.viewName),
+    recordController.fetchView
+  )
+  .get("/api/:instanceId/views", authorized(BUILDER), viewController.fetch)
   // .patch("/api/:databaseId/views", controller.update);
   // .delete("/api/:instanceId/views/:viewId/:revId", controller.destroy);
-  .post("/api/:instanceId/views", controller.create)
+  .post("/api/:instanceId/views", authorized(BUILDER), viewController.create)
 
 module.exports = router
diff --git a/packages/server/src/middleware/authenticated.js b/packages/server/src/middleware/authenticated.js
index 1bcc5575c3..1a28e6a418 100644
--- a/packages/server/src/middleware/authenticated.js
+++ b/packages/server/src/middleware/authenticated.js
@@ -1,6 +1,11 @@
 const jwt = require("jsonwebtoken")
 const STATUS_CODES = require("../utilities/statusCodes")
 const env = require("../environment")
+const accessLevelController = require("../api/controllers/accesslevel")
+const {
+  ADMIN_LEVEL_ID,
+  POWERUSER_LEVEL_ID,
+} = require("../utilities/accessLevels")
 
 module.exports = async (ctx, next) => {
   if (ctx.path === "/_builder") {
@@ -8,8 +13,9 @@ module.exports = async (ctx, next) => {
     return
   }
 
-  if (ctx.isDev && ctx.cookies.get("builder:token") === env.ADMIN_SECRET) {
+  if (ctx.cookies.get("builder:token") === env.ADMIN_SECRET) {
     ctx.isAuthenticated = true
+    ctx.isBuilder = true
     await next()
     return
   }
@@ -23,7 +29,12 @@ module.exports = async (ctx, next) => {
   }
 
   try {
-    ctx.jwtPayload = jwt.verify(token, ctx.config.jwtSecret)
+    const jwtPayload = jwt.verify(token, ctx.config.jwtSecret)
+
+    ctx.user = {
+      ...jwtPayload,
+      accessLevel: await getAccessLevel(jwtPayload.accessLevelId),
+    }
     ctx.isAuthenticated = true
   } catch (err) {
     ctx.throw(err.status || STATUS_CODES.FORBIDDEN, err.text)
@@ -31,3 +42,22 @@ module.exports = async (ctx, next) => {
 
   await next()
 }
+
+const getAccessLevel = async accessLevelId => {
+  if (
+    accessLevelId === POWERUSER_LEVEL_ID ||
+    accessLevelId === ADMIN_LEVEL_ID
+  ) {
+    return {
+      _id: accessLevelId,
+      name: accessLevelId,
+      permissions: [],
+    }
+  }
+
+  const findAccessContext = {
+    params: { levelId: accessLevelId },
+  }
+  await accessLevelController.find(findAccessContext)
+  return findAccessContext.body
+}
diff --git a/packages/server/src/middleware/authorized.js b/packages/server/src/middleware/authorized.js
new file mode 100644
index 0000000000..15a7b25458
--- /dev/null
+++ b/packages/server/src/middleware/authorized.js
@@ -0,0 +1,58 @@
+const {
+  adminPermissions,
+  ADMIN_LEVEL_ID,
+  POWERUSER_LEVEL_ID,
+  BUILDER,
+} = require("../utilities/accessLevels")
+
+module.exports = (permName, getItemId) => async (ctx, next) => {
+  if (!ctx.isAuthenticated) {
+    ctx.throw(403, "Session not authenticated")
+  }
+
+  if (ctx.isBuilder) {
+    await next()
+    return
+  }
+
+  if (permName === BUILDER) {
+    ctx.throw(403, "Not Authorized")
+    return
+  }
+
+  if (!ctx.user) {
+    ctx.throw(403, "User not found")
+  }
+
+  const permissionId = ({ name, itemId }) => name + (itemId ? `-${itemId}` : "")
+
+  if (ctx.user.accessLevel._id === ADMIN_LEVEL_ID) {
+    await next()
+    return
+  }
+
+  const thisPermissionId = {
+    name: permName,
+    itemId: getItemId && getItemId(ctx),
+  }
+
+  // power user has everything, except the admin specific perms
+  if (
+    ctx.user.accessLevel._id === POWERUSER_LEVEL_ID &&
+    !adminPermissions.map(permissionId).includes(thisPermissionId)
+  ) {
+    await next()
+    return
+  }
+
+  if (
+    ctx.user.accessLevel.permissions
+      .map(permissionId)
+      .includes(thisPermissionId)
+  ) {
+    await next()
+    return
+  }
+
+  ctx.throw(403, "Not Authorized")
+}
diff --git a/packages/server/src/utilities/accessLevels.js b/packages/server/src/utilities/accessLevels.js
new file mode 100644
index 0000000000..25a231ed73
--- /dev/null
+++ b/packages/server/src/utilities/accessLevels.js
@@ -0,0 +1,64 @@
+const viewController = require("../api/controllers/view")
+const modelController = require("../api/controllers/model")
+
+exports.ADMIN_LEVEL_ID = "ADMIN"
+exports.POWERUSER_LEVEL_ID = "POWER_USER"
+
+exports.READ_MODEL = "read-model"
+exports.WRITE_MODEL = "write-model"
+exports.READ_VIEW = "read-view"
+exports.EXECUTE_WORKFLOW = "execute-workflow"
+exports.USER_MANAGEMENT = "user-management"
+exports.BUILDER = "builder"
+exports.LIST_USERS = "list-users"
+
+exports.adminPermissions = [
+  {
+    name: exports.USER_MANAGEMENT,
+  },
+]
+
+exports.generateAdminPermissions = async instanceId => [
+  ...exports.adminPermissions,
+  ...(await exports.generatePowerUserPermissions(instanceId)),
+]
+
+exports.generatePowerUserPermissions = async instanceId => {
+  const fetchModelsCtx = {
+    params: {
+      instanceId,
+    },
+  }
+  await modelController.fetch(fetchModelsCtx)
+  const models = fetchModelsCtx.body
+
+  const fetchViewsCtx = {
+    params: {
+      instanceId,
+    },
+  }
+  await viewController.fetch(fetchViewsCtx)
+  const views = fetchViewsCtx.body
+
+  const readModelPermissions = models.map(m => ({
+    itemId: m._id,
+    name: exports.READ_MODEL,
+  }))
+
+  const writeModelPermissions = models.map(m => ({
+    itemId: m._id,
+    name: exports.WRITE_MODEL,
+  }))
+
+  const viewPermissions = views.map(v => ({
+    itemId: v.name,
+    name: exports.READ_VIEW,
+  }))
+
+  return [
+    ...readModelPermissions,
+    ...writeModelPermissions,
+    ...viewPermissions,
+    { name: exports.LIST_USERS },
+  ]
+}
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 0959e3e991..8a64a7cb8a 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -194,20 +194,6 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/client@^0.0.32":
-  version "0.0.32"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.0.32.tgz#76d9f147563a0bf939eae7f32ce75b2a527ba496"
-  integrity sha512-jmCCLn0CUoQbL6h623S5IqK6+GYLqX3WzUTZInSb1SCBOM3pI0eLP5HwTR6s7r42SfD0v9jTWRdyTnHiElNj8A==
-  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"
-    regexparam "^1.3.0"
-    shortid "^2.2.8"
-    svelte "^3.9.2"
-
 "@budibase/core@^0.0.32":
   version "0.0.32"
   resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.32.tgz#c5d9ab869c5e9596a1ac337aaf041e795b1cc7fa"
@@ -839,11 +825,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"
@@ -916,13 +897,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-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -1638,26 +1612,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"
@@ -2011,7 +1965,7 @@ error-inject@^1.0.0:
   resolved "https://registry.yarnpkg.com/error-inject/-/error-inject-1.0.0.tgz#e2b3d91b54aed672f309d950d154850fa11d4f37"
   integrity sha1-4rPZG1Su1nLzCdlQ0VSFD6EdTzc=
 
-es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstract@^1.17.5:
+es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
   version "1.17.5"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9"
   integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==
@@ -2028,19 +1982,6 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstrac
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.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"
@@ -3026,21 +2967,11 @@ 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"
@@ -3048,11 +2979,6 @@ is-binary-path@~2.1.0:
   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"
@@ -3089,7 +3015,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"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -3164,21 +3090,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"
@@ -3215,21 +3131,11 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
-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"
@@ -3246,31 +3152,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"
@@ -3296,11 +3182,6 @@ 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"
@@ -4708,14 +4589,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"
@@ -5437,19 +5310,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"
@@ -5778,14 +5638,6 @@ shortid@^2.2.8:
   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"
@@ -6194,11 +6046,6 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-svelte@^3.9.2:
-  version "3.22.3"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.22.3.tgz#6af3bdcfea44c2fadbf17a32c479f49bdf1aba4b"
-  integrity sha512-DumSy5eWPFPlMUGf3+eHyFSkt5yLqyAmMdCuXOE4qc5GtFyLxwTAGKZmgKmW2jmbpTTeFQ/fSQfDBQbl9Eo7yw==
-
 symbol-tree@^3.2.2:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -6679,44 +6526,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 5717bda8a4ed0560e35aac2b4b724a33d6a66f24 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 26 May 2020 10:38:43 +0200
Subject: [PATCH 04/14] refactor home page to use _layout

---
 .../src/components/common/ModalDialog.svelte  |  51 ++++
 .../{_layout.svelte => _reset.svelte}         |   0
 packages/builder/src/pages/_layout.svelte     | 214 ++++++++++++++
 packages/builder/src/pages/index.svelte       | 269 +++---------------
 4 files changed, 306 insertions(+), 228 deletions(-)
 create mode 100644 packages/builder/src/components/common/ModalDialog.svelte
 rename packages/builder/src/pages/[application]/{_layout.svelte => _reset.svelte} (100%)
 create mode 100644 packages/builder/src/pages/_layout.svelte

diff --git a/packages/builder/src/components/common/ModalDialog.svelte b/packages/builder/src/components/common/ModalDialog.svelte
new file mode 100644
index 0000000000..121714cd85
--- /dev/null
+++ b/packages/builder/src/components/common/ModalDialog.svelte
@@ -0,0 +1,51 @@
+<script>
+  import { getContext } from "svelte"
+  export let message
+  export let hasForm = false
+  export let onCancel = () => {}
+  export let onOkay = () => {}
+
+  const { close } = getContext("simple-modal")
+
+  let value
+  let onChange = () => {}
+
+  function _onCancel() {
+    onCancel()
+    close()
+  }
+
+  function _onOkay() {
+    onOkay(value)
+    close()
+  }
+
+  $: onChange(value)
+</script>
+
+<h2>{message}</h2>
+
+{#if hasForm}
+  <input type="text" bind:value on:keydown={e => e.which === 13 && _onOkay()} />
+{/if}
+
+<div class="buttons">
+  <button on:click={_onCancel}>Cancel</button>
+  <button on:click={_onOkay}>Okay</button>
+</div>
+
+<style>
+  h2 {
+    font-size: 2rem;
+    text-align: center;
+  }
+
+  input {
+    width: 100%;
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>
diff --git a/packages/builder/src/pages/[application]/_layout.svelte b/packages/builder/src/pages/[application]/_reset.svelte
similarity index 100%
rename from packages/builder/src/pages/[application]/_layout.svelte
rename to packages/builder/src/pages/[application]/_reset.svelte
diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte
new file mode 100644
index 0000000000..b807c1737b
--- /dev/null
+++ b/packages/builder/src/pages/_layout.svelte
@@ -0,0 +1,214 @@
+<script>
+  import {
+    SettingsIcon,
+    AppsIcon,
+    UpdatesIcon,
+    HostingIcon,
+    DocumentationIcon,
+    TutorialsIcon,
+    CommunityIcon,
+    ContributionIcon,
+    BugIcon,
+    EmailIcon,
+    TwitterIcon,
+  } from "components/common/Icons/"
+</script>
+
+<div class="root">
+  <div class="ui-nav">
+    <div class="home-logo">
+      <img src="/_builder/assets/bb-logo.svg" alt="Budibase icon" />
+    </div>
+
+    <div class="nav-section">
+      <div class="nav-section-title">Build</div>
+      <div class="nav-item-home">
+        <span class="nav-item-icon">
+          <AppsIcon />
+        </span>
+        <div class="nav-item-title">Apps</div>
+      </div>
+      <div class="nav-item">
+        <span class="nav-item-icon">
+          <SettingsIcon />
+        </span>
+        <div class="nav-item-title">Settings</div>
+      </div>
+      <a href="https://budibase.con/login" target="_blank" class="nav-item">
+        <span class="nav-item-icon">
+          <UpdatesIcon />
+        </span>
+        <div class="nav-item-title">Updates</div>
+      </a>
+      <a href="https://budibase.con/login" target="_blank" class="nav-item">
+        <span class="nav-item-icon">
+          <HostingIcon />
+        </span>
+        <div class="nav-item-title">Hosting</div>
+      </a>
+    </div>
+
+    <div class="nav-section">
+      <div class="nav-section-title">Learn</div>
+      <a href="https://docs.budibase.com/" target="_blank" class="nav-item">
+        <span class="nav-item-icon">
+          <DocumentationIcon />
+        </span>
+        <div class="nav-item-title">Documentation</div>
+      </a>
+      <a
+        href="https://docs.budibase.com/tutorial/quick-start"
+        target="_blank"
+        class="nav-item">
+        <span class="nav-item-icon">
+          <TutorialsIcon />
+        </span>
+        <div class="nav-item-title">Tutorials</div>
+      </a>
+      <a href="https://forum.budibase.com/" target="_blank" class="nav-item">
+        <span class="nav-item-icon">
+          <CommunityIcon />
+        </span>
+        <div class="nav-item-title">Community</div>
+      </a>
+    </div>
+
+    <div class="nav-section">
+      <div class="nav-section-title">Contact</div>
+      <a
+        href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
+        target="_blank"
+        class="nav-item">
+        <span class="nav-item-icon">
+          <ContributionIcon />
+        </span>
+        <div class="nav-item-title">Contribute to our product</div>
+      </a>
+      <a
+        href="https://github.com/Budibase/budibase/issues"
+        target="_blank"
+        class="nav-item">
+        <span class="nav-item-icon">
+          <BugIcon />
+        </span>
+        <div class="nav-item-title">Report bug</div>
+      </a>
+      <a href="mailto:support@budibase.com" target="_blank" class="nav-item">
+        <span class="nav-item-icon">
+          <EmailIcon />
+        </span>
+        <div class="nav-item-title">Email</div>
+      </a>
+      <a href="https://twitter.com/budibase" target="_blank" class="nav-item">
+        <span class="nav-item-icon">
+          <TwitterIcon />
+        </span>
+        <div class="nav-item-title">Twitter</div>
+      </a>
+    </div>
+  </div>
+
+  <div class="main">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .root {
+    display: grid;
+    grid-template-columns: 275px 1fr;
+    height: 100%;
+    width: 100%;
+    background: var(--grey-light);
+  }
+
+  @media only screen and (min-width: 1800px) {
+    .root {
+      display: grid;
+      grid-template-columns: 300px 1fr;
+      height: 100%;
+      width: 100%;
+      background: var(--grey-light);
+    }
+  }
+
+  .main {
+    grid-column: 2;
+  }
+
+  .ui-nav {
+    grid-column: 1;
+    background-color: var(--white);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--grey-dark);
+  }
+
+  .home-logo {
+    cursor: pointer;
+    height: 40px;
+    margin-bottom: 20px;
+  }
+
+  .home-logo img {
+    height: 40px;
+  }
+
+  .nav-section {
+    margin: 20px 0px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nav-section-title {
+    font-size: 20px;
+    color: var(--ink);
+    font-weight: 700;
+    margin-bottom: 12px;
+  }
+
+  .nav-item {
+    cursor: pointer;
+    margin: 0px 0px 4px 0px;
+    padding: 0px 0px 0px 12px;
+    height: 40px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .nav-item-home {
+    cursor: pointer;
+    margin: 0px 0px 4px 0px;
+    padding: 0px 0px 0px 12px;
+    height: 40px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+    background-color: var(--blue-light);
+  }
+
+  .nav-item:hover {
+    background-color: var(--grey-light);
+    border-radius: 3px;
+  }
+
+  .nav-item::selection {
+    background-color: var(--blue-light);
+    border-radius: 3px;
+  }
+
+  .nav-item-title {
+    font-size: 14px;
+    color: var(--ink);
+    font-weight: 500;
+    margin-left: 12px;
+  }
+
+  .nav-item-icon {
+    color: var(--ink-light);
+  }
+</style>
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index cf9aa87bb3..6c77059739 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -1,22 +1,11 @@
 <script>
+  import { getContext } from "svelte"
   import { store } from "builderStore"
   import AppList from "components/start/AppList.svelte"
   import { onMount } from "svelte"
   import ActionButton from "components/common/ActionButton.svelte"
   import IconButton from "components/common/IconButton.svelte"
-  import {
-    SettingsIcon,
-    AppsIcon,
-    UpdatesIcon,
-    HostingIcon,
-    DocumentationIcon,
-    TutorialsIcon,
-    CommunityIcon,
-    ContributionIcon,
-    BugIcon,
-    EmailIcon,
-    TwitterIcon,
-  } from "components/common/Icons/"
+
   import Spinner from "components/common/Spinner.svelte"
 
   let promise = getApps()
@@ -31,229 +20,53 @@
       throw new Error(json)
     }
   }
+
+  // Handle create app modal
+  const { open } = getContext("simple-modal")
+  const showCreateAppModal = () => {
+    open(
+      Dialog,
+      {
+        message: "What is your name?",
+        hasForm: true,
+        onCancel,
+        onOkay,
+      },
+      {
+        closeButton: false,
+        closeOnEsc: false,
+        closeOnOuterClick: false,
+      }
+    )
+  }
 </script>
 
-<div class="root">
-  <div class="ui-nav">
-    <div class="home-logo">
-      <img src="/_builder/assets/bb-logo.svg" alt="Budibase icon" />
-    </div>
-
-    <div class="nav-section">
-      <div class="nav-section-title">Build</div>
-      <div class="nav-item-home">
-        <span class="nav-item-icon">
-          <AppsIcon />
-        </span>
-        <div class="nav-item-title">Apps</div>
-      </div>
-      <div class="nav-item">
-        <span class="nav-item-icon">
-          <SettingsIcon />
-        </span>
-        <div class="nav-item-title">Settings</div>
-      </div>
-      <a href="https://budibase.con/login" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <UpdatesIcon />
-        </span>
-        <div class="nav-item-title">Updates</div>
-      </a>
-      <a href="https://budibase.con/login" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <HostingIcon />
-        </span>
-        <div class="nav-item-title">Hosting</div>
-      </a>
-    </div>
-
-    <div class="nav-section">
-      <div class="nav-section-title">Learn</div>
-      <a href="https://docs.budibase.com/" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <DocumentationIcon />
-        </span>
-        <div class="nav-item-title">Documentation</div>
-      </a>
-      <a
-        href="https://docs.budibase.com/tutorial/quick-start"
-        target="_blank"
-        class="nav-item">
-        <span class="nav-item-icon">
-          <TutorialsIcon />
-        </span>
-        <div class="nav-item-title">Tutorials</div>
-      </a>
-      <a href="https://forum.budibase.com/" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <CommunityIcon />
-        </span>
-        <div class="nav-item-title">Community</div>
-      </a>
-    </div>
-
-    <div class="nav-section">
-      <div class="nav-section-title">Contact</div>
-      <a
-        href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
-        target="_blank"
-        class="nav-item">
-        <span class="nav-item-icon">
-          <ContributionIcon />
-        </span>
-        <div class="nav-item-title">Contribute to our product</div>
-      </a>
-      <a
-        href="https://github.com/Budibase/budibase/issues"
-        target="_blank"
-        class="nav-item">
-        <span class="nav-item-icon">
-          <BugIcon />
-        </span>
-        <div class="nav-item-title">Report bug</div>
-      </a>
-      <a href="mailto:support@budibase.com" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <EmailIcon />
-        </span>
-        <div class="nav-item-title">Email</div>
-      </a>
-      <a href="https://twitter.com/budibase" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <TwitterIcon />
-        </span>
-        <div class="nav-item-title">Twitter</div>
-      </a>
+<div class="welcome">Welcome to Budibase</div>
+<div class="banner">
+  <div class="banner-content">
+    <div class="banner-header">
+      Every accomplishment starts with a decision to try.
     </div>
+    <button class="banner-button" type="button">
+      <i class="ri-add-circle-fill" />
+      Create New Web App
+    </button>
   </div>
-
-  <div class="main">
-    <div class="welcome">Welcome to Budibase</div>
-    <div class="banner">
-      <div class="banner-content">
-        <div class="banner-header">
-          Every accomplishment starts with a decision to try.
-        </div>
-        <button class="banner-button" type="button">
-          <i class="ri-add-circle-fill" />
-          Create New Web App
-        </button>
-      </div>
-      <div class="banner-image">
-        <img src="/_builder/assets/banner-image.png" alt="Bannerimage" />
-      </div>
-    </div>
-    {#await promise}
-      <div class="spinner-container">
-        <Spinner />
-      </div>
-    {:then result}
-      <AppList apps={result} />
-    {:catch err}
-      <h1 style="color:red">{err}</h1>
-    {/await}
+  <div class="banner-image">
+    <img src="/_builder/assets/banner-image.png" alt="Bannerimage" />
   </div>
 </div>
+{#await promise}
+  <div class="spinner-container">
+    <Spinner />
+  </div>
+{:then result}
+  <AppList apps={result} />
+{:catch err}
+  <h1 style="color:red">{err}</h1>
+{/await}
 
 <style>
-  .root {
-    display: grid;
-    grid-template-columns: 275px 1fr;
-    height: 100%;
-    width: 100%;
-    background: var(--grey-light);
-  }
-
-  @media only screen and (min-width: 1800px) {
-    .root {
-      display: grid;
-      grid-template-columns: 300px 1fr;
-      height: 100%;
-      width: 100%;
-      background: var(--grey-light);
-    }
-  }
-
-  .main {
-    grid-column: 2;
-  }
-
-  .ui-nav {
-    grid-column: 1;
-    background-color: var(--white);
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    border-right: 1px solid var(--grey-dark);
-  }
-
-  .home-logo {
-    cursor: pointer;
-    height: 40px;
-    margin-bottom: 20px;
-  }
-
-  .home-logo img {
-    height: 40px;
-  }
-
-  .nav-section {
-    margin: 20px 0px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .nav-section-title {
-    font-size: 20px;
-    color: var(--ink);
-    font-weight: 700;
-    margin-bottom: 12px;
-  }
-
-  .nav-item {
-    cursor: pointer;
-    margin: 0px 0px 4px 0px;
-    padding: 0px 0px 0px 12px;
-    height: 40px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-  }
-
-  .nav-item-home {
-    cursor: pointer;
-    margin: 0px 0px 4px 0px;
-    padding: 0px 0px 0px 12px;
-    height: 40px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-    background-color: var(--blue-light);
-  }
-
-  .nav-item:hover {
-    background-color: var(--grey-light);
-    border-radius: 3px;
-  }
-
-  .nav-item::selection {
-    background-color: var(--blue-light);
-    border-radius: 3px;
-  }
-
-  .nav-item-title {
-    font-size: 14px;
-    color: var(--ink);
-    font-weight: 500;
-    margin-left: 12px;
-  }
-
-  .nav-item-icon {
-    color: var(--ink-light);
-  }
-
   .welcome {
     margin: 60px 80px 0px 80px;
     font-size: 42px;

From 2a151821f9c75afeb9afeaaab31e6526c6c265a0 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 26 May 2020 16:25:37 +0200
Subject: [PATCH 05/14] 90% finished modal

---
 packages/builder/package.json                 |   3 +-
 .../src/components/common/Icons/Close.svelte  |   1 +
 .../src/components/common/Icons/Info.svelte   |   1 +
 .../src/components/common/Icons/index.js      |   2 +
 .../src/components/common/ModalDialog.svelte  |  51 --------
 .../src/components/start/AppList.svelte       |   2 +-
 .../components/start/CreateAppModal.svelte    | 118 ++++++++++++++++++
 packages/builder/src/global.css               |   5 +
 packages/builder/src/pages/_layout.svelte     |   2 +-
 packages/builder/src/pages/index.svelte       |  16 ++-
 10 files changed, 145 insertions(+), 56 deletions(-)
 create mode 100644 packages/builder/src/components/common/Icons/Close.svelte
 create mode 100644 packages/builder/src/components/common/Icons/Info.svelte
 delete mode 100644 packages/builder/src/components/common/ModalDialog.svelte
 create mode 100644 packages/builder/src/components/start/CreateAppModal.svelte

diff --git a/packages/builder/package.json b/packages/builder/package.json
index cb91f2ce42..3e76ac87d8 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -38,6 +38,7 @@
     ]
   },
   "dependencies": {
+    "@budibase/bbui": "^0.3.1",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
@@ -82,4 +83,4 @@
     "svelte": "^3.0.0"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
-}
\ No newline at end of file
+}
diff --git a/packages/builder/src/components/common/Icons/Close.svelte b/packages/builder/src/components/common/Icons/Close.svelte
new file mode 100644
index 0000000000..e39564d9ad
--- /dev/null
+++ b/packages/builder/src/components/common/Icons/Close.svelte
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
\ No newline at end of file
diff --git a/packages/builder/src/components/common/Icons/Info.svelte b/packages/builder/src/components/common/Icons/Info.svelte
new file mode 100644
index 0000000000..162a9b3887
--- /dev/null
+++ b/packages/builder/src/components/common/Icons/Info.svelte
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"/></svg>
\ No newline at end of file
diff --git a/packages/builder/src/components/common/Icons/index.js b/packages/builder/src/components/common/Icons/index.js
index c7e4da29da..69b78421da 100644
--- a/packages/builder/src/components/common/Icons/index.js
+++ b/packages/builder/src/components/common/Icons/index.js
@@ -29,3 +29,5 @@ export { default as ContributionIcon } from "./Contribution.svelte"
 export { default as BugIcon } from "./Bug.svelte"
 export { default as EmailIcon } from "./Email.svelte"
 export { default as TwitterIcon } from "./Twitter.svelte"
+export { default as InfoIcon } from "./Info.svelte"
+export { default as CloseIcon } from "./Close.svelte"
diff --git a/packages/builder/src/components/common/ModalDialog.svelte b/packages/builder/src/components/common/ModalDialog.svelte
deleted file mode 100644
index 121714cd85..0000000000
--- a/packages/builder/src/components/common/ModalDialog.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  export let message
-  export let hasForm = false
-  export let onCancel = () => {}
-  export let onOkay = () => {}
-
-  const { close } = getContext("simple-modal")
-
-  let value
-  let onChange = () => {}
-
-  function _onCancel() {
-    onCancel()
-    close()
-  }
-
-  function _onOkay() {
-    onOkay(value)
-    close()
-  }
-
-  $: onChange(value)
-</script>
-
-<h2>{message}</h2>
-
-{#if hasForm}
-  <input type="text" bind:value on:keydown={e => e.which === 13 && _onOkay()} />
-{/if}
-
-<div class="buttons">
-  <button on:click={_onCancel}>Cancel</button>
-  <button on:click={_onOkay}>Okay</button>
-</div>
-
-<style>
-  h2 {
-    font-size: 2rem;
-    text-align: center;
-  }
-
-  input {
-    width: 100%;
-  }
-
-  .buttons {
-    display: flex;
-    justify-content: space-between;
-  }
-</style>
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index 22ba16c45d..e53b1f93bf 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -56,7 +56,7 @@
     max-width: 400px;
     max-height: 150px;
     border-radius: 5px;
-    border: 1px solid var(--grey-dark);
+    border: 1px solid var(--grey-medium);
   }
 
   .app-button:hover {
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
new file mode 100644
index 0000000000..07f53cc1b3
--- /dev/null
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -0,0 +1,118 @@
+<script>
+  import Button from "components/common/Button.svelte"
+  import { Input, TextArea } from "@budibase/bbui"
+  import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
+  import { getContext } from "svelte"
+  export let onCancel = () => {}
+  export let onOkay = () => {}
+
+  const { close } = getContext("simple-modal")
+
+  let value
+  let onChange = () => {}
+
+  function _onCancel() {
+    onCancel()
+    close()
+  }
+
+  function _onOkay() {
+    onOkay(value)
+    close()
+  }
+
+  $: onChange(value)
+</script>
+
+<div class="container">
+  <div class="body">
+    <div class="heading">
+      <span class="icon"><AppsIcon /></span>
+      <h3>Create new web app</h3>
+    </div>
+    <Input name="name" label="Name" placeholder="Enter application name" />
+    <TextArea
+      name="description"
+      label="Description"
+      placeholder="Describe your application" />
+  </div>
+  <div class="footer">
+    <a href="./#" class="info"><InfoIcon />How to get started</a>
+    <Button color="secondary" on:click={_onCancel}>
+      <span class="button-text">Cancel</span>
+    </Button>
+    <Button color="primary" on:click={_onOkay}>
+      <span class="button-text">Create</span>
+    </Button>
+  </div>
+  <div class="close-button" on:click={_onCancel}><CloseIcon /></div>
+</div>
+
+<style>
+
+.container {
+  position: relative;
+}
+
+  .close-button {
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+  }
+  .close-button :global(svg) {
+    width: 24px;
+    height: 24px;
+  }
+  .heading {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  h3 {
+    margin: 0;
+    font-size: 24px;
+    font-weight: bold;
+  }
+  .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(--primary100);
+    text-decoration-color: var(--primary100);
+  }
+  .info :global(svg) {
+    fill: var(--primary100);
+    margin-right: 8px;
+    width: 24px;
+    height: 24px;
+  }
+  .body {
+    padding: 40px 40px 80px 40px;
+    display: grid;
+    grid-gap: 20px;
+  }
+  .footer {
+    display: grid;
+    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-light);
+  }
+  .button-text {
+    font-size: 18px;
+    line-height: 1.17;
+    letter-spacing: normal;
+    color: var(--white);
+  }
+</style>
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 3ad5851157..dea20e4d26 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -13,6 +13,7 @@
     
     --grey: #F2F2F2;
     --grey-light: #FBFBFB;
+    --grey-medium: #e8e8ef;
     --grey-dark: #E6E6E6;
 
     --primary100: #0055ff;
@@ -125,6 +126,10 @@ h5 {
     color: var(--darkslate);
 }
 
+textarea {
+    font-family: var(--fontnormal);
+}
+
 .hoverable:hover {
     cursor: pointer;
 }
\ No newline at end of file
diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte
index b807c1737b..98bae8aa7d 100644
--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@@ -142,7 +142,7 @@
     padding: 20px;
     display: flex;
     flex-direction: column;
-    border-right: 1px solid var(--grey-dark);
+    border-right: 1px solid var(--grey-medium);
   }
 
   .home-logo {
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 6c77059739..8ef61f68cd 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -7,6 +7,7 @@
   import IconButton from "components/common/IconButton.svelte"
 
   import Spinner from "components/common/Spinner.svelte"
+  import CreateAppModal from "components/start/CreateAppModal.svelte"
 
   let promise = getApps()
 
@@ -23,9 +24,19 @@
 
   // Handle create app modal
   const { open } = getContext("simple-modal")
+  const onCancel = text => {
+    name = ""
+    status = -1
+  }
+
+  const onOkay = text => {
+    name = text
+    status = 1
+  }
+
   const showCreateAppModal = () => {
     open(
-      Dialog,
+      CreateAppModal,
       {
         message: "What is your name?",
         hasForm: true,
@@ -36,6 +47,7 @@
         closeButton: false,
         closeOnEsc: false,
         closeOnOuterClick: false,
+        styleContent: { padding: 0 },
       }
     )
   }
@@ -47,7 +59,7 @@
     <div class="banner-header">
       Every accomplishment starts with a decision to try.
     </div>
-    <button class="banner-button" type="button">
+    <button class="banner-button" type="button" on:click={showCreateAppModal}>
       <i class="ri-add-circle-fill" />
       Create New Web App
     </button>

From 1127e1ef0fd8ec3db7c9937fc18ea43078566f2f Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 26 May 2020 16:29:16 +0100
Subject: [PATCH 06/14] server - create app endpoint creates files

---
 .../server/src/api/controllers/application.js | 71 ++++++++++++++++++-
 .../utilities/appDirectoryTemplate/.gitignore |  1 +
 .../appDirectoryTemplate/package.json         | 11 +++
 .../appDirectoryTemplate/pages/main/page.json | 19 +++++
 .../pages/main/screens/.gitkeep               |  0
 .../pages/unauthenticated/page.json           | 19 +++++
 .../pages/unauthenticated/screens/.gitkeep    |  0
 .../utilities/appDirectoryTemplate/plugins.js |  1 +
 8 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 packages/server/src/utilities/appDirectoryTemplate/.gitignore
 create mode 100644 packages/server/src/utilities/appDirectoryTemplate/package.json
 create mode 100644 packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
 create mode 100644 packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/.gitkeep
 create mode 100644 packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
 create mode 100644 packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/screens/.gitkeep
 create mode 100644 packages/server/src/utilities/appDirectoryTemplate/plugins.js

diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index c4b49d1f74..c9c072fc2b 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -3,6 +3,10 @@ const ClientDb = require("../../db/clientDb")
 const { getPackageForBuilder } = require("../../utilities/builder")
 const newid = require("../../db/newid")
 const env = require("../../environment")
+const instanceController = require("./instance")
+const { resolve, join } = require("path")
+const { copy, readJSON, writeJSON, exists } = require("fs-extra")
+const { exec } = require("child_process")
 
 exports.fetch = async function(ctx) {
   const db = new CouchDB(ClientDb.name(env.CLIENT_ID))
@@ -32,12 +36,77 @@ exports.create = async function(ctx) {
       "@budibase/standard-components",
       "@budibase/materialdesign-components",
     ],
-    ...ctx.request.body,
+    name: ctx.request.body.name,
+    description: ctx.request.body.description,
   }
 
   const { rev } = await db.post(newApplication)
   newApplication._rev = rev
 
+  const createInstCtx = {
+    params: {
+      clientId: env.CLIENT_ID,
+      applicationId: newApplication._id,
+    },
+    request: {
+      body: { name: `dev-${env.CLIENT_ID}` },
+    },
+  }
+  await instanceController.create(createInstCtx)
+
+  if (env.NODE_ENV === "production") {
+    const newAppFolder = await createEmptyAppPackage(ctx, newApplication)
+    await runNpmInstall(newAppFolder)
+  }
+
   ctx.body = newApplication
   ctx.message = `Application ${ctx.request.body.name} created successfully`
 }
+
+const createEmptyAppPackage = async (ctx, app) => {
+  const templateFolder = resolve(
+    __dirname,
+    "..",
+    "..",
+    "utilities",
+    "appDirectoryTemplate"
+  )
+
+  const appsFolder = env.BUDIBASE_DIR
+  const newAppFolder = resolve(appsFolder, app._id)
+
+  if (await exists(newAppFolder)) {
+    ctx.throw(400, "App folder already exists for this application")
+    return
+  }
+
+  await copy(templateFolder, newAppFolder)
+
+  const packageJsonPath = join(appsFolder, app._id, "package.json")
+  const packageJson = await readJSON(packageJsonPath)
+
+  packageJson.name = npmFriendlyAppName(app.name)
+
+  await writeJSON(packageJsonPath, packageJson)
+
+  return newAppFolder
+}
+
+const runNpmInstall = async newAppFolder => {
+  return new Promise((resolve, reject) => {
+    const cmd = `cd ${newAppFolder} && npm install`
+    exec(cmd, (error, stdout, stderr) => {
+      if (error) {
+        reject(error)
+      }
+      resolve(stdout ? stdout : stderr)
+    })
+  })
+}
+
+const npmFriendlyAppName = name =>
+  name
+    .replace(/_/g, "")
+    .replace(/./g, "")
+    .replace(/ /g, "")
+    .toLowerCase()
diff --git a/packages/server/src/utilities/appDirectoryTemplate/.gitignore b/packages/server/src/utilities/appDirectoryTemplate/.gitignore
new file mode 100644
index 0000000000..77738287f0
--- /dev/null
+++ b/packages/server/src/utilities/appDirectoryTemplate/.gitignore
@@ -0,0 +1 @@
+dist/
\ No newline at end of file
diff --git a/packages/server/src/utilities/appDirectoryTemplate/package.json b/packages/server/src/utilities/appDirectoryTemplate/package.json
new file mode 100644
index 0000000000..f49e35d23f
--- /dev/null
+++ b/packages/server/src/utilities/appDirectoryTemplate/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "name",
+  "version": "1.0.0",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@budibase/standard-components": "0.x",
+    "@budibase/materialdesign-components": "0.x"
+  }
+}
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
new file mode 100644
index 0000000000..89a23a78e5
--- /dev/null
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
@@ -0,0 +1,19 @@
+{
+	"title": "Test App",
+	"favicon": "./_shared/favicon.png",
+	"stylesheets": [],
+	"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
+	"props" : {
+		"_component": "@budibase/standard-components/container",
+		"_children": [],
+		"_id": 0,
+		"type": "div",
+		"_styles": {
+			"layout": {},
+			"position": {}
+		},
+		"_code": ""
+	},
+	"_css": "",
+	"uiFunctions": ""
+}
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/.gitkeep b/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
new file mode 100644
index 0000000000..14d0301c24
--- /dev/null
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
@@ -0,0 +1,19 @@
+{
+	"title": "Test App",
+	"favicon": "./_shared/favicon.png",
+	"stylesheets": [],
+	"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
+	"props" : {
+		"_component": "@budibase/standard-components/container",
+		"_children": [],
+		"_id": 1,
+		"type": "div",
+		"_styles": {
+			"layout": {},
+			"position": {}
+		},
+		"_code": ""
+	},
+	"_css": "",
+	"uiFunctions": ""
+}
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/screens/.gitkeep b/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/screens/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/server/src/utilities/appDirectoryTemplate/plugins.js b/packages/server/src/utilities/appDirectoryTemplate/plugins.js
new file mode 100644
index 0000000000..44368bf6ec
--- /dev/null
+++ b/packages/server/src/utilities/appDirectoryTemplate/plugins.js
@@ -0,0 +1 @@
+module.exports = () => ({})

From 1ff512a21893f551298f6a0d3fd509987ac54944 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 26 May 2020 17:37:11 +0200
Subject: [PATCH 07/14] wip: adds gap to apps

---
 packages/builder/package.json                 |  2 +-
 .../src/components/start/AppCard.svelte       | 70 ++++++++++++++++
 .../src/components/start/AppList.svelte       | 80 +++----------------
 .../components/start/CreateAppModal.svelte    | 19 ++---
 packages/builder/src/pages/index.svelte       |  1 +
 5 files changed, 89 insertions(+), 83 deletions(-)
 create mode 100644 packages/builder/src/components/start/AppCard.svelte

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 3e76ac87d8..76edce7e19 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -38,7 +38,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^0.3.1",
+    "@budibase/bbui": "^0.3.5",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
new file mode 100644
index 0000000000..6ba02d4f9b
--- /dev/null
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -0,0 +1,70 @@
+<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;
+</script>
+
+<div class="apps-card">
+  <h3 class="app-title">{name}</h3>
+  <p class="app-desc">
+    {description}
+  </p>
+  <div class="card-footer">
+    <div class="modified-date">Last Edited - 25th May 2020</div>
+    <a href={`/_builder/${_id}`} class="app-button">
+      Open Web App
+    </a>
+  </div>
+</div>
+          
+<style>
+  .apps-card {
+    background-color: var(--white);
+    padding: 20px;
+    max-width: 400px;
+    max-height: 150px;
+    border-radius: 5px;
+    border: 1px solid var(--grey-medium);
+  }
+
+  .app-button:hover {
+    background-color: var(--grey-light);
+    text-decoration: none;
+  }
+          
+                .app-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--ink);
+    text-transform: capitalize;
+  }
+
+  .app-desc {
+    color: var(--ink-light);
+  }
+
+  .card-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: space-between;
+  }
+
+  .modified-date {
+    font-size: 14px;
+    color: var(--ink-light);
+  }
+
+  .app-button {
+    background-color: var(--white);
+    color: var(--ink);
+    padding: 12px 20px;
+    border-radius: 5px;
+    border: 1px var(--grey) solid;
+    font-size: 14px;
+    font-weight: 400;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-sizing: border-box;
+  }
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index e53b1f93bf..61ab0244a3 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Button from "components/common/Button.svelte"
+  import AppCard from "./AppCard.svelte"
   export let apps
 
   function myFunction() {
@@ -13,27 +13,22 @@
     <div>
       <div>
         <div class="app-section-title">Your Web Apps</div>
-        {#each apps as app}
-          <div class="apps-card">
-            <h3 class="app-title">{app.name}</h3>
-            <p class="app-desc">
-              A minimalist CRM which removes the noise and allows you to focus
-              on your business.
-            </p>
-            <div class="card-footer">
-              <div class="modified-date">Last Edited - 25th May 2020</div>
-              <a href={`/_builder/${app._id}`} class="app-button">
-                Open Web App
-              </a>
-            </div>
+          <div class="apps">
+            {#each apps as app}
+              <AppCard {...app} />
+            {/each}
           </div>
-        {/each}
       </div>
     </div>
   </div>
 </div>
 
 <style>
+  .apps {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400, 1fr));
+    gap: 85px;
+  }
   .root {
     margin: 40px 80px;
   }
@@ -44,59 +39,4 @@
     font-weight: 700;
     margin-bottom: 20px;
   }
-
-  .apps {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 40px;
-  }
-  .apps-card {
-    background-color: var(--white);
-    padding: 20px;
-    max-width: 400px;
-    max-height: 150px;
-    border-radius: 5px;
-    border: 1px solid var(--grey-medium);
-  }
-
-  .app-button:hover {
-    background-color: var(--grey-light);
-    text-decoration: none;
-  }
-
-  .app-title {
-    font-size: 18px;
-    font-weight: 700;
-    color: var(--ink);
-    text-transform: capitalize;
-  }
-
-  .app-desc {
-    color: var(--ink-light);
-  }
-
-  .card-footer {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    justify-content: space-between;
-  }
-
-  .modified-date {
-    font-size: 14px;
-    color: var(--ink-light);
-  }
-
-  .app-button {
-    background-color: var(--white);
-    color: var(--ink);
-    padding: 12px 20px;
-    border-radius: 5px;
-    border: 1px var(--grey) solid;
-    font-size: 14px;
-    font-weight: 400;
-    cursor: pointer;
-    transition: all 0.2s;
-    box-sizing: border-box;
-  }
 </style>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 07f53cc1b3..66bb2ac941 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,6 +1,5 @@
 <script>
-  import Button from "components/common/Button.svelte"
-  import { Input, TextArea } from "@budibase/bbui"
+  import { Input, TextArea, Button } from "@budibase/bbui"
   import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
   import { getContext } from "svelte"
   export let onCancel = () => {}
@@ -38,11 +37,11 @@
   </div>
   <div class="footer">
     <a href="./#" class="info"><InfoIcon />How to get started</a>
-    <Button color="secondary" on:click={_onCancel}>
-      <span class="button-text">Cancel</span>
+    <Button outline thin on:click={_onCancel}>
+      Cancel
     </Button>
-    <Button color="primary" on:click={_onOkay}>
-      <span class="button-text">Create</span>
+    <Button primary thin on:click={_onOkay}>
+      Save
     </Button>
   </div>
   <div class="close-button" on:click={_onCancel}><CloseIcon /></div>
@@ -68,6 +67,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    margin-bottom: 20px;
   }
   h3 {
     margin: 0;
@@ -102,6 +102,7 @@
   }
   .footer {
     display: grid;
+    grid-gap: 20px;
     align-items: center;
     grid-template-columns: 1fr auto auto;
     padding: 30px 40px;
@@ -109,10 +110,4 @@
     border-bottom-right-radius: 50px;
     background-color: var(--grey-light);
   }
-  .button-text {
-    font-size: 18px;
-    line-height: 1.17;
-    letter-spacing: normal;
-    color: var(--white);
-  }
 </style>
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 8ef61f68cd..1e6b46355e 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -48,6 +48,7 @@
         closeOnEsc: false,
         closeOnOuterClick: false,
         styleContent: { padding: 0 },
+        closeOnOuterClick: true
       }
     )
   }

From b2d2c25bd1765f419c25f908390c19086a81d321 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 27 May 2020 11:44:15 +0200
Subject: [PATCH 08/14] add fetch

---
 .../src/components/start/AppCard.svelte       |  6 ++--
 .../src/components/start/AppList.svelte       |  5 ++--
 .../components/start/CreateAppModal.svelte    | 30 +++++++++++++++----
 .../src/pages/[application]/_reset.svelte     |  1 +
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 6ba02d4f9b..a54012ac0a 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -2,6 +2,8 @@
   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;
+              
+  
 </script>
 
 <div class="apps-card">
@@ -31,8 +33,8 @@
     background-color: var(--grey-light);
     text-decoration: none;
   }
-          
-                .app-title {
+  
+  .app-title {
     font-size: 18px;
     font-weight: 700;
     color: var(--ink);
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index 61ab0244a3..e3b1f572e1 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -26,8 +26,9 @@
 <style>
   .apps {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400, 1fr));
-    gap: 85px;
+    grid-template-columns: repeat(auto-fill, 400px);
+    grid-gap: 40px 85px;
+    justify-content: start;
   }
   .root {
     margin: 40px 80px;
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 66bb2ac941..f3faee047b 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -6,6 +6,27 @@
   export let onOkay = () => {}
 
   const { close } = getContext("simple-modal")
+  
+  let name = ""
+  let description = ""
+  
+  const createNewApp = async () => {
+    const data = { name, description}    
+    
+    try {
+      const response = await fetch('/api/applications', {
+        method: 'POST', // *GET, POST, PUT, DELETE, etc.
+        credentials: 'same-origin', // include, *same-origin, omit
+        headers: {
+          'Content-Type': 'application/json'
+          // 'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: JSON.stringify(data) // body data type must match "Content-Type" header
+      });
+    } catch (error) {
+      
+    }
+  }
 
   let value
   let onChange = () => {}
@@ -15,12 +36,10 @@
     close()
   }
 
-  function _onOkay() {
-    onOkay(value)
+  async function _onOkay() {
+    await createNewApp()
     close()
   }
-
-  $: onChange(value)
 </script>
 
 <div class="container">
@@ -29,8 +48,9 @@
       <span class="icon"><AppsIcon /></span>
       <h3>Create new web app</h3>
     </div>
-    <Input name="name" label="Name" placeholder="Enter application name" />
+    <Input 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" />
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index 5de5e3379b..e21518f9f0 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -20,6 +20,7 @@
       await store.setPackage(pkg)
       return pkg
     } else {
+      console.log(pkg)
       throw new Error(pkg)
     }
   }

From af6d1da89fded91fd10550491e859f39ce37474d Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Wed, 27 May 2020 10:44:56 +0100
Subject: [PATCH 09/14] forcing svelte version - routify fix

---
 packages/builder/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 76edce7e19..81e240d148 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -80,7 +80,7 @@
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^4.0.4",
     "rollup-plugin-url": "^2.2.2",
-    "svelte": "^3.0.0"
+    "svelte": "3.23.x"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
 }

From 075b264d21d89f9e436220540445224b63347dd1 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Wed, 27 May 2020 10:54:34 +0100
Subject: [PATCH 10/14] bugfix: create app not creating dirs

---
 packages/server/src/api/controllers/application.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index c9c072fc2b..63422c468a 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -54,7 +54,7 @@ exports.create = async function(ctx) {
   }
   await instanceController.create(createInstCtx)
 
-  if (env.NODE_ENV === "production") {
+  if (ctx.isDev) {
     const newAppFolder = await createEmptyAppPackage(ctx, newApplication)
     await runNpmInstall(newAppFolder)
   }

From 3a72eddd78c2159f964a8ab4dbb162faedd34df8 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 27 May 2020 12:54:53 +0200
Subject: [PATCH 11/14] add loading state

---
 packages/builder/src/App.svelte               |   4 +-
 .../components/start/CreateAppModal.svelte    |  93 ++++++---
 .../src/pages/[application]/_reset.svelte     |  92 ++++-----
 packages/builder/src/pages/_layout.svelte     | 187 +++++++++---------
 packages/builder/src/pages/index.svelte       |  13 +-
 5 files changed, 207 insertions(+), 182 deletions(-)

diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte
index c6b76090f9..000c5c0e16 100644
--- a/packages/builder/src/App.svelte
+++ b/packages/builder/src/App.svelte
@@ -26,6 +26,4 @@
 
 <AppNotification />
 
-<Modal>
-  <Router {routes} />
-</Modal>
+<Router {routes} />
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index f3faee047b..77e31a5823 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,30 +1,36 @@
 <script>
+  import Spinner from "components/common/Spinner.svelte"
   import { Input, TextArea, Button } from "@budibase/bbui"
+  import { goto } from "@sveltech/routify"
   import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
   import { getContext } from "svelte"
-  export let onCancel = () => {}
-  export let onOkay = () => {}
+  import { fade } from "svelte/transition"
+
+  const { open, close } = getContext("simple-modal")
 
-  const { close } = getContext("simple-modal")
-  
   let name = ""
   let description = ""
-  
+  let loading = false
+
   const createNewApp = async () => {
-    const data = { name, description}    
-    
+    const data = { name, description }
+    loading = true
     try {
-      const response = await fetch('/api/applications', {
-        method: 'POST', // *GET, POST, PUT, DELETE, etc.
-        credentials: 'same-origin', // include, *same-origin, omit
+      const response = await fetch("/api/applications", {
+        method: "POST", // *GET, POST, PUT, DELETE, etc.
+        credentials: "same-origin", // include, *same-origin, omit
         headers: {
-          'Content-Type': 'application/json'
+          "Content-Type": "application/json",
           // 'Content-Type': 'application/x-www-form-urlencoded',
         },
-        body: JSON.stringify(data) // body data type must match "Content-Type" header
-      });
+        body: JSON.stringify(data), // body data type must match "Content-Type" header
+      })
+
+      const res = await response.json()
+
+      $goto(`./${res._id}`)
     } catch (error) {
-      
+      console.error(error)
     }
   }
 
@@ -32,23 +38,28 @@
   let onChange = () => {}
 
   function _onCancel() {
-    onCancel()
     close()
   }
 
   async function _onOkay() {
     await createNewApp()
-    close()
   }
 </script>
 
 <div class="container">
   <div class="body">
     <div class="heading">
-      <span class="icon"><AppsIcon /></span>
+      <span class="icon">
+        <AppsIcon />
+      </span>
       <h3>Create new web app</h3>
     </div>
-    <Input name="name" label="Name" placeholder="Enter application name" on:change={(e) => name = e.target.value} on:input={(e) => name = e.target.value} />
+    <Input
+      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"
@@ -56,22 +67,28 @@
       placeholder="Describe your application" />
   </div>
   <div class="footer">
-    <a href="./#" class="info"><InfoIcon />How to get started</a>
-    <Button outline thin on:click={_onCancel}>
-      Cancel
-    </Button>
-    <Button primary thin on:click={_onOkay}>
-      Save
-    </Button>
+    <a href="./#" class="info">
+      <InfoIcon />
+      How to get started
+    </a>
+    <Button outline thin on:click={_onCancel}>Cancel</Button>
+    <Button primary thin on:click={_onOkay}>Save</Button>
   </div>
-  <div class="close-button" on:click={_onCancel}><CloseIcon /></div>
+  <div class="close-button" on:click={_onCancel}>
+    <CloseIcon />
+  </div>
+  {#if loading}
+    <div in:fade class="spinner-container">
+      <Spinner />
+      <span class="spinner-text">Creating your app...</span>
+    </div>
+  {/if}
 </div>
 
 <style>
-
-.container {
-  position: relative;
-}
+  .container {
+    position: relative;
+  }
 
   .close-button {
     cursor: pointer;
@@ -130,4 +147,20 @@
     border-bottom-right-radius: 50px;
     background-color: var(--grey-light);
   }
+  .spinner-container {
+    background: white;
+    position: absolute;
+    border-radius: 5px;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: grid;
+    justify-items: center;
+    align-content: center;
+    grid-gap: 50px;
+  }
+  .spinner-text {
+    font-size: 2em;
+  }
 </style>
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index e21518f9f0..edaed8c967 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -1,4 +1,5 @@
 <script>
+  import Modal from "svelte-simple-modal"
   import { store } from "builderStore"
 
   import { fade } from "svelte/transition"
@@ -20,62 +21,63 @@
       await store.setPackage(pkg)
       return pkg
     } else {
-      console.log(pkg)
       throw new Error(pkg)
     }
   }
 </script>
 
-<div class="root">
+<Modal>
+  <div class="root">
 
-  <div class="top-nav">
-    <div class="topleftnav">
-      <button class="home-logo">
-        <img
-          src="/_builder/assets/bb-logo.svg"
-          alt="budibase icon"
-          on:click={() => $goto(`/`)} />
-      </button>
+    <div class="top-nav">
+      <div class="topleftnav">
+        <button class="home-logo">
+          <img
+            src="/_builder/assets/bb-logo.svg"
+            alt="budibase icon"
+            on:click={() => $goto(`/`)} />
+        </button>
 
-      <!-- This gets all indexable subroutes and sticks them in the top nav. -->
-      {#each $layout.children as { path, title }}
-        <span
-          class:active={$isActive(path)}
-          class="topnavitem"
-          on:click={() => $goto(path)}>
-          {title}
-        </span>
-      {/each}
-      <!-- <IconButton icon="home"
+        <!-- This gets all indexable subroutes and sticks them in the top nav. -->
+        {#each $layout.children as { path, title }}
+          <span
+            class:active={$isActive(path)}
+            class="topnavitem"
+            on:click={() => $goto(path)}>
+            {title}
+          </span>
+        {/each}
+        <!-- <IconButton icon="home"
                       color="var(--slate)"
                       hoverColor="var(--secondary75)"/> -->
+      </div>
+      <div class="toprightnav">
+        <span
+          class:active={$isActive(`/settings`)}
+          class="topnavitemright"
+          on:click={() => $goto(`/settings`)}>
+          <SettingsIcon />
+        </span>
+        <span
+          class:active={false}
+          class="topnavitemright"
+          on:click={() => (location = `/${application}`)}>
+          <PreviewIcon />
+        </span>
+      </div>
     </div>
-    <div class="toprightnav">
-      <span
-        class:active={$isActive(`/settings`)}
-        class="topnavitemright"
-        on:click={() => $goto(`/settings`)}>
-        <SettingsIcon />
-      </span>
-      <span
-        class:active={false}
-        class="topnavitemright"
-        on:click={() => (location = `/${application}`)}>
-        <PreviewIcon />
-      </span>
-    </div>
+
+    {#await promise}
+      <!-- This should probably be some kind of loading state? -->
+      <div />
+    {:then}
+      <slot />
+    {:catch error}
+      <p>Something went wrong: {error.message}</p>
+    {/await}
+
   </div>
-
-  {#await promise}
-    <!-- This should probably be some kind of loading state? -->
-    <div />
-  {:then}
-    <slot />
-  {:catch error}
-    <p>Something went wrong: {error.message}</p>
-  {/await}
-
-</div>
+</Modal>
 
 <style>
   .root {
diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte
index 98bae8aa7d..363efcf619 100644
--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@@ -1,4 +1,5 @@
 <script>
+  import Modal from "svelte-simple-modal"
   import {
     SettingsIcon,
     AppsIcon,
@@ -14,104 +15,106 @@
   } from "components/common/Icons/"
 </script>
 
-<div class="root">
-  <div class="ui-nav">
-    <div class="home-logo">
-      <img src="/_builder/assets/bb-logo.svg" alt="Budibase icon" />
-    </div>
-
-    <div class="nav-section">
-      <div class="nav-section-title">Build</div>
-      <div class="nav-item-home">
-        <span class="nav-item-icon">
-          <AppsIcon />
-        </span>
-        <div class="nav-item-title">Apps</div>
+<Modal>
+  <div class="root">
+    <div class="ui-nav">
+      <div class="home-logo">
+        <img src="/_builder/assets/bb-logo.svg" alt="Budibase icon" />
       </div>
-      <div class="nav-item">
-        <span class="nav-item-icon">
-          <SettingsIcon />
-        </span>
-        <div class="nav-item-title">Settings</div>
+
+      <div class="nav-section">
+        <div class="nav-section-title">Build</div>
+        <div class="nav-item-home">
+          <span class="nav-item-icon">
+            <AppsIcon />
+          </span>
+          <div class="nav-item-title">Apps</div>
+        </div>
+        <div class="nav-item">
+          <span class="nav-item-icon">
+            <SettingsIcon />
+          </span>
+          <div class="nav-item-title">Settings</div>
+        </div>
+        <a href="https://budibase.con/login" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <UpdatesIcon />
+          </span>
+          <div class="nav-item-title">Updates</div>
+        </a>
+        <a href="https://budibase.con/login" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <HostingIcon />
+          </span>
+          <div class="nav-item-title">Hosting</div>
+        </a>
+      </div>
+
+      <div class="nav-section">
+        <div class="nav-section-title">Learn</div>
+        <a href="https://docs.budibase.com/" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <DocumentationIcon />
+          </span>
+          <div class="nav-item-title">Documentation</div>
+        </a>
+        <a
+          href="https://docs.budibase.com/tutorial/quick-start"
+          target="_blank"
+          class="nav-item">
+          <span class="nav-item-icon">
+            <TutorialsIcon />
+          </span>
+          <div class="nav-item-title">Tutorials</div>
+        </a>
+        <a href="https://forum.budibase.com/" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <CommunityIcon />
+          </span>
+          <div class="nav-item-title">Community</div>
+        </a>
+      </div>
+
+      <div class="nav-section">
+        <div class="nav-section-title">Contact</div>
+        <a
+          href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
+          target="_blank"
+          class="nav-item">
+          <span class="nav-item-icon">
+            <ContributionIcon />
+          </span>
+          <div class="nav-item-title">Contribute to our product</div>
+        </a>
+        <a
+          href="https://github.com/Budibase/budibase/issues"
+          target="_blank"
+          class="nav-item">
+          <span class="nav-item-icon">
+            <BugIcon />
+          </span>
+          <div class="nav-item-title">Report bug</div>
+        </a>
+        <a href="mailto:support@budibase.com" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <EmailIcon />
+          </span>
+          <div class="nav-item-title">Email</div>
+        </a>
+        <a href="https://twitter.com/budibase" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <TwitterIcon />
+          </span>
+          <div class="nav-item-title">Twitter</div>
+        </a>
       </div>
-      <a href="https://budibase.con/login" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <UpdatesIcon />
-        </span>
-        <div class="nav-item-title">Updates</div>
-      </a>
-      <a href="https://budibase.con/login" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <HostingIcon />
-        </span>
-        <div class="nav-item-title">Hosting</div>
-      </a>
     </div>
 
-    <div class="nav-section">
-      <div class="nav-section-title">Learn</div>
-      <a href="https://docs.budibase.com/" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <DocumentationIcon />
-        </span>
-        <div class="nav-item-title">Documentation</div>
-      </a>
-      <a
-        href="https://docs.budibase.com/tutorial/quick-start"
-        target="_blank"
-        class="nav-item">
-        <span class="nav-item-icon">
-          <TutorialsIcon />
-        </span>
-        <div class="nav-item-title">Tutorials</div>
-      </a>
-      <a href="https://forum.budibase.com/" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <CommunityIcon />
-        </span>
-        <div class="nav-item-title">Community</div>
-      </a>
-    </div>
-
-    <div class="nav-section">
-      <div class="nav-section-title">Contact</div>
-      <a
-        href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
-        target="_blank"
-        class="nav-item">
-        <span class="nav-item-icon">
-          <ContributionIcon />
-        </span>
-        <div class="nav-item-title">Contribute to our product</div>
-      </a>
-      <a
-        href="https://github.com/Budibase/budibase/issues"
-        target="_blank"
-        class="nav-item">
-        <span class="nav-item-icon">
-          <BugIcon />
-        </span>
-        <div class="nav-item-title">Report bug</div>
-      </a>
-      <a href="mailto:support@budibase.com" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <EmailIcon />
-        </span>
-        <div class="nav-item-title">Email</div>
-      </a>
-      <a href="https://twitter.com/budibase" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <TwitterIcon />
-        </span>
-        <div class="nav-item-title">Twitter</div>
-      </a>
+    <div class="main">
+      <slot />
     </div>
   </div>
-
-  <div class="main">
-    <slot />
-  </div>
-</div>
+</Modal>
 
 <style>
   .root {
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 1e6b46355e..97df61ebb0 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -24,15 +24,6 @@
 
   // Handle create app modal
   const { open } = getContext("simple-modal")
-  const onCancel = text => {
-    name = ""
-    status = -1
-  }
-
-  const onOkay = text => {
-    name = text
-    status = 1
-  }
 
   const showCreateAppModal = () => {
     open(
@@ -40,15 +31,13 @@
       {
         message: "What is your name?",
         hasForm: true,
-        onCancel,
-        onOkay,
       },
       {
         closeButton: false,
         closeOnEsc: false,
         closeOnOuterClick: false,
         styleContent: { padding: 0 },
-        closeOnOuterClick: true
+        closeOnOuterClick: true,
       }
     )
   }

From 9392de550ad23208d22c96474427bee36723c5d5 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 27 May 2020 13:48:38 +0200
Subject: [PATCH 12/14] add validation

---
 .../components/start/CreateAppModal.svelte    | 63 ++++++++++++++-----
 1 file changed, 47 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 77e31a5823..d2232f7604 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -11,26 +11,44 @@
   let name = ""
   let description = ""
   let loading = false
+  let error = {}
 
   const createNewApp = async () => {
-    const data = { name, description }
-    loading = true
-    try {
-      const response = await fetch("/api/applications", {
-        method: "POST", // *GET, POST, PUT, DELETE, etc.
-        credentials: "same-origin", // include, *same-origin, omit
-        headers: {
-          "Content-Type": "application/json",
-          // 'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        body: JSON.stringify(data), // body data type must match "Content-Type" header
-      })
+    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 fetch("/api/applications", {
+          method: "POST", // *GET, POST, PUT, DELETE, etc.
+          credentials: "same-origin", // include, *same-origin, omit
+          headers: {
+            "Content-Type": "application/json",
+            // 'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          body: JSON.stringify(data), // body data type must match "Content-Type" header
+        })
 
-      const res = await response.json()
+        const res = await response.json()
 
-      $goto(`./${res._id}`)
-    } catch (error) {
-      console.error(error)
+        $goto(`./${res._id}`)
+      } catch (error) {
+        console.error(error)
+      }
     }
   }
 
@@ -60,11 +78,19 @@
       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">
@@ -163,4 +189,9 @@
   .spinner-text {
     font-size: 2em;
   }
+  .error {
+    color: var(--deletion100);
+    font-weight: bold;
+    font-size: 0.8em;
+  }
 </style>

From d237dd9271479f2e2b3d6a957214c1424d34685b Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 27 May 2020 13:51:19 +0200
Subject: [PATCH 13/14] fix lint erorrs

---
 packages/server/src/api/controllers/user.js   |  2 +-
 .../server/src/api/controllers/workflow.js    |  9 +++----
 .../src/api/routes/tests/couchTestUtils.js    |  4 +--
 packages/server/src/schemas/index.js          | 26 +++++++++----------
 4 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index f654caa4c0..5810872989 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -61,7 +61,7 @@ exports.create = async function(ctx) {
   }
 }
 
-exports.update = async function(ctx) {}
+exports.update = async function() {}
 
 exports.destroy = async function(ctx) {
   const database = new CouchDB(ctx.params.instanceId)
diff --git a/packages/server/src/api/controllers/workflow.js b/packages/server/src/api/controllers/workflow.js
index 216ca6afd2..e257151d37 100644
--- a/packages/server/src/api/controllers/workflow.js
+++ b/packages/server/src/api/controllers/workflow.js
@@ -2,8 +2,6 @@ const CouchDB = require("../../db")
 const Ajv = require("ajv")
 const newid = require("../../db/newid")
 
-const ajv = new Ajv()
-
 exports.create = async function(ctx) {
   const db = new CouchDB(ctx.params.instanceId)
   const workflow = ctx.request.body
@@ -28,7 +26,6 @@ exports.create = async function(ctx) {
   //   return
   // }
 
-
   workflow.type = "workflow"
   const response = await db.post(workflow)
   workflow._rev = response.rev
@@ -38,9 +35,9 @@ exports.create = async function(ctx) {
     message: "Workflow created successfully",
     workflow: {
       ...workflow,
-      ...response
-    }
-  };
+      ...response,
+    },
+  }
 }
 
 exports.update = async function(ctx) {
diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js
index aa7a765d25..de4ed7f87e 100644
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@@ -98,5 +98,5 @@ exports.insertDocument = async (databaseId, document) => {
 }
 
 exports.destroyDocument = async (databaseId, documentId) => {
-  return await new CouchDB(databaseId).destroy(documentId);
-}
\ No newline at end of file
+  return await new CouchDB(databaseId).destroy(documentId)
+}
diff --git a/packages/server/src/schemas/index.js b/packages/server/src/schemas/index.js
index 23a839bf97..9ab8736a7a 100644
--- a/packages/server/src/schemas/index.js
+++ b/packages/server/src/schemas/index.js
@@ -2,22 +2,22 @@ const WORKFLOW_SCHEMA = {
   properties: {
     type: "workflow",
     pageId: {
-      type: "string"
+      type: "string",
     },
     screenId: {
-      type: "string"
+      type: "string",
     },
     live: {
-      type: "boolean"
+      type: "boolean",
     },
     uiTree: {
-      type: "object"
+      type: "object",
     },
     definition: {
       type: "object",
       properties: {
         triggers: { type: "array" },
-        next: { 
+        next: {
           type: "object",
           properties: {
             type: { type: "string" },
@@ -25,14 +25,14 @@ const WORKFLOW_SCHEMA = {
             args: { type: "object" },
             conditions: { type: "array" },
             errorHandling: { type: "object" },
-            next: { type: "object" }
-          }
+            next: { type: "object" },
+          },
         },
-      }
-    }
-  }
-};
+      },
+    },
+  },
+}
 
 module.exports = {
-  WORKFLOW_SCHEMA
-};
\ No newline at end of file
+  WORKFLOW_SCHEMA,
+}

From 2325291b3edb246540e7560b8a95fe095835a16d Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 27 May 2020 13:53:44 +0200
Subject: [PATCH 14/14] fix another lint error

---
 packages/server/src/api/controllers/workflow.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/server/src/api/controllers/workflow.js b/packages/server/src/api/controllers/workflow.js
index e257151d37..61543afc0d 100644
--- a/packages/server/src/api/controllers/workflow.js
+++ b/packages/server/src/api/controllers/workflow.js
@@ -1,5 +1,4 @@
 const CouchDB = require("../../db")
-const Ajv = require("ajv")
 const newid = require("../../db/newid")
 
 exports.create = async function(ctx) {