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

Adding login form from designs.

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

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

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