fixes layout issues in email templates
This commit is contained in:
parent
f730900ed5
commit
8f6205a4db
|
@ -1,11 +1,12 @@
|
|||
<script>
|
||||
import {
|
||||
Button,
|
||||
Detail,
|
||||
Heading,
|
||||
notifications,
|
||||
Icon,
|
||||
ActionButton,
|
||||
Body,
|
||||
Page,
|
||||
Layout,
|
||||
notifications,
|
||||
Tabs,
|
||||
Tab,
|
||||
} from "@budibase/bbui"
|
||||
|
@ -46,8 +47,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Page wide gap="L">
|
||||
<div class="backbutton" on:click={() => $goto("./")}>
|
||||
<!-- <div class="backbutton" on:click={() => $goto("./")}>
|
||||
<Icon name="BackAndroid" />
|
||||
<span>Back</span>
|
||||
</div>
|
||||
|
@ -56,7 +56,25 @@
|
|||
Email Template: {template}
|
||||
</Heading>
|
||||
<Button cta on:click={saveTemplate}>Save</Button>
|
||||
</header>
|
||||
</header> -->
|
||||
<Page wide>
|
||||
<Layout gap="XS" noPadding>
|
||||
<div class="back">
|
||||
<ActionButton
|
||||
on:click={() => $goto("./")}
|
||||
quiet
|
||||
size="S"
|
||||
icon="BackAndroid"
|
||||
>
|
||||
Back to email settings
|
||||
</ActionButton>
|
||||
</div>
|
||||
<Heading>Email Template: {template}</Heading>
|
||||
<Body
|
||||
>Change the email template here. you can insert bindings (email, logo url,
|
||||
etc.) from the list on the right</Body
|
||||
>
|
||||
</Layout>
|
||||
<Tabs {selected}>
|
||||
<Tab title="Edit">
|
||||
<div class="template-editor">
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
Heading,
|
||||
Divider,
|
||||
Label,
|
||||
Page,
|
||||
notifications,
|
||||
Layout,
|
||||
Input,
|
||||
|
@ -91,69 +92,71 @@
|
|||
})
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<Layout noPadding gap="XS">
|
||||
<Heading size="M">Email</Heading>
|
||||
<Body>
|
||||
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>
|
||||
</Layout>
|
||||
<Divider />
|
||||
{#if smtpConfig}
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading size="S">SMTP</Heading>
|
||||
<Body size="S">
|
||||
To allow your app to benefit from automated auth emails, add your SMTP
|
||||
details below.
|
||||
<Page>
|
||||
<Layout>
|
||||
<Layout noPadding gap="XS">
|
||||
<Heading size="M">Email</Heading>
|
||||
<Body>
|
||||
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>
|
||||
</Layout>
|
||||
<Layout gap="XS" noPadding>
|
||||
<div class="form-row">
|
||||
<Label size="L">Host</Label>
|
||||
<Input bind:value={smtpConfig.config.host} />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<Label size="L">Port</Label>
|
||||
<Input type="number" bind:value={smtpConfig.config.port} />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<Label size="L">User</Label>
|
||||
<Input bind:value={smtpConfig.config.auth.user} />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<Label size="L">Password</Label>
|
||||
<Input type="password" bind:value={smtpConfig.config.auth.pass} />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<Label size="L">From email address</Label>
|
||||
<Input type="email" bind:value={smtpConfig.config.from} />
|
||||
</div>
|
||||
</Layout>
|
||||
<div>
|
||||
<Button cta on:click={saveSmtp}>Save</Button>
|
||||
</div>
|
||||
<Divider />
|
||||
<Layout gap="XS" noPadding>
|
||||
<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>
|
||||
</Layout>
|
||||
<Table
|
||||
{customRenderers}
|
||||
data={$email.templates}
|
||||
schema={templateSchema}
|
||||
{loading}
|
||||
on:click={({ detail }) => $goto(`./${detail.purpose}`)}
|
||||
allowEditRows={false}
|
||||
allowSelectRows={false}
|
||||
allowEditColumns={false}
|
||||
/>
|
||||
{/if}
|
||||
</Layout>
|
||||
{#if smtpConfig}
|
||||
<Layout gap="XS" noPadding>
|
||||
<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>
|
||||
<Layout gap="XS" noPadding>
|
||||
<div class="form-row">
|
||||
<Label size="L">Host</Label>
|
||||
<Input bind:value={smtpConfig.config.host} />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<Label size="L">Port</Label>
|
||||
<Input type="number" bind:value={smtpConfig.config.port} />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<Label size="L">User</Label>
|
||||
<Input bind:value={smtpConfig.config.auth.user} />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<Label size="L">Password</Label>
|
||||
<Input type="password" bind:value={smtpConfig.config.auth.pass} />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<Label size="L">From email address</Label>
|
||||
<Input type="email" bind:value={smtpConfig.config.from} />
|
||||
</div>
|
||||
</Layout>
|
||||
<div>
|
||||
<Button cta on:click={saveSmtp}>Save</Button>
|
||||
</div>
|
||||
<Divider />
|
||||
<Layout gap="XS" noPadding>
|
||||
<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>
|
||||
</Layout>
|
||||
<Table
|
||||
{customRenderers}
|
||||
data={$email.templates}
|
||||
schema={templateSchema}
|
||||
{loading}
|
||||
on:click={({ detail }) => $goto(`./${detail.purpose}`)}
|
||||
allowEditRows={false}
|
||||
allowSelectRows={false}
|
||||
allowEditColumns={false}
|
||||
/>
|
||||
{/if}
|
||||
</Layout>
|
||||
</Page>
|
||||
|
||||
<style>
|
||||
.form-row {
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
<script>
|
||||
import { Page } from "@budibase/bbui"
|
||||
</script>
|
||||
|
||||
<Page>
|
||||
<slot />
|
||||
</Page>
|
Loading…
Reference in New Issue