@jumentix/cli-init 0.0.0

package/templates/frontend/src/features/organizations/organizationsCrudConfig.ts

@@ -0,0 +1,27 @@
+import type { XCrudEntityConfig } from '@/components/x-crud/xCrudTypes';
+
+/**
+ * X-CRUD Organizations (JUM-772): organization management. Only superadmins
+ * manage multiple organizations — the x-rbac matrix (OAS) grants create/delete
+ * of organizations to superadmin only, and the kit hides those affordances.
+ */
+export const organizationsCrudConfig: XCrudEntityConfig = {
+  entity: 'Organization',
+  title: { en: 'Organization', 'pt-BR': 'Organização' },
+  schemas: { create: 'RequestCreateOrganization', update: 'RequestUpdateOrganization' },
+  operations: {
+    list: 'getAllOrganizations',
+    create: 'createOrganization',
+    update: 'updateOrganization',
+    delete: 'deleteOrganization'
+  },
+  searchFields: ['name'],
+  pagination: 'pager',
+  inlineEdit: true,
+  // Column labels come from the OAS `x-label` (JUM-780); no overrides needed here.
+  createFields: { exclude: ['users'] },
+  aggregates: [
+    { field: 'id', op: 'count', label: { en: 'Total organizations', 'pt-BR': 'Total de organizações' } },
+    { field: 'users', op: 'sum', label: { en: 'Total members', 'pt-BR': 'Total de membros' } }
+  ]
+};

package/templates/frontend/src/features/profile/ProfileDocuments.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { reactive, watch } from 'vue';
+import {
+  CAlert,
+  CButton,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CFormInput,
+  CTable,
+  CTableBody,
+  CTableDataCell,
+  CTableHead,
+  CTableHeaderCell,
+  CTableRow
+} from '@coreui/vue';
+
+import OasFormField from '@/components/OasFormField.vue';
+import SearchableEnumInput from '@/components/SearchableEnumInput.vue';
+import { fieldDescriptors, type FieldDescriptor } from '@/contracts/formSchema';
+import { fieldLabel } from '@/contracts/labels';
+import { collectBody, validateAll } from '@/contracts/oasForm';
+import { documentInputCap, filterDocumentData, validateDocumentData } from '@/contracts/validation';
+import { useProfileStore, type UserDocument } from '@/stores/profile';
+import { t } from '@/i18n';
+import { useSectionNotify } from './useSectionNotify';
+
+const props = defineProps<{ documents: UserDocument[] }>();
+
+const profile = useProfileStore();
+const { errorMessage, successMessage, run } = useSectionNotify();
+
+// OAS-driven fields (JUM-766): RequestCreateDocument / RequestUpdateEmail shape.
+const createDescriptors = fieldDescriptors('RequestCreateDocument');
+const updateDescriptors = fieldDescriptors('RequestUpdateDocument').filter((d) => d.name !== 'id');
+
+// The `data` field carries the OAS x-validation rules (CPF checksum, SSN).
+const maskData = (values: Record<string, unknown>) => (raw: string) => (
+  filterDocumentData(String(values.type ?? ''), String(values.countryIssue ?? ''), raw)
+);
+
+// Effective input cap per row (JUM-769): declared maxLength, else the cap
+// derived from the x-validation rule (mask length or pattern upper bound).
+const dataCap = (values: Record<string, unknown>, declared?: number) => (
+  declared ?? documentInputCap(String(values.type ?? ''), String(values.countryIssue ?? ''))
+);
+
+const edits = reactive<Record<string, Record<string, unknown>>>({});
+watch(
+  () => props.documents,
+  (documents) => {
+    for (const item of documents ?? []) {
+      edits[item.id] = { type: item.type, countryIssue: item.countryIssue, data: item.data };
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+const newValues = reactive<Record<string, unknown>>({ type: 'CPF', countryIssue: 'BR' });
+
+const add = () => {
+  const invalid = validateAll(createDescriptors, newValues)
+    ?? validateDocumentData(
+      String(newValues.type ?? ''),
+      String(newValues.countryIssue ?? ''),
+      String(newValues.data ?? '')
+    );
+  if (invalid) {
+    errorMessage.value = invalid;
+    return;
+  }
+  return run(async () => {
+    await profile.addDocument(collectBody(createDescriptors, newValues) as {
+      type: string;
+      countryIssue: string;
+      data: string;
+    });
+    newValues.data = '';
+  }, t('profile.updated'));
+};
+
+const update = (id: string) => {
+  const state = edits[id];
+  const invalid = validateAll(updateDescriptors, state)
+    ?? validateDocumentData(String(state.type ?? ''), String(state.countryIssue ?? ''), String(state.data ?? ''));
+  if (invalid) {
+    errorMessage.value = invalid;
+    return;
+  }
+  return run(() => profile.updateDocument(id, collectBody(updateDescriptors, state)), t('profile.updated'));
+};
+const remove = (id: string) => run(() => profile.removeDocument(id), t('profile.updated'));
+
+const cellControl = (descriptor: FieldDescriptor): 'select' | 'text' => (
+  descriptor.enum ? 'select' : 'text'
+);
+</script>
+
+<template>
+  <CCard class="mb-4">
+    <CCardHeader><strong>{{ t('profile.documents') }}</strong></CCardHeader>
+    <CCardBody>
+      <CAlert v-if="errorMessage" color="danger" role="alert">{{ errorMessage }}</CAlert>
+      <CAlert v-if="successMessage" color="success" role="alert">{{ successMessage }}</CAlert>
+      <CTable responsive align="middle" class="mb-3">
+        <CTableHead>
+          <CTableRow>
+            <CTableHeaderCell v-for="d in updateDescriptors" :key="d.name">
+              {{ fieldLabel(d) }}
+            </CTableHeaderCell>
+            <CTableHeaderCell class="text-end">{{ t('profile.actions') }}</CTableHeaderCell>
+          </CTableRow>
+        </CTableHead>
+        <CTableBody>
+          <CTableRow v-for="item in documents" :key="item.id">
+            <CTableDataCell v-for="d in updateDescriptors" :key="d.name">
+              <SearchableEnumInput
+                v-if="cellControl(d) === 'select'"
+                :id="`oas-cell-${item.id}-${d.name}`"
+                :model-value="String(edits[item.id][d.name] ?? '')"
+                :options="d.enum ?? []"
+                :maxlength="d.maxLength"
+                :aria-label="d.name"
+                @update:model-value="edits[item.id][d.name] = $event"
+              />
+              <CFormInput
+                v-else
+                :model-value="String(edits[item.id][d.name] ?? '')"
+                :aria-label="d.name === 'data' ? `Document ${item.data}` : d.name"
+                :maxlength="d.name === 'data' ? dataCap(edits[item.id], d.maxLength) : d.maxLength"
+                @update:model-value="d.name === 'data'
+                  ? (edits[item.id].data = maskData(edits[item.id])($event))
+                  : (edits[item.id][d.name] = $event)"
+              />
+            </CTableDataCell>
+            <CTableDataCell class="text-end">
+              <CButton size="sm" color="primary" class="me-2" @click="update(item.id)">{{ t('profile.save.row') }}</CButton>
+              <CButton size="sm" color="danger" variant="outline" @click="remove(item.id)">{{ t('profile.delete') }}</CButton>
+            </CTableDataCell>
+          </CTableRow>
+        </CTableBody>
+      </CTable>
+      <div class="d-flex gap-2 align-items-end">
+        <OasFormField
+          v-for="d in createDescriptors"
+          :key="d.name"
+          v-model="newValues[d.name]"
+          :descriptor="d"
+          :mask="d.name === 'data' ? maskData(newValues) : undefined"
+          :mask-cap="d.name === 'data' ? dataCap(newValues) : undefined"
+          class="mb-0"
+        />
+        <CButton color="success" class="mb-3" @click="add">{{ t('profile.add') }}</CButton>
+      </div>
+    </CCardBody>
+  </CCard>
+</template>

package/templates/frontend/src/features/profile/ProfileEmails.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { reactive, watch } from 'vue';
+import {
+  CAlert,
+  CButton,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CFormCheck,
+  CFormInput,
+  CTable,
+  CTableBody,
+  CTableDataCell,
+  CTableHead,
+  CTableHeaderCell,
+  CTableRow
+} from '@coreui/vue';
+
+import OasFormField from '@/components/OasFormField.vue';
+import SearchableEnumInput from '@/components/SearchableEnumInput.vue';
+import { fieldDescriptors, type FieldDescriptor } from '@/contracts/formSchema';
+import { fieldLabel } from '@/contracts/labels';
+import { collectBody, validateAll } from '@/contracts/oasForm';
+import { useProfileStore, type UserEmail } from '@/stores/profile';
+import { t } from '@/i18n';
+import { useSectionNotify } from './useSectionNotify';
+
+const props = defineProps<{ emails: UserEmail[] }>();
+
+const profile = useProfileStore();
+const { errorMessage, successMessage, run } = useSectionNotify();
+
+// Fields from the OAS (JUM-766): create form iterates RequestCreateEmail,
+// row edits iterate RequestUpdateEmail (minus id, which travels in the path).
+const createDescriptors = fieldDescriptors('RequestCreateEmail');
+const updateDescriptors = fieldDescriptors('RequestUpdateEmail').filter((d) => d.name !== 'id');
+
+const cellControl = (descriptor: FieldDescriptor): 'select' | 'checkbox' | 'text' => {
+  if (descriptor.enum) return 'select';
+  if (descriptor.type === 'boolean') return 'checkbox';
+  return 'text';
+};
+
+const edits = reactive<Record<string, Record<string, string | boolean>>>({});
+watch(
+  () => props.emails,
+  (emails) => {
+    for (const item of emails ?? []) {
+      edits[item.id] = { email: item.email, type: item.type, isPrimary: item.isPrimary ?? false };
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+const newValues = reactive<Record<string, string | boolean>>({ type: 'work' });
+
+const add = () => {
+  const invalid = validateAll(createDescriptors, newValues);
+  if (invalid) {
+    errorMessage.value = invalid;
+    return;
+  }
+  return run(async () => {
+    await profile.addEmail(collectBody(createDescriptors, newValues) as { email: string; type: string });
+    newValues.email = '';
+    newValues.isPrimary = false;
+  }, t('profile.updated'));
+};
+
+const update = (id: string) => {
+  const invalid = validateAll(updateDescriptors, edits[id]);
+  if (invalid) {
+    errorMessage.value = invalid;
+    return;
+  }
+  return run(() => profile.updateEmail(id, collectBody(updateDescriptors, edits[id])), t('profile.updated'));
+};
+const remove = (id: string) => run(() => profile.removeEmail(id), t('profile.updated'));
+</script>
+
+<template>
+  <CCard class="mb-4">
+    <CCardHeader><strong>{{ t('profile.emails') }}</strong></CCardHeader>
+    <CCardBody>
+      <CAlert v-if="errorMessage" color="danger" role="alert">{{ errorMessage }}</CAlert>
+      <CAlert v-if="successMessage" color="success" role="alert">{{ successMessage }}</CAlert>
+      <CTable responsive align="middle" class="mb-3">
+        <CTableHead>
+          <CTableRow>
+            <CTableHeaderCell v-for="d in updateDescriptors" :key="d.name">
+              {{ fieldLabel(d) }}
+            </CTableHeaderCell>
+            <CTableHeaderCell class="text-end">{{ t('profile.actions') }}</CTableHeaderCell>
+          </CTableRow>
+        </CTableHead>
+        <CTableBody>
+          <CTableRow v-for="item in emails" :key="item.id">
+            <CTableDataCell v-for="d in updateDescriptors" :key="d.name">
+              <SearchableEnumInput
+                v-if="cellControl(d) === 'select'"
+                :id="`oas-cell-${item.id}-${d.name}`"
+                :model-value="String(edits[item.id][d.name] ?? '')"
+                :options="d.enum ?? []"
+                :maxlength="d.maxLength"
+                :aria-label="d.name"
+                @update:model-value="edits[item.id][d.name] = $event"
+              />
+              <CFormCheck
+                v-else-if="cellControl(d) === 'checkbox'"
+                :model-value="Boolean(edits[item.id][d.name])"
+                @update:model-value="edits[item.id][d.name] = $event"
+                :aria-label="d.name"
+              />
+              <CFormInput
+                v-else
+                :model-value="String(edits[item.id][d.name] ?? '')"
+                @update:model-value="edits[item.id][d.name] = $event"
+                :aria-label="`Email ${item.email}`"
+                :minlength="d.minLength"
+                :maxlength="d.maxLength"
+              />
+            </CTableDataCell>
+            <CTableDataCell class="text-end">
+              <CButton size="sm" color="primary" class="me-2" @click="update(item.id)">{{ t('profile.save.row') }}</CButton>
+              <CButton size="sm" color="danger" variant="outline" @click="remove(item.id)">{{ t('profile.delete') }}</CButton>
+            </CTableDataCell>
+          </CTableRow>
+        </CTableBody>
+      </CTable>
+      <div class="d-flex gap-2 align-items-end">
+        <OasFormField
+          v-for="d in createDescriptors"
+          :key="d.name"
+          v-model="newValues[d.name]"
+          :descriptor="d"
+          class="mb-0"
+        />
+        <CButton color="success" class="mb-3" @click="add">{{ t('profile.add') }}</CButton>
+      </div>
+    </CCardBody>
+  </CCard>
+</template>

package/templates/frontend/src/features/profile/ProfilePasswordForm.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { CAlert, CButton, CCard, CCardBody, CCardHeader, CForm } from '@coreui/vue';
+
+import OasFormField from '@/components/OasFormField.vue';
+import { fieldDescriptors } from '@/contracts/formSchema';
+import { collectBody, validateAll } from '@/contracts/oasForm';
+import { useProfileStore } from '@/stores/profile';
+import { t } from '@/i18n';
+import { useSectionNotify } from './useSectionNotify';
+
+const profile = useProfileStore();
+const { errorMessage, successMessage, run } = useSectionNotify();
+
+// OAS RequestUpdatePassword drives the field (JUM-766).
+const descriptors = fieldDescriptors('RequestUpdatePassword');
+const form = reactive<Record<string, unknown>>({});
+const repeat = ref('');
+
+const save = async () => {
+  const invalid = validateAll(descriptors, form);
+  if (invalid) {
+    errorMessage.value = invalid;
+    return;
+  }
+  if (form.password !== repeat.value) {
+    errorMessage.value = t('profile.passwordMismatch');
+    return;
+  }
+  await run(async () => {
+    await profile.changePassword(String(collectBody(descriptors, form).password));
+    form.password = '';
+    repeat.value = '';
+  }, t('profile.passwordUpdated'));
+};
+</script>
+
+<template>
+  <CCard class="mb-4">
+    <CCardHeader><strong>{{ t('profile.changePassword') }}</strong></CCardHeader>
+    <CCardBody>
+      <CAlert v-if="errorMessage" color="danger" role="alert">{{ errorMessage }}</CAlert>
+      <CAlert v-if="successMessage" color="success" role="alert">{{ successMessage }}</CAlert>
+      <CForm @submit.prevent="save">
+        <OasFormField
+          v-for="descriptor in descriptors"
+          :key="descriptor.name"
+          v-model="form[descriptor.name]"
+          :descriptor="descriptor"
+        />
+        <div class="mb-3">
+          <label class="form-label" for="profile-password-repeat">{{ t('profile.repeatPassword') }}</label>
+          <input
+            id="profile-password-repeat"
+            v-model="repeat"
+            type="password"
+            class="form-control"
+            autocomplete="new-password"
+            required
+          />
+        </div>
+        <CButton color="warning" type="submit">{{ t('profile.updatePassword') }}</CButton>
+      </CForm>
+    </CCardBody>
+  </CCard>
+</template>

package/templates/frontend/src/features/profile/ProfilePhones.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { reactive, watch } from 'vue';
+import {
+  CAlert,
+  CButton,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CFormCheck,
+  CFormInput,
+  CTable,
+  CTableBody,
+  CTableDataCell,
+  CTableHead,
+  CTableHeaderCell,
+  CTableRow
+} from '@coreui/vue';
+
+import OasFormField from '@/components/OasFormField.vue';
+import SearchableEnumInput from '@/components/SearchableEnumInput.vue';
+import { fieldDescriptors, type FieldDescriptor } from '@/contracts/formSchema';
+import { fieldLabel } from '@/contracts/labels';
+import { collectBody, validateAll } from '@/contracts/oasForm';
+import { maskPhone, phoneMaskCap, validatePhone } from '@/contracts/validation';
+import { useProfileStore, type UserPhone } from '@/stores/profile';
+import { t } from '@/i18n';
+import { useSectionNotify } from './useSectionNotify';
+
+const props = defineProps<{ phones: UserPhone[] }>();
+
+const profile = useProfileStore();
+const { errorMessage, successMessage, run } = useSectionNotify();
+
+// OAS-driven fields (JUM-766): RequestCreatePhone / RequestUpdatePhone.
+const createDescriptors = fieldDescriptors('RequestCreatePhone');
+const updateDescriptors = fieldDescriptors('RequestUpdatePhone').filter((d) => d.name !== 'id');
+
+// The `number` field carries the OAS x-validation rule selected by countryCode.
+const maskNumber = (values: Record<string, unknown>) => (raw: string) => (
+  maskPhone(String(values.countryCode ?? ''), raw)
+);
+
+const edits = reactive<Record<string, Record<string, string | boolean>>>({});
+watch(
+  () => props.phones,
+  (phones) => {
+    for (const item of phones ?? []) {
+      edits[item.id] = {
+        countryCode: item.countryCode,
+        localCode: item.localCode,
+        number: item.number,
+        isPrimary: item.isPrimary ?? false
+      };
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+const newValues = reactive<Record<string, string | boolean>>({ countryCode: '+55' });
+
+const add = () => {
+  const invalid = validateAll(createDescriptors, newValues)
+    ?? validatePhone(
+      String(newValues.countryCode ?? ''),
+      String(newValues.localCode ?? ''),
+      String(newValues.number ?? '')
+    );
+  if (invalid) {
+    errorMessage.value = invalid;
+    return;
+  }
+  return run(async () => {
+    await profile.addPhone(collectBody(createDescriptors, newValues) as {
+      countryCode: string;
+      localCode: string;
+      number: string;
+    });
+    newValues.localCode = '';
+    newValues.number = '';
+    newValues.isPrimary = false;
+  }, t('profile.updated'));
+};
+
+const update = (id: string) => {
+  const state = edits[id];
+  const invalid = validateAll(updateDescriptors, state)
+    ?? validatePhone(String(state.countryCode ?? ''), String(state.localCode ?? ''), String(state.number ?? ''));
+  if (invalid) {
+    errorMessage.value = invalid;
+    return;
+  }
+  return run(() => profile.updatePhone(id, collectBody(updateDescriptors, state)), t('profile.updated'));
+};
+const remove = (id: string) => run(() => profile.removePhone(id), t('profile.updated'));
+
+const cellControl = (descriptor: FieldDescriptor): 'checkbox' | 'select' | 'text' => {
+  if (descriptor.type === 'boolean') return 'checkbox';
+  return descriptor.enum ? 'select' : 'text';
+};
+</script>
+
+<template>
+  <CCard class="mb-4">
+    <CCardHeader><strong>{{ t('profile.phones') }}</strong></CCardHeader>
+    <CCardBody>
+      <CAlert v-if="errorMessage" color="danger" role="alert">{{ errorMessage }}</CAlert>
+      <CAlert v-if="successMessage" color="success" role="alert">{{ successMessage }}</CAlert>
+      <CTable responsive align="middle" class="mb-3">
+        <CTableHead>
+          <CTableRow>
+            <CTableHeaderCell v-for="d in updateDescriptors" :key="d.name">
+              {{ fieldLabel(d) }}
+            </CTableHeaderCell>
+            <CTableHeaderCell class="text-end">{{ t('profile.actions') }}</CTableHeaderCell>
+          </CTableRow>
+        </CTableHead>
+        <CTableBody>
+          <CTableRow v-for="item in phones" :key="item.id">
+            <CTableDataCell v-for="d in updateDescriptors" :key="d.name">
+              <CFormCheck
+                v-if="cellControl(d) === 'checkbox'"
+                v-model="edits[item.id][d.name]"
+                :aria-label="d.name"
+              />
+              <SearchableEnumInput
+                v-else-if="cellControl(d) === 'select'"
+                :id="`oas-cell-${item.id}-${d.name}`"
+                :model-value="String(edits[item.id][d.name] ?? '')"
+                :options="d.enum ?? []"
+                :maxlength="d.maxLength"
+                :aria-label="d.name"
+                @update:model-value="edits[item.id][d.name] = $event"
+              />
+              <CFormInput
+                v-else
+                :model-value="String(edits[item.id][d.name] ?? '')"
+                :aria-label="d.name === 'number' ? `Phone ${item.number}` : d.name"
+                :maxlength="d.maxLength ?? (d.name === 'number' ? phoneMaskCap(String(edits[item.id].countryCode ?? '')) : undefined)"
+                @update:model-value="d.name === 'number'
+                  ? (edits[item.id].number = maskNumber(edits[item.id])($event))
+                  : (edits[item.id][d.name] = $event)"
+              />
+            </CTableDataCell>
+            <CTableDataCell class="text-end">
+              <CButton size="sm" color="primary" class="me-2" @click="update(item.id)">{{ t('profile.save.row') }}</CButton>
+              <CButton size="sm" color="danger" variant="outline" @click="remove(item.id)">{{ t('profile.delete') }}</CButton>
+            </CTableDataCell>
+          </CTableRow>
+        </CTableBody>
+      </CTable>
+      <div class="d-flex gap-2 align-items-end">
+        <OasFormField
+          v-for="d in createDescriptors"
+          :key="d.name"
+          v-model="newValues[d.name]"
+          :descriptor="d"
+          :mask="d.name === 'number' ? maskNumber(newValues) : undefined"
+          :mask-cap="d.name === 'number' ? phoneMaskCap(String(newValues.countryCode ?? '')) : undefined"
+          class="mb-0"
+        />
+        <CButton color="success" class="mb-3" @click="add">{{ t('profile.add') }}</CButton>
+      </div>
+    </CCardBody>
+  </CCard>
+</template>

package/templates/frontend/src/features/profile/ProfileScalarsForm.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { reactive, watch } from 'vue';
+import { CAlert, CButton, CCard, CCardBody, CCardHeader, CForm } from '@coreui/vue';
+
+import OasFormField from '@/components/OasFormField.vue';
+import { fieldDescriptors } from '@/contracts/formSchema';
+import { collectBody, validateAll } from '@/contracts/oasForm';
+import { useProfileStore, type UserRecord } from '@/stores/profile';
+import { t } from '@/i18n';
+import { useSectionNotify } from './useSectionNotify';
+
+const props = defineProps<{ record: UserRecord }>();
+
+const profile = useProfileStore();
+const { errorMessage, successMessage, run } = useSectionNotify();
+
+// OAS RequestUpdateUser drives the fields (JUM-766): arrays (emails/
+// documents/phones) are managed by their own sub-resource cards, and `id`
+// travels in the path + body rather than as a form field.
+const descriptors = fieldDescriptors('RequestUpdateUser').filter((descriptor) => (
+  descriptor.name !== 'id' && descriptor.type !== 'array'
+));
+
+const form = reactive<Record<string, unknown>>({});
+
+watch(
+  () => props.record,
+  (record) => {
+    for (const descriptor of descriptors) {
+      form[descriptor.name] = (record as unknown as Record<string, unknown> | null)?.[descriptor.name] ?? '';
+    }
+  },
+  { immediate: true }
+);
+
+const save = () => run(async () => {
+  const invalid = validateAll(descriptors, form);
+  if (invalid) {
+    throw new Error(invalid);
+  }
+  await profile.saveScalars(collectBody(descriptors, form));
+}, t('profile.saved'));
+</script>
+
+<template>
+  <CCard class="mb-4">
+    <CCardHeader><strong>{{ t('profile.account') }}</strong></CCardHeader>
+    <CCardBody>
+      <CAlert v-if="errorMessage" color="danger" role="alert">{{ errorMessage }}</CAlert>
+      <CAlert v-if="successMessage" color="success" role="alert">{{ successMessage }}</CAlert>
+      <CForm @submit.prevent="save">
+        <OasFormField
+          v-for="descriptor in descriptors"
+          :key="descriptor.name"
+          v-model="form[descriptor.name]"
+          :descriptor="descriptor"
+        />
+        <CButton color="primary" type="submit">{{ t('profile.save') }}</CButton>
+      </CForm>
+    </CCardBody>
+  </CCard>
+</template>