mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-01 13:54:35 +03:00
fb5f263ace
Updated Email settings and Portal settings design to make it more scalable and more consistent with the rest of the Admin.
384 lines
27 KiB
Handlebars
384 lines
27 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"}}>
|
|
{{#unless this.membersUtils.isStripeEnabled}}
|
|
<button class="gh-btn gh-btn-link {{unless this.session.user.isAdmin "disabled"}}" type="button" {{on "click" (action "openStripeSettings")}}>Connect to Stripe</button>
|
|
{{/unless}}
|
|
<GhFormGroup @classNames="gh-members-subscribed-checkbox gh-portal-setting-first 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>
|
|
{{#if this.membersUtils.isStripeEnabled}}
|
|
<div {{did-insert this.refreshAfterStripeConnected}}>
|
|
{{#if this.showPortalTiers}}
|
|
<div class="mb3 mt5">
|
|
<h4 class="gh-portal-setting-title">Tiers available at signup</h4>
|
|
</div>
|
|
<div class="form-group mb0 for-checkbox">
|
|
<label
|
|
class="checkbox"
|
|
for="free-plan"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={{this.membersUtils.isFreeChecked}}
|
|
id="free-plan"
|
|
name="free-plan"
|
|
disabled={{or
|
|
(not this.membersUtils.isStripeEnabled)
|
|
(not-eq this.settings.membersSignupAccess "all")
|
|
}}
|
|
class="gh-input post-settings-featured"
|
|
{{on "click" (action "togglePlan" "free")}}
|
|
>
|
|
<span class="input-toggle-component"></span>
|
|
<p>Free</p>
|
|
</label>
|
|
</div>
|
|
{{#each this.products as |product|}}
|
|
<div class="form-group mb0 for-checkbox">
|
|
<label
|
|
class="checkbox"
|
|
for={{product.id}}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
id={{product.id}}
|
|
name={{product.id}}
|
|
checked={{product.checked}}
|
|
disabled={{or
|
|
(not this.membersUtils.isStripeEnabled)
|
|
(not-eq this.settings.membersSignupAccess "all")
|
|
}}
|
|
class="gh-input post-settings-featured"
|
|
{{on "click" (action "toggleProduct" product.id)}}
|
|
>
|
|
<span class="input-toggle-component"></span>
|
|
<p>{{product.name}}</p>
|
|
</label>
|
|
</div>
|
|
{{/each}}
|
|
{{/if}}
|
|
{{#if this.showPortalPrices}}
|
|
<div class="mb3 {{if (and (feature "multipleProducts") this.showPortalTiers) "mt5" ""}}">
|
|
<h4 class="gh-portal-setting-title">Prices available at signup</h4>
|
|
</div>
|
|
{{/if}}
|
|
{{#unless this.showPortalTiers}}
|
|
<div class="form-group mb0 for-checkbox">
|
|
<label
|
|
class="checkbox"
|
|
for="free-plan"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={{this.membersUtils.isFreeChecked}}
|
|
id="free-plan"
|
|
name="free-plan"
|
|
disabled={{or
|
|
(not this.membersUtils.isStripeEnabled)
|
|
(not-eq this.settings.membersSignupAccess "all")
|
|
}}
|
|
class="gh-input post-settings-featured"
|
|
{{on "click" (action "togglePlan" "free")}}
|
|
>
|
|
<span class="input-toggle-component"></span>
|
|
<p>Free</p>
|
|
</label>
|
|
</div>
|
|
{{/unless}}
|
|
{{#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}}
|
|
</div>
|
|
{{/if}}
|
|
</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 @classNames="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 @classNames="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 @classNames="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-btn-hover-red 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 @classNames="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 @classNames="space-l mt5">
|
|
<h4 class="gh-portal-setting-title">Support email address</h4>
|
|
<div class="mt2">
|
|
<GhTextInput
|
|
@value={{readonly this.supportAddress}}
|
|
@input={{action "setSupportAddress" value="target.value"}}
|
|
/>
|
|
<GhTaskButton
|
|
@buttonText="Update support address"
|
|
@runningText="Sending..."
|
|
@successText="Confirmation email sent"
|
|
@disabled={{this.disableUpdateSupportAddressButton}}
|
|
@task={{this.updateSupportAddress}}
|
|
@class="gh-btn gh-btn-green gh-btn-icon gh-btn-textfield-group gh-portal-emailupdate-button"
|
|
data-test-button="update-support-address"
|
|
/>
|
|
</div>
|
|
<p>How members can reach you for help with their account (public)</p>
|
|
</GhFormGroup>
|
|
</div>
|
|
{{/liquid-if}}
|
|
{{/let}}
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="gh-portal-settings-main">
|
|
<div class="gh-portal-settings-previewheader">
|
|
|
|
<div class="gh-select gh-preview-page-selector">
|
|
<OneWaySelect
|
|
@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 {{if (feature "multipleProducts") "gh-portal-siteiframe-enabled"}}"
|
|
@src={{this.portalPreviewUrl}}
|
|
@guid={{this.portalPreviewGuid}}
|
|
@invisibleUntilLoaded="portal-ready" />
|
|
</div>
|
|
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|