Update structure for account pages

This commit is contained in:
Andrew Kingston 2022-12-15 16:50:08 +00:00
parent 9e290527ed
commit d4da8d83fb
7 changed files with 64 additions and 55 deletions

View File

@ -57,8 +57,8 @@
href: "/builder/portal/plugins",
},
{
title: "Usage",
href: "/builder/portal/usage",
title: "Account",
href: "/builder/portal/account",
},
{
title: "Settings",
@ -183,10 +183,7 @@
/>
</div>
{#if !$adminStore.cloud && $auth.isAdmin}
<Button
cta
on:click={() => $goto("/builder/portal/settings/upgrade")}
>
<Button cta on:click={() => $goto("/builder/portal/account/upgrade")}>
Upgrade
</Button>
{/if}
@ -216,8 +213,8 @@
<MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
Close developer mode
</MenuItem>
<MenuItem dataCy="user-logout" icon="LogOut" on:click={logout}
>Log out
<MenuItem dataCy="user-logout" icon="LogOut" on:click={logout}>
Log out
</MenuItem>
</ActionMenu>
</div>

View File

@ -0,0 +1,25 @@
<script>
import { url, isActive } from "@roxi/routify"
import { Page } from "@budibase/bbui"
import { Content, SideNav, SideNavItem } from "components/portal/page"
</script>
<Page narrow>
<Content>
<div slot="side-nav">
<SideNav>
<SideNavItem
text="Usage"
url={$url("./usage")}
active={$isActive("./usage")}
/>
<SideNavItem
text="Upgrade"
url={$url("./upgrade")}
active={$isActive("./upgrade")}
/>
</SideNav>
</div>
<slot />
</Content>
</Page>

View File

@ -0,0 +1,4 @@
<script>
import { redirect } from "@roxi/routify"
$redirect("./usage")
</script>

View File

@ -8,6 +8,7 @@
Button,
Input,
Label,
ButtonGroup,
notifications,
} from "@budibase/bbui"
import { auth, admin } from "stores/portal"
@ -103,10 +104,10 @@
{#if license.plan.type === "free"}
Upgrade your Budibase installation to unlock additional features. To
subscribe to a plan visit your
<Link size="L" href={upgradeUrl}>Account</Link>.
<Link size="L" href={upgradeUrl}>account</Link>.
{:else}
To manage your plan visit your
<Link size="L" href={upgradeUrl}>Account</Link>.
<Link size="L" href={upgradeUrl}>account</Link>
{/if}
</Body>
</Layout>
@ -127,37 +128,27 @@
/>
</div>
</div>
<div class="button-container">
<div class="action-button">
<Button cta on:click={activate} disabled={activateDisabled}
>Activate</Button
>
</div>
<div class="action-button">
<ButtonGroup>
<Button cta on:click={activate} disabled={activateDisabled}>
Activate
</Button>
{#if licenseInfo?.licenseKey}
<Button warning on:click={() => deleteLicenseKeyModal.show()}
>Delete</Button
>
<Button warning on:click={() => deleteLicenseKeyModal.show()}>
Delete
</Button>
{/if}
</div>
</div>
</ButtonGroup>
</Layout>
<Divider />
<Layout gap="L" noPadding>
<Layout gap="S" noPadding>
<Layout gap="XS" noPadding>
<Heading size="S">Plan</Heading>
<Layout noPadding gap="XXS">
<Body size="S">You are currently on the {license.plan.type} plan</Body
>
<Body size="S">You are currently on the {license.plan.type} plan</Body>
<Body size="XS">
{processStringSync(
"Updated {{ duration time 'millisecond' }} ago",
{
{processStringSync("Updated {{ duration time 'millisecond' }} ago", {
time:
new Date().getTime() -
new Date(license.refreshedAt).getTime(),
}
)}
new Date().getTime() - new Date(license.refreshedAt).getTime(),
})}
</Body>
</Layout>
</Layout>
@ -165,7 +156,6 @@
<Button secondary on:click={refresh}>Refresh</Button>
</div>
</Layout>
</Layout>
{/if}
<style>
@ -179,10 +169,4 @@
grid-gap: var(--spacing-l);
align-items: center;
}
.action-button {
margin-right: 10px;
}
.button-container {
display: flex;
}
</style>

View File

@ -0,0 +1,4 @@
<script>
import { redirect } from "@roxi/routify"
$redirect("../")
</script>

View File

@ -38,11 +38,6 @@
url={$url("./theme")}
active={$isActive("./theme")}
/>
<SideNavItem
text="Upgrade"
url={$url("./upgrade")}
active={$isActive("./upgrade")}
/>
</SideNav>
</div>
<slot />