Repository: louislam/uptime-kuma
File: src/components/notifications/TechulusPush.vue (Vue)

Code before:
            {{ $t("Notification channel, alphanumerical string and hyphens only.") }}
        </div>
    </div>

    <div class="mb-3">
        <label for="push-api-sound" class="form-label">{{ $t("Sound") }}</label>
        <select id="push-api-sound" v-model="$parent.notification.pushSound" class="form-select">
            <option value="default">{{ $t("Default") }}</option>
            <option value="arcade">{{ $t("Arcade") }}</option>
            <option value="correct">{{ $t("Correct") }}</option>
            <option value="fail">{{ $t("Fail") }}</option>
            <option value="harp">{{ $t("Harp") }}</option>
            <option value="reveal">{{ $t("Reveal") }}</option>
            <option value="bubble">{{ $t("Bubble") }}</option>
            <option value="doorbell">{{ $t("Doorbell") }}</option>
            <option value="flute">{{ $t("Flute") }}</option>
            <option value="money">{{ $t("Money") }}</option>
            <option value="scifi">{{ $t("Scifi") }}</option>
            <option value="clear">{{ $t("Clear") }}</option>
            <option value="elevator">{{ $t("Elevator") }}</option>
            <option value="guitar">{{ $t("Guitar") }}</option>
            <option value="pop">{{ $t("Pop") }}</option>
        </select>
        <div class="form-text">
            {{ $t("Custom Notification sound") }}
        </div>
    </div>

    <div class="mb-3">
        <div class="form-check form-switch">
            <input v-model="$parent.notification.pushTimeSensitive" class="form-check-input" type="checkbox">
            <label class="form-check-label">{{ $t("Time Sensitive (iOS Only)") }}</label>
        </div>
        <div class="form-text">
            {{ $t("Time sensitive notifications will be delivered immediately, even if the device is in do not disturb mode.") }}
        </div>
    </div>

    <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
        <a href="https://docs.push.techulus.com" target="_blank">https://docs.push.techulus.com</a>
    </i18n-t>
</template>

<script>
import HiddenInput from "../HiddenInput.vue";

export default {
    components: {
        HiddenInput,
    },
    mounted() {

Review comment (bug):
I think the helptext would be a better title

```suggestion
        <label for="push-api-sound" class="form-label">{{ $t("Custom Notification sound") }}</label>
        <select id="push-api-sound" v-model="$parent.notification.pushSound" class="form-select">
            <option value="default">{{ $t("Default") }}</option>
            <option value="arcade">{{ $t("Arcade") }}</option>
            <option value="correct">{{ $t("Correct") }}</option>
            <option value="fail">{{ $t("Fail") }}</option>
            <option value="harp">{{ $t("Harp") }}</option>
            <option value="reveal">{{ $t("Reveal") }}</option>
            <option value="bubble">{{ $t("Bubble") }}</option>
            <option value="doorbell">{{ $t("Doorbell") }}</option>
            <option value="flute">{{ $t("Flute") }}</option>
            <option value="money">{{ $t("Money") }}</option>
            <option value="scifi">{{ $t("Scifi") }}</option>
            <option value="clear">{{ $t("Clear") }}</option>
            <option value="elevator">{{ $t("Elevator") }}</option>
            <option value="guitar">{{ $t("Guitar") }}</option>
            <option value="pop">{{ $t("Pop") }}</option>
        </select>
```

Code after:
            {{ $t("Alphanumerical string and hyphens only") }}
        </div>
    </div>

    <div class="mb-3">
        <label for="push-api-sound" class="form-label">{{ $t("Sound") }}</label>
        <select id="push-api-sound" v-model="$parent.notification.pushSound" class="form-select">
            <option value="default">{{ $t("Default") }}</option>
            <option value="arcade">{{ $t("Arcade") }}</option>
            <option value="correct">{{ $t("Correct") }}</option>
            <option value="fail">{{ $t("Fail") }}</option>
            <option value="harp">{{ $t("Harp") }}</option>
            <option value="reveal">{{ $t("Reveal") }}</option>
            <option value="bubble">{{ $t("Bubble") }}</option>
            <option value="doorbell">{{ $t("Doorbell") }}</option>
            <option value="flute">{{ $t("Flute") }}</option>
            <option value="money">{{ $t("Money") }}</option>
            <option value="scifi">{{ $t("Scifi") }}</option>
            <option value="clear">{{ $t("Clear") }}</option>
            <option value="elevator">{{ $t("Elevator") }}</option>
            <option value="guitar">{{ $t("Guitar") }}</option>
            <option value="pop">{{ $t("Pop") }}</option>
        </select>
        <div class="form-text">
            {{ $t("Custom sound to override default notification sound") }}
        </div>
    </div>

    <div class="mb-3">
        <div class="form-check form-switch">
            <input v-model="$parent.notification.pushTimeSensitive" class="form-check-input" type="checkbox">
            <label class="form-check-label">{{ $t("Time Sensitive (iOS Only)") }}</label>
        </div>
        <div class="form-text">
            {{ $t("Time sensitive notifications will be delivered immediately, even if the device is in do not disturb mode.") }}
        </div>
    </div>

    <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
        <a href="https://docs.push.techulus.com" target="_blank">https://docs.push.techulus.com</a>
    </i18n-t>
</template>

<script>
import HiddenInput from "../HiddenInput.vue";

export default {
    components: {
        HiddenInput,
    },
    mounted() {