app/pages/parameters/sms.vue

<template>
  <div>
    <LayoutCommonSection>
      <UiFormEdition :id="organizationProfile.parametersId" :model="Parameters">
        <template #default="{ entity: parameters }">
          <div v-if="parameters">
            <v-row>
              <v-col cols="12">
                <UiInputText
                  v-model="parameters.usernameSMS"
                  field="usernameSMS"
                />
              </v-col>
              <v-col cols="12">
                <UiInputText
                  v-model="parameters.passwordSMS"
                  field="passwordSMS"
                  class="password"
                />
              </v-col>
              <v-col cols="12">
                <div class="mb-3">
                  {{ $t('smsSenderName') }} :
                  <b>{{ parameters.smsSenderName }}</b>
                </div>
              </v-col>
            </v-row>
          </div>
        </template>
      </UiFormEdition>

      <v-col cols="12">
        <v-btn
          class="theme-info btn"
          :href="
            runtimeConfig.public.fileStorageBaseUrl +
            '/Bon_de_commande/' +
            (organizationProfile.isCmf ? 'SMS_CMF.pdf' : 'SMS_Public.pdf')
          "
          target="_blank"
        >
          {{ $t('buy_more_sms_credits') }}
        </v-btn>
      </v-col>
    </LayoutCommonSection>
  </div>
</template>
<script setup lang="ts">
import Parameters from '~/models/Organization/Parameters'
import { useOrganizationProfileStore } from '~/stores/organizationProfile'
import {useEntityFetch} from "~/composables/data/useEntityFetch";

definePageMeta({
  name: 'parameters_sms_page',
})

const i18n = useI18n()
const runtimeConfig = useRuntimeConfig()
const { fetch } = useEntityFetch()
const organizationProfile = useOrganizationProfileStore()

if (organizationProfile.parametersId === null) {
  throw new Error('Missing organization parameters id')
}
</script>

<style scoped lang="scss">
/**
Simule une apparence de saisie de type mot de passe
Sans ça, les navigateurs proposent la saisie semi auto et la mémorisation du mot de passe
*/
@font-face {
  font-family: 'password';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
}

:deep(.password input) {
  font-family: 'password';
}
</style>