correct error and touched states for buttons

5 years ago · 10ba5610e6
2 changed files with 41 additions and 9 deletions
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
@ -1,5 +1,11 @@
 <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 { users } from "stores/portal"

@ -24,7 +30,7 @@
  confirmText="Add user"
  confirmDisabled={disabled}
  cancelText="Cancel"
-  disabled={!$touched && !$error}
+  disabled={$error}
  showCloseIcon={false}
 >
  <Body noPadding
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/BasicOnboardingModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/BasicOnboardingModal.svelte
@ -1,7 +1,29 @@
 <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>

 <ModalContent
@ -9,15 +31,19 @@
  title="Basic user onboarding"
  confirmText="Continue"
  cancelText="Cancel"
+  disabled={$error}
+  error={$touched && $error}
  showCloseIcon={false}
 >
  <Body noPadding
    >Below you will find the user’s username and password. The password will not
    be accessible from this point. Please download the credentials.</Body
  >
-  <Input type="email" disabled label="Username" value={email} />
-  <Input disabled label="Password" value="asduiayewkjh3243i5oucy" />
-  <div class="download">
-    <ActionButton icon="Download">Download user credentials</ActionButton>
-  </div>
+  <Input
+    type="email"
+    label="Username"
+    bind:value={$email}
+    error={$touched && $error}
+  />
+  <Input disabled label="Password" value={generatePassword()} />
 </ModalContent>