app/pages/parameters/sms.vue

<template>
  <div>
    <UiForm
      v-if="parameters"
      :model="Parameters"
      :entity="parameters"
      action-position="bottom"
    >
      <v-row>
        <v-col cols="12">
          <UiInputText
            v-model="parameters.smsSenderName"
            field="smsSenderName"
            variant="underlined"
          />
        </v-col>
        <v-col cols="12">
          <UiInputText
            v-model="parameters.usernameSMS"
            field="usernameSMS"
            label="Nom d'utilisateur SMS"
            variant="underlined"
          />
        </v-col>
        <v-col cols="12">
          <UiInputText
            v-model="parameters.passwordSMS"
            field="passwordSMS"
            class="password"
            variant="underlined"
          />
        </v-col>
      </v-row>
    </UiForm>
  </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'

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>
</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>