Merge branch 'fix/per-app-login' of github.com:Budibase/budibase into fix/per-app-login

packages/builder/src/components/login/LoginForm.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { goto, params } from "@roxi/routify"
   import {
     notifications,
     Input,
@@ -22,8 +22,12 @@
         username,
         password,
       })
+      if ($params["?returnUrl"]) {
+        window.location = decodeURIComponent($params["?returnUrl"])
+      } else {
         notifications.success("Logged in successfully")
         $goto("../portal")
+      }
     } catch (err) {
       console.error(err)
       notifications.error("Invalid credentials")

packages/builder/src/pages/builder/_layout.svelte

@@ -28,7 +28,8 @@
       !$isActive("./auth") &&
       !$isActive("./invite")
     ) {
-      $redirect("./auth/login")
+      const returnUrl = encodeURIComponent(window.location.pathname)
+      $redirect("./auth/login?", { returnUrl })
     }
   }
 </script>

packages/builder/src/pages/builder/auth/_layout.svelte

@@ -0,0 +1,18 @@
+<script>
+  import { auth } from "stores/portal"
+  import { onMount } from "svelte"
+  import { redirect } from "@roxi/routify"
+
+  // If already authenticated, redirect away from the auth section.
+  // Check this onMount rather than a reactive statement to avoid trumping
+  // the login return URL functionality.
+  onMount(() => {
+    if ($auth.user) {
+      $redirect("../")
+    }
+  })
+</script>
+
+{#if !$auth.user}
+  <slot />
+{/if}

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -37,12 +37,14 @@
 
   onMount(async () => {
     // Prevent non-builders from accessing the portal
+    if ($auth.user) {
       if (!$auth.user?.builder?.global) {
         $redirect("../")
       } else {
         await organisation.init()
         loaded = true
       }
+    }
   })
 </script>
 

packages/client/src/components/ClientApp.svelte

@@ -10,6 +10,8 @@
     initialise,
     screenStore,
     authStore,
+    routeStore,
+    builderStore,
   } from "../store"
   import { TableNames, ActionTypes } from "../constants"
 
@@ -18,13 +20,13 @@
   setContext("component", writable({}))
   setContext("context", createContextStore())
 
-  let loaded = false
+  let dataLoaded = false
 
   // Load app config
   onMount(async () => {
     await initialise()
     await authStore.actions.fetchUser()
-    loaded = true
+    dataLoaded = true
   })
 
   // Register this as a refreshable datasource so that user changes cause
@@ -36,9 +38,22 @@
       metadata: { dataSource: { type: "table", tableId: TableNames.USERS } },
     },
   ]
+
+  // Redirect to home layout if no matching route
+  $: {
+    if (dataLoaded && $routeStore.routerLoaded && !$routeStore.activeRoute) {
+      if ($authStore) {
+        routeStore.actions.navigate("/")
+      } else {
+        const returnUrl = `${window.location.pathname}${window.location.hash}`
+        const encodedUrl = encodeURIComponent(returnUrl)
+        window.location = `/builder/auth/login?returnUrl=${encodedUrl}`
+      }
+    }
+  }
 </script>
 
-{#if loaded && $screenStore.activeLayout}
+{#if dataLoaded && $screenStore.activeLayout}
   <div lang="en" dir="ltr" class="spectrum spectrum--medium spectrum--light">
     <Provider key="user" data={$authStore} {actions}>
       <Component definition={$screenStore.activeLayout.props} />

packages/client/src/components/Router.svelte

@@ -3,6 +3,7 @@
   import Router from "svelte-spa-router"
   import { routeStore } from "../store"
   import Screen from "./Screen.svelte"
+  import { onMount } from "svelte"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")

packages/client/src/components/Screen.svelte

@@ -1,8 +1,8 @@
 <script>
-  import { fade } from "svelte/transition"
   import { screenStore, routeStore } from "../store"
   import Component from "./Component.svelte"
   import Provider from "./Provider.svelte"
+  import { onMount } from "svelte"
 
   // Keep route params up to date
   export let params = {}
@@ -11,8 +11,12 @@
   // Get the screen definition for the current route
   $: screenDefinition = $screenStore.activeScreen?.props
 
-  // Redirect to home layout if no matching route
-  $: screenDefinition == null && routeStore.actions.navigate("/")
+  // Mark the router as loaded whenever the screen mounts
+  onMount(() => {
+    if (!$routeStore.routerLoaded) {
+      routeStore.actions.setRouterLoaded()
+    }
+  })
 </script>
 
 <!-- Ensure to fully remount when screen changes -->

packages/client/src/store/routes.js

@@ -8,6 +8,7 @@ const createRouteStore = () => {
     routeParams: {},
     activeRoute: null,
     routeSessionId: Math.random(),
+    routerLoaded: false,
   }
   const store = writable(initialState)
 
@@ -47,10 +48,19 @@ const createRouteStore = () => {
     })
   }
   const navigate = push
+  const setRouterLoaded = () => {
+    store.update(state => ({ ...state, routerLoaded: true }))
+  }
 
   return {
     subscribe: store.subscribe,
-    actions: { fetchRoutes, navigate, setRouteParams, setActiveRoute },
+    actions: {
+      fetchRoutes,
+      navigate,
+      setRouteParams,
+      setActiveRoute,
+      setRouterLoaded,
+    },
   }
 }
 

packages/client/src/store/screens.js

@@ -18,12 +18,11 @@ const createScreenStore = () => {
         activeLayout = $builderStore.layout
         activeScreen = $builderStore.screen
       } else {
-        // Otherwise find the correct screen by matching the current route
+        activeLayout = { props: { _component: "screenslot" } }
+
+        // Find the correct screen by matching the current route
         const { screens, layouts } = $config
-        activeLayout = layouts[0]
-        if (screens.length === 1) {
-          activeScreen = screens[0]
-        } else if ($routeStore.activeRoute) {
+        if ($routeStore.activeRoute) {
           activeScreen = screens.find(
             screen => screen._id === $routeStore.activeRoute.screenId
           )