Use correct logo everywhere in the portal and fix some layouts

This commit is contained in:
Andrew Kingston 2021-05-18 18:48:37 +01:00
parent 3222559544
commit bf935183ce
8 changed files with 62 additions and 63 deletions

View File

@ -1,29 +1,25 @@
<script> <script>
import { import { Input, Button, Layout, Body, Heading } from "@budibase/bbui"
Input, import { organisation } from "stores/portal"
Button,
Layout,
Body,
Heading,
} from "@budibase/bbui"
let username = "" let username = ""
let password = "" let password = ""
async function reset() { async function reset() {}
}
</script> </script>
<div class="login"> <div class="login">
<div class="main"> <div class="main">
<Layout> <Layout>
<Layout noPadding justifyItems="center"> <Layout noPadding justifyItems="center">
<img src="https://i.imgur.com/ZKyklgF.png" /> <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
</Layout> </Layout>
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Heading textAlign="center">Forgotten your password?</Heading> <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} /> <Input label="Email" bind:value={username} />
</Layout> </Layout>
<Button cta on:click={reset}>Reset your password</Button> <Button cta on:click={reset}>Reset your password</Button>

View File

@ -12,6 +12,7 @@
} from "@budibase/bbui" } from "@budibase/bbui"
import GoogleButton from "./GoogleButton.svelte" import GoogleButton from "./GoogleButton.svelte"
import { auth } from "stores/backend" import { auth } from "stores/backend"
import { organisation } from "stores/portal"
let username = "" let username = ""
let password = "" let password = ""
@ -35,7 +36,7 @@
<div class="main"> <div class="main">
<Layout> <Layout>
<Layout noPadding justifyItems="center"> <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> <Heading>Sign in to Budibase</Heading>
</Layout> </Layout>
<GoogleButton /> <GoogleButton />
@ -43,11 +44,18 @@
<Divider noGrid /> <Divider noGrid />
<Body size="S" textAlign="center">Sign in with email</Body> <Body size="S" textAlign="center">Sign in with email</Body>
<Input label="Email" bind:value={username} /> <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>
<Layout gap="S" noPadding> <Layout gap="S" noPadding>
<Button cta on:click={login}>Sign in to Budibase</Button> <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>
</Layout> </Layout>
</div> </div>

View File

@ -1,31 +1,25 @@
<script> <script>
import { import { Input, Button, Layout, Body, Heading } from "@budibase/bbui"
Input,
Button,
Layout,
Body,
Heading,
} from "@budibase/bbui"
import { params } from "@roxi/routify" import { params } from "@roxi/routify"
import { auth } from "stores/backend" import { organisation } from "stores/portal"
const resetCode = $params["?code"] const resetCode = $params["?code"]
let password = "" let password = ""
async function reset() { async function reset() {}
}
</script> </script>
<div class="login"> <div class="login">
<div class="main"> <div class="main">
<Layout> <Layout>
<Layout noPadding justifyItems="center"> <Layout noPadding justifyItems="center">
<img src="https://i.imgur.com/ZKyklgF.png" /> <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
</Layout> </Layout>
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Heading textAlign="center">Reset your password</Heading> <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} /> <Input label="Password" bind:value={password} />
</Layout> </Layout>
<Button cta on:click={reset}>Reset your password</Button> <Button cta on:click={reset}>Reset your password</Button>

View File

@ -9,7 +9,7 @@
} from "@budibase/bbui" } from "@budibase/bbui"
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import api from "builderStore/api" import api from "builderStore/api"
import { admin } from "stores/portal" import { admin, organisation } from "stores/portal"
let adminUser = {} let adminUser = {}
@ -33,7 +33,7 @@
<section> <section>
<div class="container"> <div class="container">
<Layout> <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> <Layout gap="XS" justifyItems="center" noPadding>
<Heading size="M">Create an admin user</Heading> <Heading size="M">Create an admin user</Heading>
<Body size="M" textAlign="center" noPadding> <Body size="M" textAlign="center" noPadding>

View File

@ -21,6 +21,7 @@
let loaded = false let loaded = false
onMount(async () => { onMount(async () => {
await organisation.init()
await apps.load(AppStatus.DEV) await apps.load(AppStatus.DEV)
loaded = true loaded = true
}) })

View File

@ -9,7 +9,7 @@
} from "@budibase/bbui" } from "@budibase/bbui"
import { goto, params } from "@roxi/routify" import { goto, params } from "@roxi/routify"
import { createValidationStore, requiredValidator } from "helpers/validation" import { createValidationStore, requiredValidator } from "helpers/validation"
import { users } from "stores/portal" import { users, organisation } from "stores/portal"
const [password, passwordError, passwordTouched] = createValidationStore( const [password, passwordError, passwordTouched] = createValidationStore(
"", "",
@ -37,37 +37,37 @@
<section> <section>
<div class="container"> <div class="container">
<Layout gap="XS"> <Layout>
<img src="https://i.imgur.com/ZKyklgF.png" /> <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
</Layout> <Layout gap="XS" justifyItems="center" noPadding>
<div class="center">
<Layout gap="XS">
<Heading size="M">Accept Invitation</Heading> <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> </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 <Button
disabled={!$passwordTouched || !$repeatTouched || $password !== $repeat} disabled={!$passwordTouched || !$repeatTouched || $password !== $repeat}
cta cta
on:click={acceptInvite}>Accept invite</Button on:click={acceptInvite}
> >
Accept invite
</Button>
</Layout> </Layout>
</div> </div>
</section> </section>
@ -87,9 +87,6 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
} }
.center {
text-align: center;
}
img { img {
width: 40px; width: 40px;
margin: 0 auto; margin: 0 auto;

View File

@ -83,6 +83,9 @@
<MenuItem icon="Settings" on:click={oldSettingsModal.show}> <MenuItem icon="Settings" on:click={oldSettingsModal.show}>
Old settings Old settings
</MenuItem> </MenuItem>
<MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
Close developer mode
</MenuItem>
<MenuItem icon="LogOut" on:click={auth.logout}>Log out</MenuItem> <MenuItem icon="LogOut" on:click={auth.logout}>Log out</MenuItem>
</ActionMenu> </ActionMenu>
</div> </div>

View File

@ -2,9 +2,9 @@ import { writable, get } from "svelte/store"
import api from "builderStore/api" import api from "builderStore/api"
const DEFAULT_CONFIG = { const DEFAULT_CONFIG = {
platformUrl: "", platformUrl: undefined,
logoUrl: "https://i.imgur.com/ZKyklgF.png", logoUrl: "https://i.imgur.com/ZKyklgF.png",
docsUrl: "", docsUrl: undefined,
company: "Budibase", company: "Budibase",
} }
@ -19,14 +19,14 @@ export function createOrganisationStore() {
if (json.status === 400) { if (json.status === 400) {
set(DEFAULT_CONFIG) set(DEFAULT_CONFIG)
} else { } else {
set({ ...json.config, _rev: json._rev }) set({ ...DEFAULT_CONFIG, ...json.config, _rev: json._rev })
} }
} }
async function save(config) { async function save(config) {
const res = await api.post("/api/admin/configs", { const res = await api.post("/api/admin/configs", {
type: "settings", type: "settings",
config, config: { ...get(store), ...config },
_rev: get(store)._rev, _rev: get(store)._rev,
}) })
const json = await res.json() const json = await res.json()