Prevent flashing and intermittent errors when navigating to admin screens as a non admin

5 years ago · d7aae52657
5 changed files with 79 additions and 91 deletions
--- a/packages/builder/src/pages/builder/portal/manage/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/_layout.svelte
@ -0,0 +1,18 @@
+<script>
+  import { Page } from "@budibase/bbui"
+  import { auth } from "stores/portal"
+  import { redirect } from "@roxi/routify"
+
+  // Only admins allowed here
+  $: {
+    if (!$auth.isAdmin) {
+      $redirect("../")
+    }
+  }
+</script>
+
+{#if $auth.isAdmin}
+  <Page>
+    <slot />
+  </Page>
+{/if}
--- a/packages/builder/src/pages/builder/portal/manage/auth/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/auth/_layout.svelte
@ -1,14 +0,0 @@
-<script>
-  import { redirect } from "@roxi/routify"
-  import { Page } from "@budibase/bbui"
-  import { auth } from "../../../../../stores/portal"
-
-  // only admins allowed here
-  if (!$auth.isAdmin) {
-    $redirect("../../../portal")
-  }
-</script>
-
-<Page>
-  <slot />
-</Page>
--- a/packages/builder/src/pages/builder/portal/manage/email/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/_layout.svelte
@ -1,11 +1,5 @@
 <script>
-  import { redirect } from "@roxi/routify"
-  import { auth, email } from "stores/portal"
-
-  // only admins allowed here
-  if (!$auth.isAdmin) {
-    $redirect("../../../portal")
-  }
+  import { email } from "stores/portal"

  email.templates.fetch()
 </script>
--- a/packages/builder/src/pages/builder/portal/manage/users/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_layout.svelte
@ -1,14 +0,0 @@
-<script>
-  import { Page } from "@budibase/bbui"
-  import { auth } from "../../../../../stores/portal"
-  import { redirect } from "@roxi/routify"
-
-  // only admins allowed here
-  if (!$auth.isAdmin) {
-    $redirect("../../../portal")
-  }
-</script>
-
-<Page>
-  <slot />
-</Page>
--- a/packages/builder/src/pages/builder/portal/settings/organisation.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/organisation.svelte
@ -17,9 +17,11 @@
  import { writable } from "svelte/store"
  import { redirect } from "@roxi/routify"

-  // only admins allowed here
-  if (!$auth.isAdmin) {
-    $redirect("../../portal")
+  // Only admins allowed here
+  $: {
+    if (!$auth.isAdmin) {
+      $redirect("../../portal")
+    }
  }

  const values = writable({
@ -70,68 +72,70 @@
  }
 </script>

-<Layout>
-  <Layout gap="XS" noPadding>
-    <Heading size="M">Organisation</Heading>
-    <Body>
-      Organisation settings is where you can edit your organisation name and
-      logo. You can also configure your platform URL and enable or disable
-      analytics.
-    </Body>
-  </Layout>
-  <Divider size="S" />
-  <Layout gap="XS" noPadding>
-    <Heading size="S">Information</Heading>
-    <Body size="S">Here you can update your logo and organization name.</Body>
-  </Layout>
-  <div class="fields">
-    <div class="field">
-      <Label size="L">Organization name</Label>
-      <Input thin bind:value={$values.company} />
-    </div>
-    <div class="field logo">
-      <Label size="L">Logo</Label>
-      <div class="file">
-        <Dropzone
-          value={[$values.logo]}
-          on:change={e => {
-            $values.logo = e.detail?.[0]
-          }}
-        />
+{#if $auth.isAdmin}
+  <Layout>
+    <Layout gap="XS" noPadding>
+      <Heading size="M">Organisation</Heading>
+      <Body>
+        Organisation settings is where you can edit your organisation name and
+        logo. You can also configure your platform URL and enable or disable
+        analytics.
+      </Body>
+    </Layout>
+    <Divider size="S" />
+    <Layout gap="XS" noPadding>
+      <Heading size="S">Information</Heading>
+      <Body size="S">Here you can update your logo and organization name.</Body>
+    </Layout>
+    <div class="fields">
+      <div class="field">
+        <Label size="L">Organization name</Label>
+        <Input thin bind:value={$values.company} />
+      </div>
+      <div class="field logo">
+        <Label size="L">Logo</Label>
+        <div class="file">
+          <Dropzone
+            value={[$values.logo]}
+            on:change={e => {
+              $values.logo = e.detail?.[0]
+            }}
+          />
+        </div>
      </div>
    </div>
-  </div>
-  <Divider size="S" />
-  <Layout gap="XS" noPadding>
-    <Heading size="S">Platform</Heading>
-    <Body size="S">Here you can set up general platform settings.</Body>
-  </Layout>
-  <div class="fields">
-    <div class="field">
-      <Label size="L">Platform URL</Label>
-      <Input thin bind:value={$values.platformUrl} />
-    </div>
-  </div>
-  <Divider size="S" />
-  <Layout gap="S" noPadding>
+    <Divider size="S" />
    <Layout gap="XS" noPadding>
-      <Heading size="S">Analytics</Heading>
-      <Body size="S">
-        If you would like to send analytics that help us make Budibase better,
-        please let us know below.
-      </Body>
+      <Heading size="S">Platform</Heading>
+      <Body size="S">Here you can set up general platform settings.</Body>
    </Layout>
    <div class="fields">
      <div class="field">
-        <Label size="L">Send Analytics to Budibase</Label>
-        <Toggle text="" bind:value={$values.analytics} />
+        <Label size="L">Platform URL</Label>
+        <Input thin bind:value={$values.platformUrl} />
+      </div>
+    </div>
+    <Divider size="S" />
+    <Layout gap="S" noPadding>
+      <Layout gap="XS" noPadding>
+        <Heading size="S">Analytics</Heading>
+        <Body size="S">
+          If you would like to send analytics that help us make Budibase better,
+          please let us know below.
+        </Body>
+      </Layout>
+      <div class="fields">
+        <div class="field">
+          <Label size="L">Send Analytics to Budibase</Label>
+          <Toggle text="" bind:value={$values.analytics} />
+        </div>
      </div>
+    </Layout>
+    <div>
+      <Button disabled={loading} on:click={saveConfig} cta>Save</Button>
    </div>
  </Layout>
-  <div>
-    <Button disabled={loading} on:click={saveConfig} cta>Save</Button>
-  </div>
-</Layout>
+{/if}

 <style>
  .fields {