mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-02 08:13:34 +03:00
d4cf0602e5
refs https://github.com/TryGhost/members.js/issues/77 - There was a quick flicker before the portal popup appears due to the site theme being visible in background till portal loads - Adds the constant background with slight delay to show the frame which ensures the portal script is successfully loaded to minimise the visible flicker
409 lines
22 KiB
Handlebars
409 lines
22 KiB
Handlebars
<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.stripeDirectPublicKey}}
|
||
@input={{action "setStripeDirectPublicKey"}}
|
||
@class="mt1 password"
|
||
/>
|
||
</div>
|
||
<div class="nudge-top--3">
|
||
<label class="fw6 f8 mt4">Stripe Secret key</label>
|
||
<GhTextInput
|
||
@type="password"
|
||
@value={{readonly this.stripeDirectSecretKey}}
|
||
@input={{action "setStripeDirectSecretKey"}}
|
||
@class="mt1 password"
|
||
/>
|
||
<a href="https://dashboard.stripe.com/account/apikeys" target="_blank" class="mt1 fw4 f8">
|
||
Find your Stripe API keys here »
|
||
</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.stripeConnectAccountId}}
|
||
{{#if this.hasActiveStripeSubscriptions}}
|
||
<p class="red ma0 pa0 f8 nudge-bottom--2">
|
||
Cannot disconnect while there are members with active Stripe subscriptions.
|
||
</p>
|
||
{{else}}
|
||
<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.stripeConnectAccountName}}</span>
|
||
{{else}}
|
||
Connected to <a href="https://dashboard.stripe.com/{{this.stripeConnectAccountId}}" target="_blank">{{this.stripeConnectAccountName}}</a>
|
||
{{/if}}
|
||
|
||
{{#unless this.stripeConnectLivemode}}
|
||
<span class="gh-members-connect-testmodelabel">Test mode</span>
|
||
{{/unless}}
|
||
</p>
|
||
{{/if}}
|
||
{{else}}
|
||
<p class="gh-setting-desc pa0 ma0">Connect to Stripe to create subscriptions and take payments</p>
|
||
{{/if}}
|
||
</div>
|
||
<div>
|
||
{{#if this.stripeConnectAccountId}}
|
||
<button type="button" class="gh-btn" {{action "openDisconnectStripeModal"}}><span>Disconnect</span></button>
|
||
{{else}}
|
||
<button type="button" class="gh-btn" {{action (toggle "membersStripeOpen" this)}} data-test-toggle-membersstripe><span>{{if this.membersStripeOpen "Close" "Expand"}}</span></button>
|
||
{{/if}}
|
||
</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"}}
|
||
/>
|
||
{{#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 "setStripePlansCurrency")
|
||
}}
|
||
{{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 @errors={{this.settings.errors}} @hasValidated={{settings.hasValidated}} @property="stripePlans">
|
||
<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.stripePlans.monthly.amount}}
|
||
@type="number"
|
||
@input={{action (mut this._scratchStripeMonthlyAmount) value="target.value"}}
|
||
@focus-out={{action "validateStripePlans"}}
|
||
/>
|
||
<span class="gh-input-append"><span class="ttu">{{this.stripePlans.monthly.currency}}</span>/month</span>
|
||
</div>
|
||
</GhFormGroup>
|
||
</div>
|
||
<div class="w-100 w-50-ns ml2-ns">
|
||
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{settings.hasValidated}} @property="stripePlans">
|
||
<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.stripePlans.yearly.amount}}
|
||
@type="number"
|
||
@input={{action (mut this._scratchStripeYearlyAmount) value="target.value"}}
|
||
@focus-out={{action "validateStripePlans"}}
|
||
/>
|
||
<span class="gh-input-append"><span class="ttu">{{this.stripePlans.yearly.currency}}</span>/year</span>
|
||
</div>
|
||
</GhFormGroup>
|
||
</div>
|
||
</div>
|
||
<div class="w-100 w-50-l flex flex-column flex-row-ns">
|
||
<GhErrorMessage @errors={{settings.errors}} @property="stripePlans" class="w-100 red"/>
|
||
</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 "toggleSelfSignup" bubbles="false"}}>
|
||
<input type="checkbox" checked={{this.allowSelfSignup}} class="gh-input" onclick={{action "toggleSelfSignup"}} 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">Portal 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.mailgunIsConfigured}}
|
||
<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 "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 »
|
||
</a>
|
||
</div>
|
||
<GhFormGroup>
|
||
<label class="fw6 f8">Mailgun 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 »
|
||
</a>
|
||
</GhFormGroup>
|
||
</div>
|
||
{{/liquid-if}}
|
||
</section>
|
||
{{/unless}}
|
||
</div>
|
||
|
||
{{#if this.showDisconnectStripeConnectModal}}
|
||
<GhFullscreenModal @modal="disconnect-stripe"
|
||
@model={{hash
|
||
stripeConnectAccountName=this.stripeConnectAccountName
|
||
}}
|
||
@confirm={{action "disconnectStripeConnectIntegration"}}
|
||
@close={{action "closeDisconnectStripeModal"}}
|
||
@modifier="action wide" />
|
||
{{/if}}
|
||
|
||
{{#if this.showMembersModalSettings}}
|
||
<GhFullscreenModal @modal="members-modal-settings"
|
||
@close={{action "closeMembersModalSettings"}}
|
||
@modifier="full-overlay portal-settings" />
|
||
{{/if}}
|
||
{{#if this.showLeaveSettingsModal}}
|
||
<GhFullscreenModal @modal="leave-settings"
|
||
@confirm={{action "leavePortalSettings"}}
|
||
@close={{action "closeLeaveSettingsModal"}}
|
||
@modifier="action wide" />
|
||
{{/if}}
|