Ghost/ghost/admin/app/templates/components/gh-post-settings-menu/email.hbs

<div class="settings-menu-header subview">
    <button {{on "click" this.close}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
    <h4>Email newsletter</h4>
    <div style="width:23px;"></div>
</div>

<div class="settings-menu-content settings-menu-email">
    {{#if this.post.email.isSuccess}}
        {{!-- Mail has already been sent --}}
        <div class="ba b--whitegrey bg-white br3">
            <div class="flex pa5 pt4 pb4 items-center bb b--whitegrey">
                <div class="w16 flex flex-column items-center">
                    <span class="db mr4 mt3">{{svg-jar "send-email" class="w7 h7 stroke-darkgrey"}}</span>
                </div>
                <div class="flex flex-column justify-center">
                    <p class="ma0 pa0 midgrey">Post was sent by email to</p>
                    <p class="ma0 pa0 f5 lh-solid">{{pluralize this.post.email.emailCount "member"}}</p>
                </div>
            </div>
            <div class="pa5 pt3 pb3 f7 bb b--whitegrey">
                <table class="ma0" style="table-layout: fixed">
                    <tbody>
                        <tr>
                            <td class="pa1 pl0 fw7 f8 w16 v-top lh-copy">Subject:</td>
                            <td class="pa1 pa0 word-wrap midgrey v-top lh-copy">{{this.post.email.subject}}</td>
                        </tr>
                        <tr>
                            <td class="pa1 pl0 fw7 f8 w16 nowrap v-top lh-copy">Sent:</td>
                            <td class="pa1 pa0 word-wrap midgrey v-top lh-copy">{{gh-format-post-time this.post.email.createdAtUTC}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="pa5 pt3 pb3">
                <p class="ma0 pa0"><button {{on "click" this.toggleEmailPreview}} class="blue">View sent email</button></p>
            </div>
        </div>
    {{else if (or this.retryEmail.isRunning this.post.email.isFailure)}}
        {{!-- Mail failed to send --}}

        <div class="ba b--whitegrey bg-white br3 gh-box-error-border">
            <div class="flex pa5 pt4 pb4 items-center bb b--whitegrey">
                <div class="w16 flex flex-column items-center">
                    <span class="db mr4 mt3">{{svg-jar "warning" class="w7 h7 fill-red"}}</span>
                </div>
                <div class="flex flex-column justify-center">
                    <p class="ma0 pa0 midgrey">Post failed to send to</p>
                    <p class="ma0 pa0 f5 lh-solid">{{pluralize this.post.email.emailCount "member"}}</p>
                </div>
            </div>
            <div class="pa5 pt3 pb3 f7 bb b--whitegrey">
                <p class="mb2 lh-copy">
                    {{#if this.session.user.isOwner}}
                        Email failed to send when publishing this post. Please <LinkTo @route="settings.labs">check your Mailgun configuration</LinkTo> if the error persists.
                    {{else}}
                        Email failed to send when publishing this post. Please check your Mailgun configuration if the error persists.
                    {{/if}}
                </p>
                <p class="ma0 pa0">
                    <table class="ma0" style="table-layout: fixed">
                        <tbody>
                            <tr>
                                <td class="pa1 pl0 fw7 f8 w16 v-top lh-copy">Error:</td>
                                <td class="pa1 pl0 word-wrap midgrey v-top lh-copy">{{this.post.email.error}}</td>
                            </tr>
                        </tbody>
                    </table>
                </p>
            </div>
            <div class="pa5 pt3 pb3 f7 bb b--whitegrey">
                <table class="ma0" style="table-layout: fixed">
                    <tbody>
                        <tr>
                            <td class="pa1 pl0 fw7 f8 w16 v-top lh-copy">Subject:</td>
                            <td class="pa1 pl0 truncate midgrey v-top lh-copy">{{this.post.email.subject}}</td>
                        </tr>
                        <tr>
                            <td class="pa1 pl0 fw7 f8 w16 nowrap v-top lh-copy">Tried:</td>
                            <td class="pa1 pl0 truncate midgrey v-top lh-copy">{{gh-format-post-time this.post.email.createdAtUTC}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="pa5 pt3 pb3 flex justify-between items center">
                <button {{on "click" this.toggleEmailPreview}} class="blue">View email</button>
                <GhTaskButton @buttonText="Retry send" @runningText="Sending..." @task={{this.retryEmail}}
                    @class="gh-btn gh-btn-icon" data-test-button="retry-email" />
            </div>
        </div>
    {{else}}
        {{!-- Mail not sent yet --}}
        {{#if this.mailgunError}}
            <p class="gh-box gh-box-warning settings-menu-mailgun-warning">
                {{svg-jar "info" class="w5 h5 fill-yellow nl1"}}
                You need to configure Mailgun in {{#link-to "settings.labs" data-test-nav="labs"}}Labs → Members settings{{/link-to}} to enable email newsletters.
            </p>
        {{/if}}

        <form {{action "discardEnter" on="submit"}}>
            {{#gh-form-group errors=this.post.errors hasValidated=this.post.hasValidated property="emailSubject"}}
                <label for="og-title">Subject</label>
                {{gh-text-input
                    class="post-setting-email-subject"
                    id="email-subject"
                    name="post-setting-email-subject"
                    placeholder=(truncate this.emailSubject 40)
                    value=(readonly this.emailSubjectScratch)
                    input=(action (mut this.emailSubjectScratch) value="target.value")
                    focus-out=(action "setEmailSubject" this.emailSubjectScratch)
                    stopEnterKeyDownPropagation=true
                    disabled=this.mailgunError
                    data-test-field="email-subject"}}
                {{gh-error-message errors=this.post.errors property="emailSubject" data-test-error="email-subject"}}
            {{/gh-form-group}}

            <div class="form-group">
                <div class="flex">
                    <label class="nowrap flex-auto">Test email</label>
                    <button type="button" class="gh-btn gh-btn-link settings-menu-email-button" {{on "click" this.toggleEmailPreview}} data-test-button="toggle-email-preview">
                        <span class="blue">
                            Preview in browser
                        </span>
                    </button>
                </div>

                <div class="{{if mailgunError "disabled"}}">
                    {{gh-text-input
                        class="post-setting-email-test"
                        id="email-test"
                        name="post-setting-email-test"
                        placeholder="noreply@example.com"
                        value=this.testEmailAddress
                        stopEnterKeyDownPropagation=true
                        disabled=this.mailgunError
                        data-test-field="email-test"}}

                    {{#if this.sendTestEmailError}}
                        <div class="error"><p class="response">{{this.sendTestEmailError}}</p></div>
                    {{/if}}

                    {{gh-task-button "Send test email"
                        task=this.sendTestEmail
                        successText="Email sent"
                        runningText="Sending..."
                        class="gh-btn w-100 mt2 gh-btn-icon"
                        disabled=this.mailgunError
                        data-test-send-test-mail=true
                    }}
                </div>
            </div>
        </form>
    {{/if}}
</div>