move extracted components into page components

5 years ago · 7c7c9ac743
6 changed files with 140 additions and 151 deletions
--- a/packages/builder/src/components/login/ForgotForm.svelte
+++ b/packages/builder/src/components/login/ForgotForm.svelte
@ -1,62 +0,0 @@
-<script>
-  import {
-    notifications,
-    Input,
-    Button,
-    Layout,
-    Body,
-    Heading,
-  } from "@budibase/bbui"
-  import { organisation, auth } from "stores/portal"
-
-  let email = ""
-
-  async function forgot() {
-    try {
-      await auth.forgotPassword(email)
-      notifications.success("Email sent - please check your inbox")
-    } catch (err) {
-      notifications.error("Unable to send reset password link")
-    }
-  }
-</script>
-
-<div class="login">
-  <div class="main">
-    <Layout>
-      <Layout noPadding justifyItems="center">
-        <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
-      </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>
-        <Input label="Email" bind:value={email} />
-      </Layout>
-      <Button cta on:click={forgot} disabled={!email}>
-        Reset your password
-      </Button>
-    </Layout>
-  </div>
-</div>
-
-<style>
-  .login {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .main {
-    width: 300px;
-  }
-
-  img {
-    width: 48px;
-  }
-</style>
--- a/packages/builder/src/components/login/LoginForm.svelte
+++ b/packages/builder/src/components/login/LoginForm.svelte
@ -1,84 +0,0 @@
-<script>
-  import {
-    ActionButton,
-    Body,
-    Button,
-    Divider,
-    Heading,
-    Input,
-    Layout,
-    notifications,
-  } from "@budibase/bbui"
-  import { goto } from "@roxi/routify"
-  import { auth, organisation } from "stores/portal"
-  import GoogleButton from "./GoogleButton.svelte"
-
-  let username = ""
-  let password = ""
-
-  async function login() {
-    try {
-      await auth.login({
-        username,
-        password,
-      })
-      notifications.success("Logged in successfully")
-      if ($auth?.user?.forceResetPassword) {
-        $goto("./reset")
-      } else {
-        $goto("../portal")
-      }
-    } catch (err) {
-      console.error(err)
-      notifications.error("Invalid credentials")
-    }
-  }
-</script>
-
-<div class="login">
-  <div class="main">
-    <Layout>
-      <Layout noPadding justifyItems="center">
-        <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
-        <Heading>Sign in to Budibase</Heading>
-      </Layout>
-      <GoogleButton />
-      <Divider noGrid />
-      <Layout gap="XS" noPadding>
-        <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}
-        />
-      </Layout>
-      <Layout gap="XS" noPadding>
-        <Button cta on:click={login}>Sign in to Budibase</Button>
-        <ActionButton quiet on:click={() => $goto("./forgot")}>
-          Forgot password?
-        </ActionButton>
-      </Layout>
-    </Layout>
-  </div>
-</div>
-
-<style>
-  .login {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .main {
-    width: 300px;
-  }
-
-  img {
-    width: 48px;
-  }
-</style>
--- a/packages/builder/src/components/login/index.js
+++ b/packages/builder/src/components/login/index.js
@ -1 +0,0 @@
-export { LoginForm } from "./LoginForm.svelte"
--- a/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte
+++ b/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte
--- a/packages/builder/src/pages/builder/auth/forgot.svelte
+++ b/packages/builder/src/pages/builder/auth/forgot.svelte
@ -1,5 +1,62 @@
 <script>
-  import ForgotForm from "components/login/ForgotForm.svelte"
+  import {
+    notifications,
+    Input,
+    Button,
+    Layout,
+    Body,
+    Heading,
+  } from "@budibase/bbui"
+  import { organisation, auth } from "stores/portal"
+
+  let email = ""
+
+  async function forgot() {
+    try {
+      await auth.forgotPassword(email)
+      notifications.success("Email sent - please check your inbox")
+    } catch (err) {
+      notifications.error("Unable to send reset password link")
+    }
+  }
 </script>

-<ForgotForm />
+<div class="login">
+  <div class="main">
+    <Layout>
+      <Layout noPadding justifyItems="center">
+        <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
+      </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>
+        <Input label="Email" bind:value={email} />
+      </Layout>
+      <Button cta on:click={forgot} disabled={!email}>
+        Reset your password
+      </Button>
+    </Layout>
+  </div>
+</div>
+
+<style>
+  .login {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .main {
+    width: 300px;
+  }
+
+  img {
+    width: 48px;
+  }
+</style>
--- a/packages/builder/src/pages/builder/auth/login.svelte
+++ b/packages/builder/src/pages/builder/auth/login.svelte
@ -1,5 +1,84 @@
 <script>
-  import LoginForm from "components/login/LoginForm.svelte"
+  import {
+    ActionButton,
+    Body,
+    Button,
+    Divider,
+    Heading,
+    Input,
+    Layout,
+    notifications,
+  } from "@budibase/bbui"
+  import { goto } from "@roxi/routify"
+  import { auth, organisation } from "stores/portal"
+  import GoogleButton from "./_components/GoogleButton.svelte"
+
+  let username = ""
+  let password = ""
+
+  async function login() {
+    try {
+      await auth.login({
+        username,
+        password,
+      })
+      notifications.success("Logged in successfully")
+      if ($auth?.user?.forceResetPassword) {
+        $goto("./reset")
+      } else {
+        $goto("../portal")
+      }
+    } catch (err) {
+      console.error(err)
+      notifications.error("Invalid credentials")
+    }
+  }
 </script>

-<LoginForm />
+<div class="login">
+  <div class="main">
+    <Layout>
+      <Layout noPadding justifyItems="center">
+        <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
+        <Heading>Sign in to Budibase</Heading>
+      </Layout>
+      <GoogleButton />
+      <Divider noGrid />
+      <Layout gap="XS" noPadding>
+        <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}
+        />
+      </Layout>
+      <Layout gap="XS" noPadding>
+        <Button cta on:click={login}>Sign in to Budibase</Button>
+        <ActionButton quiet on:click={() => $goto("./forgot")}>
+          Forgot password?
+        </ActionButton>
+      </Layout>
+    </Layout>
+  </div>
+</div>
+
+<style>
+  .login {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .main {
+    width: 300px;
+  }
+
+  img {
+    width: 48px;
+  }
+</style>
			`@ -1 +0,0 @@`
			`export { LoginForm } from "./LoginForm.svelte"`