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
+      <Heading textAlign="center" size="M">Accept Invitation</Heading>
-        label="Password"
+      <Body textAlign="center" size="S">Please enter a password to setup your user.</Body>
-        type="password"
+      <PasswordRepeatInput bind:error bind:password />
        error={$passwordTouched && $passwordError}
        bind:value={$password}
      />
      <Input
        label="Repeat Password"
        type="password"
        error={$repeatTouched &&
          $password !== $repeat &&
          "Passwords must match"}
        bind:value={$repeat}
      />
    </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;