Merge both create user modals for easy switch between the two
This commit is contained in:
parent
5862fc2322
commit
aae52ae434
|
@ -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}
|
||||||
|
|
|
@ -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,17 +74,27 @@
|
||||||
<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:"
|
||||||
/>
|
/>
|
||||||
<Input
|
|
||||||
type="email"
|
{#if basic}
|
||||||
bind:value={$email}
|
<Input
|
||||||
error={$touched && $error}
|
type="email"
|
||||||
placeholder="john@doe.com"
|
label="Email"
|
||||||
label="Email"
|
bind:value={$email}
|
||||||
/>
|
error={$touched && $error}
|
||||||
|
/>
|
||||||
|
<Input disabled label="Password" value={password} />
|
||||||
|
{:else}
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
bind:value={$email}
|
||||||
|
error={$touched && $error}
|
||||||
|
placeholder="john@doe.com"
|
||||||
|
label="Email"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
<div>
|
<div>
|
||||||
<div class="toggle">
|
<div class="toggle">
|
||||||
<Label size="L">Development access</Label>
|
<Label size="L">Development access</Label>
|
||||||
|
|
|
@ -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 user’s 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>
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue