Ghost/ghost/admin/app/components/gh-members-email-setting.hbs
Kevin Ansfield 917c86db3b Changed mailgun API key wording to explicitly state "Private API key"
no issue

- Mailgun now also provides per-domain Sending API Keys which has caused some confusion because they will allow sending emails but won't allow for analytics to be fetched unlike the Private API Key
2021-06-28 17:26:32 +01:00

200 lines
11 KiB
Handlebars

<div class="gh-main-section">
<h4 class="gh-main-section-header small bn"></h4>
<section class="gh-expandable">
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Email design</h4>
<p class="gh-expandable-description">Customize the look and feel of email newsletters</p>
</div>
<button type="button" class="gh-btn gh-btn-green" {{on "click" @toggleEmailDesignSettings}} data-test-toggle-membersFrom><span> Customize </span></button>
</div>
</div>
</section>
</div>
<div class="gh-main-section">
<h4 class="gh-main-section-header small bn">Email</h4>
<section class="gh-expandable">
<Settings::EmailDefaultRecipients
@expanded={{this.emailRecipientsExpanded}}
@toggleExpansion={{this.toggleEmailRecipientsExpansion}}
/>
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Email addresses</h4>
<p class="gh-expandable-description">Contact information used for newsletters and member login emails</p>
</div>
<button type="button" class="gh-btn" {{action (toggle "membersFromOpen" this)}} data-test-toggle-membersFrom><span>{{if this.membersFromOpen "Close" "Expand"}}</span></button>
</div>
<div class="gh-expandable-content">
{{#liquid-if this.membersFromOpen}}
<div>
<GhFormGroup>
<label class="fw6 f8">Support email address</label>
<div class="flex items-center justify-center mt1">
<GhTextInput
@value={{readonly this.supportAddress}}
@input={{action "setSupportAddress" value="target.value"}}
@class="gh-labs-members-emailinput"
/>
<GhTaskButton
@buttonText="Update support address"
@runningText="Sending..."
@successText="Confirmation email sent"
@disabled={{this.disableUpdateSupportAddressButton}}
@task={{this.updateSupportAddress}}
@class="gh-btn gh-btn-green gh-btn-icon gh-btn-textfield-group gh-labs-members-emaildropdown"
data-test-button="update-support-address"
/>
</div>
</GhFormGroup>
<div class="nt5 mb5">
<span class="mt1 fw4 f8 midgrey">
How members can reach you for help with their account (public)
</span>
</div>
{{#if this.showSupportAddressConfirmation}}
<div class="flex items-center green-d1 nt3 lh-1">
{{svg-jar "check-circle" class="w4 h4 mr1 stroke-green-d1"}} <span class="nudge-left--2">Check your inbox and confirm before saving your settings</span>
</div>
{{/if}}
</div>
<div>
<GhFormGroup>
<label class="fw6 f8">Newsletter email address</label>
<div class="flex items-center justify-center mt1">
<GhTextInput
@value={{readonly this.fromAddress}}
@input={{action "setFromAddress" value="target.value"}}
@class="gh-labs-members-emailinput"
/>
<GhTaskButton
@buttonText="Update newsletter address"
@runningText="Sending..."
@successText="Confirmation email sent"
@disabled={{this.disableUpdateFromAddressButton}}
@task={{this.updateFromAddress}}
@class="gh-btn gh-btn-icon gh-btn-green gh-btn-textfield-group gh-labs-members-emaildropdown"
data-test-button="update-from-address"
/>
</div>
</GhFormGroup>
<div class="nt5 mb5">
<span class="mt1 fw4 f8 midgrey">
The address your newsletter posts are sent from
</span>
</div>
{{#if this.showFromAddressConfirmation}}
<div class="flex items-center green-d1 nt3 lh-1">
{{svg-jar "check-circle" class="w4 h4 mr1 stroke-green-d1"}} <span class="nudge-left--2">Check your inbox and confirm before saving your settings</span>
</div>
{{/if}}
</div>
<div class="mt8 mb8">
<GhFormGroup @class="for-select gh-labs-members-defaultemaildd">
<label class="fw6 f8" for="reply-address">Newsletter replies go to</label>
<span class="gh-select mt1">
{{one-way-select this.selectedReplyAddress
id="reply-address"
name="reply-address"
options=(readonly this.replyAddresses)
optionValuePath="value"
optionLabelPath="label"
update=(action "setReplyAddress")
}}
{{svg-jar "arrow-down-small"}}
</span>
</GhFormGroup>
<div class="nt5 mb5">
<span class="mt1 fw4 f8 midgrey">
Where you receive responses to newsletters
</span>
</div>
</div>
{{/liquid-if}}
</div>
</div>
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Enable newsletter open-rate analytics</h4>
<p class="gh-expandable-description">Track how many members are reading your emails</p>
</div>
<div class="for-switch">
<label class="switch" for="email-track-opens" {{on "click" (action "toggleEmailTrackOpens")}}>
<input type="checkbox" checked={{this.emailTrackOpens}} class="gh-input" {{on "click" (action "toggleEmailTrackOpens")}} name="email-track-opens" data-test-checkbox="email-track-opens">
<span class="input-toggle-component mt1"></span>
</label>
</div>
</div>
</div>
{{#unless this.mailgunIsConfigured}}
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Email newsletter settings</h4>
<p class="gh-expandable-description">The <a href="https://www.mailgun.com/" target="_blank" rel="nofollow noopener">Mailgun API</a> is used for bulk email newsletter delivery. <a href="https://ghost.org/docs/faq/mailgun-newsletters/" target="_blank" rel="noopener">Why is this required?</a></p>
</div>
<button type="button" class="gh-btn" {{action (toggle "membersEmailOpen" this)}} data-test-toggle-membersemail>
<span>{{if this.membersEmailOpen "Close" "Expand"}}</span>
</button>
</div>
<div class="gh-expandable-content">
{{#liquid-if this.membersEmailOpen}}
<div class="flex flex-column w-100 w-50-l flex">
<div class="flex items-center">
<GhFormGroup @class="gh-labs-mailgun-region">
<label class="fw6 f8">Mailgun region</label>
<div class="mt1">
<PowerSelect
@options={{this.mailgunRegions}}
@selected={{this.mailgunRegion}}
@onChange={{action "setMailgunRegion"}}
@searchEnabled={{false}}
@triggerComponent="gh-power-select/trigger"
as |region|
>
{{region.flag}} {{region.name}}
</PowerSelect>
</div>
</GhFormGroup>
<GhFormGroup>
<label class="fw6 f8">Mailgun domain</label>
<GhTextInput
@value={{readonly this.mailgunSettings.domain}}
@input={{action "setMailgunDomain"}}
@class="mt1"
data-test-mailgun-domain-input={{true}}
/>
</GhFormGroup>
</div>
<div class="nt5 mb5">
<a href="https://app.mailgun.com/app/sending/domains" target="_blank" class="mt1 fw4 f8">
Find your Mailgun region and domain here &raquo;
</a>
</div>
<GhFormGroup>
<label class="fw6 f8">Mailgun Private API key</label>
<GhTextInput
@type="password"
@value={{readonly this.mailgunSettings.apiKey}}
@input={{action "setMailgunApiKey"}}
@class="mt1 password" @autocomplete="new-password"
data-test-mailgun-api-key-input={{true}}
/>
<a href="https://app.mailgun.com/app/account/security/api_keys" target="_blank" class="mt1 fw4 f8">
Find your Mailgun API keys here &raquo;
</a>
</GhFormGroup>
</div>
{{/liquid-if}}
</div>
</div>
{{/unless}}
</section>
</div>