correct error and touched states for buttons

This commit is contained in:
Keviin Åberg Kultalahti 2021-05-12 09:55:33 +02:00
parent ac510e2671
commit 651009db08
2 changed files with 41 additions and 9 deletions

View File

@ -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

View File

@ -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 users username and password. The password will not >Below you will find the users 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>