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>
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"]
let selected = options[0]
@ -17,6 +23,12 @@
automated email onboarding flow. Otherwise, use our basic onboarding process
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" />
</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,
Layout,
Modal,
ModalContent,
} from "@budibase/bbui"
import AddUserModal from "./_components/AddUserModal.svelte"
import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte"
import { users } from "stores/portal"
users.init()
@ -27,7 +27,13 @@
let search
$: filteredUsers = $users.filter(user => user.email.includes(search || ""))
export let modal
let userModal
let basicOnboardingModal
function openBasicOnboardingModal() {
userModal.hide()
basicOnboardingModal.show()
}
</script>
<Layout>
@ -49,8 +55,8 @@
</div>
<div class="buttons">
<ButtonGroup>
<Button tooltip="Coming soon." disabled secondary>Import users</Button>
<Button overBackground on:click={modal.show}>Add user</Button>
<Button disabled secondary>Import users</Button>
<Button overBackground on:click={userModal.show}>Add user</Button>
</ButtonGroup>
</div>
<Table
@ -63,7 +69,10 @@
</div>
</Layout>
<Modal bind:this={modal}><AddUserModal /></Modal>
<Modal bind:this={userModal}
><AddUserModal on:basic={openBasicOnboardingModal} /></Modal
>
<Modal bind:this={basicOnboardingModal}><BasicOnboardingModal /></Modal>
<style>
.users {