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

Code before:
<template>
    <div>
        <div class="mb-3">
            <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
            <input id="hostname" v-model="$parent.notification.smtpHost" type="text" class="form-control" required>
        </div>

        <div class="form-text">{{ $t("HostnameDesc") }}</div>

        <div class="mb-3">
            <label for="port" class="form-label">{{ $t("Port") }}</label>
            <input id="port" v-model="$parent.notification.smtpPort" type="number" class="form-control" required min="0" max="65535" step="1">
        </div>

        <div class="mb-3">
            <label for="secure" class="form-label">{{ $t("Security") }}</label>
            <select id="secure" v-model="$parent.notification.smtpSecure" class="form-select">
                <option :value="false">{{ $t("secureOptionNone") }}</option>
                <option :value="true">{{ $t("secureOptionTLS") }}</option>
            </select>
        </div>

        <div class="mb-3">
            <div class="form-check">
                <input id="ignore-tls-error" v-model="$parent.notification.smtpIgnoreTLSError" class="form-check-input" type="checkbox" value="">
                <label class="form-check-label" for="ignore-tls-error">
                    {{ $t("Ignore TLS Error") }}
                </label>
            </div>
        </div>

        <div class="mb-3">
            <label for="username" class="form-label">{{ $t("Username") }}</label>
            <input id="username" v-model="$parent.notification.smtpUsername" type="text" class="form-control" autocomplete="false">

Review comment (suggestion):
```suggestion
        <i18n-t tag="div" keypath="Either enter the hostname of the server you want to connect to or localhost if you intend to use a locally configured mail transfer agent" class="form-text">
            <template #localhost>
                <code>localhost</code> 
            </template>
            <template #local_mta>
                <a href="https://wikipedia.org/wiki/Mail_Transfer_Agent" target="_blank">{{ $t("locally configured mail transfer agent") }}</a> 
            </template>
        </i18n-t>
```

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

        <i18n-t tag="div" keypath="Either enter the hostname of the server you want to connect to or localhost if you intend to use a locally configured mail transfer agent" class="form-text">
            <template #localhost>
                <code>localhost</code>
            </template>
            <template #local_mta>
                <a href="https://wikipedia.org/wiki/Mail_Transfer_Agent" target="_blank">{{ $t("locally configured mail transfer agent") }}</a>
            </template>
        </i18n-t>
        <div class="mb-3">
            <label for="port" class="form-label">{{ $t("Port") }}</label>
            <input id="port" v-model="$parent.notification.smtpPort" type="number" class="form-control" required min="0" max="65535" step="1">
        </div>

        <div class="mb-3">
            <label for="secure" class="form-label">{{ $t("Security") }}</label>
            <select id="secure" v-model="$parent.notification.smtpSecure" class="form-select">
                <option :value="false">{{ $t("secureOptionNone") }}</option>
                <option :value="true">{{ $t("secureOptionTLS") }}</option>
            </select>
        </div>

        <div class="mb-3">
            <div class="form-check">
                <input id="ignore-tls-error" v-model="$parent.notification.smtpIgnoreTLSError" class="form-check-input" type="checkbox" value="">
                <label class="form-check-label" for="ignore-tls-error">
                    {{ $t("Ignore TLS Error") }}
                </label>