Merge branch 'master' of github.com:Budibase/budibase
This commit is contained in:
commit
3e9a3ec678
|
@ -17,6 +17,7 @@ export default ({
|
|||
|
||||
body, html {
|
||||
height: 100%!important;
|
||||
font-family: Roboto !important;
|
||||
}
|
||||
.lay-__screenslot__text {
|
||||
width: 100%;
|
||||
|
|
|
@ -267,7 +267,21 @@ export default {
|
|||
"A component that automatically generates a login screen for your app.",
|
||||
icon: "ri-login-box-fill",
|
||||
children: [],
|
||||
properties: { design: { ...all } },
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
{
|
||||
label: "Name",
|
||||
key: "name",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Logo",
|
||||
key: "logo",
|
||||
control: Input,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Table",
|
||||
|
@ -349,7 +363,15 @@ export default {
|
|||
"A component for handling the navigation within your app.",
|
||||
icon: "ri-navigation-fill",
|
||||
children: [],
|
||||
properties: { design: { ...all } },
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
{ label: "Logo URL", key: "logoUrl", control: Input },
|
||||
{ label: "Title", key: "title", control: Input },
|
||||
{ label: "Color", key: "color", control: Input },
|
||||
{ label: "Background", key: "backgroundColor", control: Input },
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
@ -15,4 +15,7 @@ JWT_SECRET={{cookieKey1}}
|
|||
PORT=4001
|
||||
|
||||
# error level for koa-pino
|
||||
LOG_LEVEL=error
|
||||
LOG_LEVEL=error
|
||||
|
||||
# Budibase app directory
|
||||
BUDIBASE_DIR=~/.budibase
|
|
@ -1,14 +1,17 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf8'>
|
||||
<meta name='viewport' content='width=device-width'>
|
||||
|
||||
<title>{{ title }}</title>
|
||||
<head>
|
||||
<meta charset='utf8'>
|
||||
<meta name='viewport' content='width=device-width'>
|
||||
|
||||
<title>{{ title }}</title>
|
||||
<link rel='icon' type='image/png' href='{{ favicon }}'>
|
||||
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
font-family: Roboto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
|
@ -30,13 +33,14 @@
|
|||
|
||||
<script src='{{ appRootPath }}/clientFrontendDefinition.js'></script>
|
||||
<script src='{{ appRootPath }}/budibase-client.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body id="app">
|
||||
|
||||
|
||||
<script>
|
||||
loadBudibase();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -59,6 +59,7 @@
|
|||
"props": {
|
||||
"logo": "asset",
|
||||
"loginRedirect": "string",
|
||||
"name": "string",
|
||||
"usernameLabel": {
|
||||
"type": "string",
|
||||
"default": "Username"
|
||||
|
|
|
@ -1,10 +1,9 @@
|
|||
<script>
|
||||
import Button from "./Button.svelte"
|
||||
|
||||
export let usernameLabel = "Username"
|
||||
export let passwordLabel = "Password"
|
||||
export let loginButtonLabel = "Login"
|
||||
export let logo = ""
|
||||
export let name = ""
|
||||
export let buttonClass = ""
|
||||
export let inputClass = ""
|
||||
|
||||
|
@ -51,14 +50,23 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<h1 class="header-content">Log in to {name}</h1>
|
||||
|
||||
<div class="form-root">
|
||||
<div class="label">{usernameLabel}</div>
|
||||
<div class="control">
|
||||
<input bind:value={username} type="text" class={_inputClass} />
|
||||
<input
|
||||
bind:value={username}
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
class={_inputClass} />
|
||||
</div>
|
||||
<div class="label">{passwordLabel}</div>
|
||||
|
||||
<div class="control">
|
||||
<input bind:value={password} type="password" class={_inputClass} />
|
||||
<input
|
||||
bind:value={password}
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
class={_inputClass} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -77,15 +85,17 @@
|
|||
<style>
|
||||
.root {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: [left] 1fr [middle] auto [right] 1fr;
|
||||
grid-template-rows: [top] 1fr [center] auto [bottom] 1fr;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-column-start: middle;
|
||||
grid-row-start: center;
|
||||
width: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
|
@ -97,8 +107,20 @@
|
|||
}
|
||||
|
||||
.login-button-container {
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
margin-top: 6px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
font-family: Inter;
|
||||
font-weight: 700;
|
||||
color: #1f1f1f;
|
||||
font-size: 48px;
|
||||
line-height: 72px;
|
||||
margin-bottom: 30px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-feature-settings: "case" "rlig" "calt" 0;
|
||||
}
|
||||
|
||||
.incorrect-details-panel {
|
||||
|
@ -114,48 +136,55 @@
|
|||
}
|
||||
|
||||
.form-root {
|
||||
display: grid;
|
||||
grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.label {
|
||||
grid-column-start: label;
|
||||
padding: 5px 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.control {
|
||||
grid-column-start: control;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.default-input {
|
||||
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;
|
||||
padding: 6px 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.default-button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 0.4em;
|
||||
.default-input {
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
color: #393c44;
|
||||
padding: 2px 6px 2px 12px;
|
||||
margin: 0 0 0.5em 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
color: #000333;
|
||||
border: 0.5px solid #d8d8d8;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
transition: border-color 100ms ease-in 0s;
|
||||
outline-color: #797979;
|
||||
}
|
||||
|
||||
.default-button {
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
padding: 0.4em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
background-color: #393c44;
|
||||
outline: none;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease 0s;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.default-button:active {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.default-button:focus {
|
||||
border-color: #f9f9f9;
|
||||
.default-button:hover {
|
||||
background-color: white;
|
||||
border-color: #393c44;
|
||||
color: #393c44;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue