move extracted components into page components
This commit is contained in:
Keviin Åberg Kultalahti
parent
090c54beb9
commit
53f38f6f8f
|
|
@ -1,62 +0,0 @@
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
notifications,
|
|
||||||
Input,
|
|
||||||
Button,
|
|
||||||
Layout,
|
|
||||||
Body,
|
|
||||||
Heading,
|
|
||||||
} from "@budibase/bbui"
|
|
||||||
import { organisation, auth } from "stores/portal"
|
|
||||||
|
|
||||||
let email = ""
|
|
||||||
|
|
||||||
async function forgot() {
|
|
||||||
try {
|
|
||||||
await auth.forgotPassword(email)
|
|
||||||
notifications.success("Email sent - please check your inbox")
|
|
||||||
} catch (err) {
|
|
||||||
notifications.error("Unable to send reset password link")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="login">
|
|
||||||
<div class="main">
|
|
||||||
<Layout>
|
|
||||||
<Layout noPadding justifyItems="center">
|
|
||||||
<img src={$organisation.logoUrl || "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={email} />
|
|
||||||
</Layout>
|
|
||||||
<Button cta on:click={forgot} disabled={!email}>
|
|
||||||
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>
|
|
||||||
|
|
@ -1,84 +0,0 @@
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
ActionButton,
|
|
||||||
Body,
|
|
||||||
Button,
|
|
||||||
Divider,
|
|
||||||
Heading,
|
|
||||||
Input,
|
|
||||||
Layout,
|
|
||||||
notifications,
|
|
||||||
} from "@budibase/bbui"
|
|
||||||
import { goto } from "@roxi/routify"
|
|
||||||
import { auth, organisation } from "stores/portal"
|
|
||||||
import GoogleButton from "./GoogleButton.svelte"
|
|
||||||
|
|
||||||
let username = ""
|
|
||||||
let password = ""
|
|
||||||
|
|
||||||
async function login() {
|
|
||||||
try {
|
|
||||||
await auth.login({
|
|
||||||
username,
|
|
||||||
password,
|
|
||||||
})
|
|
||||||
notifications.success("Logged in successfully")
|
|
||||||
if ($auth?.user?.forceResetPassword) {
|
|
||||||
$goto("./reset")
|
|
||||||
} else {
|
|
||||||
$goto("../portal")
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err)
|
|
||||||
notifications.error("Invalid credentials")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="login">
|
|
||||||
<div class="main">
|
|
||||||
<Layout>
|
|
||||||
<Layout noPadding justifyItems="center">
|
|
||||||
<img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
|
|
||||||
<Heading>Sign in to Budibase</Heading>
|
|
||||||
</Layout>
|
|
||||||
<GoogleButton />
|
|
||||||
<Divider noGrid />
|
|
||||||
<Layout gap="XS" noPadding>
|
|
||||||
<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="XS" 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>
|
|
||||||
.login {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 48px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { LoginForm } from "./LoginForm.svelte"
|
|
||||||
|
|
@ -1,5 +1,62 @@
|
||||||
<script>
|
<script>
|
||||||
import ForgotForm from "components/login/ForgotForm.svelte"
|
import {
|
||||||
|
notifications,
|
||||||
|
Input,
|
||||||
|
Button,
|
||||||
|
Layout,
|
||||||
|
Body,
|
||||||
|
Heading,
|
||||||
|
} from "@budibase/bbui"
|
||||||
|
import { organisation, auth } from "stores/portal"
|
||||||
|
|
||||||
|
let email = ""
|
||||||
|
|
||||||
|
async function forgot() {
|
||||||
|
try {
|
||||||
|
await auth.forgotPassword(email)
|
||||||
|
notifications.success("Email sent - please check your inbox")
|
||||||
|
} catch (err) {
|
||||||
|
notifications.error("Unable to send reset password link")
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ForgotForm />
|
<div class="login">
|
||||||
|
<div class="main">
|
||||||
|
<Layout>
|
||||||
|
<Layout noPadding justifyItems="center">
|
||||||
|
<img src={$organisation.logoUrl || "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={email} />
|
||||||
|
</Layout>
|
||||||
|
<Button cta on:click={forgot} disabled={!email}>
|
||||||
|
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>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,84 @@
|
||||||
<script>
|
<script>
|
||||||
import LoginForm from "components/login/LoginForm.svelte"
|
import {
|
||||||
|
ActionButton,
|
||||||
|
Body,
|
||||||
|
Button,
|
||||||
|
Divider,
|
||||||
|
Heading,
|
||||||
|
Input,
|
||||||
|
Layout,
|
||||||
|
notifications,
|
||||||
|
} from "@budibase/bbui"
|
||||||
|
import { goto } from "@roxi/routify"
|
||||||
|
import { auth, organisation } from "stores/portal"
|
||||||
|
import GoogleButton from "./_components/GoogleButton.svelte"
|
||||||
|
|
||||||
|
let username = ""
|
||||||
|
let password = ""
|
||||||
|
|
||||||
|
async function login() {
|
||||||
|
try {
|
||||||
|
await auth.login({
|
||||||
|
username,
|
||||||
|
password,
|
||||||
|
})
|
||||||
|
notifications.success("Logged in successfully")
|
||||||
|
if ($auth?.user?.forceResetPassword) {
|
||||||
|
$goto("./reset")
|
||||||
|
} else {
|
||||||
|
$goto("../portal")
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err)
|
||||||
|
notifications.error("Invalid credentials")
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<LoginForm />
|
<div class="login">
|
||||||
|
<div class="main">
|
||||||
|
<Layout>
|
||||||
|
<Layout noPadding justifyItems="center">
|
||||||
|
<img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
|
||||||
|
<Heading>Sign in to Budibase</Heading>
|
||||||
|
</Layout>
|
||||||
|
<GoogleButton />
|
||||||
|
<Divider noGrid />
|
||||||
|
<Layout gap="XS" noPadding>
|
||||||
|
<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="XS" 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>
|
||||||
|
.login {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 48px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue