mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-30 01:42:29 +03:00
fc05604d27
fixes https://github.com/TryGhost/Team/issues/2680 Co-authored-by: Fabien 'egg' O'Carroll <fabien@allou.is> Co-authored-by: Sanne de Vries <sannedv@protonmail.com>
394 lines
28 KiB
Handlebars
394 lines
28 KiB
Handlebars
{{!-- template-lint-disable no-invalid-interactive --}}
|
|
<div class="modal-body gh-ps-modal-body modal-fullsettings modal-fullsettings-body ">
|
|
<div class="flex pa0 flex-grow-1 gh-portal-settings gh-newsletters-labs" {{did-insert this.finishPreloading}}>
|
|
{{#if this.isPreloading}}
|
|
<GhLoadingSpinner />
|
|
{{else}}
|
|
<div class="gh-portal-settings-sidebar modal-fullsettings-sidebar-labs">
|
|
<h2 class="modal-fullsettings-heading-labs gh-portal-settings-title">Portal settings</h2>
|
|
<div class="modal-fullsettings-body-labs">
|
|
<fieldset class="modal-fullsettings-form-labs">
|
|
<div class="modal-fullsettings-section-labs">
|
|
{{#let (eq this.openSection "signup-options") as |isOpen|}}
|
|
<button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" onclick={{action "toggleSection" "signup-options"}}>
|
|
{{svg-jar "credit-card"}} Signup options
|
|
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
|
|
</button>
|
|
{{#liquid-if isOpen}}
|
|
<div class="modal-fullsettings-tab-expanded {{if (not-eq this.settings.membersSignupAccess "all") "disabled-overlay"}}" onclick={{action "switchPreviewPage" "signup"}}>
|
|
<GhFormGroup class="gh-members-subscribed-checkbox gh-portal-setting-first {{unless this.membersUtils.isStripeEnabled "gh-portal-setting-last"}} mb0">
|
|
<div class="flex justify-between items-center">
|
|
<div class="mr3">
|
|
<h4 class="gh-portal-setting-title">Display name in signup form</h4>
|
|
</div>
|
|
<div class="for-switch small">
|
|
<label
|
|
class="switch"
|
|
for="signup-name-checkbox"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={{this.settings.portalName}}
|
|
id="signup-name-checkbox"
|
|
name="signup-name-checkbox"
|
|
disabled={{not-eq this.settings.membersSignupAccess "all"}}
|
|
{{on "click" (action "togglePortalName" value="target.checked")}}
|
|
>
|
|
<span class="input-toggle-component"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</GhFormGroup>
|
|
<div {{did-insert this.refreshAfterStripeConnected}} data-test-tiers-at-signup>
|
|
<div class="mb3 mt5">
|
|
<h4 class="gh-portal-setting-title">Tiers available at signup</h4>
|
|
</div>
|
|
<div class="form-group mb0 for-checkbox" data-test-free-tier-at-signup>
|
|
<label
|
|
class="checkbox"
|
|
for="free-plan"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={{this.membersUtils.isFreeChecked}}
|
|
id="free-plan"
|
|
name="free-plan"
|
|
data-test-settings-tier-input="Free"
|
|
disabled={{not-eq this.settings.membersSignupAccess "all"}}
|
|
class="gh-input post-settings-featured"
|
|
{{on "click" (action "togglePlan" "free")}}
|
|
>
|
|
<span class="input-toggle-component"></span>
|
|
<p data-test-settings-tier-label="Free">Free</p>
|
|
</label>
|
|
</div>
|
|
{{#if this.membersUtils.isStripeEnabled}}
|
|
{{#each this.tiers as |tier|}}
|
|
<div class="form-group mb0 for-checkbox" data-test-tier-at-signup>
|
|
<label
|
|
class="checkbox"
|
|
for={{tier.id}}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
id={{tier.id}}
|
|
name={{tier.id}}
|
|
checked={{tier.checked}}
|
|
disabled={{or
|
|
(not this.membersUtils.isStripeEnabled)
|
|
(not-eq this.settings.membersSignupAccess "all")
|
|
}}
|
|
class="gh-input post-settings-featured"
|
|
data-test-settings-tier-input={{tier.name}}
|
|
{{on "click" (action "toggleTier" tier.id)}}
|
|
>
|
|
<span class="input-toggle-component"></span>
|
|
<p data-test-settings-tier-label={{tier.name}}>{{tier.name}}</p>
|
|
</label>
|
|
</div>
|
|
{{/each}}
|
|
{{#if this.showPortalPrices}}
|
|
<div class="mb3 mt5">
|
|
<h4 class="gh-portal-setting-title">Prices available at signup</h4>
|
|
</div>
|
|
{{/if}}
|
|
{{#if this.showPortalPrices}}
|
|
<div class="form-group mb0 for-checkbox">
|
|
<label
|
|
class="checkbox"
|
|
for="monthly-plan"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
id="monthly-plan"
|
|
name="monthly-plan"
|
|
checked={{this.isMonthlyChecked}}
|
|
disabled={{or
|
|
(not this.membersUtils.isStripeEnabled)
|
|
(not-eq this.settings.membersSignupAccess "all")
|
|
}}
|
|
class="gh-input post-settings-featured"
|
|
{{on "click" (action "togglePlan" "monthly")}}
|
|
>
|
|
<span class="input-toggle-component"></span>
|
|
<p>Monthly</p>
|
|
</label>
|
|
</div>
|
|
<div class="form-group mb0 for-checkbox">
|
|
<label
|
|
class="checkbox"
|
|
for="yearly-plan"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
id="yearly-plan"
|
|
name="yearly-plan"
|
|
checked={{this.isYearlyChecked}}
|
|
disabled={{or
|
|
(not this.membersUtils.isStripeEnabled)
|
|
(not-eq this.settings.membersSignupAccess "all")
|
|
}}
|
|
class="gh-input post-settings-featured"
|
|
{{on "click" (action "togglePlan" "yearly")}}
|
|
>
|
|
<span class="input-toggle-component"></span>
|
|
<p>Yearly</p>
|
|
</label>
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
</div>
|
|
|
|
<GhFormGroup class="gh-stack-item mt5 mb5" @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}}>
|
|
<label class="modal-fullsettings-title">Display notice at signup</label>
|
|
<KoenigBasicHtmlInput
|
|
@name="footer"
|
|
@html={{this.settings.portalSignupTermsHtml}}
|
|
@class="miw-100 form-text gh-members-emailsettings-footer-input"
|
|
@placeholder="By signing up, I agree to receive emails from {{this.config.blogTitle}}."
|
|
@onChange={{action "setTermsHtml"}}
|
|
/>
|
|
<GhErrorMessage @errors={{this.settings.errors}} @property="portalSignupTermsHtml" />
|
|
<p>
|
|
Recommended: <strong>{{this.maxTermsLength}}</strong> characters.
|
|
You've used {{gh-count-down-html-characters this.settings.portalSignupTermsHtml this.maxTermsLength}}
|
|
</p>
|
|
</GhFormGroup>
|
|
|
|
<GhFormGroup class="gh-members-subscribed-checkbox gh-portal-setting-first mb0 b--whitegrey space-l">
|
|
<div class="flex justify-between items-center">
|
|
<h4 class="gh-portal-setting-title">Require agreement</h4>
|
|
<div class="for-switch small">
|
|
<label
|
|
class="switch"
|
|
for="portal-signup-checkbox-required-checkbox"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={{this.settings.portalSignupCheckboxRequired}}
|
|
id="portal-signup-checkbox-required-checkbox"
|
|
name="portal-signup-checkbox-required-checkbox"
|
|
onclick={{action "toggleSignupCheckboxRequired" value="target.checked"}}
|
|
>
|
|
<span class="input-toggle-component"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</GhFormGroup>
|
|
</div>
|
|
{{/liquid-if}}
|
|
{{/let}}
|
|
|
|
{{#let (eq this.openSection "look-and-feel") as |isOpen|}}
|
|
<button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" onclick={{action "toggleSection" "look-and-feel"}}>
|
|
{{svg-jar "paintbrush"}} Look & feel
|
|
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
|
|
</button>
|
|
{{#liquid-if isOpen}}
|
|
<div class="modal-fullsettings-tab-expanded" onclick={{action "switchPreviewPage" "signup"}}>
|
|
<GhFormGroup class="gh-members-subscribed-checkbox gh-portal-setting-first mb0 b--whitegrey">
|
|
<div class="flex justify-between items-center">
|
|
<h4 class="gh-portal-setting-title">Show Portal button</h4>
|
|
<div class="for-switch small">
|
|
<label
|
|
class="switch"
|
|
for="portal-button-checkbox"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={{this.settings.portalButton}}
|
|
id="portal-button-checkbox"
|
|
name="portal-button-checkbox"
|
|
onclick={{action "togglePortalButton" value="target.checked"}}
|
|
>
|
|
<span class="input-toggle-component"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</GhFormGroup>
|
|
{{#if this.settings.portalButton}}
|
|
<div class="mt5">
|
|
<GhFormGroup class="space-l">
|
|
<h4 class="gh-portal-setting-title mb1">Portal button style</h4>
|
|
<span
|
|
class="gh-select mt2"
|
|
data-select-text="test"
|
|
tabindex="0"
|
|
>
|
|
<OneWaySelect
|
|
@id="portal-button-style"
|
|
@name="portal[button-style]"
|
|
@options={{this.buttonStyleOptions}}
|
|
@optionValuePath="name"
|
|
@optionLabelPath="label"
|
|
@value={{this.selectedButtonStyle}}
|
|
@update={{action "setButtonStyle"}}
|
|
/>
|
|
{{svg-jar "arrow-down-small"}}
|
|
</span>
|
|
</GhFormGroup>
|
|
{{#if this.showIconSetting}}
|
|
<GhFormGroup class="space-l">
|
|
<h4 class="gh-portal-setting-title">Icon</h4>
|
|
<GhUploader
|
|
@extensions={{this.iconExtensions}}
|
|
@paramsHash={{hash purpose="image"}}
|
|
@onComplete={{action "imageUploaded" "buttonIcon"}}
|
|
as
|
|
|uploader|
|
|
>
|
|
<div class="flex items-center justify-between mt2 br3 ba b--whitegrey bg-white">
|
|
<div class="gh-portal-settings-icons">
|
|
{{#each this.membersUtils.defaultButtonIcons as |imgIcon| }}
|
|
<span class="gh-portal-button-icon {{if (eq this.membersUtils.buttonIcon imgIcon.value) "selected-icon"}}" onclick={{action "selectDefaultIcon" imgIcon.value}}>
|
|
{{svg-jar imgIcon.icon}}
|
|
</span>
|
|
{{/each}}
|
|
</div>
|
|
<div class="flex gh-setting-action gh-portal-custom-icon">
|
|
{{#if uploader.isUploading}}
|
|
<div class="gh-portal-button-icon">
|
|
<div class="gh-loading-spinner"></div>
|
|
</div>
|
|
{{else if this.customIcon}}
|
|
<img
|
|
class="gh-portal-button-icon gh-portal-button-custom {{if (eq this.membersUtils.buttonIcon this.customIcon) "selected-icon"}}"
|
|
src="{{this.customIcon}}"
|
|
onclick={{action "selectDefaultIcon" this.customIcon}}
|
|
alt="icon"
|
|
data-test-icon-img
|
|
>
|
|
{{#if (eq this.membersUtils.buttonIcon this.customIcon)}}
|
|
<button type="button" class="gh-btn gh-portal-button-deleteicon" {{action "deleteCustomIcon"}}>
|
|
<span> {{svg-jar "trash" class="w5 h5"}} </span>
|
|
</button>
|
|
{{/if}}
|
|
{{else}}
|
|
<button type="button" class="gh-btn gh-portal-button-uploadicon" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="icon" data-tooltip="Upload icon">
|
|
<span>{{svg-jar "upload-fill" class="w5 h5"}}</span>
|
|
</button>
|
|
<div style="display:none">
|
|
<GhFileInput
|
|
@multiple={{false}}
|
|
@action={{uploader.setFiles}}
|
|
@accept={{this.iconMimeTypes}}
|
|
data-test-file-input="icon"
|
|
/>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
</GhUploader>
|
|
|
|
</GhFormGroup>
|
|
{{/if}}
|
|
</div>
|
|
{{#if this.showButtonTextSetting}}
|
|
<GhFormGroup class="space-l">
|
|
<h4 class="gh-portal-setting-title">Signup button text</h4>
|
|
|
|
<div class="flex items-center mt2">
|
|
<GhTextInput
|
|
@value={{readonly this.settings.portalButtonSignupText}}
|
|
@type="text"
|
|
@input={{action "setSignupButtonText"}}
|
|
/>
|
|
</div>
|
|
</GhFormGroup>
|
|
{{/if}}
|
|
{{/if}}
|
|
</div>
|
|
{{/liquid-if}}
|
|
{{/let}}
|
|
|
|
{{#let (eq this.openSection "account-page") as |isOpen|}}
|
|
<button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" onclick={{action "toggleSection" "account-page"}}>
|
|
{{svg-jar "members"}} Account page settings
|
|
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
|
|
</button>
|
|
{{#liquid-if isOpen}}
|
|
<div class="modal-fullsettings-tab-expanded" onclick={{action "switchPreviewPage" "accountHome"}}>
|
|
<GhFormGroup class="space-l mt5" @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="members_support_address">
|
|
<h4 class="gh-portal-setting-title">Support email address</h4>
|
|
<div class="mt2">
|
|
<GhTextInput
|
|
@value={{readonly this.supportAddress}}
|
|
@input={{action "setSupportAddress" value="target.value"}}
|
|
@name="members_support_address"
|
|
/>
|
|
</div>
|
|
<GhErrorMessage @errors={{this.settings.errors}} @property="members_support_address" />
|
|
<p>How members can reach you for help with their account (public)</p>
|
|
</GhFormGroup>
|
|
</div>
|
|
{{/liquid-if}}
|
|
{{/let}}
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
{{#if (and (not this.membersUtils.isStripeEnabled) this.session.user.isAdmin)}}
|
|
<div class="gh-portal-settings-stripefooter">
|
|
<h4>Collect payments on signup?</h4>
|
|
<p>Generate revenue to support your work, by offering premium membership tiers.</p>
|
|
<p>Ghost takes 0% payment fees, everything you earn is yours to keep.</p>
|
|
<button class="stripe-connect {{unless this.session.user.isAdmin "disabled"}}" type="button" {{on "click" (action "openStripeConnect")}}><span></span></button>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
<div class="gh-portal-settings-main">
|
|
<div class="gh-portal-settings-previewheader">
|
|
|
|
<div class="gh-select gh-preview-page-selector" data-test-select="preview-page-selector">
|
|
<OneWaySelect
|
|
@data-test-select="page-selector"
|
|
@value={{this.page}}
|
|
@options={{this.availablePages}}
|
|
@optionValuePath="name"
|
|
@optionLabelPath="label"
|
|
@update={{action "switchPreviewPage"}}
|
|
/>
|
|
{{svg-jar "arrow-down-small"}}
|
|
</div>
|
|
|
|
<div class="gh-portal-settings-actions">
|
|
<button
|
|
class="gh-btn mr3" type="button" {{action "closeModal"}}
|
|
{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
|
|
{{on "mousedown" (optional this.noop)}}
|
|
>
|
|
<span>Cancel</span>
|
|
</button>
|
|
|
|
<GhTaskButton
|
|
@buttonText="Save and close"
|
|
@successText="Saved"
|
|
@task={{this.saveTask}}
|
|
@idleClass="gh-btn-primary"
|
|
@class="gh-btn gh-btn-icon"
|
|
data-test-button="save-members-modal-setting"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{{#if this.showLinksPage}}
|
|
<div class="gh-portal-preview-wrapper">
|
|
<div class="gh-portal-preview-container">
|
|
<GhPortalLinks />
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div class="gh-portal-preview-container {{if this.showLinksPage "hide"}}">
|
|
<div class="gh-portal-site-frame-cover"> </div>
|
|
<GhSiteIframe
|
|
class="gh-portal-siteiframe gh-portal-siteiframe-enabled"
|
|
@src={{this.portalPreviewUrl}}
|
|
@guid={{this.portalPreviewGuid}}
|
|
@invisibleUntilLoaded="portal-ready" />
|
|
</div>
|
|
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|