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

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

gh-pages
mike12345567 5 years ago
parent
3f7adae0d5
commit
1080708ed5
8 changed files with 149 additions and 19 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. 6
      packages/bbui/src/Typography/Heading.svelte
  2. 51
      packages/builder/src/components/login/ForgotForm.svelte
  3. 34
      packages/builder/src/components/login/GoogleButton.svelte
  4. 10
      packages/builder/src/components/login/LoginForm.svelte
  5. 53
      packages/builder/src/components/login/ResetForm.svelte
  6. 4
      packages/builder/src/pages/builder/_layout.svelte
  7. 5
      packages/builder/src/pages/builder/auth/forgot.svelte
  8. 5
      packages/builder/src/pages/builder/auth/reset.svelte

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>

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>

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

@ -1,17 +1,25 @@
<script> <script>
import { ActionButton } from "@budibase/bbui" import { Link } from "@budibase/bbui"
import GoogleLogo from "/assets/google-logo.png" import GoogleLogo from "/assets/google-logo.png"
import { goto } from "@roxi/routify"
</script> </script>
<ActionButton on:click={() => goto("/api/admin/auth/google")}> <div class="outer">
<div class="inner"> <Link target="_blank" href="/api/admin/auth/google">
<img src={GoogleLogo} alt="google icon" /> <div class="inner">
<div>Sign in with Google</div> <img src={GoogleLogo} alt="google icon" />
</div> <p>Sign in with Google</p>
</ActionButton> </div>
</Link>
</div>
<style> <style>
.outer {
border: 1px solid #494949;
border-radius: 4px;
width: 100%;
background-color: var(--background-alt);
}
.inner { .inner {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -20,9 +28,17 @@
padding-top: var(--spacing-xs); padding-top: var(--spacing-xs);
padding-bottom: var(--spacing-xs); padding-bottom: var(--spacing-xs);
} }
.inner img { .inner img {
width: 18px; width: 18px;
margin: 3px 10px 3px 3px; 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> </style>

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

@ -29,10 +29,6 @@
notifications.error("Invalid credentials") notifications.error("Invalid credentials")
} }
} }
async function forgot() {
}
</script> </script>
<div class="login"> <div class="login">
@ -43,15 +39,15 @@
<Heading>Sign in to Budibase</Heading> <Heading>Sign in to Budibase</Heading>
</Layout> </Layout>
<GoogleButton /> <GoogleButton />
<Divider noGrid />
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Divider noGrid />
<Body size="S" textAlign="center">Sign in with email</Body> <Body size="S" textAlign="center">Sign in with email</Body>
<Input label="Email" bind:value={username} /> <Input label="Email" bind:value={username} />
<Input label="Password" type="password" on:change bind:value={password} /> <Input label="Password" type="password" on:change bind:value={password} />
</Layout> </Layout>
<Layout gap="S" noPadding> <Layout gap="S" noPadding>
<Button cta on:click={login}>Sign in to Budibase</Button> <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>
</Layout> </Layout>
</div> </div>
@ -68,7 +64,7 @@
} }
.main { .main {
width: 260px; width: 300px;
} }
img { img {

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>

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

@ -1,6 +1,6 @@
<script> <script>
import { onMount } from "svelte" import { onMount } from "svelte"
import { goto } from "@roxi/routify" import { goto, isActive } from "@roxi/routify"
import { auth } from "stores/backend" import { auth } from "stores/backend"
import { admin } from "stores/portal" import { admin } from "stores/portal"
@ -22,7 +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 (loaded && hasAdminUser && !$auth.user) { if (loaded && hasAdminUser && !$auth.user && !$isActive("./auth")) {
$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