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>
|