app/pages/parameters/super_admin.vue

<template>
  <div>
    <h3>{{ $t("parameters_super_admin_page")}}</h3>

    <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">
        {{ $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="$t('associated_email')"
        class="mx-4"
      />
    </UiForm>
    <span v-else>{{ $t('no_admin_access_recorded') }}</span>
  </div>
</template>

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

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)

const i18n = useI18n()

const validationUtils = useValidationUtils()

const rules = () => [
  (email: string | null) =>
    (email && validationUtils.validEmail(email)) || i18n.t('email_error'),
]
</script>

<style scoped lang="scss">
.explanation {
  display: flex;
  flex-direction: row;
  margin: 32px;
  padding: 8px 4px;
  border-radius: 6px;
  text-align: justify;
  color: rgb(var(--v-theme-info));
  border: solid 1px rgb(var(--v-theme-info));

  .v-icon {
    color: rgb(var(--v-theme-info));
    font-size: 22px;
    border-radius: 16px;
    margin: 3px 1px;
    padding: 3px;
    height: 28px;
    width: 28px;
  }

  @media (max-width: 600px) {
    flex-direction: column;
    justify-content: center;
  }
}

.v-table td:first-child {
  width: 180px;
}
</style>