Improve add new user modal so that validation doesn't fire immediately
This commit is contained in:
parent
3087fe6505
commit
ab4e6584c2
1 changed files with 32 additions and 28 deletions
|
@ -13,14 +13,14 @@
|
||||||
import { emailValidator } from "helpers/validation"
|
import { emailValidator } from "helpers/validation"
|
||||||
|
|
||||||
export let showOnboardingTypeModal
|
export let showOnboardingTypeModal
|
||||||
|
|
||||||
const password = Math.random().toString(36).substring(2, 22)
|
const password = Math.random().toString(36).substring(2, 22)
|
||||||
let disabled
|
let disabled
|
||||||
let userGroups = []
|
let userGroups = []
|
||||||
$: errors = []
|
|
||||||
$: hasGroupsLicense = $auth.user?.license.features.includes(
|
$: hasGroupsLicense = $auth.user?.license.features.includes(
|
||||||
Constants.Features.USER_GROUPS
|
Constants.Features.USER_GROUPS
|
||||||
)
|
)
|
||||||
|
|
||||||
$: userData = [
|
$: userData = [
|
||||||
{
|
{
|
||||||
email: "",
|
email: "",
|
||||||
|
@ -29,6 +29,7 @@
|
||||||
forceResetPassword: true,
|
forceResetPassword: true,
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
$: hasError = userData.find(x => x.error != null)
|
||||||
|
|
||||||
function removeInput(idx) {
|
function removeInput(idx) {
|
||||||
userData = userData.filter((e, i) => i !== idx)
|
userData = userData.filter((e, i) => i !== idx)
|
||||||
|
@ -41,38 +42,45 @@
|
||||||
role: "appUser",
|
role: "appUser",
|
||||||
password: Math.random().toString(36).substring(2, 22),
|
password: Math.random().toString(36).substring(2, 22),
|
||||||
forceResetPassword: true,
|
forceResetPassword: true,
|
||||||
|
error: null,
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
function validateInput(email, index) {
|
function validateInput(email, index) {
|
||||||
if (email) {
|
if (email) {
|
||||||
if (emailValidator(email) === true) {
|
const res = emailValidator(email)
|
||||||
errors[index] = true
|
userData[index].error = res === true ? null : res
|
||||||
return null
|
} else {
|
||||||
} else {
|
userData[index].error = "Please enter an email address"
|
||||||
errors[index] = false
|
|
||||||
return emailValidator(email)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
return userData[index].error == null
|
||||||
|
}
|
||||||
|
|
||||||
|
const onConfirm = () => {
|
||||||
|
let valid = true
|
||||||
|
userData.forEach((input, index) => {
|
||||||
|
valid = validateInput(input.email, index) && valid
|
||||||
|
})
|
||||||
|
if (!valid) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
showOnboardingTypeModal({ users: userData, groups: userGroups })
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ModalContent
|
<ModalContent
|
||||||
onConfirm={async () =>
|
{onConfirm}
|
||||||
showOnboardingTypeModal({ users: userData, groups: userGroups })}
|
|
||||||
size="M"
|
size="M"
|
||||||
title="Add new user"
|
title="Add new user"
|
||||||
confirmText="Add user"
|
confirmText="Add user"
|
||||||
confirmDisabled={disabled}
|
confirmDisabled={disabled}
|
||||||
cancelText="Cancel"
|
cancelText="Cancel"
|
||||||
showCloseIcon={false}
|
showCloseIcon={false}
|
||||||
disabled={errors.some(x => x === false) ||
|
disabled={hasError || !userData.length}
|
||||||
userData.some(x => x.email === "" || x.email === null)}
|
|
||||||
>
|
>
|
||||||
<Layout noPadding gap="XS">
|
<Layout noPadding gap="XS">
|
||||||
<Label>Email Address</Label>
|
<Label>Email address</Label>
|
||||||
|
|
||||||
{#each userData as input, index}
|
{#each userData as input, index}
|
||||||
<div
|
<div
|
||||||
style="display: flex;
|
style="display: flex;
|
||||||
|
@ -85,14 +93,11 @@
|
||||||
bind:inputValue={input.email}
|
bind:inputValue={input.email}
|
||||||
bind:dropdownValue={input.role}
|
bind:dropdownValue={input.role}
|
||||||
options={Constants.BbRoles}
|
options={Constants.BbRoles}
|
||||||
error={validateInput(input.email, index)}
|
error={input.error}
|
||||||
|
on:blur={() => validateInput(input.email, index)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="icon">
|
||||||
class:fix-height={errors.length && !errors[index]}
|
|
||||||
class:normal-height={errors.length && !!errors[index]}
|
|
||||||
style="width: 10% "
|
|
||||||
>
|
|
||||||
<Icon
|
<Icon
|
||||||
name="Close"
|
name="Close"
|
||||||
hoverable
|
hoverable
|
||||||
|
@ -110,8 +115,8 @@
|
||||||
{#if hasGroupsLicense}
|
{#if hasGroupsLicense}
|
||||||
<Multiselect
|
<Multiselect
|
||||||
bind:value={userGroups}
|
bind:value={userGroups}
|
||||||
placeholder="Select User Groups"
|
placeholder="No groups"
|
||||||
label="User Groups"
|
label="Groups"
|
||||||
options={$groups}
|
options={$groups}
|
||||||
getOptionLabel={option => option.name}
|
getOptionLabel={option => option.name}
|
||||||
getOptionValue={option => option._id}
|
getOptionValue={option => option._id}
|
||||||
|
@ -120,10 +125,9 @@
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.fix-height {
|
.icon {
|
||||||
margin-bottom: 5%;
|
width: 10%;
|
||||||
}
|
align-self: flex-start;
|
||||||
.normal-height {
|
margin-top: 8px;
|
||||||
margin-bottom: 0%;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue