MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Andrew Kingston 2021-05-18 14:33:25 +01:00
parent ec32354c7f 9898287257
commit 473c9ebfa6
11 changed files with 209 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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 Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

51
packages/builder/src/components/login/ForgotForm.svelte Normal file
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 Normal file
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 Normal file
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 Normal file
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 Normal file
View File

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