app/pages/parameters/super_admin.vue

<template>
  <NuxtLayout name="parameters">
    <div>
      <v-container>
        <v-row>
          <v-col cols="1">
          </v-col>
          <v-col cols="4">
            <div class="explanation">
              <div class="px-6 d-flex flex-row align-center">
                <v-icon class="theme-primary">fa fa-info</v-icon>
              </div>
              <div class="px-2">
                {{ $t('super_admin_explanation_text')}}
              </div>
            </div>
          </v-col>
          <v-col cols="1" />
          <v-col cols="6">
            <v-row>

            </v-row>
            <v-row v-if="pending">
              <UiLoadingPanel/>
            </v-row>
            <v-row v-else>
              <UiForm
                  ref="form"
                  :model="AdminAccess"
                  :entity="adminAccess"
                  class="w-100"
              >
                <div class="d-flex flex-row mx-4 my-6">
                  <span>{{ $t('username') }} :</span> <pre> {{ adminAccess.username }}</pre>
                </div>

                <UiInputText
                    field="email"
                    v-model="adminAccess.email"
                    :rules="rules()"
                />
              </UiForm>
            </v-row>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </NuxtLayout>
</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";

/**
 * Disable the default layout, the page will use the layout defined with <NuxtLayout />
 * @see https://nuxt.com/docs/guide/directory-structure/layouts#overriding-a-layout-on-a-per-page-basis
 */
definePageMeta({
  layout: false,
});

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;
  padding: 60px 26px;
  text-align: justify;
  color: rgb(var(--v-theme-neutral-strong));

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

  div:first-child {
    border-right: solid 1px rgb(var(--v-theme-primary));
  }
}
</style>