Repository: louislam/uptime-kuma
File: src/pages/StatusPage.vue (Vue)

Code before:
                            <button class="p-0 bg-transparent border-0" :aria-label="$t('Remove domain', [ domain ])" @click="removeDomain(index)">
                                <font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" />
                            </button>
                        </li>
                    </ul>
                </div>

                <!-- Analytics -->

                <div class="my-3">
                    <label for="analyticsType" class="form-label">{{ $t("Analytics Type") }}</label>
                    <select id="analyticsType" v-model="config.analyticsType" class="form-select" data-testid="analytics-type-select">
                        <option v-for="(analyticOption, index) in analyticsOptions" :key="index" :value="analyticOption.value">
                            {{ analyticOption.name }}
                        </option>
                    </select>
                </div>

                <div v-if="config.analyticsType !== null && config.analyticsType !== undefined" class="my-3">
                    <label for="analyticsId" class="form-label">{{ $t("Analytics ID") }}</label>
                    <input id="analyticsId" v-model="config.analyticsId" type="text" class="form-control" data-testid="analytics-id-input">
                </div>

                <div v-if="config.analyticsType !== null && config.analyticsType !== undefined && config.analyticsType !== 'google'" class="my-3">
                    <label for="analyticsDomainUrl" class="form-label">{{ $t("Analytics Domain URL") }}</label>
                    <input id="analyticsDomainUrl" v-model="config.analyticsDomainUrl" type="text" class="form-control" data-testid="analytics-domain-url-input">
                </div>

                <!-- Custom CSS -->
                <div class="my-3">
                    <div class="mb-1">{{ $t("Custom CSS") }}</div>
                    <prism-editor v-model="config.customCSS" class="css-editor" data-testid="custom-css-input" :highlight="highlighter" line-numbers></prism-editor>
                </div>

                <div class="danger-zone">
                    <button class="btn btn-danger me-2" @click="deleteDialog">
                        <font-awesome-icon icon="trash" />
                        {{ $t("Delete") }}
                    </button>
                </div>
            </div>

            <!-- Sidebar Footer -->
            <div class="sidebar-footer">
                <button class="btn btn-success me-2" :disabled="loading" data-testid="save-button" @click="save">
                    <font-awesome-icon icon="save" />
                    {{ $t("Save") }}
                </button>

                <button class="btn btn-danger me-2" @click="discard">
                    <font-awesome-icon icon="undo" />

Review comment (suggestion):
```suggestion
                    <input id="analyticsDomainUrl" v-model="config.analyticsDomainUrl" type="url" class="form-control" data-testid="analytics-domain-url-input">
```

Code after:
                        <option value="matomo">{{ $t("Matomo") }}</option>
                    </select>
                </div>

                <div v-if="!!config.analyticsType" class="my-3">
                    <label for="analyticsId" class="form-label">{{ $t("Analytics ID") }}</label>
                    <input id="analyticsId" v-model="config.analyticsId" type="text" class="form-control" data-testid="analytics-id-input">
                </div>

                <div v-if="!!config.analyticsType && config.analyticsType !== 'google'" class="my-3">
                    <label for="analyticsScriptUrl" class="form-label">{{ $t("Analytics Script URL") }}</label>
                    <input id="analyticsScriptUrl" v-model="config.analyticsScriptUrl" type="url" class="form-control" data-testid="analytics-script-url-input">
                </div>

                <!-- Custom CSS -->
                <div class="my-3">
                    <div class="mb-1">{{ $t("Custom CSS") }}</div>
                    <prism-editor v-model="config.customCSS" class="css-editor" data-testid="custom-css-input" :highlight="highlighter" line-numbers></prism-editor>
                </div>

                <div class="danger-zone">
                    <button class="btn btn-danger me-2" @click="deleteDialog">
                        <font-awesome-icon icon="trash" />
                        {{ $t("Delete") }}
                    </button>
                </div>
            </div>

            <!-- Sidebar Footer -->
            <div class="sidebar-footer">
                <button class="btn btn-success me-2" :disabled="loading" data-testid="save-button" @click="save">
                    <font-awesome-icon icon="save" />
                    {{ $t("Save") }}
                </button>

                <button class="btn btn-danger me-2" @click="discard">
                    <font-awesome-icon icon="undo" />
                    {{ $t("Discard") }}
                </button>
            </div>
        </div>

        <!-- Main Status Page -->
        <div :class="{ edit: enableEditMode}" class="main">
            <!-- Logo & Title -->
            <h1 class="mb-4 title-flex">
                <!-- Logo -->
                <span class="logo-wrapper" @click="showImageCropUploadMethod">
                    <button v-if="editMode" type="button" class="p-0 bg-transparent border-0 small-reset-btn reset-top-left" @click.stop="resetToDefaultImage">
                        <font-awesome-icon icon="times" class="text-danger" />
                    </button>