|
|
|
@ -23,10 +23,7 @@ |
|
|
|
|
|
|
|
const login = async () => { |
|
|
|
loading = true |
|
|
|
const response = await _bb.api.post("/api/authenticate", { |
|
|
|
username, |
|
|
|
password, |
|
|
|
}) |
|
|
|
const response = await _bb.api.post("/api/authenticate", { username, password }) |
|
|
|
if (response.status === 200) { |
|
|
|
const json = await response.json() |
|
|
|
localStorage.setItem("budibase:token", json.token) |
|
|
|
@ -39,39 +36,47 @@ |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<div class="container"> |
|
|
|
<div class="root"> |
|
|
|
<div class="content"> |
|
|
|
{#if logo} |
|
|
|
<div class="logo-container"> |
|
|
|
<img src={logo} alt="logo" /> |
|
|
|
</div> |
|
|
|
{/if} |
|
|
|
|
|
|
|
<div class="login-button-container"> |
|
|
|
<button disabled={loading} on:click={login} class={_buttonClass}> |
|
|
|
Log in to {name} |
|
|
|
</button> |
|
|
|
<div class="root"> |
|
|
|
<div class="content"> |
|
|
|
{#if logo} |
|
|
|
<div class="logo-container"> |
|
|
|
<img src={logo} alt="logo" /> |
|
|
|
</div> |
|
|
|
{/if} |
|
|
|
|
|
|
|
{#if error} |
|
|
|
<div class="incorrect-details-panel"> |
|
|
|
Incorrect username or password |
|
|
|
</div> |
|
|
|
{/if} |
|
|
|
<h1 class="header-content">Log in to {name}</h1> |
|
|
|
|
|
|
|
<div class="form-root"> |
|
|
|
<div class="control"> |
|
|
|
<input |
|
|
|
bind:value={username} |
|
|
|
type="text" |
|
|
|
placeholder="Username" |
|
|
|
class={_inputClass} /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="control"> |
|
|
|
<input |
|
|
|
bind:value={password} |
|
|
|
type="password" |
|
|
|
placeholder="Password" |
|
|
|
class={_inputClass} /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="login-button-container"> |
|
|
|
<button disabled={loading} on:click={login} class={_buttonClass}> |
|
|
|
Log in to {name} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
{#if error} |
|
|
|
<div class="incorrect-details-panel">Incorrect username or password</div> |
|
|
|
{/if} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<style> |
|
|
|
.container { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
position: absolute; |
|
|
|
} |
|
|
|
.root { |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
@ -102,7 +107,7 @@ |
|
|
|
|
|
|
|
.header-content { |
|
|
|
font-family: Inter; |
|
|
|
font-weight: 600; |
|
|
|
font-weight: 700; |
|
|
|
color: #1f1f1f; |
|
|
|
font-size: 48px; |
|
|
|
line-height: 72px; |
|
|
|
|