forked from tsai/budibase
Michael Shanks
7 years ago
22 changed files with 16215 additions and 13545 deletions
@ -0,0 +1,24 @@ |
|||||
|
|
||||
|
export const USER_STATE_PATH = "_bbuser"; |
||||
|
|
||||
|
export const authenticate = (api) => async ({username, password}) => { |
||||
|
|
||||
|
if(!username) { |
||||
|
api.error("Authenticate: username not set"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if(!password) { |
||||
|
api.error("Authenticate: password not set"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const user = await post({ |
||||
|
url:`${rootPath}/api/authenticate`, |
||||
|
body : {username, password} |
||||
|
}); |
||||
|
|
||||
|
// set user even if error - so it is defined at least
|
||||
|
api.setState(USER_STATE_PATH, user); |
||||
|
localStorage.setItem("budibase:user", user); |
||||
|
} |
||||
@ -1,8 +1,9 @@ |
|||||
#current_component.svelte-1xqz9vm{height:100%;width:100%} |
#current_component.svelte-1xqz9vm{height:100%;width:100%} |
||||
.root.svelte-1oto99m{height:100%;display:grid;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-template-rows:[top] 1fr [center] auto [bottom] 1fr}.content.svelte-1oto99m{grid-column-start:middle;grid-row-start:center;width:400px}.logo-container.svelte-1oto99m{margin-bottom:20px |
.root.svelte-1oto99m{height:100%;display:grid;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-template-rows:[top] 1fr [center] auto [bottom] 1fr}.content.svelte-1oto99m{grid-column-start:middle;grid-row-start:center;width:400px}.logo-container.svelte-1oto99m{margin-bottom:20px |
||||
}.logo-container.svelte-1oto99m>img.svelte-1oto99m{max-width:100%}.login-button-container.svelte-1oto99m{text-align:right;margin-top:20px}.incorrect-details-panel.svelte-1oto99m{margin-top:30px;padding:10px;border-style:solid;border-width:1px;border-color:maroon;border-radius:1px;text-align:center;color:maroon;background-color:mistyrose}.form-root.svelte-1oto99m{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-1oto99m{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-1oto99m{grid-column-start:control;padding:5px 10px} |
}.logo-container.svelte-1oto99m>img.svelte-1oto99m{max-width:100%}.login-button-container.svelte-1oto99m{text-align:right;margin-top:20px}.incorrect-details-panel.svelte-1oto99m{margin-top:30px;padding:10px;border-style:solid;border-width:1px;border-color:maroon;border-radius:1px;text-align:center;color:maroon;background-color:mistyrose}.form-root.svelte-1oto99m{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-1oto99m{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-1oto99m{grid-column-start:control;padding:5px 10px} |
||||
.root.svelte-10kw8to{display:grid} |
|
||||
.default.svelte-1ec4wqj{width:100%;font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100%}.default.svelte-1ec4wqj:disabled{color:#ccc} |
.default.svelte-1ec4wqj{width:100%;font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100%}.default.svelte-1ec4wqj:disabled{color:#ccc} |
||||
|
.root.svelte-10kw8to{display:grid} |
||||
|
.root.svelte-aihwli{height:100%;width:100%;grid-template-columns:[navbar] auto [content] 1fr;display:grid}.navbar.svelte-aihwli{grid-column:navbar;background:var(--navBarBackground);border:var(--navBarBorder);color:var(--navBarColor)}.navitem.svelte-aihwli{padding:10px 17px;cursor:pointer}.navitem.svelte-aihwli:hover{background:var(--itemHoverBackground);color:var(--itemHoverColor)}.navitem.selected.svelte-aihwli{background:var(--selectedItemBackground);border:var(--selectedItemBorder);color:var(--selectedItemColor)}.content.svelte-aihwli{grid-column:content} |
||||
.form-root.svelte-m9d6ue{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-m9d6ue{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-m9d6ue{grid-column-start:control;padding:5px 10px}.overflow.svelte-m9d6ue{grid-column-start:overflow}.full-width.svelte-m9d6ue{width:100%} |
.form-root.svelte-m9d6ue{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-m9d6ue{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-m9d6ue{grid-column-start:control;padding:5px 10px}.overflow.svelte-m9d6ue{grid-column-start:overflow}.full-width.svelte-m9d6ue{width:100%} |
||||
.default.svelte-1q8lga0{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;color:#333;background-color:#f4f4f4;outline:none}.default.svelte-1q8lga0:active{background-color:#ddd}.default.svelte-1q8lga0:focus{border-color:#666} |
.default.svelte-1q8lga0{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;color:#333;background-color:#f4f4f4;outline:none}.default.svelte-1q8lga0:active{background-color:#ddd}.default.svelte-1q8lga0:focus{border-color:#666} |
||||
|
|
||||
|
|||||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,86 @@ |
|||||
|
<script> |
||||
|
import cssVars from "./cssVars"; |
||||
|
|
||||
|
export let navBarBackground = ""; |
||||
|
export let navBarBorder=""; |
||||
|
export let navBarColor=""; |
||||
|
export let selectedItemBackground=""; |
||||
|
export let selectedItemColor=""; |
||||
|
export let selectedItemBorder=""; |
||||
|
export let itemHoverBackground=""; |
||||
|
export let itemHoverColor=""; |
||||
|
export let items = [] |
||||
|
|
||||
|
export let _app; |
||||
|
|
||||
|
let selectedIndex; |
||||
|
let contentElement; |
||||
|
|
||||
|
$: styleVars = { |
||||
|
navBarBackground, navBarBorder, |
||||
|
navBarColor, selectedItemBackground, |
||||
|
selectedItemColor, selectedItemBorder, |
||||
|
itemHoverBackground, itemHoverColor |
||||
|
} |
||||
|
|
||||
|
const onSelectItem = (index) => () => { |
||||
|
selectedIndex = index; |
||||
|
_app.initialiseComponent(items[index].component, contentElement); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<div class="root" use:cssVars={styleVars}> |
||||
|
<div class="navbar"> |
||||
|
{#each items as navItem, index} |
||||
|
<div class="navitem" |
||||
|
on:click={onSelectItem(index)} |
||||
|
class:selected={selectedIndex === index}> |
||||
|
{navItem.title} |
||||
|
</div> |
||||
|
{/each} |
||||
|
</div> |
||||
|
<div class="content" |
||||
|
bind:this={contentElement}> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
.root { |
||||
|
height: 100%; |
||||
|
width:100%; |
||||
|
grid-template-columns: [navbar] auto [content] 1fr; |
||||
|
display: grid; |
||||
|
} |
||||
|
|
||||
|
.navbar { |
||||
|
grid-column: navbar; |
||||
|
background: var(--navBarBackground); |
||||
|
border: var(--navBarBorder); |
||||
|
color: var(--navBarColor); |
||||
|
} |
||||
|
|
||||
|
.navitem { |
||||
|
padding: 10px 17px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.navitem:hover { |
||||
|
background: var(--itemHoverBackground); |
||||
|
color: var(--itemHoverColor); |
||||
|
} |
||||
|
|
||||
|
.navitem.selected { |
||||
|
background: var(--selectedItemBackground); |
||||
|
border: var(--selectedItemBorder); |
||||
|
color: var(--selectedItemColor); |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
grid-column: content; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,40 @@ |
|||||
|
<script> |
||||
|
import {buildStyle} from "./buildStyle"; |
||||
|
|
||||
|
export let component=""; |
||||
|
export let text=""; |
||||
|
export let containerClass=""; |
||||
|
export let background=""; |
||||
|
export let border=""; |
||||
|
export let borderRadius=""; |
||||
|
export let font=""; |
||||
|
export let display=""; |
||||
|
export let textAlign=""; |
||||
|
export let color=""; |
||||
|
export let padding=""; |
||||
|
|
||||
|
export let _app; |
||||
|
|
||||
|
let style=""; |
||||
|
let componentElement; |
||||
|
|
||||
|
$: { |
||||
|
style=buildStyle({ |
||||
|
border, background, font, |
||||
|
padding, display, color, |
||||
|
"text-align": textAlign, |
||||
|
"border-radius":borderRadius |
||||
|
}); |
||||
|
|
||||
|
if(_app && component) { |
||||
|
_app.initialiseComponent(component, componentElement); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<div class={containerClass} |
||||
|
style={style} |
||||
|
this:bind={componentElement}> |
||||
|
{text} |
||||
|
</div> |
||||
@ -0,0 +1,21 @@ |
|||||
|
// https://github.com/kaisermann/svelte-css-vars
|
||||
|
|
||||
|
export default (node, props) => { |
||||
|
Object.entries(props).forEach(([key, value]) => { |
||||
|
node.style.setProperty(`--${key}`, value); |
||||
|
}); |
||||
|
|
||||
|
return { |
||||
|
update(new_props) { |
||||
|
Object.entries(new_props).forEach(([key, value]) => { |
||||
|
node.style.setProperty(`--${key}`, value); |
||||
|
delete props[key]; |
||||
|
}); |
||||
|
|
||||
|
Object.keys(props).forEach(name => |
||||
|
node.style.removeProperty(`--${name}`), |
||||
|
); |
||||
|
props = new_props; |
||||
|
}, |
||||
|
}; |
||||
|
}; |
||||
Loading…
Reference in new issue