Replace Vuetity components in account/home

assets/css/scss/atoms/_avatar.scss

@@ -0,0 +1,27 @@
+.p-avatar {
+  @apply rounded-md bg-gray-25;
+
+  &.p-avatar-lg {
+    @apply h-12 w-12;
+    font-size: 1.5rem;
+
+    .p-avatar-icon {
+      font-size: 1.5rem;
+    }
+  }
+
+  &.p-avatar-xl {
+    @apply h-16 w-16;
+    font-size: 2rem;
+
+    .p-avatar-icon {
+      font-size: 2rem;
+    }
+  }
+}
+
+.p-avatar-group {
+  .p-avatar {
+    @apply border border-solid border-white;
+  }
+}

assets/css/scss/index.scss

@@ -13,6 +13,7 @@
 
 @import "settings/typography";
 
+@import "atoms/avatar";
 @import "atoms/buttons";
 @import "atoms/checkbox";
 @import "atoms/dropdown";

assets/vue/views/account/Home.vue

@@ -1,47 +1,55 @@
 <template>
-  <v-card>
+  <div id="account-home">
-
+    <div class="flex mb-4">
-    <q-item>
+      <Avatar
-      <q-item-section side>
+        :image="user.illustrationUrl + '?w=80&h=80&fit=crop'"
-        <q-avatar size="64px">
+        shape="circle"
-          <img :src="user.illustrationUrl + '?w=80&h=80&fit=crop'" />
+        size="large"
-        </q-avatar>
+        class="flex-none mr-2"
-      </q-item-section>
+      />
-      <q-item-section>
+      <div class="flex-1">
-        <q-item-label>{{ user.fullName }}</q-item-label>
+        <p class="text-body-1">
-        <q-item-label caption>{{ user.username }}</q-item-label>
+          {{ user.fullName }}
-      </q-item-section>
+        </p>
-    </q-item>
+        <p class="text-caption">
-
+          {{ user.username }}
-    <q-tabs align="left" dense inline-label no-caps>
+        </p>
-      <q-route-tab to="/resources/friends" label="My friends" />
+      </div>
-      <q-route-tab to="/resources/personal_files" label="My files" />
+    </div>
-    </q-tabs>
+
-
+    <Button
-    <a href="/account/edit" class="btn btn--primary">
+      class="p-button-sm mb-4"
-      Edit profile
+      label="Edit profile"
-    </a>
+      @click="btnEditProfileOnClick"
-  </v-card>
+    />
+
+    <p>
+      <router-link to="/resources/friends">
+        {{ t('My friends') }}
+      </router-link>
+    </p>
+    <p>
+      <router-link to="/resources/personal_files">
+        {{ t('My files') }}
+      </router-link>
+    </p>
+  </div>
 </template>
 
-<script>
+<script setup>
-import { useRoute } from 'vue-router'
+import { computed } from 'vue';
-import axios from "axios";
+import { useStore } from 'vuex';
-import { ENTRYPOINT } from '../../config/entrypoint';
+
-import {computed, reactive, ref, toRefs} from 'vue'
+import Avatar from 'primevue/avatar';
-import {mapGetters, useStore} from "vuex";
+import { useI18n } from 'vue-i18n';
-
+
-export default {
+const store = useStore();
-  name: 'Home',
+
-  components: {
+const { t } = useI18n();
-  },
+
-  setup() {
+const user = computed(() => store.getters['security/getUser']);
-    const state = reactive({user: []});
+
-    const store = useStore();
+function btnEditProfileOnClick () {
-    state.user = computed(() => store.getters['security/getUser']);
+  window.location = '/account/edit';
-    state.isAuthenticated = computed(() => store.getters['security/isAuthenticated']);
+}
-
-    return toRefs(state);
-  },
-};
 </script>

tests/behat/features/profile.feature

@@ -6,16 +6,17 @@ Feature: Profile page
 
   Scenario: Change user first name with Andrew then restore to Andrea
     Given I am on "/account/home"
-    Then I should see "Profile"
+    And I press "Edit profile"
-    Then I follow "Edit profile"
+    And I wait for the page to be loaded
-    Then I fill in the following:
+    And I fill in the following:
       | profile_firstname | Andrew |
     And I press "update_profile"
-    And wait for the page to be loaded
+    And I wait for the page to be loaded
-    And I should see "Andrew Doe"
+    Then I should see "Andrew Doe"
-    Then I follow "Edit profile"
+    And I press "Edit profile"
-    Then I fill in the following:
+    And I wait for the page to be loaded
+    And I fill in the following:
       | profile_firstname | Andrea |
     And I press "update_profile"
     And wait for the page to be loaded
-    And I should see "Andrea Doe"
+    Then I should see "Andrea Doe"