CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-05 06:20:55 +12:00
Code Issues Projects Releases Wiki Activity

Adding login form from designs.

Browse source
This commit is contained in:
mike12345567 2021-05-17 16:48:26 +01:00
parent 78ba2353ee
commit 43899cae68
2 changed files with 49 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/builder/src/components/login/GoogleButton.svelte
View file

@ -14,25 +14,24 @@
<style> <style>
.outer { .outer {
border: 1px; border: 1px solid #494949;
border-radius: 4px;
width: 100%; width: 100%;
background-color: var(--background-alt);
} }
.inner { .inner {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center;
background-color: var(--background-alt);
border-radius: 3px;
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: 24px; width: 18px;
margin: 1px 14px 1px 1px; margin: 3px 10px 3px 3px;
border-radius: 2px;
} }
.inner p { .inner p {
@ -41,7 +40,8 @@
.outer :global(a) { .outer :global(a) {
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: 500;
font-size: var(--font-size-m);
color: #fff; color: #fff;
} }
</style> </style>

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

@ -1,15 +1,16 @@
<script> <script>
import { goto } from "@roxi/routify" import {goto} from "@roxi/routify"
import { import {
notifications, notifications,
Input, Input,
Modal,
ModalContent,
Button, Button,
Divider, Divider,
ActionButton,
Layout,
Body,
} from "@budibase/bbui" } from "@budibase/bbui"
import GoogleButton from "./GoogleButton.svelte" import GoogleButton from "./GoogleButton.svelte"
import { auth } from "stores/backend" import {auth} from "stores/backend"
let username = "" let username = ""
let password = "" let password = ""
@ -33,41 +34,56 @@
} }
</script> </script>
<Modal fixed> <div class="login">
<ModalContent <div class="main">
size="M" <img src="https://i.imgur.com/ZKyklgF.png" />
title="Log In" <h2>Sign in to Budibase</h2>
showCancelButton={false}
showConfirmButton={false}
showCloseIcon={false}
>
<div class="sso"> <div class="sso">
<GoogleButton /> <GoogleButton />
</div> </div>
<Divider noGrid /> <Divider noGrid />
<Input label="Email" bind:value={username} /> <Body size="S">Sign in with email</Body>
<Input label="Password" type="password" on:change bind:value={password} /> <Layout gap="XS">
<Input label="Email" bind:value={username} />
<Input label="Password" type="password" on:change bind:value={password} />
</Layout>
<div class="login-buttons"> <div class="login-buttons">
<Button secondary on:click={forgot}>Forgot Password?</Button> <Button cta on:click={login}>Sign in to Budibase</Button>
<Button cta on:click={login}>Login</Button> <ActionButton quiet on:click={forgot}>Forgot Password?</ActionButton>
</div> </div>
</ModalContent> </div>
</Modal> </div>
<style> <style>
.sso { .login {
width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: center;
align-items: center; align-items: center;
} }
.login-buttons {
.main {
width: 240px;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: flex-end; justify-content: center;
align-items: center; align-items: center;
} }
.login-buttons :global(>*:not(:last-child)) {
margin-right: var(--spacing-xl); .main img {
width: 48px;
}
.sso {
width: 100%;
margin-bottom: var(--spacing-l);
margin-top: var(--spacing-s);
}
.login-buttons :global(>*) {
margin-top: var(--spacing-l);
width: 100%;
} }
</style> </style>