Move theme and API key into user profile dropdown instead of settings
This commit is contained in:
Andrew Kingston
parent
183bf9a84a
commit
85f4648f6f
9 changed files with 93 additions and 127 deletions
40
packages/builder/src/components/settings/APIKeyModal.svelte
Normal file
40
packages/builder/src/components/settings/APIKeyModal.svelte
Normal 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>
|
||||
|
|
@ -18,11 +18,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
title="Update user information"
|
||||
confirmText="Update information"
|
||||
onConfirm={updateInfo}
|
||||
>
|
||||
<ModalContent title="My profile" confirmText="Save" onConfirm={updateInfo}>
|
||||
<Body size="S">
|
||||
Personalise the platform by adding your first name and last name.
|
||||
</Body>
|
||||
16
packages/builder/src/components/settings/ThemeModal.svelte
Normal file
16
packages/builder/src/components/settings/ThemeModal.svelte
Normal 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>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
import { goto } from "@roxi/routify"
|
||||
import { AppStatus } from "constants"
|
||||
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 { processStringSync } from "@budibase/string-templates"
|
||||
import Spaceman from "assets/bb-space-man.svg"
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
</Page>
|
||||
</div>
|
||||
<Modal bind:this={userInfoModal}>
|
||||
<UpdateUserInfoModal />
|
||||
<ProfileModal />
|
||||
</Modal>
|
||||
<Modal bind:this={changePasswordModal}>
|
||||
<ChangePasswordModal />
|
||||
|
|
|
|||
|
|
@ -13,15 +13,20 @@
|
|||
} from "@budibase/bbui"
|
||||
import { organisation, auth, admin as adminStore } from "stores/portal"
|
||||
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 ThemeModal from "components/settings/ThemeModal.svelte"
|
||||
import APIKeyModal from "components/settings/APIKeyModal.svelte"
|
||||
import Logo from "assets/bb-emblem.svg"
|
||||
import ConfigChecklist from "components/common/ConfigChecklist.svelte"
|
||||
// import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
|
||||
|
||||
let loaded = false
|
||||
let themeModal
|
||||
let profileModal
|
||||
let userInfoModal
|
||||
let changePasswordModal
|
||||
let updatePasswordModal
|
||||
let apiKeyModal
|
||||
let mobileMenuVisible = false
|
||||
let activeTab = "Apps"
|
||||
|
||||
|
|
@ -201,19 +206,33 @@
|
|||
/>
|
||||
<Icon size="XL" name="ChevronDown" />
|
||||
</div>
|
||||
<MenuItem
|
||||
icon="Moon"
|
||||
on:click={() => themeModal.show()}
|
||||
dataCy="theme"
|
||||
>
|
||||
Theme
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon="UserEdit"
|
||||
on:click={() => userInfoModal.show()}
|
||||
dataCy={"user-info"}
|
||||
dataCy="user-info"
|
||||
>
|
||||
Update user information
|
||||
My profile
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon="LockClosed"
|
||||
on:click={() => changePasswordModal.show()}
|
||||
on:click={() => updatePasswordModal.show()}
|
||||
>
|
||||
Update password
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon="Key"
|
||||
on:click={() => apiKeyModal.show()}
|
||||
dataCy="api-key"
|
||||
>
|
||||
View API key
|
||||
</MenuItem>
|
||||
<MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
|
||||
Close developer mode
|
||||
</MenuItem>
|
||||
|
|
@ -228,12 +247,18 @@
|
|||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<Modal bind:this={userInfoModal}>
|
||||
<UpdateUserInfoModal />
|
||||
<Modal bind:this={themeModal}>
|
||||
<ThemeModal />
|
||||
</Modal>
|
||||
<Modal bind:this={changePasswordModal}>
|
||||
<Modal bind:this={userInfoModal}>
|
||||
<ProfileModal />
|
||||
</Modal>
|
||||
<Modal bind:this={updatePasswordModal}>
|
||||
<ChangePasswordModal />
|
||||
</Modal>
|
||||
<Modal bind:this={apiKeyModal}>
|
||||
<APIKeyModal />
|
||||
</Modal>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,6 @@
|
|||
<Content>
|
||||
<div slot="side-nav">
|
||||
<SideNav>
|
||||
<SideNavItem
|
||||
text="API Key"
|
||||
url={$url("./api")}
|
||||
active={$isActive("./api")}
|
||||
/>
|
||||
<SideNavItem
|
||||
text="Auth"
|
||||
url={$url("./auth")}
|
||||
|
|
@ -35,11 +30,6 @@
|
|||
url={$url("./version")}
|
||||
active={$isActive("./version")}
|
||||
/>
|
||||
<SideNavItem
|
||||
text="Theme"
|
||||
url={$url("./theme")}
|
||||
active={$isActive("./theme")}
|
||||
/>
|
||||
</SideNav>
|
||||
</div>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<script>
|
||||
import { redirect } from "@roxi/routify"
|
||||
$redirect("./api")
|
||||
$redirect("./auth")
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in a new issue