1
0
Fork 0
mirror of synced 2024-07-15 19:25:55 +12:00

adds separate Basic Onboarding modal

This commit is contained in:
Keviin Åberg Kultalahti 2021-05-07 13:58:14 +02:00
parent d4d8506fd5
commit cb78e68d99
3 changed files with 48 additions and 6 deletions

View file

@ -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>

View file

@ -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 users 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>

View file

@ -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 {