app/pages/parameters/super_admin.vue

<template>
  <div>
    <LayoutParametersSection>
      <div class="explanation">
        <div class="px-4 d-flex flex-row align-center justify-center py-2">
          <v-icon class="theme-info">fa fa-info</v-icon>
        </div>
        <div class="px-2 d-flex flex-row align-center justify-center">
          {{ $t('super_admin_explanation_text') }}
        </div>
      </div>

      <UiLoadingPanel v-if="pending" />
      <UiForm
        v-else-if="adminAccess"
        ref="form"
        v-model="adminAccess"
        class="w-100"
      >
        <v-table class="mb-4">
          <tbody>
            <tr>
              <td>{{ $t('username') }} :</td>
              <td>
                <b>{{ adminAccess.username }}</b>
              </td>
            </tr>
          </tbody>
        </v-table>

        <UiInputEmail
          v-model="adminAccess.email"
          field="email"
          label="associated_email"
          class="mx-4"
        />
      </UiForm>
      <span v-else>{{ $t('no_admin_access_recorded') }}</span>
    </LayoutParametersSection>
  </div>
</template>

<script setup lang="ts">
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import { useAccessProfileStore } from '~/stores/accessProfile'
import AdminAccess from '~/models/Access/AdminAccess'

definePageMeta({
  name: 'parameters_super_admin_page',
})

const { fetch } = useEntityFetch()

const accessProfile = useAccessProfileStore()
if (accessProfile.id === null) {
  throw new Error('Missing access profile id')
}

const { data: adminAccess, pending } = fetch(AdminAccess, accessProfile.id)
</script>

<style scoped lang="scss">
.v-table td:first-child {
  width: 180px;
}
</style>