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", href: "/builder/portal/plugins",
}, },
{ {
title: "Usage", title: "Account",
href: "/builder/portal/usage", href: "/builder/portal/account",
}, },
{ {
title: "Settings", title: "Settings",
@ -183,10 +183,7 @@
/> />
</div> </div>
{#if !$adminStore.cloud && $auth.isAdmin} {#if !$adminStore.cloud && $auth.isAdmin}
<Button <Button cta on:click={() => $goto("/builder/portal/account/upgrade")}>
cta
on:click={() => $goto("/builder/portal/settings/upgrade")}
>
Upgrade Upgrade
</Button> </Button>
{/if} {/if}
@ -216,8 +213,8 @@
<MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}> <MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
Close developer mode Close developer mode
</MenuItem> </MenuItem>
<MenuItem dataCy="user-logout" icon="LogOut" on:click={logout} <MenuItem dataCy="user-logout" icon="LogOut" on:click={logout}>
>Log out Log out
</MenuItem> </MenuItem>
</ActionMenu> </ActionMenu>
</div> </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, Button,
Input, Input,
Label, Label,
ButtonGroup,
notifications, notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import { auth, admin } from "stores/portal" import { auth, admin } from "stores/portal"
@ -103,10 +104,10 @@
{#if license.plan.type === "free"} {#if license.plan.type === "free"}
Upgrade your Budibase installation to unlock additional features. To Upgrade your Budibase installation to unlock additional features. To
subscribe to a plan visit your subscribe to a plan visit your
<Link size="L" href={upgradeUrl}>Account</Link>. <Link size="L" href={upgradeUrl}>account</Link>.
{:else} {:else}
To manage your plan visit your To manage your plan visit your
<Link size="L" href={upgradeUrl}>Account</Link>. <Link size="L" href={upgradeUrl}>account</Link>
{/if} {/if}
</Body> </Body>
</Layout> </Layout>
@ -127,44 +128,33 @@
/> />
</div> </div>
</div> </div>
<div class="button-container"> <ButtonGroup>
<div class="action-button"> <Button cta on:click={activate} disabled={activateDisabled}>
<Button cta on:click={activate} disabled={activateDisabled} Activate
>Activate</Button </Button>
> {#if licenseInfo?.licenseKey}
</div> <Button warning on:click={() => deleteLicenseKeyModal.show()}>
<div class="action-button"> Delete
{#if licenseInfo?.licenseKey} </Button>
<Button warning on:click={() => deleteLicenseKeyModal.show()} {/if}
>Delete</Button </ButtonGroup>
>
{/if}
</div>
</div>
</Layout> </Layout>
<Divider /> <Divider />
<Layout gap="L" noPadding> <Layout gap="XS" noPadding>
<Layout gap="S" noPadding> <Heading size="S">Plan</Heading>
<Heading size="S">Plan</Heading> <Layout noPadding gap="XXS">
<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", {
<Body size="XS"> time:
{processStringSync( new Date().getTime() - new Date(license.refreshedAt).getTime(),
"Updated {{ duration time 'millisecond' }} ago", })}
{ </Body>
time:
new Date().getTime() -
new Date(license.refreshedAt).getTime(),
}
)}
</Body>
</Layout>
</Layout> </Layout>
<div>
<Button secondary on:click={refresh}>Refresh</Button>
</div>
</Layout> </Layout>
<div>
<Button secondary on:click={refresh}>Refresh</Button>
</div>
</Layout> </Layout>
{/if} {/if}
@ -179,10 +169,4 @@
grid-gap: var(--spacing-l); grid-gap: var(--spacing-l);
align-items: center; align-items: center;
} }
.action-button {
margin-right: 10px;
}
.button-container {
display: flex;
}
</style> </style>

View File

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

View File

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