Adding repeat password entry component.

5 years ago · 6e858d2bbd
2 changed files with 46 additions and 35 deletions
--- a/packages/builder/src/components/common/users/PasswordRepeatInput.svelte
+++ b/packages/builder/src/components/common/users/PasswordRepeatInput.svelte
@ -0,0 +1,39 @@
+<script>
+  import {
+    Layout,
+    Input,
+  } from "@budibase/bbui"
+  import {createValidationStore, requiredValidator} from "../../../helpers/validation"
+
+  export let password
+  export let error
+
+  const [firstPassword, passwordError, firstTouched] = createValidationStore(
+    "",
+    requiredValidator
+  )
+  const [repeatPassword, _, repeatTouched] = createValidationStore(
+    "",
+    requiredValidator
+  )
+
+  $: password = $firstPassword
+  $: error = !$firstPassword || !$firstTouched || !$repeatTouched || $firstPassword !== $repeatPassword
+</script>
+
+<Layout gap="XS" noPadding>
+  <Input
+      label="Password"
+      type="password"
+      error={$firstTouched && $passwordError}
+      bind:value={$firstPassword}
+  />
+  <Input
+      label="Repeat Password"
+      type="password"
+      error={$repeatTouched &&
+          $firstPassword !== $repeatPassword &&
+          "Passwords must match"}
+      bind:value={$repeatPassword}
+  />
+</Layout>
--- a/packages/builder/src/pages/builder/invite/index.svelte
+++ b/packages/builder/src/pages/builder/invite/index.svelte
@ -3,27 +3,19 @@
    Layout,
    Heading,
    Body,
-    Input,
    Button,
    notifications,
  } from "@budibase/bbui"
  import { goto, params } from "@roxi/routify"
-  import { createValidationStore, requiredValidator } from "helpers/validation"
+  import PasswordRepeatInput from "components/common/users/PasswordRepeatInput.svelte"
  import { users } from "stores/portal"

-  const [password, passwordError, passwordTouched] = createValidationStore(
-    "",
-    requiredValidator
-  )
-  const [repeat, _, repeatTouched] = createValidationStore(
-    "",
-    requiredValidator
-  )
  const inviteCode = $params["?code"]
+  let password, error

  async function acceptInvite() {
    try {
-      const res = await users.acceptInvite(inviteCode, $password)
+      const res = await users.acceptInvite(inviteCode, password)
      if (!res) {
        throw new Error(res.message)
      }
@ -40,31 +32,14 @@
    <Layout gap="XS">
      <img src="https://i.imgur.com/ZKyklgF.png" />
    </Layout>
-    <div class="center">
-      <Layout gap="XS">
-        <Heading size="M">Accept Invitation</Heading>
-        <Body size="M">Please enter a password to setup your user.</Body>
-      </Layout>
-    </div>
    <Layout gap="XS">
-      <Input
-        label="Password"
-        type="password"
-        error={$passwordTouched && $passwordError}
-        bind:value={$password}
-      />
-      <Input
-        label="Repeat Password"
-        type="password"
-        error={$repeatTouched &&
-          $password !== $repeat &&
-          "Passwords must match"}
-        bind:value={$repeat}
-      />
+      <Heading textAlign="center" size="M">Accept Invitation</Heading>
+      <Body textAlign="center" size="S">Please enter a password to setup your user.</Body>
+      <PasswordRepeatInput bind:error bind:password />
    </Layout>
    <Layout gap="S">
      <Button
-        disabled={!$passwordTouched || !$repeatTouched || $password !== $repeat}
+        disabled={error}
        cta
        on:click={acceptInvite}>Accept invite</Button
      >
@ -87,9 +62,6 @@
    justify-content: flex-start;
    align-items: stretch;
  }
-  .center {
-    text-align: center;
-  }
  img {
    width: 40px;
    margin: 0 auto;