Ghost/ghost/admin/app/components/gh-members-lab-setting.hbs

<div class="flex flex-column b--whitegrey bt">

    <section class="bb b--whitegrey pa5">
        {{#if this.stripeDirect}}
            <div class="flex justify-between">
                <div>
                    <h4 class="gh-setting-title">Connect to Stripe</h4>
                    <p class="gh-setting-desc pa0 ma0">Configure API keys to create subscriptions and take payments</p>
                </div>
                <div>
                    <button type="button" class="gh-btn" {{action (toggle "membersStripeOpen" this)}} data-test-toggle-membersstripe><span>{{if this.membersStripeOpen "Close" "Expand"}}</span></button>
                </div>
            </div>

            {{#liquid-if this.membersStripeOpen}}
                <div class="flex flex-column flex-row-l items-start justify-between mb4 mt6">
                    <div class="w-100 w-50-l">
                        <div class="mb4">
                            <label class="fw6 f8">Stripe Publishable key</label>
                            <GhTextInput
                                @type="password"
                                @value={{readonly this.subscriptionSettings.stripeConfig.public_token}}
                                @input={{action "setSubscriptionSettings" "public_token"}}
                                @class="mt1 password"
                            />
                        </div>
                        <div class="nudge-top--3">
                            <label class="fw6 f8 mt4">Stripe Secret key</label>
                            <GhTextInput
                                @type="password"
                                @value={{readonly this.subscriptionSettings.stripeConfig.secret_token}}
                                @input={{action "setSubscriptionSettings" "secret_token"}}
                                @class="mt1 password"
                            />
                            <a href="https://dashboard.stripe.com/account/apikeys" target="_blank" class="mt1 fw4 f8">
                                Find your Stripe API keys here &raquo;
                            </a>
                        </div>
                    </div>
                    <div class="ml0 ml5-l mt6">
                        <div class="gh-members-stripe-info">
                            <div class="gh-members-stripe-info-header">
                                <h4>How you get paid</h4>
                                {{svg-jar "stripe-verified-partner-badge" class="gh-members-stripe-badge"}}
                            </div>
                            <p class="f8 mt2 mb0">
                                Stripe is our exclusive direct payments partner.<br />
                                Ghost collects <strong>no fees</strong> on any payments! If you don’t have a Stripe account yet, you can <a href="https://stripe.com" target="_blank"  rel="noopener" class="gh-members-stripe-link">sign up here</a>.
                            </p>
                        </div>
                    </div>
                </div>
            {{/liquid-if}}
        {{else}}
            <div class="flex justify-between">
                <div>
                    <h4 class="gh-setting-title">Connect to Stripe</h4>
                    {{#if this.stripeConnectIntegration}}
                        <p class="gh-setting-desc pa0 ma0">
                            {{#if this.stripeConnectSuccess}}
                                {{svg-jar "check-circle" class="stroke-green w4 h4 nudge-top--3"}} <span class="green-d1">Successfully connected to {{this.stripeConnectIntegration.name}}</span>
                            {{else}}
                                Connected to <a href="https://dashboard.stripe.com/{{this.stripeConnectIntegration.id}}" target="_blank">{{this.stripeConnectIntegration.name}}</a>
                            {{/if}}

                            {{#unless this.stripeConnectIntegration.livemode}}
                                <span class="gh-members-connect-testmodelabel">Test mode</span>
                            {{/unless}}
                        </p>
                    {{else}}
                        <p class="gh-setting-desc pa0 ma0">Connect to Stripe to create subscriptions and take payments</p>
                    {{/if}}
                </div>
                <div>
                    <button type="button" class="gh-btn" {{action (toggle "membersStripeOpen" this)}} data-test-toggle-membersstripe><span>{{if this.membersStripeOpen "Close" "Expand"}}</span></button>
                </div>
            </div>

            {{#liquid-if this.membersStripeOpen}}
            <div class="mb4 mt6">
                <div class="flex flex-column flex-row-l items-start justify-between">
                    <div class="w-100 w-50-l">
                        <label class="fw6 f8">Generate secure key</label>
                        <div class="flex items-center mb4 justify-between gh-members-connectbutton-container mt2">
                            <a href="{{if this.stripeConnectTestMode this.testStripeConnectAuthUrl this.liveStripeConnectAuthUrl}}" class="stripe-connect light-blue" target="_blank"><span>Connect with Stripe</span></a>
                            <div class="ml2 flex items-center flex-nowrap">
                                <span class="mr2 f8 midgrey nowrap {{if this.stripeConnectTestMode "gh-members-connect-testmodeon"}}">{{if this.stripeConnectTestMode "Using" "Use"}} test mode</span>
                                <div class="for-switch small">
                                    <label class="switch" for="stripe-connect-test-mode" {{action (toggle "stripeConnectTestMode" this) bubbles="false"}}>
                                        <input type="checkbox" class="gh-input" checked={{this.stripeConnectTestMode}} onclick={{action (toggle "stripeConnectTestMode" this)}} data-test-checkbox="stripe-connect-test-mode">
                                        <span class="input-toggle-component mt1"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="nudge-top--3">
                            <GhTextarea
                                @class="gh-members-stripe-connect-token"
                                @placeholder="Paste your secure key here"
                                @input={{action "setStripeConnectIntegrationToken" "stripe_connect_integration_token"}}
                            />
                            {{#if this.stripeConnectError}}<p class="mb0 mt2 f8 red">{{this.stripeConnectError}}</p>{{/if}}
                        </div>
                    </div>
                    <div class="mt5 mt5-m mt8-l ml0 ml5-l">
                        <div class="gh-members-stripe-info">
                            <div class="gh-members-stripe-info-header">
                                <h4>How you get paid</h4>
                                {{svg-jar "stripe-verified-partner-badge" class="gh-members-stripe-badge"}}
                            </div>
                            <p class="f8 mt2 mb0">
                                Stripe is our exclusive direct payments partner.<br />
                                Ghost collects <strong>no fees</strong> on any payments! If you don’t have a Stripe account yet, you can <a href="https://stripe.com" target="_blank"  rel="noopener" class="gh-members-stripe-link">sign up here</a>.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="gh-members-connect-savecontainer {{if this.settings.stripeConnectIntegrationToken "expanded"}}">
                    <GhTaskButton @buttonText="Save Stripe settings"
                                @task={{this.saveStripeSettings}}
                                @successText="Saved"
                                @disabled={{is-empty this.settings.stripeConnectIntegrationToken}}
                                @runningText="Saving"
                                @class="gh-btn gh-btn-blue gh-btn-icon"
                            />
                </div>
            </div>
            {{/liquid-if}}
        {{/if}}
    </section>

    <section class="bb b--whitegrey pa5">
        <div class="flex justify-between">
            <div>
                <h4 class="gh-setting-title">Subscription pricing</h4>
                <p class="gh-setting-desc pa0 ma0">Set monthly and yearly recurring subscription prices</p>
            </div>
            <div>
                <button type="button" class="gh-btn" {{action (toggle "membersPricingOpen" this)}} data-test-toggle-memberspricing><span>{{if this.membersPricingOpen "Close" "Expand"}}</span></button>
            </div>
        </div>

        {{#liquid-if this.membersPricingOpen}}
            <div class="w-100 w-50-l flex flex-column flex-row-ns mt8">
                <div class="w-100">
                    <GhFormGroup @class="for-select">
                        <label class="fw6 f8"for="currency">Plan currency</label>
                        <span class="gh-select mt1">
                            {{one-way-select this.selectedCurrency
                                id="currency"
                                name="currency"
                                options=(readonly this.currencies)
                                optionValuePath="value"
                                optionLabelPath="label"
                                update=(action "setSubscriptionSettings" "currency")
                            }}
                            {{svg-jar "arrow-down-small"}}
                        </span>
                    </GhFormGroup>
                </div>
            </div>
            <div class="w-100 w-50-l flex flex-column flex-row-ns">
                <div class="w-100 w-50-ns mr3-ns">
                    <GhFormGroup>
                    <label class="fw6 f8">Monthly price</label>

                    <div class="flex items-center justify-center mt1 gh-input-group gh-labs-price-label">
                        <GhTextInput
                            @value={{readonly this.subscriptionSettings.stripeConfig.plans.monthly.amount}}
                            @type="number"
                            @input={{action "setSubscriptionSettings" "month"}}
                        />
                        <span class="gh-input-append"><span class="ttu">{{this.subscriptionSettings.stripeConfig.plans.monthly.currency}}</span>/month</span>
                    </div>
                    </GhFormGroup>
                </div>
                <div class="w-100 w-50-ns ml2-ns">
                    <GhFormGroup @class="description-container">
                    <label class="fw6 f8">Yearly price</label>
                    <div class="flex items-center justify-center mt1 gh-input-group gh-labs-price-label">
                        <GhTextInput
                            @value={{readonly this.subscriptionSettings.stripeConfig.plans.yearly.amount}}
                            @type="number"
                            @input={{action "setSubscriptionSettings" "year"}}
                        />
                        <span class="gh-input-append"><span class="ttu">{{this.subscriptionSettings.stripeConfig.plans.yearly.currency}}</span>/year</span>
                    </div>
                    </GhFormGroup>
                </div>
            </div>
        {{/liquid-if}}
    </section>

    <section class="bb b--whitegrey pa5">
        <div class="flex justify-between">
            <div>
                <h4 class="gh-setting-title">Allow free member signup</h4>
                <p class="gh-setting-desc pa0 ma0">If disabled, members can only be signed up via payment checkout or API integration</p>
            </div>
            <div>
                <div class="for-switch">
                    <label class="switch" for="members-allow-self-signup" {{action "setSubscriptionSettings" "allowSelfSignup" bubbles="false"}}>
                        <input type="checkbox" checked={{this.subscriptionSettings.allowSelfSignup}} class="gh-input" onclick={{action "setSubscriptionSettings" "allowSelfSignup"}} data-test-checkbox="members-allow-self-signup">
                        <span class="input-toggle-component mt1"></span>
                    </label>
                </div>
            </div>
        </div>
    </section>

    <section class="bb b--whitegrey pa5">
        <div class="flex justify-between">
            <div>
                <h4 class="gh-setting-title">Default post access</h4>
                <p class="gh-setting-desc pa0 ma0">When a new post is created, who should have access to it?</p>
            </div>
            <div>
                <button type="button" class="gh-btn" {{action (toggle "membersPostAccessOpen" this)}} data-test-toggle-memberspostaccess><span>{{if this.membersPostAccessOpen "Close" "Expand"}}</span></button>
            </div>
        </div>

        {{#liquid-if this.membersPostAccessOpen}}
        <div class="flex flex-column w-50 flex mt8">
            <div class="gh-radio {{if (eq settings.defaultContentVisibility "public") "active"}}"
                {{action "setDefaultContentVisibility" "public" on="click"}}>
                <div class="gh-radio-button" data-test-publishmenu-unpublished-option></div>
                <div class="gh-radio-content">
                    <div class="gh-radio-label">Public<br>
                    <small class="midgrey">All site visitors to your site, no login required</small></div>
                </div>
            </div>

            <div class="gh-radio {{if (eq settings.defaultContentVisibility "members") "active"}}"
                {{action "setDefaultContentVisibility" "members" on="click"}}>
                <div class="gh-radio-button" data-test-publishmenu-published-option></div>
                <div class="gh-radio-content">
                    <div class="gh-radio-label">Members only<br>
                    <small class="midgrey">All logged-in members</small></div>
                </div>
            </div>

            <div class="gh-radio {{if (eq settings.defaultContentVisibility "paid") "active"}}"
                {{action "setDefaultContentVisibility" "paid" on="click"}}>
                <div class="gh-radio-button" data-test-publishmenu-published-option></div>
                <div class="gh-radio-content">
                    <div class="gh-radio-label">Paid-members only<br>
                    <small class="midgrey">Only logged-in members with an active Stripe subscription</small></div>
                </div>
            </div>
        </div>
        {{/liquid-if}}
    </section>

    <section class="bb b--whitegrey pa5">
        <div class="flex justify-between">
            <div>
                <h4 class="gh-setting-title">From address</h4>
                <p class="gh-setting-desc pa0 ma0">The email address your members receive newsletters from</p>
            </div>
            <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>

        {{#liquid-if this.membersFromOpen}}
            <div class="flex flex-column w-100 w-50-l flex mt8">
                <GhFormGroup>
                    <div class="flex items-center justify-center mt1">
                        <GhTextInput
                            @value={{readonly this.fromAddress}}
                            @input={{action "setFromAddress" value="target.value"}}
                            @class="w20"
                        />
                        <GhTaskButton
                            @buttonText="Update from address"
                            @runningText="Sending..."
                            @successText="Confirmation Email Sent"
                            @disabled={{this.disableUpdateFromAddressButton}}
                            @task={{this.updateFromAddress}}
                            @class="gh-btn gh-btn-icon gh-btn-textfield-group ml2"
                            data-test-button="update-from-address"
                        />
                    </div>
                </GhFormGroup>
                {{#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 click the link to confirm</span>
                </div>
                {{/if}}
            </div>
        {{/liquid-if}}
    </section>
    {{#if this.config.enableDeveloperExperiments}}
        <section class="bb b--whitegrey pa5">
            <div class="flex justify-between">
                <div>
                    <h4 class="gh-setting-title">Modal settings</h4>
                    <p class="gh-setting-desc pa0 ma0">Customize members modal signup flow</p>
                </div>
                <div>
                    <button type="button" class="gh-btn" {{action (toggle "showMembersModalSettings" this)}} data-test-toggle-membersFrom><span> Customize </span></button>
                </div>
            </div>
        </section>
    {{/if}}
    {{#unless this.hasBulkEmailConfig}}
        <section class="bb b--whitegrey pa5">
            <div class="flex justify-between">
                <div>
                    <h4 class="gh-setting-title">Email newsletter settings</h4>
                    <p class="gh-setting-desc pa0 ma0">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/faq/mailgun-newsletters/" target="_blank" rel="noopener">Why is this required?</a></p>
                </div>
                <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>

            {{#liquid-if this.membersEmailOpen}}
            <div class="flex flex-column w-100 w-50-l flex mt8">
                    <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 "setBulkEmailRegion"}}
                                    @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.bulkEmailSettings.domain}}
                                @input={{action "setBulkEmailSettings" "domain"}}
                                @class="mt1"
                            />
                        </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 API key</label>
                        <GhTextInput
                            @type="password"
                            @value={{readonly this.bulkEmailSettings.apiKey}}
                            @input={{action "setBulkEmailSettings" "apiKey"}}
                            @class="mt1 password" @autocomplete="new-password"
                        />
                        <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}}
        </section>
    {{/unless}}
</div>

{{#if this.showMembersModalSettings}}
    <GhFullscreenModal @modal="members-modal-settings"
        @model={{hash
            subscriptionSettings=this.subscriptionSettings
            stripeConnectIntegration=this.stripeConnectIntegration
        }}
        @close={{action "closeMembersModalSettings"}}
        @modifier="action wide" />
{{/if}}