Adjust Threema notification view to conform with project standards

This commit is contained in:
booooza 2024-06-17 08:46:08 +02:00
parent 39b0c62c1d
commit 0960ec62b7
No known key found for this signature in database
GPG Key ID: 9C897D14EA4759EC

View File

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