correct error and touched states for buttons
This commit is contained in:
parent
ac510e2671
commit
651009db08
2 changed files with 41 additions and 9 deletions
|
@ -1,5 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
import { Body, Input, Select, ModalContent } from "@budibase/bbui"
|
import {
|
||||||
|
Body,
|
||||||
|
Input,
|
||||||
|
Select,
|
||||||
|
ModalContent,
|
||||||
|
notifications,
|
||||||
|
} from "@budibase/bbui"
|
||||||
import { createValidationStore, emailValidator } from "helpers/validation"
|
import { createValidationStore, emailValidator } from "helpers/validation"
|
||||||
import { users } from "stores/portal"
|
import { users } from "stores/portal"
|
||||||
|
|
||||||
|
@ -24,7 +30,7 @@
|
||||||
confirmText="Add user"
|
confirmText="Add user"
|
||||||
confirmDisabled={disabled}
|
confirmDisabled={disabled}
|
||||||
cancelText="Cancel"
|
cancelText="Cancel"
|
||||||
disabled={!$touched && !$error}
|
disabled={$error}
|
||||||
showCloseIcon={false}
|
showCloseIcon={false}
|
||||||
>
|
>
|
||||||
<Body noPadding
|
<Body noPadding
|
||||||
|
|
|
@ -1,7 +1,29 @@
|
||||||
<script>
|
<script>
|
||||||
import { ModalContent, Body, Input, ActionButton } from "@budibase/bbui"
|
import { ModalContent, Body, Input } from "@budibase/bbui"
|
||||||
|
import { createValidationStore, emailValidator } from "helpers/validation"
|
||||||
|
|
||||||
export let email
|
const [email, error, touched] = createValidationStore("", emailValidator)
|
||||||
|
|
||||||
|
function generatePassword() {
|
||||||
|
return Array(30)
|
||||||
|
.fill(
|
||||||
|
"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$"
|
||||||
|
)
|
||||||
|
.map(
|
||||||
|
x =>
|
||||||
|
x[
|
||||||
|
Math.floor(
|
||||||
|
(crypto.getRandomValues(new Uint32Array(1))[0] /
|
||||||
|
(0xffffffff + 1)) *
|
||||||
|
x.length
|
||||||
|
)
|
||||||
|
]
|
||||||
|
)
|
||||||
|
.join("")
|
||||||
|
}
|
||||||
|
|
||||||
|
$: console.log("Error: ", $error)
|
||||||
|
$: console.log("Touched: ", $touched)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ModalContent
|
<ModalContent
|
||||||
|
@ -9,15 +31,19 @@
|
||||||
title="Basic user onboarding"
|
title="Basic user onboarding"
|
||||||
confirmText="Continue"
|
confirmText="Continue"
|
||||||
cancelText="Cancel"
|
cancelText="Cancel"
|
||||||
|
disabled={$error}
|
||||||
|
error={$touched && $error}
|
||||||
showCloseIcon={false}
|
showCloseIcon={false}
|
||||||
>
|
>
|
||||||
<Body noPadding
|
<Body noPadding
|
||||||
>Below you will find the user’s username and password. The password will not
|
>Below you will find the user’s username and password. The password will not
|
||||||
be accessible from this point. Please download the credentials.</Body
|
be accessible from this point. Please download the credentials.</Body
|
||||||
>
|
>
|
||||||
<Input type="email" disabled label="Username" value={email} />
|
<Input
|
||||||
<Input disabled label="Password" value="asduiayewkjh3243i5oucy" />
|
type="email"
|
||||||
<div class="download">
|
label="Username"
|
||||||
<ActionButton icon="Download">Download user credentials</ActionButton>
|
bind:value={$email}
|
||||||
</div>
|
error={$touched && $error}
|
||||||
|
/>
|
||||||
|
<Input disabled label="Password" value={generatePassword()} />
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
|
|
Loading…
Reference in a new issue