accommodate login layout

packages/builder/src/builderStore/index.js

@@ -4,6 +4,7 @@ import { getAutomationStore } from "./store/automation/"
 import { getThemeStore } from "./store/theme"
 import { derived } from "svelte/store"
 import analytics from "analytics"
+import { LAYOUT_NAMES } from "../constants"
 
 export const store = getFrontendStore()
 export const backendUiStore = getBackendUiStore()
@@ -37,7 +38,7 @@ export const allScreens = derived(store, $store => {
 
 export const mainLayout = derived(store, $store => {
   return $store.layouts?.find(
-    layout => layout.props?._id === "private-master-layout"
+    layout => layout.props?._id === LAYOUT_NAMES.MASTER.PRIVATE
   )
 })
 

packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js

@@ -5,6 +5,7 @@ export class Screen extends BaseStructure {
     super(true)
     this._json = {
       props: {
+        layoutId: "layout_private_master",
         _id: "",
         _component: "",
         _styles: {

packages/builder/src/components/userInterface/Layout.svelte

@@ -15,9 +15,9 @@
 
   const dragDropStore = initDragDropStore()
 
-  const setCurrentScreenToLayout = () => {
+  const selectLayout = () => {
-    store.actions.selectAssetType(FrontendTypes.LAYOUT)
+    store.actions.layouts.select(layout._id)
-    $goto("./layouts")
+    $goto(`./layouts/${layout._id}`)
   }
 </script>
 
@@ -28,7 +28,7 @@
   withArrow
   selected={$store.currentComponentInfo?._id === layout.props._id}
   opened={$store.currentAssetId === layout._id}
-  on:click={setCurrentScreenToLayout} />
+  on:click={selectLayout} />
 
 {#if $store.currentAssetId === layout._id && layout.props._children}
   <ComponentTree

packages/builder/src/constants/index.js

@@ -11,3 +11,10 @@ export const FrontendTypes = {
 
 // fields on the user table that cannot be edited
 export const UNEDITABLE_USER_FIELDS = ["username", "password", "roleId"]
+
+export const LAYOUT_NAMES = {
+  MASTER: {
+    PRIVATE: "layout_private_master",
+    PUBLIC: "layout_private_master",
+  },
+}

packages/server/src/api/controllers/application.js

@@ -16,7 +16,6 @@ const {
   SEPARATOR,
   getLayoutParams,
   getScreenParams,
-  generateLayoutID,
   generateScreenID,
 } = require("../../db/utils")
 const {
@@ -215,21 +214,16 @@ const createEmptyAppPackage = async (ctx, app) => {
   let screensAndLayouts = []
   for (let layout of BASE_LAYOUTS) {
     const cloned = cloneDeep(layout)
-    cloned._id = generateLayoutID()
     cloned.title = app.name
     screensAndLayouts.push(recurseMustache(cloned, app))
   }
 
   const homeScreen = cloneDeep(HOME_SCREEN)
   homeScreen._id = generateScreenID()
-  // TODO: fix - could have multiple base layouts
-  homeScreen.props.layoutId = screensAndLayouts[0]._id
   screensAndLayouts.push(homeScreen)
 
   const loginScreen = cloneDeep(LOGIN_SCREEN)
   loginScreen._id = generateScreenID()
-  // TODO: fix - could have multiple base layouts
-  loginScreen.props.layoutId = screensAndLayouts[0]._id
   screensAndLayouts.push(loginScreen)
 
   await db.bulkDocs(screensAndLayouts)

packages/server/src/constants/layouts.js

@@ -1,10 +1,11 @@
 const BASE_LAYOUT_PROP_IDS = {
-  PRIVATE: "private-master-layout",
+  PRIVATE: "layout_private_master",
-  PUBLIC: "public-master-layout",
+  PUBLIC: "layout_public_master",
 }
 
 const BASE_LAYOUTS = [
   {
+    _id: BASE_LAYOUT_PROP_IDS.PRIVATE,
     componentLibraries: ["@budibase/standard-components"],
     title: "{{ name }}",
     favicon: "./_shared/favicon.png",
@@ -145,76 +146,63 @@ const BASE_LAYOUTS = [
       onLoad: [],
     },
   },
-  // // TODO: needs removed
+  {
-  // {
+    _id: BASE_LAYOUT_PROP_IDS.PUBLIC,
-  //   componentLibraries: ["@budibase/standard-components"],
+    componentLibraries: ["@budibase/standard-components"],
-  //   title: "{{ name }}",
+    title: "{{ name }}",
-  //   favicon: "./_shared/favicon.png",
+    favicon: "./_shared/favicon.png",
-  //   stylesheets: [],
+    stylesheets: [],
-  //   name: "Unauthenticated",
+    name: "Login",
-  //   props: {
+    props: {
-  //     _id: BASE_LAYOUT_PROP_IDS.PUBLIC,
+      _id: BASE_LAYOUT_PROP_IDS.PUBLIC,
-  //     _component: "@budibase/standard-components/container",
+      _component: "@budibase/standard-components/container",
-  //     _children: [
+      _children: [
-  //       {
+        {
-  //         _id: "686c252d-dbf2-4e28-9078-414ba4719759",
+          _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
-  //         _component: "@budibase/standard-components/login",
+          _component: "##builtin/screenslot",
-  //         _styles: {
+          _styles: {
-  //           normal: {
+            normal: {
-  //             padding: "64px",
+              flex: "1 1 auto",
-  //             background: "rgba(255, 255, 255, 0.4)",
+              display: "flex",
-  //             "border-radius": "0.5rem",
+              "flex-direction": "column",
-  //             "margin-top": "0px",
+              "justify-content": "flex-start",
-  //             margin: "0px",
+              "align-items": "stretch",
-  //             "line-height": "1",
+              "max-width": "100%",
-  //             "box-shadow":
+              "margin-left": "20px",
-  //               "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+              "margin-right": "20px",
-  //             "font-size": "16px",
+              width: "1400px",
-  //             "font-family": "Inter",
+              padding: "20px",
-  //             flex: "0 1 auto",
+            },
-  //             transform: "0",
+            hover: {},
-  //           },
+            active: {},
-  //           hover: {},
+            selected: {},
-  //           active: {},
+          },
-  //           selected: {},
+          _code: "",
-  //         },
+          _children: [],
-  //         _code: "",
+        },
-  //         loginRedirect: "",
+      ],
-  //         usernameLabel: "Username",
+      type: "div",
-  //         passwordLabel: "Password",
+      _styles: {
-  //         loginButtonLabel: "Login",
+        active: {},
-  //         buttonClass: "",
+        hover: {},
-  //         _instanceName: "Login",
+        normal: {
-  //         inputClass: "",
+          display: "flex",
-  //         _children: [],
+          "flex-direction": "column",
-  //         title: "Log in to {{ name }}",
+          "align-items": "center",
-  //         buttonText: "Log In",
+          "justify-content": "center",
-  //         logo:
+          "margin-right": "auto",
-  //           "https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
+          "margin-left": "auto",
-  //       },
+          "min-height": "100%",
-  //     ],
+          "background-image":
-  //     type: "div",
+            "linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
-  //     _styles: {
+        },
-  //       active: {},
+        selected: {},
-  //       hover: {},
+      },
-  //       normal: {
+      _code: "",
-  //         display: "flex",
+      className: "",
-  //         "flex-direction": "column",
+      onLoad: [],
-  //         "align-items": "center",
+    },
-  //         "justify-content": "center",
+  },
-  //         "margin-right": "auto",
-  //         "margin-left": "auto",
-  //         "min-height": "100%",
-  //         "background-image":
-  //           "linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
-  //       },
-  //       selected: {},
-  //     },
-  //     _code: "",
-  //     className: "",
-  //     onLoad: [],
-  //   },
-  // },
 ]
 
 module.exports = {

packages/server/src/constants/screens.js

@@ -1,9 +1,11 @@
 const { BUILTIN_ROLE_IDS } = require("../utilities/security/roles")
+const { BASE_LAYOUT_PROP_IDS } = require("./layouts")
 
 exports.HOME_SCREEN = {
   description: "",
   url: "",
   props: {
+    layoutId: BASE_LAYOUT_PROP_IDS.PRIVATE,
     _id: "d834fea2-1b3e-4320-ab34-f9009f5ecc59",
     _component: "@budibase/standard-components/container",
     _styles: {
@@ -103,6 +105,7 @@ exports.LOGIN_SCREEN = {
   description: "",
   url: "",
   props: {
+    layoutId: BASE_LAYOUT_PROP_IDS.PUBLIC,
     _id: "5beb4c7b-3c8b-49b2-b8b3-d447dc76dda7",
     _component: "@budibase/standard-components/container",
     _styles: {

packages/server/src/db/utils.js

@@ -187,8 +187,8 @@ exports.getRoleParams = (roleId = null, otherProps = {}) => {
  * Generates a new layout ID.
  * @returns {string} The new layout ID which the layout doc can be stored under.
  */
-exports.generateLayoutID = () => {
+exports.generateLayoutID = id => {
-  return `${DocumentTypes.LAYOUT}${SEPARATOR}${newid()}`
+  return `${DocumentTypes.LAYOUT}${SEPARATOR}${id || newid()}`
 }
 
 /**