fix double page component issue in email section

This commit is contained in:
Keviin Åberg Kultalahti 2021-05-25 15:25:56 +02:00
parent f1b4bcc440
commit b6cddb5adc
3 changed files with 127 additions and 127 deletions

View File

@ -1,7 +1,7 @@
<script> <script>
import { Page } from "@budibase/bbui" import { Page } from "@budibase/bbui"
import { auth } from "stores/portal" import { auth } from "stores/portal"
import { redirect } from "@roxi/routify" import { page, redirect } from "@roxi/routify"
// Only admins allowed here // Only admins allowed here
$: { $: {
@ -9,8 +9,12 @@
$redirect("../") $redirect("../")
} }
} }
$: console.log($page)
</script> </script>
{#if $auth.isAdmin} {#if $auth.isAdmin}
<slot /> <Page wide={$page.path.includes("email/:template")}>
<slot />
</Page>
{/if} {/if}

View File

@ -69,71 +69,69 @@
} }
</script> </script>
<Page wide> <Layout gap="XS" noPadding>
<Layout gap="XS" noPadding> <div class="back">
<div class="back"> <ActionButton
<ActionButton on:click={() => $goto("./")}
on:click={() => $goto("./")} quiet
quiet size="S"
size="S" icon="BackAndroid"
icon="BackAndroid"
>
Back to email settings
</ActionButton>
</div>
<header>
<Heading>
Email Template: {template}
</Heading>
<Button cta on:click={saveTemplate}>Save</Button>
</header>
<Body
>Change the email template here. Add dynamic content by using the bindings
menu on the right.</Body
> >
</Layout> Back to email settings
<Tabs selected="Edit" on:select={fixMountBug}> </ActionButton>
<Tab title="Edit"> </div>
<div class="template-editor"> <header>
<Editor <Heading>
editorHeight={800} Email Template: {template}
bind:this={htmlEditor} </Heading>
mode="handlebars" <Button cta on:click={saveTemplate}>Save</Button>
on:change={e => { </header>
selectedTemplate.contents = e.detail.value <Body
}} >Change the email template here. Add dynamic content by using the bindings
value={selectedTemplate?.contents} menu on the right.</Body
/> >
<div class="bindings-editor"> </Layout>
<Detail size="L">Bindings</Detail> <Tabs selected="Edit" on:select={fixMountBug}>
{#if mounted} <Tab title="Edit">
<Tabs selected="Template"> <div class="template-editor">
<Tab title="Template"> <Editor
<TemplateBindings editorHeight={800}
title="Template Bindings" bind:this={htmlEditor}
bindings={templateBindings} mode="handlebars"
onBindingClick={setTemplateBinding} on:change={e => {
/> selectedTemplate.contents = e.detail.value
</Tab> }}
<Tab title="Common"> value={selectedTemplate?.contents}
<TemplateBindings />
title="Common Bindings" <div class="bindings-editor">
bindings={$email?.definitions?.bindings?.common} <Detail size="L">Bindings</Detail>
onBindingClick={setTemplateBinding} {#if mounted}
/> <Tabs selected="Template">
</Tab> <Tab title="Template">
</Tabs> <TemplateBindings
{/if} title="Template Bindings"
</div> bindings={templateBindings}
onBindingClick={setTemplateBinding}
/>
</Tab>
<Tab title="Common">
<TemplateBindings
title="Common Bindings"
bindings={$email?.definitions?.bindings?.common}
onBindingClick={setTemplateBinding}
/>
</Tab>
</Tabs>
{/if}
</div> </div>
</Tab> </div>
<Tab title="Preview"> </Tab>
<div class="preview"> <Tab title="Preview">
<iframe srcdoc={previewContent} /> <div class="preview">
</div> <iframe srcdoc={previewContent} />
</Tab> </div>
</Tabs> </Tab>
</Page> </Tabs>
<style> <style>
.template-editor { .template-editor {

View File

@ -76,71 +76,69 @@
fetchSmtp() fetchSmtp()
</script> </script>
<Page> <Layout>
<Layout> <Layout noPadding gap="XS">
<Layout noPadding gap="XS"> <Heading size="M">Email</Heading>
<Heading size="M">Email</Heading> <Body>
<Body> Sending email is not required, but highly recommended for processes such
Sending email is not required, but highly recommended for processes such as password recovery. To setup automated auth emails, simply add the
as password recovery. To setup automated auth emails, simply add the values below and click activate.
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.
</Body> </Body>
</Layout> </Layout>
<Divider /> <Layout gap="XS" noPadding>
{#if smtpConfig} <div class="form-row">
<Layout gap="XS" noPadding> <Label size="L">Host</Label>
<Heading size="S">SMTP</Heading> <Input bind:value={smtpConfig.config.host} />
<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> </div>
<Divider /> <div class="form-row">
<Layout gap="XS" noPadding> <Label size="L">Port</Label>
<Heading size="S">Templates</Heading> <Input type="number" bind:value={smtpConfig.config.port} />
<Body size="S"> </div>
Budibase comes out of the box with ready-made email templates to help <div class="form-row">
with user onboarding. Please refrain from changing the links. <Label size="L">User</Label>
</Body> <Input bind:value={smtpConfig.config.auth.user} />
</Layout> </div>
<Table <div class="form-row">
{customRenderers} <Label size="L">Password</Label>
data={$email.templates} <Input type="password" bind:value={smtpConfig.config.auth.pass} />
schema={templateSchema} </div>
{loading} <div class="form-row">
on:click={({ detail }) => $goto(`./${detail.purpose}`)} <Label size="L">From email address</Label>
allowEditRows={false} <Input type="email" bind:value={smtpConfig.config.from} />
allowSelectRows={false} </div>
allowEditColumns={false} </Layout>
/> <div>
{/if} <Button cta on:click={saveSmtp}>Save</Button>
</Layout> </div>
</Page> <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>
<style> <style>
.form-row { .form-row {