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

Code before:
<template>
    <div class="mb-3">
        <label for="twilio-account-sid" class="form-label">{{ $t("Account SID") }}</label>
        <input id="twilio-account-sid" v-model="$parent.notification.twilioAccountSID" type="text" class="form-control" required>
    </div>

    <div class="mb-3">
        <label for="twilio-apikey-token" class="form-label">{{ $t("Api Key (optional)") }}</label>
        <input id="twilio-apikey-token" v-model="$parent.notification.twilioApiKey" type="text" class="form-control">
        <div class="form-text">
            <p>
                The API key is optional but recommended. You can provide either Account SID and AuthToken
                from the may TwilioConsole page or Account SID and the pair of Api Key and Api Key secret
            </p>
        </div>
    </div>

    <div class="mb-3">
        <label for="twilio-messaging-service-sid" class="form-label">{{ $t("Messaging Service SID (optional)") }}</label>
        <input id="twilio-messaging-service-sid" v-model="$parent.notification.twilioMessagingServiceSID" type="text" class="form-control">
        <div class="form-text">
            <p>
                Messaging Service SID (optional): Enter this if using a Twilio Messaging Service to manage senders and features.
            </p>
        </div>
    </div>

    <div class="mb-3">
        <label for="twilio-auth-token" class="form-label">{{ $t("Auth Token / Api Key Secret") }}</label>
        <input id="twilio-auth-token" v-model="$parent.notification.twilioAuthToken" type="text" class="form-control" required>
    </div>

    <div class="mb-3">
        <label for="twilio-from-number" class="form-label">{{ $t("From Number") }}</label>
        <input id="twilio-from-number" v-model="$parent.notification.twilioFromNumber" type="text" class="form-control" required>
    </div>

    <div class="mb-3">
        <label for="twilio-to-number" class="form-label">{{ $t("To Number") }}</label>
        <input id="twilio-to-number" v-model="$parent.notification.twilioToNumber" type="text" class="form-control" required>
    </div>

    <div class="mb-3">
        <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
            <a href="https://www.twilio.com/docs/sms" target="_blank">https://www.twilio.com/docs/sms</a>
        </i18n-t>
    </div>
</template>


Review comment (suggestion):
Lets use i18n-t for this and include `{messaging_service_docs}` in the value.
This way it is obvious to users what this is and where to find more info if not

(with an docs link obviously)

```suggestion
        <i18n-t key="twilloMessagingServiceSIDHelptext" tag="p" class="form-text">
            <template #messaging_service_docs>
                <a href=".." target="_blank">Twilio Messaging Service</a>
            </template>
        </i18n-t>
```

Code after:
<template>
    <div class="mb-3">
        <label for="twilio-account-sid" class="form-label">{{ $t("twilioAccountSID") }}</label>
        <input id="twilio-account-sid" v-model="$parent.notification.twilioAccountSID" type="text" class="form-control" required>
    </div>

    <div class="mb-3">
        <label for="twilio-apikey-token" class="form-label">{{ $t("twilioApiKey") }}</label>
        <input id="twilio-apikey-token" v-model="$parent.notification.twilioApiKey" type="text" class="form-control">
        <div class="form-text">{{ $t("twilioApiKeyHelptext") }}</div>
    </div>

    <div class="mb-3">
        <label for="twilio-messaging-service-sid" class="form-label">{{ $t("twilioMessagingServiceSID") }}</label>
        <input id="twilio-messaging-service-sid" v-model="$parent.notification.twilioMessagingServiceSID" type="text" class="form-control">
        <i18n-t key="twilioMessagingServiceSIDHelptext" tag="div" class="form-text">
            <template #twillo_messaging_service_help_link>
                <a href="https://help.twilio.com/articles/223134387-What-is-a-Message-SID-" target="_blank">Twilio Messaging Service</a>
            </template>
        </i18n-t>
    </div>

    <div class="mb-3">
        <label for="twilio-auth-token" class="form-label">{{ $t("twilioAuthToken") }}</label>
        <input id="twilio-auth-token" v-model="$parent.notification.twilioAuthToken" type="text" class="form-control" required>
    </div>

    <div class="mb-3">
        <label for="twilio-from-number" class="form-label">{{ $t("twilioFromNumber") }}</label>
        <input id="twilio-from-number" v-model="$parent.notification.twilioFromNumber" type="text" class="form-control" required>
    </div>

    <div class="mb-3">
        <label for="twilio-to-number" class="form-label">{{ $t("twilioToNumber") }}</label>
        <input id="twilio-to-number" v-model="$parent.notification.twilioToNumber" type="text" class="form-control" required>
    </div>

    <div class="mb-3">
        <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
            <a href="https://www.twilio.com/docs/sms" target="_blank">https://www.twilio.com/docs/sms</a>
        </i18n-t>
    </div>
</template>