|
|
|
@ -6,15 +6,17 @@ |
|
|
|
Multiselect, |
|
|
|
InputDropdown, |
|
|
|
Layout, |
|
|
|
Icon, |
|
|
|
} from "@budibase/bbui" |
|
|
|
import { groups, auth } from "stores/portal" |
|
|
|
import { Constants } from "@budibase/frontend-core" |
|
|
|
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 |
|
|
|
) |
|
|
|
@ -27,6 +29,10 @@ |
|
|
|
forceResetPassword: true, |
|
|
|
}, |
|
|
|
] |
|
|
|
|
|
|
|
function removeInput(idx) { |
|
|
|
userData = userData.filter((e, i) => i !== idx) |
|
|
|
} |
|
|
|
function addNewInput() { |
|
|
|
userData = [ |
|
|
|
...userData, |
|
|
|
@ -38,6 +44,18 @@ |
|
|
|
}, |
|
|
|
] |
|
|
|
} |
|
|
|
|
|
|
|
function validateInput(email, index) { |
|
|
|
if (email) { |
|
|
|
if (emailValidator(email) === true) { |
|
|
|
errors[index] = true |
|
|
|
return null |
|
|
|
} else { |
|
|
|
errors[index] = false |
|
|
|
return emailValidator(email) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<ModalContent |
|
|
|
@ -49,18 +67,40 @@ |
|
|
|
confirmDisabled={disabled} |
|
|
|
cancelText="Cancel" |
|
|
|
showCloseIcon={false} |
|
|
|
disabled={errors.some(x => x === false) || |
|
|
|
userData.some(x => x.email === "" || x.email === null)} |
|
|
|
> |
|
|
|
<Layout noPadding gap="XS"> |
|
|
|
<Label>Email Address</Label> |
|
|
|
|
|
|
|
{#each userData as input, index} |
|
|
|
<InputDropdown |
|
|
|
inputType="email" |
|
|
|
bind:inputValue={input.email} |
|
|
|
bind:dropdownValue={input.role} |
|
|
|
options={Constants.BbRoles} |
|
|
|
error={input.error} |
|
|
|
/> |
|
|
|
<div |
|
|
|
style="display: flex; |
|
|
|
align-items: center; |
|
|
|
flex-direction: row;" |
|
|
|
> |
|
|
|
<div style="width: 90%"> |
|
|
|
<InputDropdown |
|
|
|
inputType="email" |
|
|
|
bind:inputValue={input.email} |
|
|
|
bind:dropdownValue={input.role} |
|
|
|
options={Constants.BbRoles} |
|
|
|
error={validateInput(input.email, index)} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class:fix-height={errors.length && !errors[index]} |
|
|
|
class:normal-height={errors.length && !!errors[index]} |
|
|
|
style="width: 10% " |
|
|
|
> |
|
|
|
<Icon |
|
|
|
name="Close" |
|
|
|
hoverable |
|
|
|
size="S" |
|
|
|
on:click={() => removeInput(index)} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{/each} |
|
|
|
<div> |
|
|
|
<ActionButton on:click={addNewInput} icon="Add">Add email</ActionButton> |
|
|
|
@ -80,6 +120,14 @@ |
|
|
|
</ModalContent> |
|
|
|
|
|
|
|
<style> |
|
|
|
.fix-height { |
|
|
|
margin-bottom: 5%; |
|
|
|
} |
|
|
|
|
|
|
|
.normal-height { |
|
|
|
margin-bottom: 0%; |
|
|
|
} |
|
|
|
|
|
|
|
:global(.spectrum-Picker) { |
|
|
|
border-top-left-radius: 0px; |
|
|
|
} |
|
|
|
|
Peter Clement
4 years ago
GitHub