Merge branch 'feature/forgot-password' of github.com:Budibase/budibase into user-app-list

5 years ago · 72e8af600a
11 changed files with 209 additions and 37 deletions
--- a/packages/bbui/src/Layout/Layout.svelte
+++ b/packages/bbui/src/Layout/Layout.svelte
@ -6,10 +6,11 @@
  export let gap = "M"
  export let noGap = false
  export let alignContent = "normal"
+  export let justifyItems = "stretch"
 </script>

 <div
-  style="align-content:{alignContent};"
+  style="align-content:{alignContent};justify-items:{justifyItems};"
  class:horizontal
  class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding &&
    paddingY} gap-{!noGap && gap}"
--- a/packages/bbui/src/Typography/Body.svelte
+++ b/packages/bbui/src/Typography/Body.svelte
@ -5,10 +5,11 @@
  export let serif = false
  export let noPadding = false
  export let weight = 400
+  export let textAlign = "left"
 </script>

 <p
-  style="font-weight: {weight};"
+  style="font-weight:{weight};text-align:{textAlign};"
  class:noPadding
  class="spectrum-Body spectrum-Body--size{size}"
  class:spectrum-Body--serif={serif}
@ -21,7 +22,6 @@
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }
-
  .noPadding {
    padding: 0;
    margin: 0;
--- 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/assets/google-logo.png
+++ b/packages/builder/assets/google-logo.png
--- 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
@ -0,0 +1,44 @@
+<script>
+  import { Link } from "@budibase/bbui"
+  import GoogleLogo from "/assets/google-logo.png"
+</script>
+
+<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;
+    align-items: center;
+    justify-content: center;
+    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
@ -2,11 +2,15 @@
  import { goto } from "@roxi/routify"
  import {
    notifications,
-    Link,
    Input,
-    Modal,
-    ModalContent,
+    Button,
+    Divider,
+    ActionButton,
+    Layout,
+    Body,
+    Heading,
  } from "@budibase/bbui"
+  import GoogleButton from "./GoogleButton.svelte"
  import { auth } from "stores/backend"

  let username = ""
@ -27,33 +31,43 @@
  }
 </script>

-<Modal fixed>
-  <ModalContent
-    size="M"
-    title="Log In"
-    onConfirm={login}
-    confirmText="Log In"
-    showCancelButton={false}
-    showCloseIcon={false}
-  >
-    <Input label="Email" bind:value={username} />
-    <Input label="Password" type="password" on:change bind:value={password} />
-    <div class="footer" slot="footer">
-      <Link target="_blank" href="/api/admin/auth/google">
-        Sign In With Google
-      </Link>
-    </div>
-  </ModalContent>
-</Modal>
+<div class="login">
+  <div class="main">
+    <Layout>
+      <Layout noPadding justifyItems="center">
+        <img src="https://i.imgur.com/ZKyklgF.png" />
+        <Heading>Sign in to Budibase</Heading>
+      </Layout>
+      <GoogleButton />
+      <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={() => $goto("./forgot")}>Forgot password?</ActionButton>
+      </Layout>
+    </Layout>
+  </div>
+</div>

 <style>
-  .footer {
+  .login {
+    width: 100%;
+    height: 100%;
    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
+    flex-direction: column;
+    justify-content: center;
    align-items: center;
  }
-  .footer :global(a) {
-    margin-right: var(--spectrum-global-dimension-static-size-200);
+
+  .main {
+    width: 300px;
+  }
+
+  img {
+    width: 48px;
  }
 </style>
--- 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 { page, goto } from "@roxi/routify"
+  import { isActive, goto } from "@roxi/routify"
  import { auth } from "stores/backend"
  import { admin } from "stores/portal"

@ -22,12 +22,7 @@

  // Redirect to log in at any time if the user isn't authenticated
  $: {
-    if (
-      !$page.path.includes("/builder/invite") &&
-      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 />