Merge both create user modals for easy switch between the two

This commit is contained in:
Maurits Lourens 2022-02-22 17:17:07 +01:00
parent 5862fc2322
commit aae52ae434
4 changed files with 51 additions and 99 deletions

View File

@ -90,7 +90,7 @@
</script> </script>
<DrawerContent> <DrawerContent>
<div className="container"> <div class="container">
<Layout noPadding> <Layout noPadding>
<Body size="S"> <Body size="S">
{#if !filters?.length} {#if !filters?.length}

View File

@ -12,13 +12,38 @@
import { users } from "stores/portal" import { users } from "stores/portal"
import analytics, { Events } from "analytics" import analytics, { Events } from "analytics"
export let disabled const password = Math.random().toString(36).substring(2, 22)
const options = ["Email onboarding", "Basic onboarding"] const options = ["Email onboarding", "Basic onboarding"]
let selected = options[0]
let builder, admin
const [email, error, touched] = createValidationStore("", emailValidator) const [email, error, touched] = createValidationStore("", emailValidator)
let disabled
let builder
let admin
let selected = "Email onboarding"
$: basic = selected === "Basic onboarding"
function addUser() {
if (basic) {
createUser()
} else {
createUserFlow()
}
}
async function createUser() {
try {
await users.create({
email: $email,
password,
builder,
admin,
forceResetPassword: true,
})
notifications.success("Successfully created user")
} catch (error) {
notifications.error("Error creating user")
}
}
async function createUserFlow() { async function createUserFlow() {
try { try {
@ -32,7 +57,7 @@
</script> </script>
<ModalContent <ModalContent
onConfirm={createUserFlow} onConfirm={addUser}
size="M" size="M"
title="Add new user" title="Add new user"
confirmText="Add user" confirmText="Add user"
@ -49,10 +74,19 @@
<Select <Select
placeholder={null} placeholder={null}
bind:value={selected} bind:value={selected}
on:change
{options} {options}
label="Add new user via:" label="Add new user via:"
/> />
{#if basic}
<Input
type="email"
label="Email"
bind:value={$email}
error={$touched && $error}
/>
<Input disabled label="Password" value={password} />
{:else}
<Input <Input
type="email" type="email"
bind:value={$email} bind:value={$email}
@ -60,6 +94,7 @@
placeholder="john@doe.com" placeholder="john@doe.com"
label="Email" label="Email"
/> />
{/if}
<div> <div>
<div class="toggle"> <div class="toggle">
<Label size="L">Development access</Label> <Label size="L">Development access</Label>

View File

@ -1,74 +0,0 @@
<script>
import {
ModalContent,
Body,
Input,
notifications,
Toggle,
Label,
} from "@budibase/bbui"
import { createValidationStore, emailValidator } from "helpers/validation"
import { users } from "stores/portal"
const [email, error, touched] = createValidationStore("", emailValidator)
const password = Math.random().toString(36).substr(2, 20)
let builder = false,
admin = false
async function createUser() {
try {
await users.create({
email: $email,
password,
builder,
admin,
forceResetPassword: true,
})
notifications.success("Successfully created user")
} catch (error) {
notifications.error("Error creating user")
}
}
</script>
<ModalContent
onConfirm={createUser}
size="M"
title="Basic user onboarding"
confirmText="Continue"
cancelText="Cancel"
disabled={$error}
error={$touched && $error}
showCloseIcon={false}
>
<Body size="S">
Below you will find the users username and password. The password will not
be accessible from this point. Please save the credentials.
</Body>
<Input
type="email"
label="Username"
bind:value={$email}
error={$touched && $error}
/>
<Input disabled label="Password" value={password} />
<div>
<div class="toggle">
<Label size="L">Development access</Label>
<Toggle text="" bind:value={builder} />
</div>
<div class="toggle">
<Label size="L">Administration access</Label>
<Toggle text="" bind:value={admin} />
</div>
</div>
</ModalContent>
<style>
.toggle {
display: grid;
grid-template-columns: 78% 1fr;
align-items: center;
width: 50%;
}
</style>

View File

@ -15,7 +15,6 @@
} from "@budibase/bbui" } from "@budibase/bbui"
import TagsRenderer from "./_components/TagsTableRenderer.svelte" import TagsRenderer from "./_components/TagsTableRenderer.svelte"
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"
import { onMount } from "svelte" import { onMount } from "svelte"
@ -30,7 +29,6 @@
} }
let search let search
let email
$: filteredUsers = $users $: filteredUsers = $users
.filter(user => user.email.includes(search || "")) .filter(user => user.email.includes(search || ""))
.map(user => ({ .map(user => ({
@ -41,12 +39,6 @@
})) }))
let createUserModal let createUserModal
let basicOnboardingModal
function openBasicOnboardingModal() {
createUserModal.hide()
basicOnboardingModal.show()
}
onMount(async () => { onMount(async () => {
try { try {
@ -91,9 +83,8 @@
</Layout> </Layout>
<Modal bind:this={createUserModal}> <Modal bind:this={createUserModal}>
<AddUserModal on:change={openBasicOnboardingModal} /> <AddUserModal />
</Modal> </Modal>
<Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal>
<style> <style>
.field { .field {