mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-29 15:12:58 +03:00
6e0be9e175
refs https://github.com/TryGhost/Team/issues/1441 - switched "leave settings" confirmation modal on members email settings screen over to modern modal pattern - removed unused `showEmailDesignSettings` property and `closeEmailDesignSettings()` action on `<Settings::MembersEmailLabs>` component - the used property and action live on the controller, looks like it was a copy/paste hangover when functionality was moved to a component - added newsletter model - includes design-related attributes which are not yet supported by the API but are due to be added - includes `default` attribute but there is no setting for it, due to be removed from the API but it's needed for save not to error for now - set up basic mirage model and endpoints - added validation for main settings to match API validation - added `EditNewsletter` modal - separate tabs for general newsletter settings and design-related settings - used for both creating and editing newsletters - added `/settings/members-email/newsletters/new` and `/settings/members-email/newsletters/:id` routes - both display the `EditNewsletter` modal on top of the members-email settings screen with the appropriate newsletter model - updated `<Settings::MembersEmailLabs::NewsletterManagement>` component to work with real newsletter model instances and the new add/edit routes - removed now-unused `newsletter` service that was providing mocked data for earlier design iteration
167 lines
9.6 KiB
Handlebars
167 lines
9.6 KiB
Handlebars
<section class="gh-main-section">
|
|
<div class="gh-expandable">
|
|
<div class="gh-expandable-block">
|
|
<div class="gh-expandable-header">
|
|
<div>
|
|
<h4 class="gh-expandable-title">Enable newsletter sending</h4>
|
|
<p class="gh-expandable-description">Newsletter features are active, posts can be sent by email</p>
|
|
</div>
|
|
<div class="for-switch">
|
|
<label class="switch">
|
|
<input
|
|
type="checkbox"
|
|
checked={{this.emailNewsletterEnabled}}
|
|
class="gh-input"
|
|
{{on "change" this.toggleEmailNewsletterEnabled}}
|
|
name="email-newsletter-enabled"
|
|
data-test-checkbox="email-newsletter-enabled"
|
|
>
|
|
<span class="input-toggle-component mt1"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{#if this.emailNewsletterEnabled}}
|
|
<Settings::MembersEmailLabs::NewsletterManagement />
|
|
|
|
<section class="gh-main-section">
|
|
<h4 class="gh-main-section-header small bn">General settings</h4>
|
|
<div class="gh-expandable">
|
|
<div class="gh-expandable-block">
|
|
<div class="gh-expandable-header">
|
|
<div>
|
|
<h4 class="gh-expandable-title">Default newsletter recipients</h4>
|
|
<p class="gh-expandable-description">When you publish new content, who do you usually want to send it to?</p>
|
|
</div>
|
|
<button type="button" class="gh-btn" {{on "click" (toggle-action "defaultRecipientsOpen" this)}} data-test-toggle-membersemail>
|
|
<span>{{if this.defaultRecipientsOpen "Close" "Expand"}}</span>
|
|
</button>
|
|
</div>
|
|
<div class="gh-expandable-content">
|
|
{{#liquid-if this.defaultRecipientsOpen}}
|
|
{{#if (gt this.activeNewsletterCount 1)}}
|
|
<div class="form-group">
|
|
<label class="fw6 f8">Default newsletter</label>
|
|
<div class="gh-input"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="fw6 f8">Default member selection</label>
|
|
<div class="gh-setting-richdd-container gh-setting-rich-dropdown">
|
|
<Settings::MembersEmail::DefaultRecipientsSelect
|
|
@recipients={{this.recipientsSelectValue}}
|
|
@segment={{this.settings.editorDefaultEmailRecipientsFilter}}
|
|
@onRecipientsChange={{this.setDefaultEmailRecipients}}
|
|
@onSegmentChange={{this.setDefaultEmailRecipientsFilter}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div class="gh-setting-richdd-container gh-setting-rich-dropdown form-group">
|
|
<Settings::MembersEmail::DefaultRecipientsSelect
|
|
@recipients={{this.recipientsSelectValue}}
|
|
@segment={{this.settings.editorDefaultEmailRecipientsFilter}}
|
|
@onRecipientsChange={{this.setDefaultEmailRecipients}}
|
|
@onSegmentChange={{this.setDefaultEmailRecipientsFilter}}
|
|
/>
|
|
</div>
|
|
{{/if}}
|
|
{{/liquid-if}}
|
|
</div>
|
|
</div>
|
|
|
|
{{#unless this.config.mailgunIsConfigured}}
|
|
<div class="gh-expandable-block">
|
|
<div class="gh-expandable-header">
|
|
<div>
|
|
<h4 class="gh-expandable-title">Mailgun configuration</h4>
|
|
<p class="gh-expandable-description">The Mailgun API is used for bulk email newsletter delivery. <a href="https://ghost.org/docs/faq/mailgun-newsletters/" target="_blank" rel="noopener noreferrer">Why is this required?</a></p>
|
|
</div>
|
|
<button type="button" class="gh-btn" {{on "click" (toggle-action "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 flex">
|
|
<GhFormGroup>
|
|
<div class="flex items-center">
|
|
<GhFormGroup @class="gh-mailgun-region no-margin">
|
|
<label class="fw6 f8">Mailgun region</label>
|
|
<div class="mt1">
|
|
<PowerSelect
|
|
@options={{this.mailgunRegions}}
|
|
@selected={{this.mailgunRegion}}
|
|
@onChange={{this.setMailgunRegion}}
|
|
@class="gh-select"
|
|
@searchEnabled={{false}}
|
|
@triggerComponent="gh-power-select/trigger"
|
|
as |region|
|
|
>
|
|
{{region.flag}} {{region.name}}
|
|
</PowerSelect>
|
|
</div>
|
|
</GhFormGroup>
|
|
<GhFormGroup @class="no-margin">
|
|
<label class="fw6 f8" for="mailgun-domain">Mailgun domain</label>
|
|
<input
|
|
id="mailgun-domain"
|
|
type="text"
|
|
class="gh-input mt1"
|
|
value={{this.mailgunSettings.domain}}
|
|
{{on "input" this.setMailgunDomain}}
|
|
data-test-mailgun-domain-input
|
|
/>
|
|
</GhFormGroup>
|
|
</div>
|
|
<p>Find your Mailgun region and domain
|
|
<a href="https://app.mailgun.com/app/sending/domains" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
|
</p>
|
|
</GhFormGroup>
|
|
<GhFormGroup>
|
|
<label class="fw6 f8" for="mailgun-private-api">Mailgun Private API key</label>
|
|
<input
|
|
id="mailgun-private-api"
|
|
type="password"
|
|
value={{this.mailgunSettings.apiKey}}
|
|
{{on "input" this.setMailgunApiKey}}
|
|
class="gh-input mt1 password"
|
|
autocomplete="new-password"
|
|
data-test-mailgun-api-key-input
|
|
/>
|
|
<p>Find your Mailgun API keys
|
|
<a href="https://app.mailgun.com/app/account/security/api_keys" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
|
</p>
|
|
</GhFormGroup>
|
|
</div>
|
|
{{/liquid-if}}
|
|
</div>
|
|
</div>
|
|
{{/unless}}
|
|
|
|
<div class="gh-expandable-block">
|
|
<div class="gh-expandable-header">
|
|
<div>
|
|
<h4 class="gh-expandable-title">Enable newsletter open-rate</h4>
|
|
<p class="gh-expandable-description">Track how many members are reading your emails</p>
|
|
</div>
|
|
<div class="for-switch">
|
|
<label class="switch" data-test-label="email-track-opens">
|
|
<input
|
|
id="email-track-opens"
|
|
type="checkbox"
|
|
checked={{this.settings.emailTrackOpens}}
|
|
class="gh-input"
|
|
{{on "change" this.toggleEmailTrackOpens}}
|
|
data-test-checkbox="email-track-opens"
|
|
>
|
|
<span class="input-toggle-component mt1"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{/if}} |