Adding in all the other routes needed for forgotten password flow.

5 years ago · 1080708ed5
8 changed files with 149 additions and 19 deletions
--- a/packages/bbui/src/Typography/Heading.svelte
+++ b/packages/bbui/src/Typography/Heading.svelte
@ -3,8 +3,12 @@

  // Sizes
  export let size = "M"
+  export let textAlign = "left"
+  export let noPadding = false
 </script>

-<h1 class="spectrum-Heading spectrum-Heading--size{size}">
+<h1 style="text-align:{textAlign};"
+    class:noPadding
+    class="spectrum-Heading spectrum-Heading--size{size}">
  <slot />
 </h1>
--- a/packages/builder/src/components/login/ForgotForm.svelte
+++ b/packages/builder/src/components/login/ForgotForm.svelte
@ -0,0 +1,51 @@
+<script>
+  import {
+    Input,
+    Button,
+    Layout,
+    Body,
+    Heading,
+  } from "@budibase/bbui"
+
+  let username = ""
+  let password = ""
+
+  async function reset() {
+
+  }
+</script>
+
+<div class="login">
+  <div class="main">
+    <Layout>
+      <Layout noPadding justifyItems="center">
+        <img src="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={username} />
+      </Layout>
+      <Button cta on:click={reset}>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/GoogleButton.svelte
+++ b/packages/builder/src/components/login/GoogleButton.svelte
@ -1,17 +1,25 @@
 <script>
-  import { ActionButton } from "@budibase/bbui"
+  import { Link } from "@budibase/bbui"
  import GoogleLogo from "/assets/google-logo.png"
-  import { goto } from "@roxi/routify"
 </script>

-<ActionButton on:click={() => goto("/api/admin/auth/google")}>
-  <div class="inner">
-    <img src={GoogleLogo} alt="google icon" />
-    <div>Sign in with Google</div>
-  </div>
-</ActionButton>
+<div class="outer">
+  <Link target="_blank" href="/api/admin/auth/google">
+    <div class="inner">
+      <img src={GoogleLogo} alt="google icon" />
+      <p>Sign in with Google</p>
+    </div>
+  </Link>
+</div>
+

 <style>
+  .outer {
+    border: 1px solid #494949;
+    border-radius: 4px;
+    width: 100%;
+    background-color: var(--background-alt);
+  }
  .inner {
    display: flex;
    flex-direction: row;
@ -20,9 +28,17 @@
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
  }
-
  .inner img {
    width: 18px;
    margin: 3px 10px 3px 3px;
  }
+  .inner p {
+    margin: 0;
+  }
+  .outer :global(a) {
+    text-decoration: none;
+    font-weight: 500;
+    font-size: var(--font-size-m);
+    color: #fff;
+  }
 </style>
--- a/packages/builder/src/components/login/LoginForm.svelte
+++ b/packages/builder/src/components/login/LoginForm.svelte
@ -29,10 +29,6 @@
      notifications.error("Invalid credentials")
    }
  }
-
-  async function forgot() {
-
-  }
 </script>

 <div class="login">
@ -43,15 +39,15 @@
        <Heading>Sign in to Budibase</Heading>
      </Layout>
      <GoogleButton />
-      <Divider noGrid />
      <Layout gap="XS" noPadding>
+        <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} />
      </Layout>
      <Layout gap="S" noPadding>
        <Button cta on:click={login}>Sign in to Budibase</Button>
-        <ActionButton quiet on:click={forgot}>Forgot password?</ActionButton>
+        <ActionButton quiet on:click={() => $goto("./forgot")}>Forgot password?</ActionButton>
      </Layout>
    </Layout>
  </div>
@ -68,7 +64,7 @@
  }

  .main {
-    width: 260px;
+    width: 300px;
  }

  img {
--- a/packages/builder/src/components/login/ResetForm.svelte
+++ b/packages/builder/src/components/login/ResetForm.svelte
@ -0,0 +1,53 @@
+<script>
+  import {
+    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() {
+
+  }
+</script>
+
+<div class="login">
+  <div class="main">
+    <Layout>
+      <Layout noPadding justifyItems="center">
+        <img src="https://i.imgur.com/ZKyklgF.png" />
+      </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>
+        <Input label="Password" bind:value={password} />
+      </Layout>
+      <Button cta on:click={reset}>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: 260px;
+  }
+
+  img {
+    width: 48px;
+  }
+</style>
--- a/packages/builder/src/pages/builder/_layout.svelte
+++ b/packages/builder/src/pages/builder/_layout.svelte
@ -1,6 +1,6 @@
 <script>
  import { onMount } from "svelte"
-  import { goto } from "@roxi/routify"
+  import { goto, isActive } from "@roxi/routify"
  import { auth } from "stores/backend"
  import { admin } from "stores/portal"

@ -22,7 +22,7 @@

  // Redirect to log in at any time if the user isn't authenticated
  $: {
-    if (loaded && hasAdminUser && !$auth.user) {
+    if (loaded && hasAdminUser && !$auth.user && !$isActive("./auth")) {
      $goto("./auth/login")
    }
  }
--- a/packages/builder/src/pages/builder/auth/forgot.svelte
+++ b/packages/builder/src/pages/builder/auth/forgot.svelte
@ -0,0 +1,5 @@
+<script>
+  import ForgotForm from "components/login/ForgotForm.svelte"
+</script>
+
+<ForgotForm />
--- a/packages/builder/src/pages/builder/auth/reset.svelte
+++ b/packages/builder/src/pages/builder/auth/reset.svelte
@ -0,0 +1,5 @@
+<script>
+  import ResetForm from "components/login/ResetForm.svelte"
+</script>
+
+<ResetForm />