Ghost/ghost/admin/app/components/modal-portal-settings.hbs

<div class="modal-body gh-ps-modal-body">
    <div class="flex pa0 flex-grow-1 gh-portal-settings" {{did-insert this.finishPreloading}}>
        {{#if this.isPreloading}}
            <GhLoadingSpinner />
        {{else}}
        <div class="gh-portal-settings-sidebar">
            <h2 class="gh-portal-settings-title">Portal settings</h2>
            <div class="gh-portal-form-wrapper">
                <fieldset class="gh-portal-settings-form">
                    <div class="gh-portal-setting-section {{if (not-eq this.settings.membersSignupAccess "all") "disabled-overlay"}}" onclick={{action "switchPreviewPage" "signup"}}>
                        <h3 class="gh-portal-setting-sectionheading">Signup options</h3>
                        <GhFormGroup @classNames="gh-members-subscribed-checkbox gh-portal-setting-first pb5 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">
                                        <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>
                        {{else}}
                        <div class="gh-portal-setting-no-stripe">
                            You need to <button class="gh-btn gh-btn-link black {{unless this.session.user.isAdmin "disabled"}}" type="button" {{on "click" (action "openStripeSettings")}}>connect to Stripe</button> to take payments
                        </div>
                        {{/if}}
                    </div>
                    <div class="gh-portal-setting-section" onclick={{action "switchPreviewPage" "signup"}}>
                        <h3 class="gh-portal-setting-sectionheading">Look & feel</h3>
                        <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>

                    <div class="gh-portal-setting-section" onclick={{action "switchPreviewPage" "accountHome"}}>
                        <h3 class="gh-portal-setting-sectionheading">Account page settings</h3>
                        <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>
                </fieldset>
            </div>
        </div>
        <div class="gh-portal-settings-main">
            <div class="gh-portal-settings-previewheader">

                <div class="gh-btn-group">
                    <a class="gh-btn {{if (eq this.page "signup") "gh-btn-group-selected"}}" href="#" {{action "switchPreviewPage" "signup"}} data-test-link="switch-portal-preview-page"><span>Signup</span></a>
                    <a class="gh-btn {{if (eq this.page "accountHome") "gh-btn-group-selected"}}" href="#" {{action "switchPreviewPage" "accountHome"}} data-test-link="switch-portal-preview-page"><span>Account</span></a>
                    <a class="gh-btn {{if this.showLinksPage "gh-btn-group-selected"}}" href="#" {{action "switchPreviewPage" "links"}} data-test-link="switch-portal-preview-page"><span>Links</span></a>
                </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>