MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move theme and API key into user profile dropdown instead of settings

This commit is contained in:
Andrew Kingston 2023-01-09 09:42:51 +00:00
parent 183bf9a84a
commit 85f4648f6f
9 changed files with 93 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/builder/src/components/settings/APIKeyModal.svelte Normal file
View File

@ -0,0 +1,40 @@
<script>
import { ModalContent } from "@budibase/bbui"
import { Body, notifications } from "@budibase/bbui"
import { auth } from "stores/portal"
import { onMount } from "svelte"
import CopyInput from "components/common/inputs/CopyInput.svelte"
let apiKey = null
async function generateAPIKey() {
try {
apiKey = await auth.generateAPIKey()
notifications.success("New API key generated")
} catch (err) {
notifications.error("Unable to generate new API key")
}
// need to return false to keep modal open
return false
}
onMount(async () => {
try {
apiKey = await auth.fetchAPIKey()
} catch (err) {
notifications.error("Unable to fetch API key")
}
})
</script>
<ModalContent
title="API Key"
showSecondaryButton
secondaryButtonText="Regenerate key"
secondaryAction={generateAPIKey}
showCancelButton={false}
confirmText="Close"
>
<Body size="S">Your API key for accessing the Budibase public API:</Body>
<CopyInput bind:value={apiKey} />
</ModalContent>

6
packages/builder/src/components/settings/UpdateUserInfoModal.svelte → packages/builder/src/components/settings/ProfileModal.svelte
View File

@ -18,11 +18,7 @@
} }
</script> </script>
<ModalContent <ModalContent title="My profile" confirmText="Save" onConfirm={updateInfo}>
title="Update user information"
confirmText="Update information"
onConfirm={updateInfo}
>
<Body size="S"> <Body size="S">
Personalise the platform by adding your first name and last name. Personalise the platform by adding your first name and last name.
</Body> </Body>

16
packages/builder/src/components/settings/ThemeModal.svelte Normal file
View File

@ -0,0 +1,16 @@
<script>
import { ModalContent } from "@budibase/bbui"
import { Label, Select } from "@budibase/bbui"
import { themeStore } from "builderStore"
import { Constants } from "@budibase/frontend-core"
</script>
<ModalContent title="Theme">
<Select
options={Constants.Themes}
bind:value={$themeStore.theme}
placeholder={null}
getOptionLabel={x => x.name}
getOptionValue={x => x.class}
/>
</ModalContent>

4
packages/builder/src/pages/builder/apps/index.svelte
View File

@ -17,7 +17,7 @@
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import { AppStatus } from "constants" import { AppStatus } from "constants"
import { gradient } from "actions" import { gradient } from "actions"
import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte" import ProfileModal from "components/settings/ProfileModal.svelte"
import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte" import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
import { processStringSync } from "@budibase/string-templates" import { processStringSync } from "@budibase/string-templates"
import Spaceman from "assets/bb-space-man.svg" import Spaceman from "assets/bb-space-man.svg"
@ -185,7 +185,7 @@
</Page> </Page>
</div> </div>
<Modal bind:this={userInfoModal}> <Modal bind:this={userInfoModal}>
<UpdateUserInfoModal /> <ProfileModal />
</Modal> </Modal>
<Modal bind:this={changePasswordModal}> <Modal bind:this={changePasswordModal}>
<ChangePasswordModal /> <ChangePasswordModal />

41
packages/builder/src/pages/builder/portal/_layout.svelte
View File

@ -13,15 +13,20 @@
} from "@budibase/bbui" } from "@budibase/bbui"
import { organisation, auth, admin as adminStore } from "stores/portal" import { organisation, auth, admin as adminStore } from "stores/portal"
import { onMount } from "svelte" import { onMount } from "svelte"
import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte" import ProfileModal from "components/settings/ProfileModal.svelte"
import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte" import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
import ThemeModal from "components/settings/ThemeModal.svelte"
import APIKeyModal from "components/settings/APIKeyModal.svelte"
import Logo from "assets/bb-emblem.svg" import Logo from "assets/bb-emblem.svg"
import ConfigChecklist from "components/common/ConfigChecklist.svelte" import ConfigChecklist from "components/common/ConfigChecklist.svelte"
// import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags" // import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
let loaded = false let loaded = false
let themeModal
let profileModal
let userInfoModal let userInfoModal
let changePasswordModal let updatePasswordModal
let apiKeyModal
let mobileMenuVisible = false let mobileMenuVisible = false
let activeTab = "Apps" let activeTab = "Apps"
@ -201,19 +206,33 @@
/> />
<Icon size="XL" name="ChevronDown" /> <Icon size="XL" name="ChevronDown" />
</div> </div>
<MenuItem
icon="Moon"
on:click={() => themeModal.show()}
dataCy="theme"
>
Theme
</MenuItem>
<MenuItem <MenuItem
icon="UserEdit" icon="UserEdit"
on:click={() => userInfoModal.show()} on:click={() => userInfoModal.show()}
dataCy={"user-info"} dataCy="user-info"
> >
Update user information My profile
</MenuItem> </MenuItem>
<MenuItem <MenuItem
icon="LockClosed" icon="LockClosed"
on:click={() => changePasswordModal.show()} on:click={() => updatePasswordModal.show()}
> >
Update password Update password
</MenuItem> </MenuItem>
<MenuItem
icon="Key"
on:click={() => apiKeyModal.show()}
dataCy="api-key"
>
View API key
</MenuItem>
<MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}> <MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
Close developer mode Close developer mode
</MenuItem> </MenuItem>
@ -228,12 +247,18 @@
<slot /> <slot />
</div> </div>
</div> </div>
<Modal bind:this={userInfoModal}> <Modal bind:this={themeModal}>
<UpdateUserInfoModal /> <ThemeModal />
</Modal> </Modal>
<Modal bind:this={changePasswordModal}> <Modal bind:this={userInfoModal}>
<ProfileModal />
</Modal>
<Modal bind:this={updatePasswordModal}>
<ChangePasswordModal /> <ChangePasswordModal />
</Modal> </Modal>
<Modal bind:this={apiKeyModal}>
<APIKeyModal />
</Modal>
{/if} {/if}
<style> <style>

10
packages/builder/src/pages/builder/portal/settings/_layout.svelte
View File

@ -10,11 +10,6 @@
<Content> <Content>
<div slot="side-nav"> <div slot="side-nav">
<SideNav> <SideNav>
<SideNavItem
text="API Key"
url={$url("./api")}
active={$isActive("./api")}
/>
<SideNavItem <SideNavItem
text="Auth" text="Auth"
url={$url("./auth")} url={$url("./auth")}
@ -35,11 +30,6 @@
url={$url("./version")} url={$url("./version")}
active={$isActive("./version")} active={$isActive("./version")}
/> />
<SideNavItem
text="Theme"
url={$url("./theme")}
active={$isActive("./theme")}
/>
</SideNav> </SideNav>
</div> </div>
<slot /> <slot />

64
packages/builder/src/pages/builder/portal/settings/api.svelte
View File

@ -1,64 +0,0 @@
<script>
import {
Layout,
Heading,
Body,
Divider,
Button,
Label,
notifications,
} from "@budibase/bbui"
import { auth } from "stores/portal"
import { onMount } from "svelte"
import CopyInput from "components/common/inputs/CopyInput.svelte"
let apiKey = null
async function generateAPIKey() {
try {
apiKey = await auth.generateAPIKey()
notifications.success("New API key generated")
} catch (err) {
notifications.error("Unable to generate new API key")
}
// need to return false to keep modal open
return false
}
onMount(async () => {
try {
apiKey = await auth.fetchAPIKey()
} catch (err) {
notifications.error("Unable to fetch API key")
}
})
</script>
<Layout noPadding>
<Layout gap="XS" noPadding>
<Heading size="M">API Key</Heading>
<Body>Your API key to access the Budibase public API</Body>
</Layout>
<Divider />
<div class="fields">
<div class="field">
<Label size="L">API key</Label>
<CopyInput bind:value={apiKey} />
</div>
</div>
<div>
<Button secondary on:click={generateAPIKey}>Regenerate key</Button>
</div>
</Layout>
<style>
.fields {
display: grid;
grid-gap: var(--spacing-m);
}
.field {
display: grid;
grid-template-columns: 120px 1fr;
align-items: center;
}
</style>

2
packages/builder/src/pages/builder/portal/settings/index.svelte
View File

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

37
packages/builder/src/pages/builder/portal/settings/theme.svelte
View File

@ -1,37 +0,0 @@
<script>
import { Layout, Heading, Body, Divider, Label, Select } from "@budibase/bbui"
import { themeStore } from "builderStore"
import { Constants } from "@budibase/frontend-core"
</script>
<Layout noPadding>
<Layout gap="XS" noPadding>
<Heading size="M">Theme</Heading>
<Body>Customize how Budibase looks and feels</Body>
</Layout>
<Divider />
<div class="fields">
<div class="field">
<Label size="L">Theme</Label>
<Select
options={Constants.Themes}
bind:value={$themeStore.theme}
placeholder={null}
getOptionLabel={x => x.name}
getOptionValue={x => x.class}
/>
</div>
</div>
</Layout>
<style>
.fields {
display: grid;
grid-gap: var(--spacing-m);
}
.field {
display: grid;
grid-template-columns: 120px 1fr;
align-items: center;
}
</style>