Merge pull request #4639 from mslourens/merge_create_user_modals
Merge both create user modals for easy switch between the two
This commit is contained in:
Andrew Kingston
GitHub
commit
919823c013
|
|
@ -2,22 +2,47 @@
|
|||
import {
|
||||
Body,
|
||||
Input,
|
||||
Select,
|
||||
Label,
|
||||
ModalContent,
|
||||
notifications,
|
||||
Select,
|
||||
Toggle,
|
||||
Label,
|
||||
} from "@budibase/bbui"
|
||||
import { createValidationStore, emailValidator } from "helpers/validation"
|
||||
import { users } from "stores/portal"
|
||||
|
||||
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 {
|
||||
|
|
@ -30,7 +55,7 @@
|
|||
</script>
|
||||
|
||||
<ModalContent
|
||||
onConfirm={createUserFlow}
|
||||
onConfirm={addUser}
|
||||
size="M"
|
||||
title="Add new user"
|
||||
confirmText="Add user"
|
||||
|
|
@ -47,17 +72,22 @@
|
|||
<Select
|
||||
placeholder={null}
|
||||
bind:value={selected}
|
||||
on:change
|
||||
{options}
|
||||
label="Add new user via:"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="email"
|
||||
label="Email"
|
||||
bind:value={$email}
|
||||
error={$touched && $error}
|
||||
placeholder="john@doe.com"
|
||||
label="Email"
|
||||
/>
|
||||
|
||||
{#if basic}
|
||||
<Input disabled label="Password" value={password} />
|
||||
{/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).slice(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.message)
|
||||
}
|
||||
}
|
||||
</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="Email"
|
||||
bind:value={$email}
|
||||
error={$touched && $error}
|
||||
/>
|
||||
<Input readonly 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 {
|
||||
|
|
@ -93,9 +85,8 @@
|
|||
</Layout>
|
||||
|
||||
<Modal bind:this={createUserModal}>
|
||||
<AddUserModal on:change={openBasicOnboardingModal} />
|
||||
<AddUserModal />
|
||||
</Modal>
|
||||
<Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal>
|
||||
|
||||
<style>
|
||||
.field {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue