accommodate login layout

2024-06-27 18:40:42 +12:00 · 2020-12-03 17:31:38 +00:00 · 2020-12-03 17:31:38 +00:00 · af24967c88
parent 8ec836970c
commit af24967c88
8 changed files with 79 additions and 85 deletions
--- a/packages/builder/src/builderStore/index.js
+++ b/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
  )
 })

--- a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
+++ b/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: {
--- a/packages/builder/src/components/userInterface/Layout.svelte
+++ b/packages/builder/src/components/userInterface/Layout.svelte
@ -15,9 +15,9 @@

  const dragDropStore = initDragDropStore()

-  const setCurrentScreenToLayout = () => {
-    store.actions.selectAssetType(FrontendTypes.LAYOUT)
-    $goto("./layouts")
+  const selectLayout = () => {
+    store.actions.layouts.select(layout._id)
+    $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
--- a/packages/builder/src/constants/index.js
+++ b/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",
+  },
+}
--- a/packages/server/src/api/controllers/application.js
+++ b/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)
--- a/packages/server/src/constants/layouts.js
+++ b/packages/server/src/constants/layouts.js
@ -1,10 +1,11 @@
 const BASE_LAYOUT_PROP_IDS = {
-  PRIVATE: "private-master-layout",
-  PUBLIC: "public-master-layout",
+  PRIVATE: "layout_private_master",
+  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
-  // {
-  //   componentLibraries: ["@budibase/standard-components"],
-  //   title: "{{ name }}",
-  //   favicon: "./_shared/favicon.png",
-  //   stylesheets: [],
-  //   name: "Unauthenticated",
-  //   props: {
-  //     _id: BASE_LAYOUT_PROP_IDS.PUBLIC,
-  //     _component: "@budibase/standard-components/container",
-  //     _children: [
-  //       {
-  //         _id: "686c252d-dbf2-4e28-9078-414ba4719759",
-  //         _component: "@budibase/standard-components/login",
-  //         _styles: {
-  //           normal: {
-  //             padding: "64px",
-  //             background: "rgba(255, 255, 255, 0.4)",
-  //             "border-radius": "0.5rem",
-  //             "margin-top": "0px",
-  //             margin: "0px",
-  //             "line-height": "1",
-  //             "box-shadow":
-  //               "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
-  //             "font-size": "16px",
-  //             "font-family": "Inter",
-  //             flex: "0 1 auto",
-  //             transform: "0",
-  //           },
-  //           hover: {},
-  //           active: {},
-  //           selected: {},
-  //         },
-  //         _code: "",
-  //         loginRedirect: "",
-  //         usernameLabel: "Username",
-  //         passwordLabel: "Password",
-  //         loginButtonLabel: "Login",
-  //         buttonClass: "",
-  //         _instanceName: "Login",
-  //         inputClass: "",
-  //         _children: [],
-  //         title: "Log in to {{ name }}",
-  //         buttonText: "Log In",
-  //         logo:
-  //           "https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
-  //       },
-  //     ],
-  //     type: "div",
-  //     _styles: {
-  //       active: {},
-  //       hover: {},
-  //       normal: {
-  //         display: "flex",
-  //         "flex-direction": "column",
-  //         "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: [],
-  //   },
-  // },
+  {
+    _id: BASE_LAYOUT_PROP_IDS.PUBLIC,
+    componentLibraries: ["@budibase/standard-components"],
+    title: "{{ name }}",
+    favicon: "./_shared/favicon.png",
+    stylesheets: [],
+    name: "Login",
+    props: {
+      _id: BASE_LAYOUT_PROP_IDS.PUBLIC,
+      _component: "@budibase/standard-components/container",
+      _children: [
+        {
+          _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
+          _component: "##builtin/screenslot",
+          _styles: {
+            normal: {
+              flex: "1 1 auto",
+              display: "flex",
+              "flex-direction": "column",
+              "justify-content": "flex-start",
+              "align-items": "stretch",
+              "max-width": "100%",
+              "margin-left": "20px",
+              "margin-right": "20px",
+              width: "1400px",
+              padding: "20px",
+            },
+            hover: {},
+            active: {},
+            selected: {},
+          },
+          _code: "",
+          _children: [],
+        },
+      ],
+      type: "div",
+      _styles: {
+        active: {},
+        hover: {},
+        normal: {
+          display: "flex",
+          "flex-direction": "column",
+          "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 = {
--- a/packages/server/src/constants/screens.js
+++ b/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: {
--- a/packages/server/src/db/utils.js
+++ b/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 = () => {
-  return `${DocumentTypes.LAYOUT}${SEPARATOR}${newid()}`
+exports.generateLayoutID = id => {
+  return `${DocumentTypes.LAYOUT}${SEPARATOR}${id || newid()}`
 }

 /**