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

Code before:
<template>
    <div class="mb-3">
        <label for="push-api-key" class="form-label">{{ $t("API Key (required)") }}</label>
        <HiddenInput id="push-api-key" v-model="$parent.notification.pushAPIKey" :required="true" autocomplete="new-password"></HiddenInput>
    </div>

    <div class="mb-3">
        <label for="push-api-title" class="form-label">{{ $t("Title") }}</label>
        <input id="push-api-title" v-model="$parent.notification.pushTitle" type="text" class="form-control">
    </div>

    <div class="mb-3">
        <label for="push-api-channel" class="form-label">{{ $t("Channel") }}</label>
        <input id="push-api-channel" v-model="$parent.notification.pushChannel" type="text" class="form-control">
    </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>

Review comment (suggestion):
Please make sure that you add helptexts for the fields. For example, a user should not need to experiment to 
- find out what triggers the sound,
- find out what the sound sounds like (assuming there is some place in your frontend where users can test them) or
- where the title is displayed / what this is

Code after:
<template>
    <div class="mb-3">
        <label for="push-api-key" class="form-label">{{ $t("API Key") }}</label>
        <HiddenInput id="push-api-key" v-model="$parent.notification.pushAPIKey" :required="true" autocomplete="new-password"></HiddenInput>
    </div>

    <div class="mb-3">
        <label for="push-api-title" class="form-label">{{ $t("Title") }}</label>
        <input id="push-api-title" v-model="$parent.notification.pushTitle" type="text" class="form-control">
    </div>

    <div class="mb-3">
        <label for="push-api-channel" class="form-label">{{ $t("Notification Channel") }}</label>
        <input id="push-api-channel" v-model="$parent.notification.pushChannel" type="text" class="form-control" patttern="[A-Za-z0-9-]+">
        <div class="form-text">
            {{ $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>