app/pages/parameters/sms.vue

<template>
  <div>
    <LayoutParametersSection>
      <UiForm v-if="parameters" v-model="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-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>
        </v-row>
      </UiForm>
    </LayoutParametersSection>
  </div>
</template>
<script setup lang="ts">
import type { AsyncData } from '#app'
import Parameters from '~/models/Organization/Parameters'
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import { useOrganizationProfileStore } from '~/stores/organizationProfile'

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')
}

const { data: parameters } = fetch(
  Parameters,
  organizationProfile.parametersId,
) as AsyncData<Parameters | null, Error | null>

/**
 * Règles de validation
 */
const rules = () => [
  (smsSenderName: string | null) =>
    (smsSenderName !== null && /^\w{3,11}$/.test(smsSenderName)) ||
    i18n.t('please_enter_a_value_for_the_sms_sender_name'),
]
</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>