Adjust Threema notification view to conform with project standards

src/components/notifications/Threema.vue

@@ -2,7 +2,7 @@
     <div class="mb-3">
         <label class="form-label" for="threema-recipient">{{ $t("threemaRecipientType") }}</label>
         <select
-            id="threema-recipient" v-model="$parent.notification.threemaRecipientType" :required="true"
+            id="threema-recipient" v-model="$parent.notification.threemaRecipientType" required
             class="form-select"
         >
             <option value="identity">{{ $t("threemaRecipientTypeIdentity") }}</option>
@@ -11,7 +11,7 @@
         </select>
     </div>
     <div v-if="$parent.notification.threemaRecipientType === 'identity'" class="mb-3">
-        <label class="form-label" for="threema-recipient">{{ $t("threemaRecipient") }} {{ $t("threemaRecipientTypeIdentity") }} <small>({{ $t("threemaRecipientTypeIdentityFormat") }})</small></label>
+        <label class="form-label" for="threema-recipient">{{ $t("threemaRecipient") }} {{ $t("threemaRecipientTypeIdentity") }}</label>
         <input
             id="threema-recipient"
             v-model="$parent.notification.threemaRecipient"
@@ -22,9 +22,12 @@
             required
             type="text"
         >
+        <div class="form-text">
+            <p>{{ $t("threemaRecipientTypeIdentityFormat") }}</p>
+        </div>
     </div>
-    <div v-if="$parent.notification.threemaRecipientType === 'phone'" class="mb-3">
-        <label class="form-label" for="threema-recipient">{{ $t("threemaRecipient") }}  {{ $t("threemaRecipientTypePhone") }} <small>({{ $t("threemaRecipientTypePhoneFormat") }})</small></label>
+    <div v-else-if="$parent.notification.threemaRecipientType === 'phone'" class="mb-3">
+        <label class="form-label" for="threema-recipient">{{ $t("threemaRecipient") }} {{ $t("threemaRecipientTypePhone") }}</label>
         <input
             id="threema-recipient"
             v-model="$parent.notification.threemaRecipient"
@@ -34,8 +37,11 @@
             required
             type="text"
         >
+        <div class="form-text">
+            <p>{{ $t("threemaRecipientTypePhoneFormat") }}</p>
+        </div>
     </div>
-    <div v-if="$parent.notification.threemaRecipientType === 'email'" class="mb-3">
+    <div v-else-if="$parent.notification.threemaRecipientType === 'email'" class="mb-3">
         <label class="form-label" for="threema-recipient">{{ $t("threemaRecipient") }} {{ $t("threemaRecipientTypeEmail") }}</label>
         <input
             id="threema-recipient"
@@ -47,7 +53,7 @@
         >
     </div>
     <div class="mb-3">
-        <label class="form-label" for="threema-sender">{{ $t("threemaSenderIdentity") }} <small>({{ $t("threemaSenderIdentityFormat") }})</small></label>
+        <label class="form-label" for="threema-sender">{{ $t("threemaSenderIdentity") }}</label>
         <input
             id="threema-sender"
             v-model="$parent.notification.threemaSenderIdentity"
@@ -58,20 +64,23 @@
             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="true"
+            id="threema-secret" v-model="$parent.notification.threemaSecret" required
             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>
+    <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";