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

Code before:
<template>
    <div class="mb-3">
        <label for="smspartner-key" class="form-label">{{ $t("smspartnerApikey") }}</label>
        <HiddenInput id="smspartner-key" v-model="$parent.notification.smspartnerApikey" :required="true" autocomplete="new-password"></HiddenInput>
        <div class="form-text">
            {{ $t("smspartnerApiurl") }}
            <a href="https://my.smspartner.fr/dashboard/api" target="_blank">https://my.smspartner.fr/dashboard/api</a>
        </div>
    </div>
    <div class="mb-3">
        <label for="smspartner-phone-number" class="form-label">{{ $t("smspartnerPhoneNumber") }}</label>
        <input id="smspartner-phone-number" v-model="$parent.notification.smspartnerPhoneNumber" type="text" class="form-control" required>
    </div>
    <div class="mb-3">
        <label for="smspartner-sender-name" class="form-label">{{ $t("smspartnerSenderName") }}</label>
        <input id="smspartner-sender-name" v-model="$parent.notification.smspartnerSenderName" type="text" minlength="3" maxlength="11" class="form-control">
        <div class="form-text">
            {{ $t("smspartnerSenderNameInfo") }}
        </div>
    </div>
</template>

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

export default {
    components: {
        HiddenInput,
    },
};
</script>


Review comment (refactor):
please extract the part from `smspartnerPhoneNumber` which is a helptext as a helptext ^^
Maybe reword a little to `multiple numbers must be separated by ","`.

> [!TIP]
> You can use https://vue-i18n.intlify.dev/guide/advanced/component.html to use `<code>,</code>` in the helptext

Code after:
<template>
    <div class="mb-3">
        <label for="smspartner-key" class="form-label">{{ $t("API Key") }}</label>
        <HiddenInput id="smspartner-key" v-model="$parent.notification.smspartnerApikey" :required="true" autocomplete="new-password"></HiddenInput>
        <div class="form-text">
            <i18n-t keypath="smspartnerApiurl" as="div" class="form-text">
                <a href="https://my.smspartner.fr/dashboard/api" target="_blank">my.smspartner.fr/dashboard/api</a>
            </i18n-t>
        </div>
    </div>
    <div class="mb-3">
        <label for="smspartner-phone-number" class="form-label">{{ $t("smspartnerPhoneNumber") }}</label>
        <input id="smspartner-phone-number" v-model="$parent.notification.smspartnerPhoneNumber" type="text" minlength="3" maxlength="20" pattern="^[\d+,]+$" class="form-control" required>
        <div class="form-text">
            <i18n-t keypath="smspartnerPhoneNumberHelptext" as="div" class="form-text">
                <code>+336xxxxxxxx</code>
                <code>+496xxxxxxxx</code>
                <code>,</code>
            </i18n-t>
        </div>
    </div>
    <div class="mb-3">
        <label for="smspartner-sender-name" class="form-label">{{ $t("smspartnerSenderName") }}</label>
        <input id="smspartner-sender-name" v-model="$parent.notification.smspartnerSenderName" type="text" minlength="3" maxlength="11" pattern="^[a-zA-Z0-9]*$" class="form-control" required>
        <div class="form-text">
            {{ $t("smspartnerSenderNameInfo") }}
        </div>
    </div>
</template>

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

export default {
    components: {
        HiddenInput,
    },