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

Code before:

    <div class="mb-3">
        <label for="discord-prefix-message" class="form-label">{{ $t("Prefix Custom Message") }}</label>
        <input id="discord-prefix-message" v-model="$parent.notification.discordPrefixMessage" type="text" class="form-control" autocomplete="false" :placeholder="$t('Hello @everyone is...')">
    </div>

    <div class="mb-3">
        <label for="discord-message-type" class="form-label">{{ $t("Select message type") }}</label>
        <br>
        <select id="discord-message-type" v-model="$parent.notification.discordChannelType" class="form-select">
            <option value="normal">{{ $t("Normal Message") }}</option>
            <option value="createNewForumPost">{{ $t("Create new forum post") }}</option>
            <option value="postToThread">{{ $t("Post to existing thread") }}</option>
        </select>
    </div>

    <div v-if="$parent.notification.discordChannelType === 'createNewForumPost'">
        <div class="mb-3">
            <label for="discord-target" class="form-label">{{ $t("Forum post name") }}</label>
            <input id="discord-target" v-model="$parent.notification.postName" type="text" class="form-control" autocomplete="false" :placeholder="$t('Status Changed')">
        </div>
    </div>
    <div v-if="$parent.notification.discordChannelType === 'postToThread'">
        <div class="mb-3">
            <label for="discord-target" class="form-label">{{ $t("Thread ID") }}</label>
            <input id="discord-target" v-model="$parent.notification.threadId" type="text" class="form-control" autocomplete="false" :placeholder="$t('Thread ID (e.g. 1177566663751782411)')">
        </div>
    </div>
</template>
<script>
export default {
    mounted() {
        if (!this.$parent.notification.discordChannelType) {
            this.$parent.notification.discordChannelType = "normal";
        }
    }
};
</script>


Review comment (refactor):
I think the following message might be better translatable and not duplicate the `Thread ID` from the label.

```suggestion
            <input id="discord-target" v-model="$parent.notification.threadId" type="text" class="form-control" autocomplete="false" :placeholder="$t('e.g. {discordThreadID}', { discordThreadID: 1177566663751782411 })">
```

Code after:

    <div class="mb-3">
        <label for="discord-prefix-message" class="form-label">{{ $t("Prefix Custom Message") }}</label>
        <input id="discord-prefix-message" v-model="$parent.notification.discordPrefixMessage" type="text" class="form-control" autocomplete="false" :placeholder="$t('Hello @everyone is...')">
    </div>

    <div class="mb-3">
        <label for="discord-message-type" class="form-label">{{ $t("Select message type") }}</label>
        <select id="discord-message-type" v-model="$parent.notification.discordChannelType" class="form-select">
            <option value="channel">{{ $t("Send to channel") }}</option>
            <option value="createNewForumPost">{{ $t("Create new forum post") }}</option>
            <option value="postToThread">{{ $t("postToExistingThread") }}</option>
        </select>
    </div>

    <div v-if="$parent.notification.discordChannelType === 'createNewForumPost'">
        <div class="mb-3">
            <label for="discord-target" class="form-label">
                {{ $t("forumPostName") }}
            </label>
            <input id="discord-target" v-model="$parent.notification.postName" type="text" class="form-control" autocomplete="false">
            <div class="form-text">
                {{ $t("whatHappensAtForumPost", { option: $t("postToExistingThread") }) }}
            </div>
        </div>
    </div>
    <div v-if="$parent.notification.discordChannelType === 'postToThread'">
        <div class="mb-3">
            <label for="discord-target" class="form-label">
                {{ $t("threadForumPostID") }}
            </label>
            <input id="discord-target" v-model="$parent.notification.threadId" type="text" class="form-control" autocomplete="false" :placeholder="$t('e.g. {discordThreadID}', { discordThreadID: 1177566663751782411 })">
            <div class="form-text">
                <i18n-t keypath="wayToGetDiscordThreadId">
                    <a
                        href="https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-"
                        target="_blank"
                    >{{ $t("here") }}</a>
                </i18n-t>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    mounted() {
        if (!this.$parent.notification.discordChannelType) {
            this.$parent.notification.discordChannelType = "channel";
        }
    }
};