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

<div class="modal-body gh-ps-modal-body">
    <div class="flex pa0 flex-grow-1">
        <div class="pa5">
            <h2 class="f4 fw6">Portal settings</h2>
            <fieldset>
                <div class="gh-portal-settings">
                    <div class="gh-portal-setting-section">
                        <GhFormGroup @classNames="gh-members-subscribed-checkbox pb4 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"
                                            onclick={{action "togglePortalName" value="target.checked"}}
                                        >
                                        <span class="input-toggle-component"></span>
                                    </label>
                                </div>
                            </div>
                        </GhFormGroup>
                        <div>
                            <div class="mb3">
                                <h4 class="gh-portal-setting-title">Plans available at signup</h4>
                            </div>
                            <div class="form-group mb0 for-checkbox">
                                <label
                                    class="checkbox"
                                    for="free-plan"
                                >
                                    <input
                                        type="checkbox"
                                        checked={{this.isFreeChecked}}
                                        id="free-plan"
                                        name="free-plan"
                                        disabled={{not this.allowSelfSignup}}
                                        class="gh-input post-settings-featured"
                                        onclick={{action "toggleFreePlan" value="target.checked"}}
                                        data-test-checkbox="featured"
                                    >
                                    <span class="input-toggle-component"></span>
                                    <p>Free</p>
                                </label>
                            </div>
                            <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={{not this.isStripeConfigured}}
                                        class="gh-input post-settings-featured"
                                        onclick={{action "toggleMonthlyPlan" value="target.checked"}}
                                        data-test-checkbox="featured"
                                    >
                                    <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={{not this.isStripeConfigured}}
                                        class="gh-input post-settings-featured"
                                        onclick={{action "toggleYearlyPlan" value="target.checked"}}
                                        data-test-checkbox="featured"
                                    >
                                    <span class="input-toggle-component"></span>
                                    <p>Yearly</p>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="gh-portal-setting-section divider-top">
                        <h3 class="gh-portal-setting-sectionheading"> Look &amp; Feel </h3>
                        <GhFormGroup @classNames="flex">
                            <div class="gh-setting-content flex items-center">
                                <div class="gh-portal-setting-title">Accent Color</div>
                            </div>
                            <div class="gh-setting-action">
                                <GhFormGroup
                                    @errors={{settings.errors}}
                                    @hasValidated={{settings.hasValidated}}
                                    @property="accentColor"
                                    @class="input-color-form-group"
                                >
                                    <div class="input-color">
                                        <GhTextInput
                                            @name="accent-color"
                                            @placeholder="abcdef"
                                            @autocorrect="off"
                                            @maxlength="6"
                                            @focus-out={{action "validateAccentColor"}}
                                            @value={{accentColor}}
                                            data-test-input="accentColor"
                                        />
                                        <div
                                            class="color-box"
                                            style={{this.backgroundStyle}}
                                        ></div>
                                    </div>
                                    <GhErrorMessage
                                        @errors={{settings.errors}}
                                        @property="accentColor"
                                        data-test-error="accentColor"
                                    />
                                </GhFormGroup>
                            </div>
                        </GhFormGroup>
                        <GhFormGroup @classNames="gh-members-subscribed-checkbox mb0pt3 b--whitegrey">
                            <div class="flex justify-between items-center">
                                <div>
                                    <h4 class="gh-portal-setting-title">Show Portal button</h4>
                                </div>
                                <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}}
                            <GhFormGroup>
                                <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 showIconSetting}}
                                <GhFormGroup>
                                    <h4 class="gh-portal-setting-title">Icon</h4>
                                    <GhUploader
                                        @extensions={{this.iconExtensions}}
                                        @paramsHash={{hash purpose="icon"}}
                                        @onComplete={{action "imageUploaded" "icon"}}
                                        as
                                        |uploader|
                                    >
                                        <div class="flex items-center mt2">
                                            <div
                                                class="flex flex-grow-1 justify-center"
                                                style="border: 1px solid #d6e3eb;border-radius: 4px;padding: 5px 5px;"
                                            >
                                                {{#each this.defaultButtonIcons as |imgIcon| }}
                                                    <img
                                                        src={{imgIcon}}
                                                        alt="icon" class="gh-portal-button-icon {{if (eq this.buttonIcon imgIcon) "selected-icon"}}" onclick={{action "selectDefaultIcon" imgIcon}} />
                                                {{/each}}
                                                {{#if uploader.isUploading}}
                                                    {{uploader.progressBar}}
                                                {{else if this.customIcon}}
                                                    <img
                                                        class="gh-portal-button-icon {{if (eq this.buttonIcon this.customIcon) "selected-icon"}}"
                                                        src="{{this.customIcon}}"
                                                        onclick={{action "selectDefaultIcon" this.customIcon}}
                                                        alt="icon"
                                                        data-test-icon-img
                                                    >
                                                {{/if}}
                                            </div>
                                            <div
                                                class="flex gh-setting-action"
                                                style="border: 1px solid #d6e3eb;border-radius: 4px;padding: 9px 12px;"
                                            >
                                                <button
                                                    type="button"
                                                    class="gh-btn"
                                                    onclick={{action "triggerFileDialog"}}
                                                    data-test-image-upload-btn="icon"
                                                >
                                                    <span style="font-size:24px">+</span>
                                                </button>
                                                <div style="display:none">
                                                    <GhFileInput
                                                        @multiple={{false}}
                                                        @action={{uploader.setFiles}}
                                                        @accept={{this.iconMimeTypes}}
                                                        data-test-file-input="icon"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </GhUploader>

                                </GhFormGroup>
                            {{/if}}
                            <GhFormGroup>
                                <h4 class="gh-portal-setting-title">Signup button text</h4>

                                <div class="flex items-center mt2">
                                    <GhTextInput
                                        @value={{readonly this.signupButtonText}}
                                        @type="text"
                                        @input={{action "setSignupButtonText"}}
                                    />
                                </div>
                                <p class="gh-setting-desc pa0 ma0">Visible to logged out members only</p>
                            </GhFormGroup>
                        {{/if}}
                    </div>
                    <div class="gh-portal-setting-section divider-top">
                        <h4 class="gh-portal-setting-sectionheading"> Links </h4>
                        <GhFormGroup>
                            <div class="flex w-100 justify-between items-center">
                                <h4 class="gh-portal-setting-title">Show modal</h4>
                                <div {{action (toggle "isShowModalLink" this)}} class="blue pointer f8"> {{if this.isShowModalLink "Data Attribute" "Link"}} </div>
                            </div>
                            <div class="flex items-center justify-center mt1 gh-show-modal-link-form">
                                <GhTextInput
                                    @value={{this.showModalLinkOrAttribute}}
                                    @type="text"
                                    @disabled={{true}}
                                />
                                <button type="button" {{action (perform this.copyLinkOrAttribute)}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
                                    {{#if this.copyLinkOrAttribute.isRunning}}
                                        {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
                                    {{else}}
                                        Copy
                                    {{/if}}
                                </button>
                            </div>
                            <div class="mt1">
                                <span onclick={{action "switchPreviewPage" "links"}} class="blue pointer f8">Show more...</span>
                            </div>
                        </GhFormGroup>
                    </div>
                </div>
            </fieldset>
        </div>
        <div style="border-left: 1px solid #e5eff5;">
        </div>
        <div class="flex flex-column flex-grow-1 pa5">
            <div style="padding-bottom: 12px;display: flex;justify-content: center;">
                <span style="padding: 0 20px 0 20px; font-weight: bold"><a href="#" {{action "switchPreviewPage" "signup"}} data-test-link="switch-portal-preview-page">Signup</a></span>
                <span style="padding: 0 20px 0 20px; font-weight: bold"><a href="#" {{action "switchPreviewPage" "accountHome"}} data-test-link="switch-portal-preview-page">Account</a></span>
                <span style="padding: 0 20px 0 20px; font-weight: bold"><a href="#" {{action "switchPreviewPage" "links"}} data-test-link="switch-portal-preview-page">Links</a></span>
            </div>
            <div style="position: relative;flex-grow: 1">
                <GhSiteIframe
                    @guid="test-site-portal"
                    @src={{this.portalPreviewUrl}}
                ></GhSiteIframe>
            </div>
            <div class="modal-footer">
                <button
                    class="gh-btn"
                    {{action "closeModal"}}
                    {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
                    {{on "mousedown" (optional this.noop)}}
                    data-test-button="cancel-custom-view-form"
                >
                    <span>Cancel</span>
                </button>

                <GhTaskButton
                    @buttonText="Save and close"
                    @successText="Saved"
                    @task={{this.saveTask}}
                    @idleClass="gh-btn-green"
                    @class="gh-btn gh-btn-icon"
                    data-test-button="save-members-modal-setting"
                />
            </div>
        </div>
    </div>
</div>