Merge both create user modals for easy switch between the two
This commit is contained in:
Maurits Lourens
parent
5862fc2322
commit
aae52ae434
|
|
@ -90,7 +90,7 @@
|
|||
</script>
|
||||
|
||||
<DrawerContent>
|
||||
<div className="container">
|
||||
<div class="container">
|
||||
<Layout noPadding>
|
||||
<Body size="S">
|
||||
{#if !filters?.length}
|
||||
|
|
|
|||
|
|
@ -12,13 +12,38 @@
|
|||
import { users } from "stores/portal"
|
||||
import analytics, { Events } from "analytics"
|
||||
|
||||
export let disabled
|
||||
|
||||
const password = Math.random().toString(36).substring(2, 22)
|
||||
const options = ["Email onboarding", "Basic onboarding"]
|
||||
let selected = options[0]
|
||||
let builder, admin
|
||||
|
||||
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() {
|
||||
try {
|
||||
|
|
@ -32,7 +57,7 @@
|
|||
</script>
|
||||
|
||||
<ModalContent
|
||||
onConfirm={createUserFlow}
|
||||
onConfirm={addUser}
|
||||
size="M"
|
||||
title="Add new user"
|
||||
confirmText="Add user"
|
||||
|
|
@ -49,17 +74,27 @@
|
|||
<Select
|
||||
placeholder={null}
|
||||
bind:value={selected}
|
||||
on:change
|
||||
{options}
|
||||
label="Add new user via:"
|
||||
/>
|
||||
<Input
|
||||
type="email"
|
||||
bind:value={$email}
|
||||
error={$touched && $error}
|
||||
placeholder="john@doe.com"
|
||||
label="Email"
|
||||
/>
|
||||
|
||||
{#if basic}
|
||||
<Input
|
||||
type="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 class="toggle">
|
||||
<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"
|
||||
import TagsRenderer from "./_components/TagsTableRenderer.svelte"
|
||||
import AddUserModal from "./_components/AddUserModal.svelte"
|
||||
import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte"
|
||||
import { users } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
|
|
@ -30,7 +29,6 @@
|
|||
}
|
||||
|
||||
let search
|
||||
let email
|
||||
$: filteredUsers = $users
|
||||
.filter(user => user.email.includes(search || ""))
|
||||
.map(user => ({
|
||||
|
|
@ -41,12 +39,6 @@
|
|||
}))
|
||||
|
||||
let createUserModal
|
||||
let basicOnboardingModal
|
||||
|
||||
function openBasicOnboardingModal() {
|
||||
createUserModal.hide()
|
||||
basicOnboardingModal.show()
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
|
|
@ -91,9 +83,8 @@
|
|||
</Layout>
|
||||
|
||||
<Modal bind:this={createUserModal}>
|
||||
<AddUserModal on:change={openBasicOnboardingModal} />
|
||||
<AddUserModal />
|
||||
</Modal>
|
||||
<Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal>
|
||||
|
||||
<style>
|
||||
.field {
|
||||
|
|
|
|||
Loading…
Reference in a new issue