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