From 0960ec62b7732c98cd1bb858674df35bdf99033e Mon Sep 17 00:00:00 2001
From: booooza <marc@bischof.io>
Date: Mon, 17 Jun 2024 08:46:08 +0200
Subject: [PATCH] Adjust Threema notification view to conform with project
 standards

---
 src/components/notifications/Threema.vue | 35 +++++++++++++++---------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/notifications/Threema.vue b/src/components/notifications/Threema.vue
index 79ec89ed5..9e46459de 100644
--- a/src/components/notifications/Threema.vue
+++ b/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";