ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

gh-pages
Andrew Kingston 5 years ago
parent
e239e9f434 1080708ed5
commit
72e8af600a
11 changed files with 209 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      packages/bbui/src/Layout/Layout.svelte
  2. 4
      packages/bbui/src/Typography/Body.svelte
  3. 6
      packages/bbui/src/Typography/Heading.svelte
  4. BIN
      packages/builder/assets/google-logo.png
  5. 51
      packages/builder/src/components/login/ForgotForm.svelte
  6. 44
      packages/builder/src/components/login/GoogleButton.svelte
  7. 66
      packages/builder/src/components/login/LoginForm.svelte
  8. 53
      packages/builder/src/components/login/ResetForm.svelte
  9. 9
      packages/builder/src/pages/builder/_layout.svelte
  10. 5
      packages/builder/src/pages/builder/auth/forgot.svelte
  11. 5
      packages/builder/src/pages/builder/auth/reset.svelte

3
packages/bbui/src/Layout/Layout.svelte
View File

@ -6,10 +6,11 @@
export let gap = "M" export let gap = "M"
export let noGap = false export let noGap = false
export let alignContent = "normal" export let alignContent = "normal"
export let justifyItems = "stretch"
</script> </script>
<div <div
style="align-content:{alignContent};" style="align-content:{alignContent};justify-items:{justifyItems};"
class:horizontal class:horizontal
class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding && class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding &&
paddingY} gap-{!noGap && gap}" paddingY} gap-{!noGap && gap}"

4
packages/bbui/src/Typography/Body.svelte
View File

@ -5,10 +5,11 @@
export let serif = false export let serif = false
export let noPadding = false export let noPadding = false
export let weight = 400 export let weight = 400
export let textAlign = "left"
</script> </script>
<p <p
style="font-weight: {weight};" style="font-weight:{weight};text-align:{textAlign};"
class:noPadding class:noPadding
class="spectrum-Body spectrum-Body--size{size}" class="spectrum-Body spectrum-Body--size{size}"
class:spectrum-Body--serif={serif} class:spectrum-Body--serif={serif}
@ -21,7 +22,6 @@
margin-top: 0.75em; margin-top: 0.75em;
margin-bottom: 0.75em; margin-bottom: 0.75em;
} }
.noPadding { .noPadding {
padding: 0; padding: 0;
margin: 0; margin: 0;

6
packages/bbui/src/Typography/Heading.svelte
View File

@ -3,8 +3,12 @@
// Sizes // Sizes
export let size = "M" export let size = "M"
export let textAlign = "left"
export let noPadding = false
</script> </script>
<h1 class="spectrum-Heading spectrum-Heading--size{size}"> <h1 style="text-align:{textAlign};"
class:noPadding
class="spectrum-Heading spectrum-Heading--size{size}">
<slot /> <slot />
</h1> </h1>

BIN
packages/builder/assets/google-logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

51
packages/builder/src/components/login/ForgotForm.svelte
View File

@ -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>

44
packages/builder/src/components/login/GoogleButton.svelte
View File

@ -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>

66
packages/builder/src/components/login/LoginForm.svelte
View File

@ -2,11 +2,15 @@
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import { import {
notifications, notifications,
Link,
Input, Input,
Modal, Button,
ModalContent, Divider,
ActionButton,
Layout,
Body,
Heading,
} from "@budibase/bbui" } from "@budibase/bbui"
import GoogleButton from "./GoogleButton.svelte"
import { auth } from "stores/backend" import { auth } from "stores/backend"
let username = "" let username = ""
@ -27,33 +31,43 @@
} }
</script> </script>
<Modal fixed> <div class="login">
<ModalContent <div class="main">
size="M" <Layout>
title="Log In" <Layout noPadding justifyItems="center">
onConfirm={login} <img src="https://i.imgur.com/ZKyklgF.png" />
confirmText="Log In" <Heading>Sign in to Budibase</Heading>
showCancelButton={false} </Layout>
showCloseIcon={false} <GoogleButton />
> <Layout gap="XS" noPadding>
<Input label="Email" bind:value={username} /> <Divider noGrid />
<Input label="Password" type="password" on:change bind:value={password} /> <Body size="S" textAlign="center">Sign in with email</Body>
<div class="footer" slot="footer"> <Input label="Email" bind:value={username} />
<Link target="_blank" href="/api/admin/auth/google"> <Input label="Password" type="password" on:change bind:value={password} />
Sign In With Google </Layout>
</Link> <Layout gap="S" noPadding>
</div> <Button cta on:click={login}>Sign in to Budibase</Button>
</ModalContent> <ActionButton quiet on:click={() => $goto("./forgot")}>Forgot password?</ActionButton>
</Modal> </Layout>
</Layout>
</div>
</div>
<style> <style>
.footer { .login {
width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: flex-end; justify-content: center;
align-items: center; align-items: center;
} }
.footer :global(a) {
margin-right: var(--spectrum-global-dimension-static-size-200); .main {
width: 300px;
}
img {
width: 48px;
} }
</style> </style>

53
packages/builder/src/components/login/ResetForm.svelte
View File

@ -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>

9
packages/builder/src/pages/builder/_layout.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import { onMount } from "svelte" import { onMount } from "svelte"
import { page, goto } from "@roxi/routify" import { isActive, goto } from "@roxi/routify"
import { auth } from "stores/backend" import { auth } from "stores/backend"
import { admin } from "stores/portal" import { admin } from "stores/portal"
@ -22,12 +22,7 @@
// Redirect to log in at any time if the user isn't authenticated // Redirect to log in at any time if the user isn't authenticated
$: { $: {
if ( if (loaded && hasAdminUser && !$auth.user && !$isActive("./auth")) {
!$page.path.includes("/builder/invite") &&
loaded &&
hasAdminUser &&
!$auth.user
) {
$goto("./auth/login") $goto("./auth/login")
} }
} }

5
packages/builder/src/pages/builder/auth/forgot.svelte
View File

@ -0,0 +1,5 @@
<script>
import ForgotForm from "components/login/ForgotForm.svelte"
</script>
<ForgotForm />

5
packages/builder/src/pages/builder/auth/reset.svelte
View File

@ -0,0 +1,5 @@
<script>
import ResetForm from "components/login/ResetForm.svelte"
</script>
<ResetForm />
Write Preview
Loading…
Cancel
Save