src/plugins/user/components/settings/Main.vue

@@ -1,15 +1,61 @@
 <template>
   <q-card class="col-12">
-    <q-card-section class="text-h3">
+    <q-card-section class="fit row justify-start content-center items-center">
-      Test
+      <q-input
+        class="col-xs-12 col-sm-6 q-pa-sm"
+        label="Vorname"
+        readonly
+        :value="user.firstname"
+        filled
+      />
+      <q-input
+        class="col-xs-12 col-sm-6 q-pa-sm"
+        label="Nachname"
+        readonly
+        :value="user.lastname"
+        filled
+      />
+      <q-input
+        class="col-xs-12 col-sm-6 q-pa-sm"
+        label="Benutzername"
+        readonly
+        :value="user.userid"
+        filled
+      />
+      <q-input
+        class="col-xs-12 col-sm-6 q-pa-sm"
+        label="E-Mail"
+        readonly
+        :value="user.mail"
+        filled
+      />
+      <q-select
+        class="col-xs-12 col-sm-6 q-pa-sm"
+        label="Rollen"
+        readonly
+        v-model="user.roles"
+        :options="user.roles"
+        filled
+      >
+        <template v-slot:selected-item="scope">
+          <q-chip v-for="(item, index) in scope.opt" :key="'item' + index">
+            {{ item }}
+          </q-chip>
+        </template>
+      </q-select>
     </q-card-section>
   </q-card>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { computed, defineComponent } from '@vue/composition-api';
 export default defineComponent({
   name: 'Main',
-  setup(_, ctx) {}
+  setup(_, { root: { $store } }) {
+    const user = computed(() => {
+      return $store.getters['user/session'].user;
+    });
+    return { user };
+  }
 });
 </script>