Repository: digitalocean/nginxconfig.io
File: src/nginxconfig/templates/domain_sections/logging.vue (Vue)

Code before:
                            <PrettyCheck v-model="errorLogEnabled" class="p-default p-curve p-fill p-icon">
                                {{ $t('templates.domainSections.logging.enableForThisDomain') }}
                            </PrettyCheck>
                        </div>
                        <div v-if="$props.data.errorLogEnabled.computed" :class="`control field is-horizontal is-expanded${errorLogPathChanged ? ' is-changed' : ''}`">
                            <input
                                v-model="errorLogPath"
                                class="input"
                                type="text"
                                :placeholder="$props.data.errorLogPath.default"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="$props.data.errorLogEnabled.computed" class="field is-horizontal">
            <div class="field-label">
                <label class="label">error_log {{ $t('templates.domainSections.logging.level') }}</label>
            </div>
            <div class="field-body">
                <div class="field is-horizontal">
                    <div
                        v-for="value in $props.data.errorLogLevel.options"
                        :class="`control${errorLogLevelChanged && value === errorLogLevel ? ' is-changed' : ''}`"
                    >
                        <div class="radio">
                            <PrettyRadio v-model="errorLogLevel" :value="value" class="p-default p-round p-fill p-icon">
                                {{ value }}
                            </PrettyRadio>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="field is-horizontal is-aligned-top">
            <div class="field-label has-small-margin-top">
                <label class="label">error_log {{ $t('templates.domainSections.logging.forRedirects') }}</label>
            </div>
            <div class="field-body">
                <div class="field">
                    <div :class="`control${redirectErrorLogChanged ? ' is-changed' : ''}`">
                        <div class="checkbox">
                            <PrettyCheck v-model="redirectErrorLog" class="p-default p-curve p-fill p-icon">
                                {{ $t('common.enable') }}
                            </PrettyCheck>
                        </div>
                    </div>
                </div>

Review comment (suggestion):
I think it'd be great here to have an extra `none` level, which switches the path used in the config to just be `/dev/null` (this would allow the user to have the error log enabled globally, but then disable it for specific domains if needed)

Code after:
                            <PrettyCheck v-model="errorLogEnabled" class="p-default p-curve p-fill p-icon">
                                {{ $t('templates.domainSections.logging.enableForThisDomain') }}
                            </PrettyCheck>
                        </div>
                        <div v-if="$props.data.errorLogEnabled.computed" :class="`control field is-horizontal is-expanded${errorLogPathChanged ? ' is-changed' : ''}`">
                            <input
                                v-model="errorLogPath"
                                class="input"
                                type="text"
                                :disabled="!errorLogPathEnabled"
                                :placeholder="$props.data.errorLogPath.default"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="$props.data.errorLogEnabled.computed" class="field is-horizontal">
            <div class="field-label">
                <label class="label">error_log {{ $t('templates.domainSections.logging.level') }}</label>
            </div>
            <div class="field-body">
                <div class="field is-horizontal">
                    <div
                        v-for="value in $props.data.errorLogLevel.options"
                        :class="`control${errorLogLevelChanged && value === errorLogLevel ? ' is-changed' : ''}`"
                    >
                        <div class="radio">
                            <PrettyRadio v-model="errorLogLevel" :value="value" class="p-default p-round p-fill p-icon">
                                {{ value }}
                            </PrettyRadio>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="field is-horizontal is-aligned-top">
            <div class="field-label has-small-margin-top">
                <label class="label">error_log {{ $t('templates.domainSections.logging.forRedirects') }}</label>
            </div>
            <div class="field-body">
                <div class="field">
                    <div :class="`control${redirectErrorLogChanged ? ' is-changed' : ''}`">
                        <div class="checkbox">
                            <PrettyCheck v-model="redirectErrorLog" class="p-default p-curve p-fill p-icon">
                                {{ $t('common.enable') }}
                            </PrettyCheck>
                        </div>
                    </div>