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

Code before:
<template>
    <div class="form-text">
        <p>
            You find the API-Username and API-password at <a href="https://46elks.com/account">https://46elks.com/account</a>
        </p>
    </div>
    <div class="mb-3">
        <label for="ElksUsername" class="form-label">{{ $t("elksUsername") }}</label>
        <input id="ElksUsername" v-model="$parent.notification.elksUsername" type="text" class="form-control" required>
    </div>

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

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

    <div class="mb-3">
        <label for="Elks-to-number" class="form-label">{{ $t("To Number") }}</label>
        <input id="Elks-to-number" v-model="$parent.notification.elksToNumber" 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://46elks.com/docs/send-sms" target="_blank">https://46elks.com/docs/send-sms</a>

Review comment (refactor):
Please move this Helptext under both inputs, simplify it to `Can be found on ..` and use component translation (`/<vue-i18n ...`) instead of leaving it untranslated.

Code after:
<template>
    <div class="mb-3">
        <label for="ElksUsername" class="form-label">{{ $t("Username") }}</label>
        <input id="ElksUsername" v-model="$parent.notification.elksUsername" type="text" class="form-control" required>
        <label for="ElksPassword" class="form-label">{{ $t("Password") }}</label>
    </div>
    <div class="form-text">
        <HiddenInput id="ElksPassword" v-model="$parent.notification.elksAuthToken" :required="true" autocomplete="new-password"></HiddenInput>
        <i18n-t tag="p" keypath="Can be found on:">
            <a href="https://46elks.com/account" target="_blank">https://46elks.com/account</a>
        </i18n-t>
    </div>
    <div class="mb-3">
        <label for="Elks-from-number" class="form-label">{{ $t("From") }}</label>
        <input id="Elks-from-number" v-model="$parent.notification.elksFromNumber" type="text" class="form-control" required>
        <div class="form-text">
            {{ $t("Either a text sender ID or a phone number in E.164 format if you want to be able to receive replies.") }}
            <i18n-t tag="p" keypath="More info on:">
                <a href="https://46elks.se/kb/text-sender-id" target="_blank">https://46elks.se/kb/text-sender-id</a>
            </i18n-t>
        </div>
    </div>

    <div class="mb-3">
        <label for="Elks-to-number" class="form-label">{{ $t("To Number") }}</label>
        <input id="Elks-to-number" v-model="$parent.notification.elksToNumber" type="text" class="form-control" required>
        <div class="form-text">
            {{ $t("The phone number of the recipient in E.164 format.") }}
            <i18n-t tag="p" keypath="More info on:">