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

Adding login form from designs.

gh-pages
mike12345567 5 years ago
parent
eb2b9d0eab
commit
4bbeec5954
2 changed files with 49 additions and 33 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. 16
      packages/builder/src/components/login/GoogleButton.svelte
  2. 66
      packages/builder/src/components/login/LoginForm.svelte

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>

Write Preview
Loading…
Cancel
Save