adds separate Basic Onboarding modal
This commit is contained in:
parent
d4d8506fd5
commit
cb78e68d99
3 changed files with 48 additions and 6 deletions
|
@ -1,5 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
import { Body, Input, Select, ModalContent } from "@budibase/bbui"
|
import { Body, Input, Select, ModalContent } from "@budibase/bbui"
|
||||||
|
import { createEventDispatcher } from "svelte"
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
|
const onChange = ({ detail }) => {
|
||||||
|
if (detail === options[1]) dispatch("basic")
|
||||||
|
}
|
||||||
|
|
||||||
const options = ["Email onboarding", "Basic onboarding"]
|
const options = ["Email onboarding", "Basic onboarding"]
|
||||||
let selected = options[0]
|
let selected = options[0]
|
||||||
|
@ -17,6 +23,12 @@
|
||||||
automated email onboarding flow. Otherwise, use our basic onboarding process
|
automated email onboarding flow. Otherwise, use our basic onboarding process
|
||||||
with autogenerated passwords.</Body
|
with autogenerated passwords.</Body
|
||||||
>
|
>
|
||||||
<Select bind:value={selected} label="Add new user via:" {options} />
|
<Select
|
||||||
|
placeholder=""
|
||||||
|
bind:value={selected}
|
||||||
|
on:change={onChange}
|
||||||
|
{options}
|
||||||
|
label="Add new user via:"
|
||||||
|
/>
|
||||||
<Input label="Email" />
|
<Input label="Email" />
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
<script>
|
||||||
|
import { ModalContent, Body, Input, ActionButton } from "@budibase/bbui"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ModalContent
|
||||||
|
size="M"
|
||||||
|
title="Basic user onboarding"
|
||||||
|
confirmText="Continue"
|
||||||
|
cancelText="Cancel"
|
||||||
|
showCloseIcon={false}
|
||||||
|
>
|
||||||
|
<Body noPadding
|
||||||
|
>Below you will find the user’s username and password. The password will not
|
||||||
|
be accessible from this point. Please download the credentials.</Body
|
||||||
|
>
|
||||||
|
<Input disabled label="Username" value="joebudibase" />
|
||||||
|
<Input disabled label="Password" value="kjhfweiufqohy87t23" />
|
||||||
|
<div class="download">
|
||||||
|
<ActionButton icon="Download">Download user credentials</ActionButton>
|
||||||
|
</div>
|
||||||
|
</ModalContent>
|
|
@ -10,9 +10,9 @@
|
||||||
Label,
|
Label,
|
||||||
Layout,
|
Layout,
|
||||||
Modal,
|
Modal,
|
||||||
ModalContent,
|
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import AddUserModal from "./_components/AddUserModal.svelte"
|
import AddUserModal from "./_components/AddUserModal.svelte"
|
||||||
|
import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte"
|
||||||
import { users } from "stores/portal"
|
import { users } from "stores/portal"
|
||||||
|
|
||||||
users.init()
|
users.init()
|
||||||
|
@ -27,7 +27,13 @@
|
||||||
let search
|
let search
|
||||||
$: filteredUsers = $users.filter(user => user.email.includes(search || ""))
|
$: filteredUsers = $users.filter(user => user.email.includes(search || ""))
|
||||||
|
|
||||||
export let modal
|
let userModal
|
||||||
|
let basicOnboardingModal
|
||||||
|
|
||||||
|
function openBasicOnboardingModal() {
|
||||||
|
userModal.hide()
|
||||||
|
basicOnboardingModal.show()
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
|
@ -49,8 +55,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<ButtonGroup>
|
<ButtonGroup>
|
||||||
<Button tooltip="Coming soon." disabled secondary>Import users</Button>
|
<Button disabled secondary>Import users</Button>
|
||||||
<Button overBackground on:click={modal.show}>Add user</Button>
|
<Button overBackground on:click={userModal.show}>Add user</Button>
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</div>
|
</div>
|
||||||
<Table
|
<Table
|
||||||
|
@ -63,7 +69,10 @@
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<Modal bind:this={modal}><AddUserModal /></Modal>
|
<Modal bind:this={userModal}
|
||||||
|
><AddUserModal on:basic={openBasicOnboardingModal} /></Modal
|
||||||
|
>
|
||||||
|
<Modal bind:this={basicOnboardingModal}><BasicOnboardingModal /></Modal>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.users {
|
.users {
|
||||||
|
|
Loading…
Reference in a new issue