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

Code before:
    <div class="mb-3">
        <label class="form-label" for="threema-sender">{{ $t("threemaSenderIdentity") }} <small>({{ $t("threemaSenderIdentityFormat") }})</small></label>
        <input
            id="threema-sender"
            v-model="$parent.notification.threemaSenderIdentity"
            class="form-control"
            minlength="8"
            maxlength="8"
            pattern="^\*[A-Z0-9]{7}$"
            required
            type="text"
        >
    </div>
    <div class="mb-3">
        <label class="form-label" for="threema-secret">{{ $t("threemaApiAuthenticationSecret") }}</label>
        <HiddenInput
            id="threema-secret" v-model="$parent.notification.threemaSecret" :required="true"
            autocomplete="false"
        ></HiddenInput>
        <i18n-t class="form-text" keypath="wayToGetThreemaGateway" tag="div">
            <a href="https://threema.ch/en/gateway" target="_blank">{{ $t("here") }}</a>
        </i18n-t>
        <i18n-t class="form-text" keypath="threemaBasicModeInfo" tag="div">
            <a href="https://gateway.threema.ch/en/developer/api" target="_blank">{{ $t("here") }}</a>
        </i18n-t>
    </div>
</template>
<script lang="ts" setup>
import HiddenInput from "../HiddenInput.vue";
</script>


Review comment (security):
Lets move this down and not group the helptexts with the threemaSecret

```suggestion
    </div>
    <i18n-t class="form-text" keypath="wayToGetThreemaGateway" tag="div">
        <a href="https://threema.ch/en/gateway" target="_blank">{{ $t("here") }}</a>
    </i18n-t>
    <i18n-t class="form-text" keypath="threemaBasicModeInfo" tag="div">
        <a href="https://gateway.threema.ch/en/developer/api" target="_blank">{{ $t("here") }}</a>
    </i18n-t>
```

Code after:
            class="form-control"
            maxlength="254"
            required
            type="email"
        >
    </div>
    <div class="mb-3">
        <label class="form-label" for="threema-sender">{{ $t("threemaSenderIdentity") }}</label>
        <input
            id="threema-sender"
            v-model="$parent.notification.threemaSenderIdentity"
            class="form-control"
            minlength="8"
            maxlength="8"
            pattern="^\*[A-Z0-9]{7}$"
            required
            type="text"
        >
        <div class="form-text">
            <p>{{ $t("threemaSenderIdentityFormat") }}</p>
        </div>
    </div>
    <div class="mb-3">
        <label class="form-label" for="threema-secret">{{ $t("threemaApiAuthenticationSecret") }}</label>
        <HiddenInput
            id="threema-secret" v-model="$parent.notification.threemaSecret" required
            autocomplete="false"
        ></HiddenInput>
    </div>
    <i18n-t class="form-text" keypath="wayToGetThreemaGateway" tag="div">
        <a href="https://threema.ch/en/gateway" target="_blank">{{ $t("here") }}</a>
    </i18n-t>
    <i18n-t class="form-text" keypath="threemaBasicModeInfo" tag="div">
        <a href="https://gateway.threema.ch/en/developer/api" target="_blank">{{ $t("here") }}</a>
    </i18n-t>
</template>
<script lang="ts" setup>
import HiddenInput from "../HiddenInput.vue";
</script>