Use correct logo everywhere in the portal and fix some layouts

5 years ago · bf935183ce
8 changed files with 62 additions and 63 deletions
--- a/packages/builder/src/components/login/ForgotForm.svelte
+++ b/packages/builder/src/components/login/ForgotForm.svelte
@ -1,29 +1,25 @@
 <script>
-  import {
-    Input,
-    Button,
-    Layout,
-    Body,
-    Heading,
-  } from "@budibase/bbui"
+  import { Input, Button, Layout, Body, Heading } from "@budibase/bbui"
+  import { organisation } from "stores/portal"

  let username = ""
  let password = ""

-  async function reset() {
-
-  }
+  async function reset() {}
 </script>

 <div class="login">
  <div class="main">
    <Layout>
      <Layout noPadding justifyItems="center">
-        <img src="https://i.imgur.com/ZKyklgF.png" />
+        <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
      </Layout>
      <Layout gap="XS" noPadding>
        <Heading textAlign="center">Forgotten your password?</Heading>
-        <Body size="S" textAlign="center">No problem! Just enter your account's email address and we'll send you a link to reset it.</Body>
+        <Body size="S" textAlign="center">
+          No problem! Just enter your account's email address and we'll send you
+          a link to reset it.
+        </Body>
        <Input label="Email" bind:value={username} />
      </Layout>
      <Button cta on:click={reset}>Reset your password</Button>
--- a/packages/builder/src/components/login/LoginForm.svelte
+++ b/packages/builder/src/components/login/LoginForm.svelte
@ -12,6 +12,7 @@
  } from "@budibase/bbui"
  import GoogleButton from "./GoogleButton.svelte"
  import { auth } from "stores/backend"
+  import { organisation } from "stores/portal"

  let username = ""
  let password = ""
@ -35,7 +36,7 @@
  <div class="main">
    <Layout>
      <Layout noPadding justifyItems="center">
-        <img src="https://i.imgur.com/ZKyklgF.png" />
+        <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
        <Heading>Sign in to Budibase</Heading>
      </Layout>
      <GoogleButton />
@ -43,11 +44,18 @@
        <Divider noGrid />
        <Body size="S" textAlign="center">Sign in with email</Body>
        <Input label="Email" bind:value={username} />
-        <Input label="Password" type="password" on:change bind:value={password} />
+        <Input
+          label="Password"
+          type="password"
+          on:change
+          bind:value={password}
+        />
      </Layout>
      <Layout gap="S" noPadding>
        <Button cta on:click={login}>Sign in to Budibase</Button>
-        <ActionButton quiet on:click={() => $goto("./forgot")}>Forgot password?</ActionButton>
+        <ActionButton quiet on:click={() => $goto("./forgot")}>
+          Forgot password?
+        </ActionButton>
      </Layout>
    </Layout>
  </div>
--- a/packages/builder/src/components/login/ResetForm.svelte
+++ b/packages/builder/src/components/login/ResetForm.svelte
@ -1,31 +1,25 @@
 <script>
-  import {
-    Input,
-    Button,
-    Layout,
-    Body,
-    Heading,
-  } from "@budibase/bbui"
+  import { Input, Button, Layout, Body, Heading } from "@budibase/bbui"
  import { params } from "@roxi/routify"
-  import { auth } from "stores/backend"
+  import { organisation } from "stores/portal"

  const resetCode = $params["?code"]
  let password = ""

-  async function reset() {
-
-  }
+  async function reset() {}
 </script>

 <div class="login">
  <div class="main">
    <Layout>
      <Layout noPadding justifyItems="center">
-        <img src="https://i.imgur.com/ZKyklgF.png" />
+        <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
      </Layout>
      <Layout gap="XS" noPadding>
        <Heading textAlign="center">Reset your password</Heading>
-        <Body size="S" textAlign="center">Please enter the new password you'd like to use.</Body>
+        <Body size="S" textAlign="center">
+          Please enter the new password you'd like to use.
+        </Body>
        <Input label="Password" bind:value={password} />
      </Layout>
      <Button cta on:click={reset}>Reset your password</Button>
--- a/packages/builder/src/pages/builder/admin/index.svelte
+++ b/packages/builder/src/pages/builder/admin/index.svelte
@ -9,7 +9,7 @@
  } from "@budibase/bbui"
  import { goto } from "@roxi/routify"
  import api from "builderStore/api"
-  import { admin } from "stores/portal"
+  import { admin, organisation } from "stores/portal"

  let adminUser = {}

@ -33,7 +33,7 @@
 <section>
  <div class="container">
    <Layout>
-      <img src="https://i.imgur.com/ZKyklgF.png" />
+      <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
      <Layout gap="XS" justifyItems="center" noPadding>
        <Heading size="M">Create an admin user</Heading>
        <Body size="M" textAlign="center" noPadding>
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@ -21,6 +21,7 @@
  let loaded = false

  onMount(async () => {
+    await organisation.init()
    await apps.load(AppStatus.DEV)
    loaded = true
  })
--- a/packages/builder/src/pages/builder/invite/index.svelte
+++ b/packages/builder/src/pages/builder/invite/index.svelte
@ -9,7 +9,7 @@
  } from "@budibase/bbui"
  import { goto, params } from "@roxi/routify"
  import { createValidationStore, requiredValidator } from "helpers/validation"
-  import { users } from "stores/portal"
+  import { users, organisation } from "stores/portal"

  const [password, passwordError, passwordTouched] = createValidationStore(
    "",
@ -37,37 +37,37 @@

 <section>
  <div class="container">
-    <Layout gap="XS">
-      <img src="https://i.imgur.com/ZKyklgF.png" />
-    </Layout>
-    <div class="center">
-      <Layout gap="XS">
+    <Layout>
+      <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
+      <Layout gap="XS" justifyItems="center" noPadding>
        <Heading size="M">Accept Invitation</Heading>
-        <Body size="M">Please enter a password to setup your user.</Body>
+        <Body textAlign="center" size="M" noPadding>
+          Please enter a password to set up your user.
+        </Body>
+      </Layout>
+      <Layout gap="XS" noPadding>
+        <Input
+          label="Password"
+          type="password"
+          error={$passwordTouched && $passwordError}
+          bind:value={$password}
+        />
+        <Input
+          label="Repeat Password"
+          type="password"
+          error={$repeatTouched &&
+            $password !== $repeat &&
+            "Passwords must match"}
+          bind:value={$repeat}
+        />
      </Layout>
-    </div>
-    <Layout gap="XS">
-      <Input
-        label="Password"
-        type="password"
-        error={$passwordTouched && $passwordError}
-        bind:value={$password}
-      />
-      <Input
-        label="Repeat Password"
-        type="password"
-        error={$repeatTouched &&
-          $password !== $repeat &&
-          "Passwords must match"}
-        bind:value={$repeat}
-      />
-    </Layout>
-    <Layout gap="S">
      <Button
        disabled={!$passwordTouched || !$repeatTouched || $password !== $repeat}
        cta
-        on:click={acceptInvite}>Accept invite</Button
+        on:click={acceptInvite}
      >
+        Accept invite
+      </Button>
    </Layout>
  </div>
 </section>
@ -87,9 +87,6 @@
    justify-content: flex-start;
    align-items: stretch;
  }
-  .center {
-    text-align: center;
-  }
  img {
    width: 40px;
    margin: 0 auto;
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@ -83,6 +83,9 @@
          <MenuItem icon="Settings" on:click={oldSettingsModal.show}>
            Old settings
          </MenuItem>
+          <MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
+            Close developer mode
+          </MenuItem>
          <MenuItem icon="LogOut" on:click={auth.logout}>Log out</MenuItem>
        </ActionMenu>
      </div>
--- a/packages/builder/src/stores/portal/organisation.js
+++ b/packages/builder/src/stores/portal/organisation.js
@ -2,9 +2,9 @@ import { writable, get } from "svelte/store"
 import api from "builderStore/api"

 const DEFAULT_CONFIG = {
-  platformUrl: "",
+  platformUrl: undefined,
  logoUrl: "https://i.imgur.com/ZKyklgF.png",
-  docsUrl: "",
+  docsUrl: undefined,
  company: "Budibase",
 }

@ -19,14 +19,14 @@ export function createOrganisationStore() {
    if (json.status === 400) {
      set(DEFAULT_CONFIG)
    } else {
-      set({ ...json.config, _rev: json._rev })
+      set({ ...DEFAULT_CONFIG, ...json.config, _rev: json._rev })
    }
  }

  async function save(config) {
    const res = await api.post("/api/admin/configs", {
      type: "settings",
-      config,
+      config: { ...get(store), ...config },
      _rev: get(store)._rev,
    })
    const json = await res.json()