Ghost/ghost/admin/app/components/modals/newsletters/new.hbs

78 lines
3.8 KiB
Handlebars
Raw Normal View History

<div class="modal-content" data-test-modal="create-newsletter">
<header class="modal-header">
<h1>Create newsletter</h1>
</header>
<button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
<div class="modal-body">
<fieldset>
<GhFormGroup @errors={{@data.newsletter.errors}} @hasValidated={{@data.newsletter.hasValidated}} @property="name">
<label for="newsletter-title" class="modal-fullsettings-title">Name</label>
<input
id="newsletter-title"
type="text"
class="gh-input miw-100 form-text"
value={{@data.newsletter.name}}
placeholder="Weekly Roundup"
{{on "input" (fn this.onInput "name")}}
/>
<GhErrorMessage @errors={{@data.newsletter.errors}} @property="name" />
</GhFormGroup>
<GhFormGroup @errors={{@data.newsletter.errors}} @hasValidated={{@data.newsletter.hasValidated}} @property="description">
<label for="newsletter-description" class="modal-fullsettings-title">Description</label>
<textarea
id="newsletter-description"
class="gh-input miw-100 form-text"
{{on "input" (fn this.onInput "description")}}
>{{@data.newsletter.description}}</textarea>
<GhErrorMessage @errors={{@data.newsletter.errors}} @property="description" />
</GhFormGroup>
<GhFormGroup @classNames="flex justify-between items-start mb2">
<div class="mr3">
<label for="opt-in-existing" class="modal-fullsettings-title">Opt-in existing subscribers</label>
<p>
{{#if this.optInExisting}}
{{#let (members-count-fetcher query=(hash filter="newsletters.status:active")) as |countFetcher|}}
This newsletter will be available to <strong>all members</strong>. Your {{#if countFetcher.count}}<strong>{{countFetcher.count}}</strong>{{/if}} existing subscriber{{#if (gt countFetcher.count 1)}}s{{/if}} will also be opted-in to receive it.
{{/let}}
{{else}}
The newsletter will be available to <strong>all new members</strong>. Existing members wont be subscribed, but may visit their account area to opt-in to future emails.
{{/if}}
</p>
</div>
<div class="for-switch small">
<div class="container">
<input
type="checkbox"
id="opt-in-existing"
checked={{this.optInExisting}}
{{on "check" this.setOptInExisting}}
>
<button type="button" class="input-toggle-component" {{on "click" this.toggleOptInExisting}}></button>
</div>
</div>
</GhFormGroup>
</fieldset>
</div>
<div class="modal-footer">
<button class="gh-btn" type="button" {{on "click" @close}}>
<span>Cancel</span>
</button>
<GhTaskButton
@buttonText="Create"
@runningText="Creating"
@successText="Created"
@task={{this.saveTask}}
@idleClass="gh-btn-primary"
@class="gh-btn gh-btn-icon"
{{on-key "cmd+s" this.saveViaKeyboard priority=1}}
{{on-key "Enter" this.saveViaKeyboard priority=1}}
data-test-button="save-newsletter"
/>
</div>
</div>