forked from tsai/budibase
Keviin Åberg Kultalahti
5 years ago
6 changed files with 140 additions and 151 deletions
@ -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