mirror of https://github.com/Budibase/budibase.git
Martin McKeaveney
5 years ago
5 changed files with 277 additions and 81 deletions
@ -0,0 +1,193 @@ |
|||||
|
<script> |
||||
|
import { |
||||
|
Button, |
||||
|
Heading, |
||||
|
Divider, |
||||
|
Label, |
||||
|
notifications, |
||||
|
Layout, |
||||
|
Input, |
||||
|
TextArea, |
||||
|
Body, |
||||
|
Page, |
||||
|
Select, |
||||
|
} from "@budibase/bbui" |
||||
|
import { onMount } from "svelte" |
||||
|
import api from "builderStore/api" |
||||
|
|
||||
|
const ConfigTypes = { |
||||
|
SMTP: "smtp", |
||||
|
} |
||||
|
|
||||
|
let smtpConfig |
||||
|
let templateIdx = 0 |
||||
|
let templateDefinition |
||||
|
let templates = [] |
||||
|
|
||||
|
$: templateTypes = templates.map((template, idx) => ({ |
||||
|
label: template.purpose, |
||||
|
value: idx, |
||||
|
})) |
||||
|
|
||||
|
$: selectedTemplate = templates[templateIdx] |
||||
|
|
||||
|
async function saveSmtp() { |
||||
|
try { |
||||
|
// Save your SMTP config |
||||
|
const response = await api.post(`/api/admin/configs`, smtpConfig) |
||||
|
const json = await response.json() |
||||
|
if (response.status !== 200) throw new Error(json.message) |
||||
|
smtpConfig._rev = json._rev |
||||
|
smtpConfig._id = json._id |
||||
|
|
||||
|
notifications.success(`Settings saved.`) |
||||
|
} catch (err) { |
||||
|
notifications.error(`Failed to save email settings. ${err}`) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async function saveTemplate() { |
||||
|
try { |
||||
|
// Save your SMTP config |
||||
|
const response = await api.post(`/api/admin/template`, selectedTemplate) |
||||
|
const json = await response.json() |
||||
|
if (response.status !== 200) throw new Error(json.message) |
||||
|
selectedTemplate._rev = json._rev |
||||
|
selectedTemplate._id = json._id |
||||
|
|
||||
|
notifications.success(`Template saved.`) |
||||
|
} catch (err) { |
||||
|
notifications.error(`Failed to update template settings. ${err}`) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async function fetchSmtp() { |
||||
|
// fetch the configs for smtp |
||||
|
const smtpResponse = await api.get(`/api/admin/configs/${ConfigTypes.SMTP}`) |
||||
|
const smtpDoc = await smtpResponse.json() |
||||
|
|
||||
|
if (!smtpDoc._id) { |
||||
|
smtpConfig = { |
||||
|
type: ConfigTypes.SMTP, |
||||
|
config: { |
||||
|
auth: { |
||||
|
type: "login", |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
} else { |
||||
|
smtpConfig = smtpDoc |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async function fetchTemplates() { |
||||
|
// fetch the email template definitions |
||||
|
const templatesResponse = await api.get(`/api/admin/template/definitions`) |
||||
|
const templateDefDoc = await templatesResponse.json() |
||||
|
|
||||
|
// fetch the email templates themselves |
||||
|
const emailTemplatesResponse = await api.get(`/api/admin/template/email`) |
||||
|
const emailTemplates = await emailTemplatesResponse.json() |
||||
|
|
||||
|
templateDefinition = templateDefDoc |
||||
|
templates = emailTemplates |
||||
|
} |
||||
|
|
||||
|
onMount(async () => { |
||||
|
await fetchSmtp() |
||||
|
await fetchTemplates() |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<Page> |
||||
|
<header> |
||||
|
<Heading size="M">Email</Heading> |
||||
|
<Body size="S"> |
||||
|
Sending email is not required, but highly recommended for processes such |
||||
|
as password recovery. To setup automated auth emails, simply add the |
||||
|
values below and click activate. |
||||
|
</Body> |
||||
|
</header> |
||||
|
<Divider /> |
||||
|
{#if smtpConfig} |
||||
|
<div class="config-form"> |
||||
|
<Heading size="S">SMTP</Heading> |
||||
|
<Body size="S"> |
||||
|
To allow your app to benefit from automated auth emails, add your SMTP |
||||
|
details below. |
||||
|
</Body> |
||||
|
<Layout gap="S"> |
||||
|
<Heading size="S"> |
||||
|
<span /> |
||||
|
</Heading> |
||||
|
<div class="form-row"> |
||||
|
<Label>Host</Label> |
||||
|
<Input bind:value={smtpConfig.config.host} /> |
||||
|
</div> |
||||
|
<div class="form-row"> |
||||
|
<Label>Port</Label> |
||||
|
<Input type="number" bind:value={smtpConfig.config.port} /> |
||||
|
</div> |
||||
|
<div class="form-row"> |
||||
|
<Label>User</Label> |
||||
|
<Input bind:value={smtpConfig.config.auth.user} /> |
||||
|
</div> |
||||
|
<div class="form-row"> |
||||
|
<Label>Password</Label> |
||||
|
<Input type="password" bind:value={smtpConfig.config.auth.pass} /> |
||||
|
</div> |
||||
|
<div class="form-row"> |
||||
|
<Label>From email address</Label> |
||||
|
<Input type="email" bind:value={smtpConfig.config.from} /> |
||||
|
</div> |
||||
|
<Button cta on:click={saveSmtp}>Save</Button> |
||||
|
</Layout> |
||||
|
</div> |
||||
|
<Divider /> |
||||
|
|
||||
|
<div class="config-form"> |
||||
|
<Heading size="S">Templates</Heading> |
||||
|
<Body size="S"> |
||||
|
Budibase comes out of the box with ready-made email templates to help |
||||
|
with user onboarding. Please refrain from changing the links. |
||||
|
</Body> |
||||
|
<div class="template-controls"> |
||||
|
<Select bind:value={templateIdx} options={templateTypes} /> |
||||
|
<Button cta on:click={saveTemplate}>Save</Button> |
||||
|
</div> |
||||
|
{#if selectedTemplate} |
||||
|
<TextArea bind:value={selectedTemplate.contents} /> |
||||
|
{/if} |
||||
|
</div> |
||||
|
{/if} |
||||
|
</Page> |
||||
|
|
||||
|
<style> |
||||
|
.config-form { |
||||
|
margin-top: 42px; |
||||
|
margin-bottom: 42px; |
||||
|
} |
||||
|
|
||||
|
.form-row { |
||||
|
display: grid; |
||||
|
grid-template-columns: 20% 1fr; |
||||
|
grid-gap: var(--spacing-l); |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: var(--spacing-s); |
||||
|
} |
||||
|
|
||||
|
header { |
||||
|
margin-bottom: 42px; |
||||
|
} |
||||
|
|
||||
|
.template-controls { |
||||
|
display: grid; |
||||
|
grid-template-columns: 80% 1fr; |
||||
|
grid-gap: var(--spacing-xl); |
||||
|
margin-bottom: var(--spacing-xl); |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue