Formatting.

5 years ago · 46d572a8fc
7 changed files with 50 additions and 56 deletions
--- a/packages/bbui/src/Typography/Heading.svelte
+++ b/packages/bbui/src/Typography/Heading.svelte
@ -7,8 +7,10 @@
  export let noPadding = false
 </script>
-<h1 style="text-align:{textAlign};"
+<h1
-    class:noPadding
+  style="text-align:{textAlign};"
-    class="spectrum-Heading spectrum-Heading--size{size}">
+  class:noPadding
  class="spectrum-Heading spectrum-Heading--size{size}"
 >
  <slot />
 </h1>
--- a/packages/builder/src/components/common/users/PasswordRepeatInput.svelte
+++ b/packages/builder/src/components/common/users/PasswordRepeatInput.svelte
@ -1,9 +1,9 @@
 <script>
  import { Layout, Input } from "@budibase/bbui"
  import {
-    Layout,
+    createValidationStore,
-    Input,
+    requiredValidator,
-  } from "@budibase/bbui"
+  } from "../../../helpers/validation"
  import {createValidationStore, requiredValidator} from "../../../helpers/validation"
  export let password
  export let error
@ -18,22 +18,26 @@
  )
  $: password = $firstPassword
-  $: error = !$firstPassword || !$firstTouched || !$repeatTouched || $firstPassword !== $repeatPassword
+  $: error =
    !$firstPassword ||
    !$firstTouched ||
    !$repeatTouched ||
    $firstPassword !== $repeatPassword
 </script>
 <Layout gap="XS" noPadding>
  <Input
-      label="Password"
+    label="Password"
-      type="password"
+    type="password"
-      error={$firstTouched && $passwordError}
+    error={$firstTouched && $passwordError}
-      bind:value={$firstPassword}
+    bind:value={$firstPassword}
  />
  <Input
-      label="Repeat Password"
+    label="Repeat Password"
-      type="password"
+    type="password"
-      error={$repeatTouched &&
+    error={$repeatTouched &&
-          $firstPassword !== $repeatPassword &&
+      $firstPassword !== $repeatPassword &&
-          "Passwords must match"}
+      "Passwords must match"}
-      bind:value={$repeatPassword}
+    bind:value={$repeatPassword}
  />
-</Layout>
+</Layout>
--- a/packages/builder/src/components/login/ForgotForm.svelte
+++ b/packages/builder/src/components/login/ForgotForm.svelte
@ -1,18 +1,10 @@
 <script>
-  import {
+  import { Input, Button, Layout, Body, Heading } from "@budibase/bbui"
    Input,
    Button,
    Layout,
    Body,
    Heading,
  } from "@budibase/bbui"
  let username = ""
  let password = ""
-  async function reset() {
+  async function reset() {}
  }
 </script>
 <div class="login">
@ -23,7 +15,10 @@
      </Layout>
      <Layout gap="XS" noPadding>
        <Heading textAlign="center">Forgotten your password?</Heading>
-        <Body size="S" textAlign="center">No problem! Just enter your account's email address and we'll send you a link to reset it.</Body>
+        <Body size="S" textAlign="center"
          >No problem! Just enter your account's email address and we'll send
          you a link to reset it.</Body
        >
        <Input label="Email" bind:value={username} />
      </Layout>
      <Button cta on:click={reset}>Reset your password</Button>
--- a/packages/builder/src/components/login/GoogleButton.svelte
+++ b/packages/builder/src/components/login/GoogleButton.svelte
@ -12,7 +12,6 @@
  </Link>
 </div>
 <style>
  .outer {
    border: 1px solid #494949;
--- a/packages/builder/src/components/login/LoginForm.svelte
+++ b/packages/builder/src/components/login/LoginForm.svelte
@ -43,11 +43,18 @@
        <Divider noGrid />
        <Body size="S" textAlign="center">Sign in with email</Body>
        <Input label="Email" bind:value={username} />
-        <Input label="Password" type="password" on:change bind:value={password} />
+        <Input
          label="Password"
          type="password"
          on:change
          bind:value={password}
        />
      </Layout>
      <Layout gap="S" noPadding>
        <Button cta on:click={login}>Sign in to Budibase</Button>
-        <ActionButton quiet on:click={() => $goto("./forgot")}>Forgot password?</ActionButton>
+        <ActionButton quiet on:click={() => $goto("./forgot")}
          >Forgot password?</ActionButton
        >
      </Layout>
    </Layout>
  </div>
--- a/packages/builder/src/components/login/ResetForm.svelte
+++ b/packages/builder/src/components/login/ResetForm.svelte
@ -1,20 +1,12 @@
 <script>
-  import {
+  import { Input, Button, Layout, Body, Heading } from "@budibase/bbui"
    Input,
    Button,
    Layout,
    Body,
    Heading,
  } from "@budibase/bbui"
  import { params } from "@roxi/routify"
  import { auth } from "stores/backend"
  const resetCode = $params["?code"]
  let password = ""
-  async function reset() {
+  async function reset() {}
  }
 </script>
 <div class="login">
@ -25,7 +17,9 @@
      </Layout>
      <Layout gap="XS" noPadding>
        <Heading textAlign="center">Reset your password</Heading>
-        <Body size="S" textAlign="center">Please enter the new password you'd like to use.</Body>
+        <Body size="S" textAlign="center"
          >Please enter the new password you'd like to use.</Body
        >
        <Input label="Password" bind:value={password} />
      </Layout>
      <Button cta on:click={reset}>Reset your password</Button>
--- a/packages/builder/src/pages/builder/invite/index.svelte
+++ b/packages/builder/src/pages/builder/invite/index.svelte
@ -1,11 +1,5 @@
 <script>
-  import {
+  import { Layout, Heading, Body, Button, notifications } from "@budibase/bbui"
    Layout,
    Heading,
    Body,
    Button,
    notifications,
  } from "@budibase/bbui"
  import { goto, params } from "@roxi/routify"
  import PasswordRepeatInput from "components/common/users/PasswordRepeatInput.svelte"
  import { users } from "stores/portal"
@ -34,14 +28,13 @@
    </Layout>
    <Layout gap="XS">
      <Heading textAlign="center" size="M">Accept Invitation</Heading>
-      <Body textAlign="center" size="S">Please enter a password to setup your user.</Body>
+      <Body textAlign="center" size="S"
        >Please enter a password to setup your user.</Body
      >
      <PasswordRepeatInput bind:error bind:password />
    </Layout>
    <Layout gap="S">
-      <Button
+      <Button disabled={error} cta on:click={acceptInvite}>Accept invite</Button
        disabled={error}
        cta
        on:click={acceptInvite}>Accept invite</Button
      >
    </Layout>
  </div>